As soon as you have defined the structure of your website and the individual settings of the widgets, you can save the colour and design settings and upload your custom fonts.
In the following article:
To open the settings, click on the edit icon in the top right-hand corner next to "Unpublished Draft", click on the edit icon .
Subsequently, an editing window opens with the following tabs:
Colour and design settings
The "Website Theme" tab is divided into the 3 areas "Main Colors", "Boxes" and "Contrasts", in which subsequent properties can be adjusted with HEX codes.
In the preview on the right side you can check your adjustments in real time.
- Buttons are displayed in the primary color.
- The secondary color is only applied to the titles of the individual modules such as program, location, registration, etc.
- The main background color refers to the individual building blocks - without any boxes or set contrasts.
- In addition, you can store the color of the main text, which refers to the body text.
- The "Background around the boxes" refers to those widgets, which displays the content in additional boxes. This includes, for example, the "Registration" and "Schedule" widgets (Layout 1 & 2).
- The "Background color in the box" can also be defined individually.
- If you activate the toggle "Flat boxes", the box is displayed without border/shadow. By the border the box is optically somewhat lifted off.
To apply the contrasts on the website, please activate the toggle first. In the area that opens now you can make the following settings:
- With the help of the field "Contrast background color" you can define define the contrast for all those blocks in which the toggle "Contrast" has been activated. More information can be found in the desired modules.
- So that also the font of the respective widgets, in which the "Contrast Background" was applied well readable, you can set the corresponding color in the field "Contrast Text Color".
Spacing (margin & padding)
The "Website Grid" tab offers you the option of changing the spacing, for example, between or within the widgets. You can differentiate between horizontal and vertical alignment.
On the scale, you have values between 0 and 12 at your disposal. 0 suggests the smallest distance, while 12 represents the largest distance.
- Outer Margin: With these two buttons you define under "horizontal" how large the outer distance of the widget, i.e. from the website edge to the widget, should be. Under "vertical" you define the outer distance of the individual blocks to the top or bottom.
- Inner Margin: Use the slider under "horizontal" to define the distance between the content (e.g. text, images or videos) on the left and right to the edge of the widget. With the help of the switch under "vertical" you can adjust the distance within the blocks upwards and downwards.
- Padding between blocks: This slider gives you the ability to add a space between the widgets on your website (upwards and downwards). Unlike the Outer Margin ("Vertical"), the spacing is not applied to the Navigation, Header or Footer elements.
The listed settings above are largely available for the mobile website grid, analogous to the desktop and table version:
- Outer Margin (vertical & horizontal)
- Padding between modules
Only the "Inner Margin" is not for your disposal in this version.
You want to see how the spacing looks like in the mobile version? Switch to the mobile view using the smartphone icons in the preview area on the far right.
For both the mobile and desktop/tablet views, you can see directly in the preview how your adjustments affect the structure of your website.
You would like to undo your settings? Then click on the button "Reset to default".
Please note: all adjustments apply to all widgets. It is currently not possible to make changes only for specific modules.
In the next step, define the width of your website within the tab "Website Grid". For this you have three pixel sizes:
- 960p x,
- 1,280 px,
- 1,920 px.
- Another option is not to limit the width of the website.
The width is predefined by default predefined with 1,280 px.
Please note: even if you set the width of the content or your website e.g. to 1,280 px, you can still display the content of the individual modules to the full width. This is useful for the header, for example.
Using the "Website Typography" tab, you define the font weight and can upload your fonts. For the font weight you can choose for your headlines, and the body text between fine, normal, bold and extra-bold.
Please note: your fonts can be saved using the file manager in the formats .ttf, .woff or .woff2 in evenito can be uploaded.
Next step: Create website structure