Add fonts, spacing and design settings of your website

Information_box_for_English_articles.jpg

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.

To open the settings, click on the edit icon in the top right-hand corner next to "Unpublished Draft", click on the edit icon evenito.jpg

Bildschirmfoto_2020-10-28_um_08.53.28.png

Subsequently, an editing window opens with the following tabs:

Colour and design settings

Vollbild_21_01_22__10_52.png

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.

Main colors:

  • 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.

Boxen:

  • 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.

Contrasts:

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)

evenito.png

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. 

Content width

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.

Set fonts

Cursor_und_evenito.png

In the "Website Typography" tab you can define the font weight, size and line height and upload your fonts.

Please note: your fonts can be uploaded to evenito in .ttf, .woff or .woff2 format using the file manager.

  • Heading 1 refers to the event name in the header module.
  • Heading 2 influences the headings of the individual modules (e.g. "Free text", "Speakers", "Location" etc).
  • Heading 3 refers, for example, to the address of the location or the first and last names of the speakers.
  • Flow text refers to any text in the free text or description fields, such as the speaker titles and descriptions or the directions under "Location".

For the font size, you can choose between fine, normal, bold and extra-bold in the dropdown for your headings (1-3) as well as the body text. 

You can also define the font size via the dropdown. The unit is pt, i.e. point font. 

With the line height you can define the distance between the lines. You can also define this distance in the dropdown.

Please note:

The size for the desktop view can also be used for all other devices, i.e. tablet and smartphone. If you do not want to make individual adjustments, deactivate the switches under "Tablet" and "Mobile".

If you would like to individualize the tablet view in addition to the desktop view, for example, then activate the switch under "Tablet" and define the specifications listed above. These settings for the "Tablet" view will now also be applied to the mobile view. The switch for the mobile view remains deactivated. 

You want to customize only the desktop and mobile view, but not the tablet view? Then activate the toggle under "Mobile" and deactivate the toggle under "Tablet". This way, the settings for the desktop view will be applied to the tablet view and the individual settings for the mobile view will be applied.

Next step: Create website structure

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.