metaloha

<p>Use a shortcode to define a drop-down form field, and shortcodes to define blocks of content that will be displayed when a specific entry is selected.</p>
<h3>Usage</h3>
<p>To add a content dropdown to a post, you can either select the Content Dropdown icon from the TinyMCE editor, or enter the shortcodes manually.</p>
<pre><code>[dropdown name="controlName" class="customClassName"] - both `name` and `class` are optional; `name` will default to `dropdown-content`
</code></pre>
<ul>
<li>the <code>name</code> is used to identify which content sections are targetted by this dropdown; if there is only one dropdown on a page, it is optional; if there are multiple dropdowns on a page, each will need a unique name</li>
<li><code>class</code> can be a space-separated list of class names, or just a single class name</li>
<li>
<p>only <code>[dropdown-option]</code> shortcodes may be inside this shortcode</p>
<p>[dropdown-option value=”someValue”] – the <code>value</code> field is technically optional, but is required if this option is meant to make a content block visible</p>
</li>
<li>
<p>must be inside a <code>[dropdown]</code> shortcode</p>
<p>[dropdown-content name=”controlName” value=”someValue”] – if the <code>name</code> matches a dropdown name, and the <code>value</code> matches the value of an option within that dropdown, then this content will be displayed when that specific option is selected.</p>
</li>
<li>
<p>again, <code>name</code> is technically optional, but must match a <code>[dropdown]</code> name (also defaults to <code>dropdown-content</code>)</p>
</li>
<li><code>value</code> is required, and must match a <code>value</code> for a <code>[dropdown-option]</code></li>
<li>can be anywhere on the page</li>
</ul>
<h3>Example</h3>
<p><em>Copy and paste the following content to see the plugin in action</em></p>
<p>[dropdown]<br />
[dropdown-option]Select one…[/dropdown-option]<br />
[dropdown-option value=”option1″]First option[/dropdown-option]<br />
[dropdown-option value=”option2″]Second Option[/dropdown-option]<br />
[/dropdown]</p>
<p>[dropdown-content value=”option1″]Content for the first option.[/dropdown-content]</p>
<p>[dropdown-content value=”option2″]Content for the second option.[/dropdown-content]</p>
<p>Those were all using the default values from the plugin. Let’s change it up a bit.</p>
<p>[dropdown]<br />
[dropdown-option value=”option1″]The First[/dropdown-option]<br />
[dropdown-option value=”option2″ default=true]The Second[/dropdown-option]<br />
[dropdown-option value=”option3″]The Third[/dropdown-option]<br />
[/dropdown]</p>
<p>You’ll notice below that the second option will be displayed by default for you.</p>
<p>[dropdown-content value=”option1″]Some different content for the second first option.[/dropdown-content]</p>
<p>[dropdown-content value=”option2″]Some different content for the second second option.[/dropdown-content]</p>
<p>[dropdown-content value=”option3″]Some different content for the second third option.[/dropdown-content]</p>


Dropdown Content

Allows different content to be displayed based on the value of an author-defined drop-down box.

philbaylog

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/lzIV6IYWaaQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>Quickly add a powerful drop down conversion bar to your site and start converting visitors. Grab your visitor’s attention with an attractive opt-in bar displayed either at the top or bottom of your site, and direct them to product page, signup page, or newsletter subscribe page.</p>
<p>QuickieBar is completely responsive and designed to look great on mobile, tablet, and desktop devices. Customize options of your bar to adhere to your brand standards, or pop out from the page. Choose from a multitude of colors (preset or custom), bar styles, and button styles.</p>
<p>QuickieBar comes with over 500 icons that you can use anywhere in your bar (provided by FontAwesome).</p>
<p>Instant previewing of your bar while you create it means that you can see your changes in real time. You can also click a button to preview the bar directly on your site.</p>
<p>Advanced conversion reporting allows you to dive into metrics on your bars, and see how successful they are over time. Each bar you create is tracked separately, so you can test different messages and bar colors to optimize conversion.</p>
<p>Conversion bars like the ones you can make with QuickieBar are starting to appear all over the web to help site owners drive traffic to conversion pages. QuickieBar enables you to outfit your site with a similar (and in many cases, more sophisticated and attractive) bar in seconds.</p>
<h4>Full Feature List</h4>
<p>QuickieBar features that enable you to create & convert as quickly & effortlessly as possible:</p>
<ul>
<li>One-Minute Install: Install and launch your first bar in under 60 seconds</li>
<li>Beautiful Color Schemes: Choose from ten attractive color schemes, or create your own!</li>
<li>Mobile Friendly: Responsive from the ground up so your bars look great on your phone and browser</li>
<li>Awesome Icon Selection: Add over 500 distinctive icons to your calls to action</li>
<li>Top or Bottom Placement: Easily toggle whether users see the bar at the top or bottom of your site</li>
<li>Conversion Reports: Ongoing reporting to help you uncover customer trends and behavior</li>
<li>Conditional Triggering: Choose to show your bar everywhere or on specific pages, posts, or just your homepage</li>
<li>Advanced Customization: Customize just about anything about the way your bar looks and behaves.</li>
<li>Fixed Header Compatibility: QuickieBar is even compatible with most (not all) fixed header themes: simply enable fixed header compatibility mode.</li>
</ul>
<h4>Bar Options List</h4>
<p>Customize any of the following options for your bars:</p>
<ul>
<li>Bar Style</li>
<li>Conversion Button Style</li>
<li>Opens in New Tab</li>
<li>Top or Bottom Placement</li>
<li>Text & Button Alignment</li>
<li>Sticks to Top of Page</li>
<li>Animation</li>
<li>Close Button Visibility</li>
<li>Bar Text</li>
<li>Button Text</li>
<li>Bar Background Color</li>
<li>Button Background Color</li>
</ul>
<h4>Browser Compatibility List</h4>
<p>While ideally QuickieBar would work perfectly in every browser, outdated browsers can cause bars to look unattractive or display inconsistently across different devices. As such, I have opted to not display any bar to users using older browsers, instead of showing them one of lower quality.</p>
<p>QuickieBar <strong>should</strong> display perfectly in the following browsers. Users viewing your site on browsers not on this list will simply not be shown your conversion bar (they will also not be tracked for Views or Conversions).</p>
<ul>
<li>Google Chrome 4+</li>
<li>Firefox 3.5+</li>
<li>Safari 3.1+</li>
<li>Internet Explorer 10+</li>
</ul>
<p>If you notice any inconsistencies in the way your bars display to visitors using these browsers, please let me know <a href="https://quickiebar.com/support" rel="nofollow ugc">here</a> and I will do what I can to fix the issue.</p>
<h3>Translations</h3>
<ul>
<li>English – default</li>
</ul>
<p>Please contact me if you wish to help with translation!</p>
<h3>Feedback</h3>
<p>I always appreciate any feedback or ideas you might have for the plugin. Please open a ticket <a href="https://quickiebar.com/support" rel="nofollow ugc">here</a> and let me know what’s on your mind!</p>


QuickieBar

QuickieBar makes it easy for you to convert visitors by adding an attractive and easily customizable conversion bar to the top or bottom of your site.

Dropdown Content vs QuickieBar