Content Area Dropdown

In this article, we're going to show you how to use the Content Area Dropdown element to add a dropdown content that displays when the toggle button is clicked.

  1. What is the Content Area Dropdown Element Used For?
  2. Content Area Setup
  3. Toggle Settings
  4. Dropdown Settings
  5. Customize
  6. Demo
  7. Summary

The Content Area Dropdown Element is one of the elements that make use of the content area. If you haven't done so, you might want to also read about its kindred elements namely: Content Area, Content Area Modal and Content Area Off Canvas.

While you can use the Content Area Dropdown element in any builder, be it Cornerstone or Pro's Content and Footer Builders, the most common area where it can be used is in the header. So in this article, I'll be using the Header Builder instead of the Content Builder.

To add the Content Area Dropdown element just type in "content" and drag "Content Area Dropdown" into the canvas.

Content Area Dropdown Element

What is the Content Area Dropdown Element Used For?

The Content Area Dropdown Element lets you display custom content on a dropdown that appears when a button is clicked. "Content" can be anything from HTML codes, Javascript codes and even WordPress Shortcodes.

So let's say you want to add a button on the top right of the page (on the header) that, when users click on it a dropdown containing a contact form will appear.

Content Area Dropdown ExampleContent Area Dropdown Example

Okay, let's build that together while learning the different available settings in this element.

Content Area Setup

The first thing you'll see on the "Inspector" pane is the Dropdown Content field.

Dropdown Content

This is where you can enter your custom content - HTML code, Javascript code, plain text, WordPress shortcodes, etc. In this example, we're using a combination of HTML and WordPress shortcode (generated by the Content Form 7 Plugin):

Custom HTML Code

Toggle Settings

The button that triggers the showing of the dropdown is called the Toggle button. This button can be configured to your liking.

Clicking the Toggle tab as shown below...

Content Area Dropdown Toggle

... will show to you the settings available at your disposal.

Content Area Dropdown Setup

In the Setup field group shown above, you'll be able to set the actual height and width of the toggle button, it's minimum and maximum dimensions, its background color when not hovered upon and when it is.

The Base Font Size field dictates the size of the toggle button. If you increase it, the entire button will increase in size.

The Content Flex Layout field group allows you to configure the flexbox settings of the toggle button. If you're not familiar with flex, this guide will help you.

The Margin, Padding, Border, Border Radius and Box Shadow field groups are common across majority of the V2 elements that I won't expound them here.

Now by default, the toggle button has a "hamburger" graphic inside it. You have the option to remove the icon and use text instead. To do that, you need to turn On the Text Setup and turn Off the Graphic Setup.

Content Area Dropdown Text SetupContent Area Dropdown Graphic Setup

When you turn On the Text Setup, other fields/settings will appear which will allow you to set the primary text, secondary text, the spacing & order as well as how to handle interactions and overflows.

Content Area Dropdown Text Setup Example

You'll also notice that several groups of options now become available to you as well such as:

  • Text Margin
  • Primary Text Format
  • Primary Text Style
  • Primary Text Shadow
  • Secondary Text Format
  • Secondary Text Style
  • Secondary Text Shadow

All of these allow you to customize how the texts, both primary and secondary, will look like.

What if you want to have both the icon and the text? Is it possible? A resounding YES! Simply enable (or turn On) both the Text Setup and Graphic Setup and you'll have both of them appear on the toggle button.

Content Area Dropdown Example

Want to change the "hamburger" graphic? That's easy and you have multiple ways to do it.

  1. Go to Graphic Toggle select from the Type dropdown.
Content Area Dropdown Graphic Toggle
  1. If none of the Graphic Toggle types fit your need, go back to Graphic Setup, then click on the flag icon on the Type field.
Content Area Dropdown Graphic Setup Flag

Then go to Graphic Icon and choose an icon on the Primary & Secondary field.

Content Area Dropdown Search Icon
  1. Lastly, you may want to use your own image. To do that, go back to Graphic Setup and click on the middle button on Type.
Content Area Dropdown Graphic Setup Image

Then go to Primary Graphic Image then click the box on Source.

Content Area Dropdown Graphic Imag Source

Then select the image you want to use.

Particle Setup

Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:

Particle Setup
  • Enable - Use this option to enable the interaction particle.
  • Location - Use this option to set the position of the particle in respect with the element that it is applied to. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Placement - Use this option to decide if you want to have the particles overlap with the element or limited inside the element.
  • Scale - The scale option will determine how the particle will expand or shrink in transition. The available options are:
  • None - Use this option if you do not want the particle to scale in transition.
  • Scale All - Use this option to scale the particle both vertically and horizontally in transition.
  • Scale X - Use this option to scale the particle horizontally in transition.
  • Scale Y - Use this option to scale the particle vertically in transition.
  • Delay - The delay option will determine how long will it take the transition to complete. The value of this option in seconds or milliseconds depends on the selection of the value unit.
  • Transform Starts From - Use this option to set where the transition of the particle should start. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Particle Style

Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:

Particle Style
  • Width & Height - Use this option to set the width and the height of the particle. The value unit can be Calc, PX, REM, EM, and %.
  • Radius - Use this option to set the radius of the particle. The same units can be used for this option values as the width/height options.
  • Color - Use this option to set the color of the particle.
  • Inline CSS - Use this option to add custom CSS which will be applied to the article. This option is for the advanced users that want an extra layer of customization which they can not find in the styling options of the particles.

Primary and Secondary Particles

Particle Setup Secondary

The same setup and style options which we described are available for primary and secondary particles. You basically have two sets of particle options to get innovative and create stylish interactions.

Particle Style Secondary

The Dropdown options are a set of control groups used to fine tune the dropdown feature of Content Area Dropdown element. We are going to delve into details and explain each option functionality.

First, click on the Dropdown tab to view the settings.

Content Area Dropdown Content Area Dropdown

Setup

  • Font Size - Use this option to set the base font size for the dropdown.
  • Width - Use this option to set the width of the dropdown.
  • Background - Use this option to set the background color of the dropdown.
Content Area Dropdown Setup

First Dropdown Margin

Use this option to set the margin of the dropdown. You can change the settings for all the sides of the dropdown or modify them individually.

Content Area Dropdown First Dropdown Margin

Use this option to set the border of the dropdown. You can set the style, width and color of the border on all sides or each side individually.

Content Area Dropdown Border

Use this option to set a border radius for the dropdown. You can set the curve on all sides of the dropdown or set them individually.

Content Area Dropdown Radius

Use this option to set the padding of the dropdown. You can change the settings for all the sides of the dropdown or modify them individually.

Content Area Dropdown Padding

Use this option to add a shadow to the dropdown box.

Content Area Dropdown Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the dropdown.
  • Y-Offset - Use this option to set the Y offset of the shadow in the dropdown.
  • Blur - Use this option to set the intensity of the blur effect in the dropdown shadow.
  • Spread & Position - Use this option to set the spread amount of the dropdown shadow and decide if you want the shadow to sit inside or outside of the box.
  • Color - Use this option to set the color of the dropdown shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Content Area Customize
  • Toggle Hash - Use this option to add a custom hash to the toggle section of the the Content Area element. Whatever you add here will be added as the value of data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
  • ID - Use this option to set an HTML ID for the the Content Area element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the the Content Area element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the the Content Area element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Content Area Dropdown Element click here.

Summary

In this article, you've learned enough of the settings available to you on the Content Area Dropdown element. While we didn't dive in great detail to every option, you know enough to get started using this element and to customize it to your liking.

See something inaccurate? Let us know