Documentation - Theme

Settings - Theme

FONTS and ICONS

FONTS

In the fonts tab we have a button that allows us to import fonts directly from Google Fonts to make use of them in our landing page.

This is the unique option to import fonts, there is no posible to use other sources or custom fonts.

-

"FAMILY" field:

  • The Primary option refers to the font used for the paragraphs

  • The Secondary option is for titles and subtitles.

-

Adding bold in the middle of a text:

To add some text in bold in middle of a paragraph or a phrase (like this) is not enough to use the bold option (B) of the CMS field, also you must add a font configuration with the next options:

  • FAMILY: Primary

  • WEIGHT: Bold

  • FONT: Choose the same font of the regular configuration but with a value of 600 or higher

ICONS

We also see the icon style tab for example to use in practical info. We have the option to choose icons regular (bordered) or solid (filled).

COLORS

In this tab we will define the colors of our landing page. Primary and secondary colors, both for texts, links, buttons, backgrounds, etc.

We also have options to give different colors when hovering over buttons or links.

To get a more detailed information about what color affects which element please review the [Figma template here].

EXAMPLE:

To know what color affects the CTA button of the Giftcard Module:

  1. Go to the Module in the [Figma template].

  2. Right click on the button, head on select layer and click "button" element.

  1. Then on the right panel, review the "Colors" section to know the name of the color you must edit.

  2. Finally look for this color name in the CMS. In this case the field to edit is: "CTA Background Primary"

SLIDER COLORS

In this tab we are going to define the colors for the different sliders that we can use in different modules.

In them we can give styles to bullets, arrows, texts, backgrounds, etc.

In the next image you can see which color affects which element in the "Reviews" module: