Content Controls
Content
Define the essentials of your dropdown menu here, from the text displayed to the structure of your links. You can personalize titles, arrange columns, and even add an image or icon for a visual touch. Show an additional section for more complex menus.
-
- Text – Specify the main text for this element.
- Link – Set the URL your menu item redirects to.
- Columns – Organize your content into columns. Here’s where the structure of your dropdown starts taking shape.
- Title – Name your columns to provide clear navigation.
- Links – Add and customize the links in your column.
- Text – What text do you want your link to display?
- Description – Provide more context with a brief description.
- URL – Where should your link take the user?
- Icon or Image – Choose between an icon or an image to accompany your link. This visual guide can make your menu more intuitive.
- Image – Select an image to display with your link. Note: This control is only available when the ‘Icon or Image’ is set to ‘image’.
- Icon – Choose an icon to represent your link. Note: This control is only available when the ‘Icon or Image’ is set to ‘icon’.
- Advanced – Fine-tune the graphics of your links with advanced options.
- Graphic – Dive into detailed customization for your link’s visuals.
- Background – Choose a background color for your link’s graphic.
- Icon – Pick a color for your link’s icon.
- Image Opacity – Adjust how transparent your image appears.
- Size – Define the size of your graphic, making sure it fits perfectly within your layout.
- Alignment – Align your graphic to the left, right, or center, ensuring a coherent look and feel.
- Translate – Fine-tune the position of your graphic with X (horizontal) and Y (vertical) coordinates.
- Padding – Add space around your graphic, enhancing its visibility and aesthetics.
- Radius – Round the corners of your graphic’s background for a softer, modern look.
- Show Another Section – Toggle to add an additional section of content, perfect for complex or extensive menus.
- Columns 2 – Add or configure content in a two-column format. This option is available under specific conditions.
- Title – Specify the heading for this section in the two-column content.
- Links – Add or manage hyperlinks displayed in this section.
- Text – Set the visible text for your hyperlink.
- Description – Provide a short explanation or context for the hyperlink.
- URL – Insert the web address your link directs to.
- Icon or Image – Choose between using an icon or an image to visually represent your link.
- Image – Upload an image for your link. This option is dependent on prior choices.
- Icon – Select an icon for your link. This option is dependent on prior choices.
- Advanced – Access more detailed settings for your hyperlinks.
- Graphic – Customize the visual elements of your hyperlink.
- Background – Choose a color to enhance the background of your link’s graphic element.
- Icon – Pick a color for your link’s icon for better visibility or branding.
- Image Opacity – Adjust the transparency of your link’s image for optimal display.
- Size – Specify the dimensions of the graphic used in your link.
- Alignment – Align your link’s graphic to the desired position (left, center, right).
- Translate – Modify the graphic’s position.
- X – Shift the graphic horizontally.
- Y – Shift the graphic vertically.
- Padding – Adjust the spacing around your link’s graphic.
- Padding – Set the amount of space between the graphic’s content and its border.
- Radius – Determine the curvature of your link’s graphic corners for a rounded appearance.
Design Controls
Wrapper
The controls in this section allow you to customize the background, padding, and borders of the wrapper, providing a unique and stylized container for your content.
- Background – Choose a color for the wrapper’s background.
- Padding
- Padding – Define the space inside the wrapper, between the content and the border.
- Borders
- Radius – Set the curvature of the wrapper’s corners.
- Styling – Customize border type, width, and color.
- Shadow – Add or adjust shadow effects behind the wrapper.
- Width – Adjust the width of the wrapper. This control is conditional.
Links
The controls in this section focus on adjusting the appearance and layout of links, including their titles, descriptions, graphics, and spacing, for a more engaging user interface.
- Title – Customize the title settings for the links.
- Description – Modify the description settings for the links.
- Graphic
- Background – Select a background color for the link graphics.
- Icon – Choose a color for the link icons.
- Image Opacity – Adjust the opacity of the images on the links.
- Size – Define the size of the graphics.
- Alignment – Align the graphics on the links.
- Translate
- X – Move the graphics along the X-axis.
- Y – Move the graphics along the Y-axis.
- Padding
- Padding – Set the space around the graphics.
- Radius – Round the corners of the graphic elements.
- Spacing
- After Graphic – Add space after the graphics.
- Before Description – Add space before the description.
- Between Links – Adjust the space between individual links.
- Padding
- Padding – Customize the padding around the links.
- Radius – Control the border curvature of the links.
- Hover Background – Set the background color when hovering over links.
Columns
This section provides controls for managing the layout and spacing of columns, ensuring well-organized and visually appealing content presentation.
- Title – Personalize the title settings for the columns.
- Space After Title – Specify the amount of space after the column titles.
- Gap Between Columns – Set the distance between adjacent columns.
- Stack Vertically – Toggle the orientation of columns stacking.
Additional Section
These controls let you further customize the Links and Columns within an additional section, adjusting graphical elements, spacing, padding, and more for enhanced content display.
- Links
- Title – Adjust the title settings for the links in this section.
- Description – Alter the description settings for the links in this section.
- Graphic
- Background – Choose a background color for the link graphics in this section.
- Icon – Select a color for the link icons in this section.
- Image Opacity – Control the image opacity for the links in this section.
- Size – Set the size of the graphics for the links in this section.
- Alignment – Position the graphics on the links in this section.
- Translate
- X – Shift the graphics along the X-axis in this section.
- Y – Shift the graphics along the Y-axis in this section.
- Padding
- Padding – Determine the space around the graphics in this section.
- Radius – Round the corners of the graphic elements in this section.
- Spacing
- After Graphic – Define space after the graphics in this section.
- Before Description – Set space before the description in this section.
- Between Links – Control the distance between links in this section.
- Padding
- Padding – Customize the padding around the links in this section.
- Radius – Modify the curvature of the links’ borders in this section.
- Hover Background – Choose the hover background color for the links in this section.
- Columns
- Title – Configure the title settings for the columns in this section.
- Space After Title – Decide the space after the column titles in this section.
- Gap Between Columns – Adjust the spacing between columns in this section.
- Stack Vertically – Change the orientation of the column stacking in this section.
- Background – Customize the background color of the additional section, giving it a distinct appearance or mood.
- Padding – Fine-tune the space within the additional section, ensuring content is displayed clearly and aesthetically.
- Padding – Adjust the specific measurements for padding around the content in the additional section, influencing readability and layout balance.
- Stack Horizontally – Choose the stacking orientation of elements in the additional section, optimizing space usage and visual order.
Advanced
This section introduces advanced controls, catering to the nuanced preferences for desktop displays. They provide the ability to specify at what point the desktop styles are disabled, allowing for a seamless transition between various display sizes and ensuring a consistent, responsive user interface across all devices.
- Disable Desktop Styles At – Select the specific breakpoint at which the desktop-specific styles are disabled, enhancing the site’s responsiveness and visual consistency across different devices.
