In the Site Design section, you are able to customize the design elements of the website.
I want to update:
Color Palette
The color palette contains four colors:
- Primary
- Secondary
- Tertiary
- Highlight
Each of these colors can be customized by clicking on the color swatch or into the text box. A color selector will appear which enables you to visually select a new color. You can also enter a hex code, as well as use the arrows to switch to HSL (Hue, Saturation, Lightness) or RGB (Red, Green, Blue) values.
To view how the colors will be displayed on the live site, click on the Live Preview button to open the website in a new tab. Use the "Reset to Default" link to return all colors to their original hues.
A preview of the site will be displayed to the right of the color palette and will update immediately with the newly selected color(s).
Customizable Header and Footer
To enable the customizable header and footer, click the slider and expand the section using the arrow.
Header
The option to use the layout for the utility and main navigation sections.
- Utility Navigation :
The utility navigation includes elements such as the search bar, a language selector, login link, social media, and contact information. The elements available on the utility navigation will vary depending on the selected layout. Each element will display with an "eye" icon to indicate whether it should be shown or hidden in the navigation. Additionally, if the element has an arrow, you can use it to expand the option and see the available layout choices for that element. - Main Navigation
The main navigation enables you to customize how the logo, pages, cart, and depending on the selected layout, search bar are displayed. Each page in the navigation will be listed with an I icon indicating it should be visible on the site.
In addition to customizing the header, you can select a layout for the footer as well as click on the arrow to expand an element and update it.
Customize CSS
The CSS section enables custom CSS (cascading style sheets) for your ESP+ website. Click on the down arrow, enter the custom code, and then click on Save when you are finished.
Change Template
In the Change Template section, hover on a template to preview it in a new tab or select it for your website. You can also click on the pages name to preview how the template looks for that page on your site. Clicking on the Edit Page button will open the page design options in the Pages section.
When you are finished updating the site design, click on the "Save" button and then click on "Publish Site" to make the changes live.