Common Concepts - Theme Styling

Most of the custom Loyde WPBakery elements offer a possibility to apply so-called theme styling. "Theme styling" basically means applying primary & secondary accent (styling) colors to different aspects of the element. More information about primary & secondary colors is available here.

Affected element aspects include:

  • text color
  • background color
  • icon color
  • icon background
  • border
  • etc.

Note: Exact set of "theme styling" properties depends on the element. Each element can expose a specific set of properties.

It is possible to set:

  1. Primary color on regular state
  2. Secondary color in regular state
  3. Primary color on hover
  4. Secondary color on hover.

How to check if the element supports "theme styling"

Steps:

  1. Add the desired Loyde WPBakery element to the edited page or post
  2. Open the Settings for the added element
  3. Look for "Theme Styling" tab
  4. If the tab is present, that means the element supports "theme styling".

How to apply "theme styling"

Steps:

  1. Add the desired Loyde WPBakery element to the edited page or post
  2. Open the Settings for the added element
  3. Open "Theme Styling" tab
  4. Under "Colors: Primary/Secondary Styling" tick "Yes". This will open the available set o properties below, as checkboxes
  5. Tick desired checkboxes and save the change.

Offered properties will be grouiped into four categories:

  1. Apply Theme Primary Styling Color To
  2. Apply Theme Secondary Styling Color To
  3. Apply Theme Primary Styling Color on Hover To
  4. Apply Theme Secondary Styling Color on Hover To
Theme Styling Tab