The Palette Switch Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

The Palette Switch component adds a toggle or an icon to the header area that can be used to switch the website color scheme from light to dark or the other way around. Even if the names are light and dark, both color palettes controlled by this option can be fully customized with the desired colors.


Example of light color scheme


Example of dark color scheme


🧰Using the Component

1
Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.

2
Open the component's  settings to customize it, by clicking on the ⚙️icon.


🔮Customizing the Component

There are two panels with customizing options for this component, which allow you to create the desired header / footer:

General
Layout

⚙️General Panel

When you click on the ⚙️ icon, the General tab will appear on the left side. From there you can add any widget from the library, by clicking on the ➕ button.

The Palette Switch toggle commutes between two color palettes from Customizer > Colors & Background, Light Palette, and Dark Palette.

📝 Note: The Pallete Switcher within the header builder will always consider the Base palette as default.  

The General panel also brings in the following options:

  • Select icon - choose from the four options available.
  • Icon Size - adjust the size of the icon to fit your header. It can also be set differently for Desktop | Tablet | Mobile.
  • Label - insert a suggestive label for the switcher.
  • Automatically adjust color scheme - the color scheme will be adjusted based on the user device preferences.


 📐Layout Panel

In the Layout tab, you also have access to advanced positioning options like:

  • Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
  • Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.