Cart page

Cart page

Cart layouts

Proteo theme offers two different Cart page layouts:

  • full-width layout
  • two-column layout

 

One-column cart layout
Full-width layout
Two-column cart layout
Two-column layout

“Update cart” button style

Moreover, you can also choose the appearance of the “Update cart” button and choose between:

  • a textual link or
  • a button.

Cross-sells

Finally, you can also set up how many cross-sells products will be displayed and how many per row (Columns).

Cross-sells

Sidebars

YITH Proteo theme supports a total of 13 sidebars that you can customize by adding widgets from Appearance > Widgets.

Proteo widgets

Additionally, the theme allows you to pick one of those sidebars and set the position for the following pages:

  • All posts and pages
  • Main blog page (the blog page is where all your posts are listed)
  • All blog categories pages
  • All blog tags pages

To set this up, you can go to YITH Theme Options > Sidebars and choose a custom layout for them.

Proteo sidebars

If you want to override these settings for specific posts or pages, you can do that from the post or page details. Please, read more about this in Page/Post options menu of this documentation.

Sticky sidebar

Sticky sidebar

In Layout options, you can also choose whether to enable the sticky sidebar or not.

Do you have an e-commerce website? Check the WooCommerce menu in this documentation to find out more about sidebars on shop and product pages.

Footer Options

This section contains submenus for:

1. Footer background

2. Footer typography

3. Footer widgets

Background

Available options:

  • Background color
  • Background image: the image will override the background color, so for example, you can also use a .png image over the background color
  • 100% background image: this option will make sure the image covers the full area of the footer.
  • Background repeat: this option only appears if the “100% background image” option is set to NO. You will also be able to set the “repeat” option and choose among:
    • Do not repeat
    • Repeat horizontally
    • Repeat vertically
    • Repeat vertically and horizontally
  • Background position:
    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center
    • center bottom

Footer typography

You can customize here the typography options for the texts in the widgets:

  • Font size: default to 16px
  • Font color
  • Hyperlink color
  • Hyperlink color on hover
  • Widgets title font size
  • Widgets title color
  • Elements alignment:
    • Left
    • Center
    • Right

Widget areas

In this section you can enable up to two widget areas in the footer and for each of them configure the following options:

  • width (%): it stands for the percentage value that it takes related to the total footer area (starting from the left). For example, if it’s set to 50% it will only cover half the size of the footer.
    Widget examples
  • columns: you can choose up to 6 columns (and so slots for widgets) for every widget area. Please, note that if you choose 4 as a value for this option and you add 5 widgets in this widget area, the fifth widget will go into a new line.

Additionally, you can choose also whether to put the two widget areas side by side, instead of showing them one below the other as it is by default.

Please, note, if you set this option, you will have to make sure that the percentage width of both widget areas is no more than 100%, otherwise the second widget area will be however shown below and not aside. For example, 50% + 50% or 30% + 70% and so on.

Footer Credits

Footer credits are is generally used to display textual information about site copyright, but you can add also shortcodes in this panel.

Background color, typography and alignment options are available too.

Credits

Typography

In the Typography menu you will be able to customize every option related to text, with custom settings for every kind of heading.

Typography

Global Typography

Here you can configure text options for the body text across your website. It is used for <p> tags and similar. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Text color
  • Links color
  • Links color on hover
  • Underlined links: enable this to show links with the traditional underlined style

Heading typography options

For every heading from H1 to H6, you can separately configure the following options:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Widget titles

Here you can configure the style of the titles of all widgets. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Widget content

Here you can configure the style of the text showing in all the widgets. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Additional Google fonts

If you can’t find your favourite Google font in the list, no worries, you can add it as well.

Please follow these steps:

a) Go to https://fonts.google.com/

b) Select the font you want to use (i.e. Roboto)

c) Customize the font as you wish by choosing the font weight and style you want to use.

d) Copy the href link from Google Font. It should be something like

https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap

Additional Google font

e) Visit your site and navigate to Appearance > Customize > YITH Theme Options > Typography > Additional Google Font

e) Paste the link into the text area.

f) Now navigate to Appearance > Customize > Additional CSS and add the following rule:

body {
font-family: 'Roboto', sans-serif;
}

Here is another rule example based on the Montserrat font (the Proteo default font)

body {
font-family: 'Montserrat', sans-serif;
}

Please note that this rule depends on the font you choose. Google Font helps you identify the right rule to use inside the “CSS rules to specify families”:

Site colors

The first menu you can access to in the  Miscellaneous menu is the the one where you can change the main colors of your sites:

  • Site background
  • Main color shade: this color is used as primary color for many elements of the Proteo theme to keep your site style always consistent, hassle-free.

Site colors

Buttons

Buttons

In this menu you will be able to configure the Button radius as a general settings for all your theme buttons, and after that you can customize two different styles for the buttons available in Proteo theme. You will also see a preview of how the button will look like.

Button Style 1 – available options

  • Background color
  • Border color
  • Text color
  • Background :hover color
  • Border :hover color
  • Text :hover color

Button Style 2 – available options

  • Background color shade 1
  • Background color shade 2
  • Text color
  • Background :hover color
  • Text :hover color

All style-2 buttons have a gradient background color, that’s why you have to set two background color shades.

Proteo buttons

Forms

Form options

 

In this menu, you can find specific settings for your forms that are managed through the theme style.

  • Input and textarea minimum height (pixels): use this option to define your input and textarea minimum height.
  • Input and textarea border radius (pixels): use this option to make your text input and text area borders rounded.
  • Input and textarea border thickness (pixels): use this option to choose the border thickness of your text input and text areas.

Form border thickness

  • Input and textarea border color: use this option to choose the border color of your text input and text areas.

Input and textarea border color

  • Input and textarea font size (px): choose the font size for your input and text area;
  • Use custom style on select elements (for dropdown menus) instead of standard ones;
  • Use custom style on checkbox and radio button elements instead of standard ones.
Enhanced form elements
Enhanced style for dropdowns, radio buttons and checkboxes

How to update

WordPress website regularly checks for updates and display them under Dashboard > Updates.

You can simply click on the update button to install the new version.

This will overwrite all theme files. If you manually add custom code to your WordPress theme files, then you’ll lose those changes. For this reason it is always recommended to use child themes.

Updates are really important for the security and performance of your WordPress website. An update may include new features but also security and bug fixes.

Prerequisites

  • Minimum WordPress version: 4.9.6
  • Minimum PHP Version: 5.6

In case your site is an e-commerce:

  • Minimum WooCommerce version: 3.9