Toggles Element

15/12/2021

The Toggles Element is a perfect way to add multiple sections of varied content to your website, while actively selecting which to show or hide at any time. Toggles will only allow one item to be open at a time, while Accordions will allow multiple open at one time. Read below to discover more about this useful space saving Design Element.

Avada Toggles Element

Toggles are a great way to display and hide content that you want to give the user control over.

Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
View Element Demo Page!

Overview

How To Use The Toggles Element

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Toggles’ element and add it to the page.

Step 4 – Configure the Toggle Element to your liking. There is a wide range of options to configure and style the Toggles Element, including styling the individual toggle items. Check out the full list of Element options below.

Avada Website Builder

772,125 Businesses Trust Avada

Get Avada
Avada Website Builder

772,125 Businesses Trust Avada

Get Avada
Avada Website Builder

772,125 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Toggles section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Children Tab

  • Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.

  • + Add Toggle – Allows you to add new toggle Items.
  • Item Options

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

View The Options Screen

Item Options General Tab

  • Title – Insert the toggle title.
  • Open by Default – Choose to have the toggle open when page loads.
  • Toggle Content – Insert the toggle content.
  • CSS Class – Add a class to the wrapping child HTML element.
  • CSS ID – Add an ID to the wrapping child HTML element.

View The Options Screen

Item Options Design Tab

  • Title Typography

  • Font Family – Controls the font family of the title.

  • Font Size – Controls the font size of the title.

  • Title Font Color – Set the color of title in toggle box. Leave empty for value set in parent options. If that is also empty, the Global Options value of Color 8 will be used.
  • Content Typography

  • Font Family – Controls the font family of the content.

  • Font Size – Controls the font size of the content.

  • Content Font Color – Set the color of title in toggle box. Leave empty for value set in parent options. If that is also empty, the Global Options value of Color 8 will be used.
View The Options Screen

General Tab

  • Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

  • Boxed Mode – Choose to display items in boxed mode.
  • Divider Line – Choose to display a divider line between each item.
  • Inactive IconClick an icon to select, click again to deselect.

  • Active IconClick an icon to select, click again to deselect.

  • Toggle Icon Boxed ModeChoose to display icon in boxed mode.

  • Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Boxed Mode Border Width – Set the border width for toggle item. In pixels.
  • Boxed Mode Border Color –  Set the border color for toggle item.
  • Boxed Mode Background Color – Set the background color for toggle item.

  • Boxed Mode Background Hover Color – Set the background hover color for toggle item. Leave empty for default value.
  • Divider Line Color Set the color for divider line. Leave empty for default value of Color 3.

  • Divider Line Hover Color Set the hover color for divider line. Leave empty for default value of Color 3.

  • Title Typography

  • Font Family – Controls the font family of the title.

  • Font Size – Controls the font size of the title.

  • Title Font Color – Set the color of title in toggle box. Leave empty for default value of Color 8.
  • Toggle Icon Size – Set the size of the icon. In pixels (px), ex: 13px.
  • Toggle Icon Color – Set the color of icon in toggle box. Leave empty for default value.
  • Toggle Icon Inactive Box Color – Controls the color of the inactive toggle box.
  • Toggle Icon Alignment – Controls the alignment of toggle icon.
  • Content Typography

  • Font Family – Controls the font family of the content.

  • Font Size – Controls the font size of the content.

  • Content Font ColorSet the color of content in toggle box. Leave empty for default value of Color 8.

  • Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.

  • Toggle Active Accent Color – Controls the accent color for icon box and title.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Toggles.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

  • Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
  • Toggle Boxed Mode – Turn on to display items in boxed mode. Toggle divider line must be disabled for this option to work.
  • Toggle Boxed Mode Border Width – Controls the border size of the toggle item.

  • Toggle Boxed Mode Border Color – Controls the border color of the toggle item.
  • Toggle Boxed Mode Background Color – Controls the background color of the toggle item.
  • Toggle Boxed Mode Background Hover Color – Controls the background hover color of the toggle item.
  • Toggle Divider Line – Turn on to display a divider line between each item.
  • Divider Line ColorControls the color of toggle divider line.
  • Divider Line Hover ColorControls the hover color of toggle divider line.
  • Toggle Title Typography

  • Font Family – Controls the font family of the toggle title.

  • Font Size – Controls the font size of the toggle title.

  • Line Height – Controls the line height of the toggle title.

  • Letter Spacing – Controls the letter spacing of the toggle title.

  • Font Color – Controls the font color of the toggle title.

  • Toggle Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

  • Toggle Icon Color – Set the color of the icon.

  • Toggle Icon Boxed Mode – Turn on to display toggle icon in boxed mode.

  • Toggle Icon Inactive Box ColorControls the color of the inactive toggle box.

  • Toggle Content Typography

  • Font Family – Controls the font family of the toggle content.

  • Font Size – Controls the font size of the toggle content.

  • Line Height – Controls the line height of the toggle content.

  • Letter Spacing – Controls the letter spacing of the toggle content.

  • Font Color – Controls the font color of the toggle content.

  • Toggle Hover Accent ColorControls the accent color on hover for icon box and title.

  • Toggle Active Accent ColorControls the accent color on active for icon box and title.

  • Toggle Icon AlignmentControls the alignment of toggle icon.

View The Options Screen
Avada Website Builder

772,125 Businesses Trust Avada

Get Avada
Avada Website Builder

772,125 Businesses Trust Avada

Get Avada
Avada Website Builder

772,125 Businesses Trust Avada

Get Avada