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.
What is the Content Area Dropdown Element Used For?
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.
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.
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...
... will show to you the settings available at your disposal.
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.
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.
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.
Want to change the "hamburger" graphic? That's easy and you have multiple ways to do it.
- Go to Graphic Toggle select from the Type dropdown.
- 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.
Then go to Graphic Icon and choose an icon on the Primary & Secondary field.
- 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.
Then go to Primary Graphic Image then click the box on Source.
Then select the image you want to use.
Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:
- 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:
- 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:
- Top Left
- Top Right
- Bottom Left
- Bottom Right
Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:
- 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
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.
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.
- 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.
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.
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.
Dropdown Border Radius
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.
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.
Dropdown Box shadow
Use this option to add a shadow to the dropdown box.
- 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.
- 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
- 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
$elas 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.
To see a live demo of the Content Area Dropdown Element click here.
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