Skip to main content
All CollectionsDesign Editor
General design settings
General design settings

Basic settings for color and text elements of the site

Updated yesterday

The overall visual style of the site is configured in Website → Design → Design еditor → Global styles.

Global styles settings in the design editor — Cartum

The Global styles block contains parameters that will affect all relevant elements on the site, namely:

  • Text and background;

  • Links display style;

  • Style of buttons and form fields on the website;

  • Website blocks style;

  • Navigation style for switching banners;

  • Style of certain elements of the product card.

Please note: For color settings, you can specify a color value in HEX, RGB, a standard English color name, or choose a color from the visual palette.

In the settings, the defined color is always displayed in HEX format.

Text and background

In this tab, you can define the basic settings for the background and text style on your site.

Font

  • Font — selection of one of 12 predefined fonts.

  • Text color — selection of the website's main text color.

  • Secondary text color — selection of the auxiliary text (tooltips, feature names, etc.) color.

  • Collapsed text block style — the visual style of displaying collapsed text, for example, in a product description (line or gradient).

Text and background settings in the design editor — Cartum

Headings

  • Headings 1 — selection of the H1 headings color, for example, product name on the product page, news titles, etc.

  • Headings 2 — selection of the H2 headings colors, these are subheadings or titles of separate blocks on the page.

Pages

  • Page background — defines the color of the general background of the site pages.

  • Homepage background — defines the color of the main page.

  • 404 page background — defines the background color of the page that site visitors are directed to if the link to the site page is incorrect or the page does not exist.

Links

You can define three parameters for links: the color of the link in the text, the color of the link when you hover over it, and additional underlining of the link.

Links style settings in the design editor — Cartum

The parameters are defined separately for each type of link on the site.

  • Navigation links — links that are used to navigate through the website pages: names of catalog categories, products, pages, etc.

  • Inline links — links in texts: product descriptions, SEO texts, etc.

  • Action links — links that, when clicked, perform a specific action on the site: Write a review, Add to favorites, Add to comparison, etc.

Buttons and form elements

For buttons, you can define the color of the button, the color of the text on the button, the color of the border around the button (stroke), and the size of the button corners rounding.

Buttons and form elements settings — Cartum

Parameters are specified separately for the each type of buttons.

  • Primary buttons — any main buttons on the website, such as Buy, Submit , etc.

  • Secondary buttons — additional buttons in the interface, for example, the All brands button, filter and modification buttons, etc.

  • Form fields — settings for input/selection fields in forms on the website. Only the rounding radius can be set for form fields.

Examples of rounding settings

No rounding

S

M

L

Blocks and navigation

This block combines the settings:

  1. Blocks — parts of a website page where elements are connected by a common frame.

  2. Banners navigation — setting up switches between banners in banner lines.

Blocks and navigation settings — Cartum

Pagination bullets in banners

Circle

Disk

Scroll arrows in banners

Arrow

Thin arrow

Outline button

Thin outline button

Button

Indented button

Triangle

Outline triangle

Product cards

In this block, you can configure certain general parameters for product cards. Namely: the color of the product rating stars, the color of the primary and promotional price.

Rating color and price settings — Cartum

Sticker settings

  • Stickers style — sets the style of sticker settings, 5 styles are available;

  • Show only first sticker — only one of the stickers set for the product will be displayed on the mini-card.

Other elements

In this block, you can choose the style of displaying the color of icons in the contact info blocks: color or monochrome (b/w).

Setting the color of contacts icons — Cartum

Did this answer your question?