Skip to main content
All CollectionsLanding PagesLanding Page Editor
Styles Settings for Landing Pages
Styles Settings for Landing Pages

All styles settings are explained here.

Anni Wild avatar
Written by Anni Wild
Updated over a week ago

You can use the Styles menu to implement your corporate identity in the Editor. The Styles menu offers you numerous options to create emails according to your wishes or design specifications.

How to find the Styles Menu:

The following descriptions will help you to understand the individual style settings.

The styles are organized in the following categories:

  • Background

  • Border

  • Button

  • Collapsible

  • Color

  • Forms

  • Global Settings

  • Gradient

  • Grid

  • List

  • Modal

  • Navbar

  • Offcanvas

  • Offcanvas Item

  • Section

  • Separator

  • Shadow

  • Slider

  • Spacing

  • Tab

  • Table

  • Text

  • Tooltip

  • Video


Background

***Coming Soon***


Border

You can add border lines for sections, containers, grids and slideshow items. In the respective component settings, you can select the border type under "Border" and define the pages to which the border line should be added. There are a total of five border types, which you can design differently in the Styles Menu.

Border: Size

Here you specify the width of the frame line for the selected end device. You determine the color and style of the line in the component settings of the respective element.


Button

The Styles Menu offers numerous options for designing buttons according to your wishes and ideas. There are a total of three button types (Variant) that you can design in the Styles Menu. You can also define three different sizes for the buttons (Large, Medium, Small). Each size can be adapted to all end devices. You can select the type of button and its size in the component settings of the button.

Button: Border Radius

Regardless of the button type, you can define three button sizes (Large, Medium, Small). Here you determine the thickness of the rounding at the corners. Enter 0px for pointed edges. For a rounded button, enter a maximum of 25px.

Button: Font Size

Specify a suitable font size for each individual button size. Also adjust the font size to the different devices.

Button: Height

Each button can have a different height. Define them here.

Button: Icon Spacing

In the component settings of the button, an icon can be added next to the text in the button. You can select the distance between the icon and the text here.

Button: Horizontal Spacing

Select the horizontal spacing next to the text in the button. The larger the spacing, the longer the button will be.

Button: Background Color

Select a button color or background color for the respective button type. If you are not satisfied with the colors displayed in the drop-down menu, you can freely select six colors and several shades of grey under Colors.

Button: Border Color

A button can have a frame line. Define the color of the frame. If you want a button without a frame, click on the small cross in the input field.

Button: Border Width

Here you define the thickness of the frame line in the form of a pixel specification.

Button: Text Color

Determine a font color for the text in the button.

Button: Font Family

Select a font for the text in the button.

Button: Font Weight

Specify the width of the font. Choose between bold, normal and thin.

Button: Letter Spacing

Define the space between the individual letters of the text in the button.

Active: Background Color

Currently has no function because there are no active state buttons.

Active: Border Color

Currently has no function because there are no active state buttons.

Active: Text Color

Currently has no function because there are no active state buttons.

Hover: Background Color

As soon as a user moves his cursor over the button, a new background color of the button can appear.

Hover: Border Color

When a user moves his mouse over the button, the frame lines can have another color.

Hover: Text Color

The font color of the text in the button can appear in a new color as soon as the button is hovered over.

Button: Border Radius

Determine the thickness of the rounding at the corners. For a pointed edge, enter 0px. For a rounded button, enter a maximum of 25px.

Button: Font Size

Determine the size of the font for the text in the button.

Button: Height

Select the height for your button. Enter a pixel size.


Color

Define a total of nine colors as well as black, white and grey tones. You can enter a color code or select a color using the color picker.


Forms

For example, you can create registration, application or booking forms. The form components can be customized.

Check: Border Radius

Here you determine the rounding of the checkbox. Select 0px for a square checkbox and 11px for a round checkbox.

Check: Icon

As soon as you click on a checkbox, an icon appears, such as a tick. Upload a suitable icon and then select it here.

Check: Icon Size

The pixel size of the symbol can be entered here. This setting only applies to the checkbox.

Check/Radio: Background Color

Select a background color for the checkbox. This setting relates to the "Checkbox" and "Radio Group" components.

Check/Radio: Border Color

Select a color for the frame line of the checkbox. This setting relates to the "Checkbox" and "Radio Group" components.

Check/Radio: Border Width

You can determine the width of the frame line here. It relates to the "Checkbox" and "Radio Group" components.

Check/Radio: Label Spacing Left

A distance can be defined between the checkbox and the corresponding title. This relates to the "Checkbox" and "Radio Group" components.

Check/Radio: Checked Background Color

As soon as the checkbox is clicked, the field can appear in a new background color. This setting relates to the "Checkbox" and "Radio Group" components.

Check/Radio: Checked Border Color

When a user clicks on the checkbox, the frame line can change color. This setting relates to the "Checkbox" and "Radio Group" components.

Datepicker: Background Color

Define a background color for the menu in which a user can select a date.

Datepicker: Border Color

You can also specify a color for the frame line of the menu.

Datepicker: Border Bottom Width

Define the width of the bottom frame line. If you do not want a frame line, enter 0px.

Datepicker: Border Left Width

Define the width of the left frame line. If you do not want a frame line, enter 0px.

Datepicker: Border Right Width

Define the width of the right frame line. If you do not want a frame line, enter 0px.

Datepicker: Border Top Width

Define the width of the top frame line. If you do not want a frame line, enter 0px.

Datepicker: Date Border Color

Determine the width of the border line for the individual fields. Select 0px if you do not want a frame.

Datepicker: Date Border Color

Determine the width of the border line for the individual fields. Select 0px if you do not want a frame.

Datepicker: Date Range Background Color

To visualize a time period, e.g. within a booking form, an additional background color can be selected.

Datepicker: Date Range Text Color

To visualize a time period, e.g. within a booking form, the data can appear in a new color.

Datepicker: Active Background Color

As soon as a user has selected a date, the selected field can be marked with a background color.

Datepicker: Active Border Color

If a user has selected a date, the selected field can be marked with a frame line.

Datepicker: Active Text Color

As soon as a date is clicked, the date can appear in a second font color. Select this here.

Datepicker: Hover Background Color

A specific field can be given a new background color by hovering.

Datepicker: Hover Border Color

As soon as a user moves their cursor over a field, the field can be given a frame line.

Datepicker: Hover Text Color

The font color of the field can also be changed by hovering.

Datepicker: Today Background Color

The current date can be highlighted using a different background color.

Datepicker: Today Border Color

The current date can also be highlighted with a border line.

Datepicker: Today Text Color

You can determine the font color of the field with the current date.

Error Message: Background Color

If a user does not fill in all fields, they will be notified. Set the background color of the pop-up menu here.

Error Message: Text Color

You can select the font color for the error message text here. The menu appears if not all fields have been filled in.

Error Message: Font Size

You can also specify the font size for the error message text here.

Error Message: Line Height

Specify the line height for the error message text here. The menu appears if not all fields have been filled in.

Form Field: Horizontal Spacing

**currently no function**

Form Field: Vertical Spacing

**currently no function**

Form Field: Right Spacing of Check/Radio

Add a space on the right-hand side of the check box or radio group.

Form Field: Spacing Bottom

Determine the distance down to the next shape element.

Input: Background Color

Set a background color for all input fields.

Input: Border Bottom Width

Add a frame line below the input fields. Define the thickness of the frame line here.

Input: Border Color

Here you specify the color of the frame line.

Input: Border Left Width

Here you specify the color of the frame line.

Input: Border Radius

The input fields can have rounded corners. For rounded corners, select 15px, for example. For pointed edges you can enter 0px.

Input: Border Right Width

Add a frame line on the right-hand side of the input field. Determine the thickness in pixel size.

Input: Border Style

The frame line can have different styles: Solid (solid line)m dotted (dotted line) and dashed (dashed line).

Input: Border Top Width

Add a frame line above the input fields. Define the thickness of the frame line here.

Input: Font Family

Here you can select a font for the entries.

Input: Multiselect Item Background Color

***Coming Soon***

Input: Multiselect Item Border Color

***Coming Soon***

Input: Placeholder Color

Determine the color of the placeholder. A placeholder is particularly suitable for input fields.

Input: Select Delete Icon Color

***Coming Soon***

Input: Text Color

Select a font color for the text that is typed into an input field.

Input: Text Area Min Height (in Lines)

Determine the height of the text field. This setting relates to the "Text Area" component.

Input: Disabled Background Color

***Coming Soon***

Input: Disabled Border Color

***Coming Soon***

Input: Disabled Placeholder Color

***Coming Soon***

Input: Disabled Text Color

***Coming Soon***

Input: Disabled Background Color

***Coming Soon***

Input: Error Border Color

***Coming Soon***

Input: Error Placeholder Color

***Coming Soon***

Input: Error Text Color

***Coming Soon***

Input: Focus Background Color

***Coming Soon***

Input: Focus Border Color

***Coming Soon***

Input: Focus Placeholder Color

***Coming Soon***

Input: Focus Text Color

***Coming Soon***

Input: Font Size

For the "Input", "Text Area", "Select" and "Multi Select" components, one of three sizes can be selected in the component settings. The font size, for example, can be defined for each size. You can also make individual adjustments for each device.

Input: Height

Define the height of the input fields for all three sizes and for each end device here. This setting relates to the "Input", "Text Area", "Select" and "Multi Select" components.

Input: Letter Spacing

You can define the spacing between the individual letters here. This setting relates to the "Input", "Text Area", "Select" and "Multi Select" components.

Input: Horizontal Spacing

You can add a space between the left-hand side of the input field and the text section. You can define the spacing individually for the Large, Medium and Small sizes and for all devices.

Label: Interactive Active Color

***Coming Soon***

Label: Text Color

Determine the font color of the label. This is the title of each input field.

Label: Font Size

Select a font size for the title above or next to an input field.

Label: Font Style

The font of the label can be displayed normally or in italics.

Label: Font Weight

Set the font size of the title above or next to an input field here.

Label: Letter Spacing

You can define the spacing between the individual letters here. This setting refers to the label of a field.

Label: Line Height

Select a line height for the label. Specify a pixel size for this.

Label: Spacing Bottom

Select a distance between the title and the corresponding input field.

Label/ Error Message: Font Family

Here you define a font for the text of the label and for the text of the error message.

Progress: Color

***Coming Soon***

Progress: Height

***Coming Soon***

Radio: Border Radius

The checkbox of the radio component can be square or round. For a rectangular field, enter 0px. For a round field, enter 11px.

Upload: Background Color

The checkbox of the radio component can be square or round. For a rectangular field, enter 0px. For a round field, enter 11px.

Upload: Border Color

You can add a frame line to the upload field. Define a color for the frame line here.

Upload: Border Style

The frame line can appear in a specific style. Choose between solid (solid line), dashed (dashed line) and dotted (dotted line).

Upload: Text Color

The upload field contains a short text for the user. Give the text a font color.

Upload: Font Family

Select a font for the text in the upload field here.

Upload: Font Weight

Set the width of the text here.

Upload: Letter Spacing

Small spaces can be added between the individual letters.

Upload: Active Background Color

***Coming Soon***

Upload: Active Border Color

***Coming Soon***

Upload: Active Text Color

***Coming Soon***

Upload: Border Radius

Some styles can be created individually for each end device. For example, for the rounding of the frame lines of the upload field. For a rectangular field, enter 0px. For rounded corners, enter 15px, for example.

Upload: Border Width

The width of the frame line can also be defined separately for each device.

Upload: Font Size

Define a font size for the text in the upload field. The font size can be set individually for all devices.

Upload: Line Height

Determine the line height for the text in the upload field. This can be set separately for each end device.

Upload: Spacing

Define the height of the upload field here. The height can be set differently for each device.

Upload: Preview Background Color

As soon as a document has been uploaded, a new field appears in which the document is located. Specify the background color of the field here.

Upload: Preview Text Color

As soon as a document has been uploaded, it is displayed in a small preview window. The file name is also displayed there. Specify the font color here.

Upload: Preview Unknown Media Icon

***Coming Soon***

Upload: Preview Remove Icon Color

***Coming Soon***


Global Settings

Here you can define the scrolling behavior of the landing page and specify general settings.

Background Scrolling Behavior

You can choose between the scrolling styles scroll and fixed. The selected background image does not move with fixed, for example. You can select the background image here.

Background Horizontal Position

***Coming Soon***

Background Vertical Position

***Coming Soon***

Background Repeat

***Coming Soon***

Background Size

***Coming Soon***

Background Image

Select an image that can cover the background of an entire landing page. For example, if you select in the component settings of a section that it should not have a background color, the image is displayed.

Body Background Color

***Coming Soon***

Default Text Color

***Coming Soon***

Scroll Snap Alignment

***Coming Soon***

Scroll Snap Type

***Coming Soon***

Container Width

The width of the container component can be determined individually for each end device.

Container Width Large

***Coming Soon***


Gradient

You can define six gradient styles. A color gradient is generated from your two selected colors.

Angle

***Coming Soon***

Color 1

***Coming Soon***

Color 2

***Coming Soon***


Grid Gap

As soon as you use a grid element, you can select a grid gap in different sizes in the component settings. This sets a distance between the individual grid items.

You can define three sizes for the grid gap and determine the distances for each end device separately.


List

You can add bullet lists in the text editor. Here you can choose whether the bullets should be small dots (unordered) or, for example, sorted by number (unordered). You can find further adjustments to the tally lists here.

Ordered: Level 1 Bullet

You can determine the style of the bullet point. Choose between decimal (digits), decimal leading zero (digits with a 0 at the beginning), lower alpha (no letters), lower roman (small Roman numerals), upper alpha (large letters) or upper roman (large Roman numerals).

Ordered: Level 2 Bullet

You can determine the style of the bullet character for the first indent separately. Choose between decimal (digits), decimal leading zero (digits with a 0 at the beginning), lower alpha (no letters), lower roman (small Roman numerals), upper alpha (large letters) or upper roman (large Roman numerals).

Ordered: Level 3 Bullet

You can also determine the style of the bullet character for the second indent separately. Choose between decimal (digits), decimal leading zero (digits with a 0 at the beginning), lower alpha (no letters), lower roman (small Roman numerals), upper alpha (large letters) or upper roman (large Roman numerals).

Unordered: Level 1 Bullet

You can determine the style of the bullet point. Choose between square (small square), circle (small circle) or disc (small filled circle).

Unordered: Level 2 Bullet

You can determine the style of the bullet point for the first indent separately. Choose between square (small square), circle (small circle) or disc (small filled circle).

Unordered: Level 3 Bullet

You can also determine the style of the bullet point for the second indent separately. Choose between square (small square), circle (small circle) or disc (small filled circle).

Image Bullet Size

Regardless of the type of bullet, you can define a separate size for the bullets for each device.


Modal

With the "Intent Modal" component, you can integrate any number of pop-ups. Many styling functions are available to you. The default settings apply to every pop-up, regardless of the modal size. You can also select a size (large, medium, small) for each modal in the modal's component settings. In the Styles menu, you can customize the pop-up for all sizes and for all end devices. This ensures that the pop-up is smaller in the mobile version, for example.

Backdrop Color

As soon as the pop-up appears, a color may appear behind the menu. Select it here. You can also choose transparent so that the contents of the landing page are displayed in the background.

Default: Background Color

Choose a color for the pop-up.

Default: Inner Border Color Color

***Coming Soon***

Default: Inner Border Style

***Coming Soon***

Default: Inner Border Width

***Coming Soon***

Default: Outer Border Color

Set a frame line around the pop-up and select the corresponding color.

Default: Outer Border Style

The frame line can take on different styles. Choose between solid (solid line), dashed (dashed line) and dotted (dotted line).

Default: Outer Border Bottom Width

Select how thick the bottom frame line should be. If you do not want a frame line, enter 0px.

Default: Outer Border Left Width

Select how thick the left frame line should be. If you do not want a frame line, enter 0px.

Default: Outer Border Right Width

Select how thick the right frame line should be. If you do not want a frame line, enter 0px.

Default: Outer Border Top Width

Select how thick the top frame line should be. If you do not want a frame line, enter 0px.

Default: Closer Color

The cross to close the pop-up can take on its own color.

Default: Closer Size

You can determine the size of the cross. Enter a pixel size here.

Default: Closer Icon Strength

You can also define the strength of the cross here.

Default: Title Color

***Coming Soon***

Large/Medium/Small: Border Radius

Here you specify whether the edges of the pop-up should be rounded. For square edges, enter 0px. For rounded edges, enter 10px, for example. You can adjust this setting separately for the modal sizes and for each device.

Height

Determine the height of the pop-up. Make sure that the pop-up is displayed smaller in the mobile view. Note that you can adjust this setting separately for the modal sizes and for each end device.

Horizontal Spacing

This is the distance between the left and right side of the pop-up and the content components inside. You can adjust this setting separately for the modal sizes and for each device.

Vertical Spacing

This is the distance between the top and bottom of the pop-up and the content components inside. Note that you can adjust this setting separately for the modal sizes and for each end device.

Width

This is where you define the width of the pop-up. The width can be defined differently for each modal size and for each device.


Navbar

With the navigation component, you can add navigation to your landing page so that you can link to subpages. The navbar can be styled in a variety of ways.

Background Color

Select a background color for the navigation component. For transparent navigation, click on the cross in the field.

Border Style

The frame line can take on different styles. Choose between solid (solid line), dashed (dashed line) and dotted (dotted line).

Content Background Color

In addition to the background color, the navigation can take on a second background color, which appears in the content field (in the middle).

Switch to Burger Navigation

Navigation is difficult to display on narrow screens. A burger menu is therefore recommended. Instead of the entire navigation, an icon is displayed so that the navigation can be expanded. Decide from which end device the burger menu should appear.

Spacing Inside Container

***Coming Soon***

Spacing Outside

Define an individual spacing for the left and right side. The greater the spacing, the closer the navigation items move together.

Border Bottom Width

You can add a frame line below the navigation. Select the color of the frame line here.

Burger: Active Color

As soon as the burger menu is open, a cross appears instead of the three dashes to close it. Choose a color for the cross here.

Burger: Icon Color

Select a color for the burger icon.

Burger: Icon Line Spacing

Define a distance between the three lines here.

Burger: Line Width

You can specify the thickness of the three lines here.

Burger: Width

You can determine the general width of the burger icon here. The smaller the width, the narrower the icon.

Dropdown: Alignment

The subpages listed in the drop-down menu can be displayed right-aligned, left-aligned or centered.

Dropdown: Background Color

The background color is displayed as soon as the drop-down menu opens. Click on the cross if you want a transparent background.

Dropdown: Show Arrow Indicator

Click on true if you want an arrow to be placed at the top of the drop-down menu. Select false if you do not want an arrow.

Dropdown: Indicator Size

Here you define a size for the arrow.

Dropdown: Border Radius

The expanded menu can have rounded corners. For rounded corners, select 15px, for example. For pointed edges, you can enter 0px. This setting can be entered separately for each device.

Dropdown: Vertical Spacing

Set a spacing at the top and bottom of the menu. Large spacings make the menu longer. This setting can be defined separately for each device.

Dropdown Item: Text Color

Select a font color for the linked subpages listed in the drop-down menu.

Dropdown Item: Font Weight

Select a font weight for the linked subpages, which are listed in the drop-down menu.

Dropdown Item: Letter Spacing

You can choose a space between the individual letters.

Dropdown Item: Variant

***Coming Soon***

Dropdown Item: Active Background Color

As soon as a website user clicks on a subpage within the dropdown, the background of the item can change color. To prevent the color from changing, simply select the same background color.

Dropdown Item: Active Hightlight Color

***Coming Soon***

Dropdown Item: Active Text Color

As soon as a website user clicks on a subpage within the dropdown, the font color of the item can change. To prevent the color from changing, simply select the same font color.

Dropdown Item: Hover Background Color

The background of an item can change when hovering. Select the color here.

Dropdown Item: Hover Hightlight Color

***Coming Soon***

Dropdown Item: Hover Text Color

The font color of an item can change when hovering. Select the color here.

Dropdown Item: Hightlight Width

***Coming Soon***

Dropdown Item: Font Size

Specify a font size for the listed subpages. This setting can be defined separately for each device.

Dropdown Item: Height

This is the distance between the individual drop-down items. This setting can be defined separately for each device.

Dropdown Item: Horizontal Spacing

Set a spacing on the left and right side of the dropdown menu. Spacing makes the menu wider. This setting can be defined separately for each device.

Height

Determine the height of the entire navigation bar. You can determine the height separately for each end device.

Logo: Height

Define the size of the logo that is displayed in the navigation.

Navbar: Font Family

Determine the font of all navigation items.

Scrolled: Background Color

***Coming Soon***


Offcanvas

The off-canvas menu appears in the mobile view, for example, as soon as you click on the burger icon and the navigation is expanded.

Alignment

The linked subpages in the offcanvas menu can be listed left-aligned, right-aligned or centered.

Backdrop Color

***Coming Soon***

Background Color

Set a background color for the offcanvas menu that appears as soon as you click on the burger icon.

Outer Spacing

***Coming Soon***


Offcanvas Item

These are the linked subpages within the offcanvas menu. The offcanvas menu appears, for example, in the mobile view as soon as you click on the burger icon and the navigation is expanded. In the component settings of the navigation link component, an item can be displayed standardized (default style) or as a button (CTA style). You can design both item styles in the Styles menu.

Font Family

Define a font for all linked subpages within the Offcanvas menu.

CTA: Background Color

A navigation item can be displayed as a CTA button in the component settings. Select a background color for the CTA button here.

CTA: Text Color

Choose a font color for the text in the CTA button of the navigation.

CTA: Font Weight

Define a font size for the text in the CTA button of the navigation.

CTA: Letter Spacing

Spaces can be set between the characters of the text in the CTA button.

CTA Active: Background Color

As soon as a website user clicks on the button within the navigation, the background can change color. To prevent the color from changing, simply select the same background color as here.

CTA Active: Text Color

As soon as a website user clicks on the button within the navigation, the font color can change. To prevent the color from changing, simply select the same font color as here.

CTA Hover: Background Color

Set the changing background color for the CTA button in the offcanvas menu here. The color changes when hovering. To prevent the color from changing, simply select the same background color as here.

CTA Hover: Text Color

Hovering can be used to highlight buttons within the offcanvas menu. For example, this can change the font color. To prevent the color from changing, simply select the same font color as here.

CTA: Font Size

Enter the font size for the offcanvas item in CTA style here. The size can be adjusted separately for each end device.

CTA: Height

Determine a height for all CTA buttons in the offcanvas menu. The height can be determined separately for each end device.

CTA: Horizontal Spacing

Horizontal spacing can be set around the button text. This makes a button longer. The spacing can be determined individually for each device group.

Default: Background Color

This is the background color for the offcanvas item. If you do not want a background color, click on the cross so that the background becomes transparent.

Default: Text Color

Select a font color for the offcanvas item.

Default: Font Weight

Set a font weight for the offcanvas item.

Default: Letter Spacing

There may be small spaces between the individual letters. Define the spacing here. This refers to the offcanvas item.

Default: Variant

You can choose between three different styles for the offcanvas item: Default (new font color on hover), Highlight (new font color and horizontal stroke on hover) and Underline (new font color and vertical stroke on hover)

Default: Font Size

Enter the font size for the offcanvas item that becomes visible as soon as you expand the offcanvas menu.

Default: Height

Determine the height of the individual off-canvas items. This gives you a vertical distance between the individual items.

Default: Horizontal Spacing

***Coming Soon***

Default: Highlight Width

If you have selected Highlight or Underline under "Variant", a vertical or horizontal line is displayed for the offcanvas item. Determine the thickness of the line here.

Default Submenu: Font Size

***Coming Soon***

Default Submenu: Item Height

***Coming Soon***

Default Active: Background Color

As soon as you have clicked on an Ofdfcanvas item, a background color may appear around the item. Select this here. If you do not want this effect, click on the cross to select a transparent background.

Default Active: Text Color

As soon as you have selected an offcanvas item, the font color can change. Determine this color here. If you do not want this effect, you can simply select the same text color.

Default Active: Highlight Color

If you have selected Highlight or Underline under "Variant", a vertical or horizontal line is displayed for the off-canvas item. If you click on an item, the color of the line can change. Determine the color of the line here.

Default Hover: Background Color

By hovering over the offcanvas item, this can be marked with a new background color. Select it here or click on the cross to select a transparent background color.

Default Hover: Text Color

As soon as you hover over an offcanvas item, it can appear with a new font color. Select it here. If you do not want this effect, simply select the same font color as here.

Default Hover: Highlight Color

If you have selected Highlight or Underline under "Variant", a vertical or horizontal line is displayed for the offcanvas item. Specify the color of the line that appears when hovering here.


Separator

A separator can be used to separate content with a horizontal line. You can select three different separator styles in the component settings of the separator and design them in the Styles menu.

Variant: Line Color

Determine a separate color for each separator.

Content Width

In the component settings of the separator, you can place an image in the middle of the line. Select the width or size of the image here.

Line Height

Define the thickness of the line.

Content Spacing

In the component settings of the separator, you can place an image in the middle of the line. Determine the distance between the image and the line here.


Shadow

In the component settings of the text component, you can select one of three text shadows and design them in the Styles menu. Glow effects for images can also be selected and defined.

Glow: Color

***Coming Soon***

Glow: Size

***Coming Soon***

Text Shadow: Color

Shadows can be added in the component settings of the text component. Here you determine the color of the shadow.

Text Shadow: Size

Specify the size of the shadow here. The larger the shadow, the paler the color. You can set the size for each device group.


Slider

You can use a slideshow/slider to rotate content in the form of a carousel. Add as many slideshow items as you like and style the slider in the Styles menu.

Arrow: Rounded Field

In the component settings of the slideshow container, you can choose whether the user should use arrows to switch between slides. These arrows can be surrounded by a circle (true) or a rectangle (false).

Arrow: Background Color

The field around the arrows can appear in any color. If you do not want a field, click on the cross so that the field becomes transparent.

Arrow: Border Radius

If you have selected false or the rectangle under "Rounded Field", you can add rounded corners here.

Arrow: Area Size

Specify a size for the field around the arrow here. This size has no influence on the size of the arrow.

Arrow: Icon Color

Determine the color of the arrow here.

Arrow: Icon Size

Set a size for the arrow.

Arrow: Icon Strength

Select here how thick the arrow should be.

Arrow: Left/Right Spacing

Here you can determine the horizontal positioning of the arrows. The higher the value, the closer the left and right arrows move together.

Navigation Style

***Coming Soon***


Spacing

You can set spacings in numerous component settings. You can define these spacing values here.

Section Spacing 1-5

You can set five separate spacing values for the section component.

Spacing 1-9

Define a total of nine spacing values here. These spacings can then be selected in the component settings for Grid, Grid Item and Container, among others.


Tab

Using the tab mechanism, you can divide multiple content, such as images or text sections, into any number of tabs. A user can then switch between the tabs, similar to browser tabs. You can style the tab buttons extensively here.

Button: Font Family

Determine the font for the title of a tab item.

Button: Font Weight

Determine the font size for the title of a tab item.

Button: Letter Spacing

Spacings can be placed between the letters of the title of a tab item.

Button: Style

The title of the tab item can be displayed in two different styles: Default (without effects) or Underline (with a vertical line below the title)

Button: Border Radius

The tab containing the title can have rounded corners. The larger the value, the rounder the corners will be.

Button: Border Width

Select the thickness of the tab frame.

Button: Font Size

Define the font size for the title of the tab item here. The size also has an influence on the entire tab button.

Button: Height

Here you determine the vertical height of the tab button.

Button: Highlight Width

If you have selected underline under "Button Style", you can define the thickness of the line here.

Button: Spacing Between

You can select an individual distance between the tab buttons. You can also define this spacing for each device.

Button: Horizontal Spacing

Select a horizontal space around the title of the tab item. This makes a tab item longer.

Button Style: Background Color

You can choose between two tab button styles in the component settings. Select a background color for the tab button here.

Button Style: Border Color

You can choose between two tab button styles in the component settings. Select a frame color for the tab button here.

Button Style: Text Color

You can choose between two tab button styles in the component settings. Select a font color for the tab button here.

Button Style: Active Background Color

You can choose between two tab button styles in the component settings. Select a font color for the tab button here.

Button Style: Active Border Color

Select a frame color for the tab button here. This frame color is displayed when the button is clicked.

Button Style: Active Text Color

Definiere eine Schriftfarbe für den Titel des Tab-Button. Diese Farbe wird dargestellt, wenn der Button angeklickt wurde.

Button Style: Hover Background Color

Specify a background color for the tab button here. This background color is displayed when you hover over the button.

Button Style: Hover Border Color

Select a frame color for the tab button here. This frame color is displayed when you hover over the button.

Button Style: Hover Text Color

Define a font color for the title of the tab button. This color is displayed when you hover over the button.


Table

You can use tables with the text editor. To do this, you first need a section and a text component. You can define the design of your tables in the Styles menu.

Background Color

Select a background color for the entire area within the table. The background color is also visible as soon as you use a dotted or dashed frame.

Border Color

Define a color for the frame. The frame is displayed on the left and right sides.

Border Style

You can select a frame style. There are the options dotted (dotted line), dashed (dashed line) and solid (solid line).

Font Family

Choose a font for the texts in the table.

Border Width Left/Right

In addition to the body frame, you can insert another frame on the left and right side. If you do not need a frame, enter 0px.

Border Width Top/Bottom

In addition to the body frame, you can add another frame above and below the frame. If you do not need a frame, enter 0px.

Body: Background Color

A row can be displayed as a body in the associated properties. Here you can select a background color for all body lines.

Body: Border Color

Define a color for the frame. The frame is displayed on the sides of the body cells.

Body: Border Style

You can select a frame style. There are the options dotted (dotted line), dashed (dashed line) and solid (solid line).

Body: Text Color

Specify a font color for the texts in the individual body cells.

Body: Font Weight

You can give the text in the body cells a specific font size.

Body: Letter Spacing

You can select a distance between the individual characters in the table text here. This relates to the texts of the body cells.

Body: Border Width Left/Right

Select a thickness for all vertical frame lines. Enter a pixel value here. This refers to the frame lines of the body cells. You can adjust the setting for each end device.

Body: Border Top/Bottom

Select a thickness for all horizontal frame lines. Enter a pixel value here. This refers to the frame lines of the body cells. You can adjust the setting for each device.

Body: Cell Height

Here you can determine the height of the body cells. Enter a pixel value here. You can adjust the setting for each end device.

Body: Horizontal Cell Spacing

Within a body cell, you can define a horizontal spacing around the text area. You can adjust the setting for each end device.

Body: Font Size

Give the text in the individual body cells a suitable font size. You can adjust the setting for each device.

Body: Row Highlight Color

As soon as a user clicks in a cell, the corresponding row can appear in a new color. Specify the highlight color here. If you do not want to use this setting, select the same color as the background color here.

Header: Background Color

You can use a horizontal or vertical row as a header. To do this, select the desired cells, click on the table icon in the text editor, go to Row Properties and select "Header off" as the row type. Define a separate background color for the header in the Styles menu.

Header: Border Color

You can build another frame around the header area to make it stand out. Select a color for the frame lines here.

Header: Border Style

You can select a frame style. There are the options dotted (dotted line), dashed (dashed line) and solid (solid line).

Header: Text Color

Determine a font color for the text in the header.

Header: Font Weight

Give the text in the header a font weight.

Header: Letter Spacing

Select a space between the individual letters in the header text.

Header: Border Width Left/Right

Determine the thickness of the left and right frame line of the header. Enter a pixel value here.

Header: Border Width Top/Bottom

Determine the thickness of the top and bottom frame line of the header. Enter a pixel value here.

Header: Cell Height

Here you can define the height of the cells in the header. Enter a pixel value here.

Header: Horizontal Cell Spacing

Within a cell in the header, you can define a horizontal spacing around the text area.

Header: Font Size

You can specify a separate font size for the text in the header.


Text

Here you can style all text elements. You can design the six headlines H1 to H6 according to your wishes. You can also define the design of bar lists here.

Headline: Default Color

Choose a font color for each individual headline.

Headline: Font Family

Here you can specify a custom font for each individual heading. You must first enter a custom font family in the top bar under "Fonts".

Headline: Font Weight

Here you can give the headline a font weight. You can enter a numerical value here (100 (very thin) to 900 (very thick)) or choose between normal and bold.

Headline: Letter Spacing

A space can be added between the letters. Enter a pixel value here.

Headline: Font Size

Define the font size of the individual headlines here. The font size can be created separately for each device group.

Headline: Line Height

Select a line height for the headings. The line height can be created separately for each device group.

Headline: Margin Bottom

Spacing can be set below the heading. If your heading spans several lines, the spacing is also set between the lines. This setting can be created separately for each device.

Link: Text Decoration

A linked area can be automatically marked with a bottom line to distinguish it from the rest of the content. Choose between underline (bottom line), overline (top line), line-through (crossed-out line) and none (no lines).

Link: Text Color

As soon as a text is linked using the text editor, it can appear in a different color. You can set the font color for linked texts here. If you do not want to use this setting, type inherited in the field.

Link: Hover Color

A linked text can appear in a different color as soon as the user hovers over it. Select the hover color here. If you do not want to use this setting, type inherited in the field.

Link: Hover Decoration

When a user hovers over a linked word, a bottom line can be displayed. Choose between underline (bottom line), overline (top line), line-through (crossed-out line) and none (no lines).

List Item: Default Color

Determine a font color for the tally lists. You can add tally lists using the text editor.

List Item: Font Family

Here you can select a custom font for the text in the line list. You must first save the custom font family in the top bar under "Fonts".

List Item: Font Weight

Define a font size for the texts of the tally lists.

List Item: Letter Spacing

A space can be added between the letters. Enter a pixel value here.

List Item: Font Size

Enter a font size for the text in the line list. You can adjust the size for each device.

List Item: Line Height

Select a line height for the individual bullet points. The setting can be adjusted for each device.

List Item: Margin Bottom

Set a specific spacing below each stitch point.

Paragraph: Default Color

The paragraph can appear in its own color. You can select it here.

Paragraph: Font Family

Here you can specify a custom font for the paragraph (the continuous text). You must first save the custom font family in the top bar under "Fonts".

Paragraph: Font Weight

Here you can give the paragraph a font weight. You can enter a numerical value here (100 (very thin) to 900 (very thick)) or choose between normal and bold.

Paragraph: Letter Spacing

A space can be added between the letters. Enter a pixel value here.

Paragraph: Font Size

Assign a font size to the paragraph. The size can be set for each device group.

Paragraph: Line Height

Select a line height for the paragraph. You can adjust the height for each device.

Paragraph: Margin Bottom

Spacing can be set below the paragraph. If the paragraph spans several lines, the spacing is also set between the lines.

Small: Default Color

The inline can appear in its own color. You can select it here.

Small: Font Family

Here you can specify a custom font for the inline text. You must first enter a custom font family in the top bar under "Fonts".

Small: Font Weight

Here you can specify a font weight for the inline text. You can enter a numerical value here or choose between "normal" and "bold".

Small: Letter Spacing

A space can be added between the letters. Enter a pixel value here.

Small: Font Size

Assign a font size to the inline text. The font size can be defined separately for each end device.

Small: Line Height

Select a line height for the inline text. You can adjust the height for each device.

Small: Margin Bottom

Spacing can be set below the inline text. If the inline text spans several lines, the spacing is also set between the lines. The spacing can be set for each device group.


Tooltip

You can activate the tooltip feature for various elements in the corresponding component settings. These include, for example, the form components, images and buttons. A tooltip is a small pop-up window that appears when you hover over the element.

Arrow Color

The pop-up window is displayed with an arrow. Choose a color for the arrow here.

Background Color

The field containing the tooltip text can have its own background color. You can select this here.

Border Color

Choose a color for the frame lines around the small pop-up window.

Border Radius

The pop-up window can have rounded corners. For example, enter 12px or 0px for pointed edges.

Text Color

Define a font color for the text in the tooltip.

Font Weight

Here you can specify a font weight for the text.

Letter Spacing

A space can be added between the letters. Enter a pixel value here.

Arrow Size

Determine the size of the arrow here. The size can be determined separately for each device.

Border Width

Enter the thickness of the frame line here. You can enter the thickness of the frame line for each device. Enter 0px here if you do not want any frame lines.

Font Size

Here you specify the font size for the tooltip text. You can adjust the size for each device group.

Line Height

Select a line height for the text in the tooltip. You can determine the height for each device.

Spacing Horizontal

Add a horizontal space around the text. This makes the tooltip longer.

Spacing Vertikal

Add a vertical space around the text. This makes the tooltip higher.


Video

In addition to images and GIFs, you can also add video files to a landing page. To do this, use the video component and upload a video from your desktop.

Main Color

***Coming Soon***

Did this answer your question?