Multi Builder Elements, Multi Theme and Website Builder
3 minutes read

Toggles Block

Toggles Block

To add a toggle, first use the Toggles Block in Multi Elements. Use these options to customize it:

  • Block position – set the block position to left, center or right. This option is available at the top block options panel.
  • Type – choose toggle’s style type. Choose from types 1 to 5.
  • Behavior – choose bahavior type from Toggle or Accordion.
  • Top margin – set the block top margin. Use any CSS-compatible margin value.
  • Bottom margin – set the block bottom margin. Use any CSS-compatible margin value.
  • Icon – add an icon to your toggle tab.
  • Icon set – choose the icon set from Multi, Font Awesome solid, Font Awesome regular, Font Awesome light and Font Awesome brands.
  • Icon size – set the icon size.
  • Icon position – set the position of the toggle icons to left or right.
  • Icon (expanded) – add an icon to your opened toggle tab.
  • Icon (expanded) set – choose the icon set from Multi, Font Awesome solid, Font Awesome regular, Font Awesome light and Font Awesome brands.
  • Max. width – set the maximum width of the Toggles block.
  • Title font weight – set the toggle title font weight.
  • Title font weight (expanded toggle) – set the expanded toggle title font weight.
  • Border color – set toggle’s borders color.
  • Background color – set toggle’s background color.
  • Mouse over background color – set toggle’s background color on mouse hover.
  • Title color – set toggle’s title text color.
  • Title hover color – set toggle’s title text color.
  • Icon color – set toggle’s icon color.
  • Icon hover color – set toggle’s icon hover and active color.
  • Active title background color – set the background color of the active toggle tab title.
  • Use shadow (default state) – enable or disable a shadow on default toggles state.
  • Shadow color – set the color of the shadow.
  • Shadow blur – set the blur of the shadow.
  • Horizontal offset – set the horizontal offset of the shadow.
  • Vertical offset – set the vertical offset of the shadow.
  • Use shadow (on mouse over) – enable or disable a shadow on mouse hover.
  • Shadow color – set the color of the shadow on hover.
  • Shadow blur – set the blur of the shadow on hover.
  • Horizontal offset – set the hover horizontal offset of the shadow.
  • Vertical offset – set the hover vertical offset of the shadow.
  • Class – add a custom CSS class to your toggle.
  • ID – add a custom CSS ID to your toggle.
  • Style – add an inline CSS style to your toggle.

Toggle Block

After creating a Toggles Block, add Toggle Blocks to create new toggle tabs. To customize each tab, use the following options:

  • Title – change the title of your toggle tab directly in the block editor.
  • Open – choose whether to start your toggle tab opened or closed.
  • Decorative icon – you can add an additional, fixed icon on the left side of the toggle.
  • Decorative icon set – choose the icon set from Multi, Font Awesome solid, Font Awesome regular, Font Awesome light and Font Awesome brands.
  • Title font size – set the toggle title font size.
  • Title line height – set the toggle title line height.
  • Class – add a custom CSS class to your toggle tab.
  • ID – add a custom CSS ID to your toggle tab.
  • Style – add an inline CSS style to your toggle tab.