Custom Color Schemes
Back in Avada 5.0, we introduced a new feature that lets you save your site’s current color scheme. This includes all the color settings you’ve set in the Fusion Theme Options panel, such as your menu colors, link colors, hover colors, button colors and the like!
This feature also lets you update, export and import your settings with ease. Continue reading below to read more about Custom Color Schemes and how to use them.
Custom Color Schemes
The Custom Color Schemes option is located in the Avada > Fusion Theme Options > Colors tab under the ‘Predefined Color Scheme’. This feature allows you to save, update, delete, import and export your site’s custom color schemes with ease. It also allows you to experiment with color themes without having to painstakingly change each color setting over and over again.
Note: The example image is representing the buttons shown after a custom color Scheme has been saved. Before saving a custom color scheme, only the “Save” and “Import” buttons will be shown.
Custom Color Schemes In Elements
Once you create a new Color Scheme, you can then use it in certain elements such as the Button Element. This allows you to use the color scheme exclusively on the element. Using a custom color scheme will only affect the element it’s used on and won’t affect any other color options.
Using Custom Color Schemes
You can load, save, update, delete, import and export your custom color schemes. Continue reading below for a detailed explanation on how to go through each option.
How To Save Custom Color Schemes
Saving your site’s color schemes have never been easier! Once you’ve built your site and are happy with your color settings, simply give it a unique name and click ‘Save’.
Step 1 – Navigate to the Avada > Fusion Theme Options panel.
Step 2 – Customize the color settings as desired, such as your menu colors, typography colors, element colors and the like.
Step 3 – Once you’re happy with your color settings, save your Theme Options panel.
Step 4 – Navigate to the Colors tab and locate the ‘Predefined Color Scheme’ option.
Step 5 – Click the ‘Save’ button and more options will appear. Give your new color scheme a unique name, then click the ‘Save’ button beside it.
Step 6 – Wait for it to finish saving. You’ll then see your new color scheme as a square rainbow palette.
Loading Custom Color Schemes
Once you’ve saved your custom color scheme, you can load and switch between predefined color schemes as often as you wish. This allows you to view or your site in the different predefined color schemes without loosing your original saved custom color scheme settings.
Step 1 – Navigate to the Avada > Fusion Theme Options > Colors panel.
Step 2 – Determine which color scheme you’d like to switch to. You can identify them by hovering over a palette which will display their respective labels.
Step 3 – Choose your color scheme. Once loaded, save your Theme Options panel.
Step 4 – Repeat steps 1 – 3 to load a different color scheme.
Updating & Deleting Custom Color Schemes
If you’ve already saved a color scheme and decide you’d like to change some color settings but don’t want to start over, you can simply update your saved color scheme.
How To Update Custom Color Schemes
Step 1 – Configure your color settigns in the Fusion Theme Options panel, once done, save your Theme Options panel.
Step 2 – Navigate to the Theme Options > Colors panel and locate the ‘Predefined Color Scheme’ option. Click ‘Update’ to bring up the update options.
Step 3 – Select the custom color scheme you’d like to update from the dropdown field provided, then click ‘Update’.
Step 4 – Wait for it to finish updating, then save your Theme Options panel again.
How To Delete Custom Color Schemes
Step 1 – To delete custom color schemes, click ‘Delete’ to bring up the delete options.
Step 2 – Select the color schemes you’d like to delete. You can select more than one color scheme at a time. To deselect, simply click the color scheme palette again or click ‘Cancel Selection’.
Step 3 – Once you’ve selected the color schemes you’d like to delete, click ‘Delete’.
Importing & Exporting Custom Color Schemes
With our import and export options, it’s incredibly simple to export all your custom color schemes and import it to another Avada site.
How To Export Custom Color Schemes
Step 1 – Navigate to the Avada > Theme Options > Colors panel and find the ‘Predefined Color Scheme’ option.
Step 2 – Click the ‘Export’ button to generate the export code. This code contains the data of all your custom color schemes.
Step 3 – Copy the entire code and paste it into a text editing software, like notepad. From here, you can just save it as a backup or you can use it to import your custom color schemes to another Avada installation.
How To Import Custom Color Schemes
Step 2 – To Import custom color schemes, click the ‘Import’ button.
Step 3 – In the text field provided, paste the export code that you’ve retrieved from exporting your custom color schemes, then click ‘Import’.