FAB (Floating Action Buttons) Bar

Loyde comes with a built-in feature, FAB (Floating Action Buttons) Bar. It is a group of buttons, placed on the left, right, or both sides of the screen. Each of the buttons opens a popup with a user-built content. It is possible to separatelly build FAB bars for both screen sizes.

Theme Options FAB

How to disable FAB Bar

Steps:

  1. Go to WP admin -> Loyde -> Theme Options -> FAB (Floating Action Buttons) Bar
  2. Under Enable FAB (Floating Action Buttons) Bar? choose "No".

FAB bar can be re-enabled in the future.

How to create a FAB bar

Steps:

  1. Go to WP admin -> Layout Blocks
  2. Create a new layout block. For "Layout Block Type" taxonomy, choose "FAB"
  3. Compose the FAB bar using WPBakery Page Builder. The crucial, which has to be added, is a Loyde custom WPBakery element, FAB Popup Content Box.

Note: After importing Loyde demo, there will already be a few prebuilt FAB layout blocks. Of course, it is possible to edit any of them, opr create a completely new one.

How to choose the left FAB bar

  1. Go to WP admin -> Loyde -> Theme Options -> FAB (Floating Action Buttons) Bar
  2. Under FAB Layout Block: Left choose the desired layout block.

Note: Only layout blocks with type "FAB" will be offered.

How to choose the right FAB bar

  1. Go to WP admin -> Loyde -> Theme Options -> FAB (Floating Action Buttons) Bar
  2. Under FAB Layout Block: Right choose the desired layout block.

Note: Only layout blocks with type "FAB" will be offered.

How to set vertical position on screen

Select how the FAB bar should be aligned vertically:

  • closer to the top
  • in the middle
  • closer to the bottom.

Steps:

  1. Go to WP admin -> Loyde -> Theme Options -> FAB (Floating Action Buttons) Bar
  2. Under Vertical Alignment on Screen choose the desired position.

Change if and how FAB bar should be hidden during scrolling

Select if and how FAB bar should be hidden during scrolling:

  • Initially show and hide as soon as the user scrolls downwards
  • initially hide and show only when the scroll passes above-the-fold).

Steps:

  1. Go to WP admin -> Loyde -> Theme Options -> FAB (Floating Action Buttons) Bar
  2. Under FAB - Hiding Mode choose the desired mode.