{"id":8119,"date":"2025-04-11T06:22:10","date_gmt":"2025-04-11T06:22:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8119"},"modified":"2025-04-11T15:22:52","modified_gmt":"2025-04-11T15:22:52","slug":"jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/","title":{"rendered":"Dropbar Widget Overview"},"content":{"rendered":"\n<p>With the <strong>Dropbar<\/strong> widget of <em><a href=\"https:\/\/crocoblock.com\/plugins\/jetelements\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetElements<\/a><\/em>, a compact dropbar can be added, which is very useful when content needs to be hidden and space on a website&#8217;s page needs to be saved. A dropbar can be added wherever desired on a site and customized according to one&#8217;s vision, just in a few clicks.<\/p>\n\n\n\n<p>From this tutorial, one will learn how to add a <strong>Dropbar<\/strong> widget to a WordPress website easily. So, let\u2019s have a closer look at this process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-dropbar-widget-to-the-page\">Add a Dropbar Widget to the Page<\/h2>\n\n\n\n<p>First of all, a page to which a dropbar needs to be added should be opened with the Elementor editor, and the <strong>Dropbar<\/strong> widget should be dragged and dropped to the needed section.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-1024x640.webp\" alt=\"dropbar widget elementor\" class=\"wp-image-47718\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"choose-the-dropbar-content\">Choose the Dropbar Content<\/h2>\n\n\n\n<p>First, the dropbar <strong>Content<\/strong> menu tab should be opened. The first section here contains features that define the dropbar&#8217;s content. These features are available:<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-1024x640.webp\" alt=\"dropbar widget content\" class=\"wp-image-47719\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-content.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Button Type<\/strong> \u2014 a feature that allows the button to be marked with text and with an image. Here, the type of marking can be chosen. If the \u201cText\u201d option is selected, it can then be typed into a corresponding field. If the \u201cImage\u201d option is selected, it can be chosen from the <strong>Library<\/strong> and its size can be set;<\/li>\n\n\n\n<li><strong>Before Icon\/After Icon<\/strong> \u2014 features that allow icons to be placed before and after the text or image on the button. Here, the icons can be chosen to be uploaded as an <strong>SVG<\/strong> file or picked from the <strong>Icon Library<\/strong>;<\/li>\n\n\n\n<li><strong>Alignment<\/strong> \u2014 a feature that allows the position of the button within the section to be chosen;<\/li>\n\n\n\n<li><strong>Content Type<\/strong> \u2014 a feature that allows users to choose between three types of dropbars: &#8220;Simple Text&#8221; notifications, the &#8220;WYSIWYG&#8221; editor, and more complex forms like &#8220;Template.&#8221; If only a notification is needed, one can select the &#8220;Simple Text&#8221; option and enter content in the <strong>Simple Text<\/strong> text area. For greater formatting control, the &#8220;WYSIWYG&#8221; option can be chosen to utilize the visual editor. Otherwise, the &#8220;Template&#8221; option should be selected, allowing users to choose from the pre-made templates. These templates can be created in the <strong><em>WordPress Dashboard > Template > Add New<\/em><\/strong> tab. For example, a contact form can be added to the dropbar. To learn how to make a custom contact form, refer to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-add-contact-form-7-to-the-page-built-with-elementor-using-jetelements-2\/\">Contact Form 7<\/a> tutorial.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finetune-the-settings\">Finetune the Settings<\/h2>\n\n\n\n<p>The <strong>Settings <\/strong>section of the <strong>Content <\/strong>menu tab contains features that affect the dropbar itself and the layout of the button:<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-1024x640.webp\" alt=\"dropbar widget settings\" class=\"wp-image-47720\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Position<\/strong> \u2014 a feature that allows choosing the position of the appearing dropbar in this drop-down menu. There are twelve variants, so these should be experimented with to define where they will fit the best;<\/li>\n\n\n\n<li><strong>Mode<\/strong> \u2014 a feature that allows the action triggering the dropbar to be selected from this drop-down. It can happen on \u201cHover\u201d or on \u201cClick\u201d;<\/li>\n\n\n\n<li><strong>Hide Delay<\/strong> \u2014 a feature that, if the &#8220;Hover&#8221; option has been chosen in the <strong>Mode<\/strong> feature, allows the value in ms typed in here to define how long the dropbar will stay after the pointer stops being hovered over the button;<\/li>\n\n\n\n<li><strong>Show Effect<\/strong> \u2014 a feature that allows a simple animation effect with which the dropbar appears to be selected. There are fourteen variants available for selection;<\/li>\n\n\n\n<li><strong>Use Ajax Loading for Template<\/strong> \u2014 a switch that allows the template to be loaded with AJAX. Should not be used with query or dynamic data;<\/li>\n\n\n\n<li><strong>Offset<\/strong> \u2014 a feature that determines the gap between the button and the dropbar. This can be selected by moving the slider or by typing the value into the field;<\/li>\n\n\n\n<li><strong>Width<\/strong> \u2014 a feature that allows the width of the dropbar to be chosen. If this feature is not adjusted, the width will be set automatically according to the content;<\/li>\n\n\n\n<li><strong>Fixed Layout<\/strong> \u2014 a feature that allows the dropbar button to be fixed in one position. The button will remain in the same place even when the page is scrolled. The position can be changed in the <strong>Fixed Position<\/strong> drop-down, and the distance to the screen borders is set in the <strong>Gap<\/strong> field. The <strong>Z-index<\/strong> feature allows the parts of the page that will be overlaid by the dropbar button to be defined. The smaller the number, the higher priority the dropbar will have over the other elements.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Dropbar <\/strong>widget has a lot of different <strong>Style<\/strong> settings, so one can change its appearance to blend in with the website style.&nbsp;<\/p>\n\n\n\n<p>After the customization is done, one should press the \u201c<strong>Publish<\/strong>\u201d button.<\/p>\n\n\n\n<p>That\u2019s all one needs to know about the <strong>Dropbar<\/strong> widget from <em>JetElements<\/em> for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reading this tutorial will help you to add a dropbar with any content you need to the page of your website using the Dropbar widget from the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[516],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Embed Compact Dropbar to the Page | Crocoblock<\/title>\n<meta name=\"description\" content=\"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Embed Compact Dropbar to the Page | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-11T15:22:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/\",\"name\":\"JetElements: How to Embed Compact Dropbar to the Page | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-04-11T06:22:10+00:00\",\"dateModified\":\"2025-04-11T15:22:52+00:00\",\"description\":\"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dropbar Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Embed Compact Dropbar to the Page | Crocoblock","description":"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Embed Compact Dropbar to the Page | Crocoblock","og_description":"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/","og_site_name":"Help Center","article_modified_time":"2025-04-11T15:22:52+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/dropbar-widget-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/","name":"JetElements: How to Embed Compact Dropbar to the Page | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-04-11T06:22:10+00:00","dateModified":"2025-04-11T15:22:52+00:00","description":"See the way of adding a Dropbar widget allowing you to organize your website content compactly. Find how easy it is to customize it up to your needs!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-dropbar-widget-how-to-add-a-compact-dropbar-widget-to-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Dropbar Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8119"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8119"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8119"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}