Introduction

The 'ADVANCED' panel of Colors allows you to override the BASIC Key Colors and customize every color on your site. This is important if you have a specific 'branding' to match.

Tap any image to view at larger size.


In this article
  • Advanced: Overview of all Colors
  • Changing Advanced Colors
  • Site Menu
  • Heading Text
  • Body Text
  • Text Links
  • Footer
  • Gallery Pages
  • Collection Pages
  • Blog
  • Social Network Links
  • Website Background
  • Reset All Modified Colors

Advanced: Overview of all Colors

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/WHu_-yGFF5iAL8xGGAfVRuhMFIm0TY2M1n-Cq7Lg7hQ/02c_colors_toggle-4EI.png

Tap the 'Colors' panel in the Design Editor.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/QLUNmBjjne-Kvfoc9Wdwb89RO95kp0vgDXNP023uzig/07_colours_advanced_toggle-Cw4.png
  1. Tap 'ADVANCED'.

The ADVANCED panel will display the Preset or Basic Key Colors applied to sections of your site and allow you to edit them individually.

Every theme has individual characteristics, the screenshots shown may not match your theme.

The best way is to modify the swatches and preview the changes and refine.


Changing Advanced Colors

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/y9oJCUy40CzHMymaKpnBM4tae7YfoaKegQq13D7T8V0/16_color_default_picker_with_hex_numerals_selected-9RA.png
  1. Tap the swatch to activate the Color Picker
  2. User slider (up/down) on right to pick the base color
  3. Use the picker circle to refine the color or
  4. Add the #HEX number directly into the field above.

Site Menu

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/a-UHsJBUQFlCb3-kIM_ans3zoYbnDpakbUaiWZdva2E/08_site_menu_advanced_swatches-NlI.png

Site Menu is for your navigation links, usually in the top (header) area of your site.


Heading Text

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/yyX33RmP6H9REMUuTtrrcyU4D0FLUlW7PtnzpH_VGSE/09_heading_text_advanced_swatch-ApM.png

Heading Text for all larger Headings on your site.

The Text Logo color is set separately.


Body Text

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/NEOfPi0B1JP2_NxXDjm38I3Inp3DL6LQMWk2g39apFY/10_body_text_advanced_swatch-5SY.png

For Body Text on all pages except for Blogs which can be styled separately. See Blog below.


Text Links

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/zGoufqArsmvcMacxc5gEdueKZ3iee3-45GHctvS7wM4/11_text_links_advanced_swatch-ATw.png

Text Links may be shown for email address or external links that you have added.


Footer

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/3LAGZPOF2RKhAhPb6VH4MO2RcQ5PL40xFrsrwjDMcSs/12_footer_advanced_swatch-5_4.png

The Footer area often shows the site Copyright © information (not available on Sun or Panorama themes).


Gallery Pages

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/VQuPsOczbL84kfhr6XrNN57LzTNpflPqapM8hP-h3f8/13_gallery_pages_advanced_swatch-GD0.png

Change the colors to work with your images and branding.


Collection Pages

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/k5fyqM2biTA0PHZa1QZnZH8lHodfSrW3iB6VAk8g1-8/13a_collection_pages_default_swatch-KTM.png

Set color of text link (usually the Page's title).


Blog

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/kycKfiN6bJoEAgSydQV0DmdvhPkc7MV5dPSfzKT_dw4/14_blog_advanced_swatch-6oY.png

Blog colors can be set differently from the rest of your site.


Social Network Links

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/MECBAWXiZ-2QGpJ_Z-MCZMzAn4rsSV-8TZJGv1jTdAc/15_social_network_links_advanced_swatch-CvE.png

Social Network Links apply to the icons or text used.


Website Background

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/tyIb655rlvMzMVxL8NC1WJP49Zju3kYe82Ggp-afGYw/17_website_background_advanced_swatch-lq0.png

Website Background applied to your whole site.


Reset All Modified Colors

If you don't like the changes made in the Advanced panel you can reset these to the original Preset default you selected in the Themes panel.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/hsKlt7e-NtHeeUxmnR_jAo0zE6fxG-kgjNGTMyhvso8/05_theme_basic_preset_modified-onU.png
  1. Activate Themes > 'Basic' panel
  2. Presets area (under thumbnail preview) tap 'Modified'.
https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/oI2kyrq_PFNOcnmhK2Jd3ehSBAF6mwCvvjTyf9m80mY/06_changing_theme_preset_warning-qpA.png

A warning will be displayed advising 'Changing your theme preset will reset all of your customizations'.

Tap 'Continue' to reset.

No content (images or text) that you have added to your site will be affected.

Reach us online at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!