Site Identity
1.- Main Logo In header Navigator
2.- Mobile Logo used on Mobile Menu Popup
3.- Copyright Located on Footer
4.- Select 404 page on the site
Color Schema
Content Color Schema
1.- Body Background Color: Select the background Color of the Body
2.- Text Color: The Global Text color of contents (element in the body)
3.- Primary Color: Color used as Branding color on a few elements.
Content Nav Color Schema
1.- Background Color: Main Navbar Background Color
2.- Text Color: Text Color of the navbar( Menu, mobile menu icon, submenu)
3.- Active Color: The line’s background color that appears when we Hover, active, or focus a menu item in the navbar.
Mobile Nav Color Schema
1.- Background Color: Mobile Navbar Background Color
2.- Text Color: Text Color of the Mobile( Menu, mobile menu icon, submenu)
Footer Color Schema
1.- Background Color: Footer Background Color
2.- Text Color: Text Color of the Footer( Menu, Content Text, Menu Title)
Copyright Footer Color Schema
1.- Background Color: Footer Socket Background Color
2.- Text Color: Text Color of the footer Socket section( Legal menu, Socials icons, Copyright Text)
Buttons Colors
These colors are set up on the site and used on all blocks with buttons. We set up three types of buttons (Primary, Secondary, and inline).
example:
and a contrast version of these buttons (usually used on the opposite background color)
example:
Primary and Secondary Buttons color
1.-Text Color: The color picker chooses the Text Color of the button
2.- Border Color: The color picker chooses the BorderColor of the button
3.-Background Color: The color picker chooses the background of the button
4.- Text Color Hover: The color picker chooses the Text Color of the button when we hover, active or focus
5.- Border Color Hover: The color picker chooses the BorderColor of the button when we hover, active, or focus
6.-Background Color Hover: The color picker chooses the Background of the button when we hover, active, or focus
**Apply similar settings on Contrast, visible on opposite backgrounds
Site Structure
Define the max width of the nav, socket, footer, and content, we can choose between the logo on the left or the center.
Navigator
Content Body Max Width
Footer section Max Width
Copyright section Max Width
Font Styles
Content Styles
1.- Font Size of the main Navigator (accept px or em)
2.- Font Family: Select the font family (before selecting it you need to set it in UV FONT)
3.- Font Weight: Fonth Weight used on the Navbar
Page Content Styles
Apply the same configurations on every item.
1.- Title Style: Font style rules applied on all <h2> in the main content
2.- Subtitle Style: Font Style applied on all <h3> in the main content
3.- Content Font Style: Style applied to all contents in the main content
4.- Button Font Style: Style Applied on all buttons in the main content
Footer Content Styles
1.- Footer Titles: <h3> and <h2> used in the footer section
2.- Footer Content Style: applies on all <p> in the footer
3.- Footer Menu: Applies on all menu <ul> in the footer
Mobile Menu Styles
Font styles are used on the responsive mobile Nave menu.
Site socials
1.- Setup Socials on the website, and every place that this appears (newsletter, footer, header and socials block)
Extra CTA on NAV
This Adds an extra Button on the NAV (usually used for booking or display a dropdown submenu on this)
Example:
