Styleguide

H1 Desktop

H1 Mobil

H1 Mobil

Produktteaser

Broschüre Desktop

Broschüre Mobil

Vorteilsteaser

FAQs

Kundenstimmen

Das könnte Sie auch interessieren

Formular Desktop

Formular Mobil

Rundum-sorglos Service Desktop

Rundum-sorglos Service Mobil

Videos

• Erstelle einen Container und benenne ihn um in „[Nummer] Mobil – H1 + Intro“
• In den Einstellungen dieses Containers soll die „Container Visibility“ auf „Small Screen“ gesetzt werden
• Erstelle in diesem Container eine Spalte und in diese Spalte das Modul „Image“
• Wähle das entsprechende Bühnenbild unter dem Reiter „Background“ für mobil aus
• Auf das Modul „Image“ folgt ein „Separator“ mit den Einstellungen:
  • General
    • Style: No Style
  • Design 
    • Margin nach oben: 40 px
• Setze darunter eine neue Spalte und füge dort das Modul „Title“ ein, in das die Überschrift gesetzt wird. Einstellungen für die Schrift unter Design sind folgende:
  • HTML Heading Tag: H1
  • Typography: Level 1
  • Font Color: Black
• Darunter wird eine neue Spalte mit folgenden Einstellungen gesetzt:
  • General:
    • Content Layout: Row
    • Content Alignment: Center
  • Design:
    • Padding nach rechts und links: 37 px
• In die Spalte wird für das Intro das Modul „Text Block“ eingefügt. Der Text erhält unter „Design“ beim Punkt Typography die Einstellung „Body“

• Erstelle einen Container
• In diesem Container wird eine Spalte erstellt und in diese Spalte wird das Modul „Title“ eingefügt. Für den „Title“ gelten folgende Einstellungen:
  • Design
    • HTML Heading Tag: H2
    • Typography: Level 2
• Darunter folgen drei „1/3 Nested Columns“. Jede Reihe hat mobil nach unten ein „Margin“ von 40 px
• Jede Reihe beginnt mit einem „Image“ und diese haben mobil nach unten jeweils ein „Margin“ von 30 px
• Auf das Bild folgt in jeder Reihe ein „Title“, die Einstellungen sehen wie folgt aus:
  • HTML Heading Tag: H3
  • Typography: Level 3
  • Mobil ein Margin nach links: 0 px
• Auf den „Title“ folgen je Spalte zwei „Text Blöcke“ und je ein „Button“, der zur Zielseite führt
• Für die Module „Text Block“ und den „Button“ wird unter „Design“ die Typography auf „Body“ gestellt

• Erstelle ein Container und in diesem Container ein „1/3 – 2/3 Nested Column“ und der Container erhält folgende Einstellungen:
  • General:
    • Interior Content Width: Site Width
    • Column Justification: Flex End
    • Column Spacing: 1 %
    • CSS ID: custom-info-block-gradient
  • Design:
    • Margin: 50px (beide)
    • Padding oben und unten: 64px
    • Container Link Color: Purple
  • Background:
    • Container Background Color: #E9E9E9
• In dem ersten Drittel wird das Bild der Broschüre angelegt, hierfür verwendet man ein „Image“ mit folgenden Einstellungen
  • 1/3 Nested Column
    • General:
      • Alignment: Flex End
      • Content Alignment: Space Evenly
    • Absolute Offset nach oben: -155px
  • Image
    • Design:
      • Image Max Width: 340px
      • Alignment: Left
• In das zweite Drittel wird ein „Title“ eingefügt, sowie ein „Text Block“ und ein „Button“
• Die Spalte bekommt folgende Einstellungen:
  • General:
    • Content Alignment: Center
• Einstellungen für den „Title“
  • Design:
    • HTML Heading Tag: H2
    • Typography: Level 3
    • Font Color: White
• Im „Text Block“ wird die „Typography“ auf „Body“ gesetzt und die „Font Color“ auf „White“
• Der „Button“ erhält folgende Einstellungen
  • Design:
    • Button Style: Custom
    • Gradient Start Color: rgba(242,108,8,0)
    • Gradient End Color: rgba(242,108,8,0)
    • Gradient End Position: 100
    • Gradient Angle: 180
    • Button Text Color: White
    • Button Border Size: 2 (überall)
    • Button Border Color: White
    • Button Size: Custom
    • Padding nach oben: 12px
    • Padding nach rechts: 48px
    • Padding nach unten: 11px
    • Padding nach links: 48 px
    • Typography: Body
• Auf das „1/2 Column“ folgt ein „1/1 Column“. In die Spalte wird ein CSS Code eingebunden [CSS Code aus dem Beispiel kopieren]
• Drauf folgt die Einbindung eines „Modals“
  • Name Of Modal: Entsprechenden Namen ergänzen, z. B. broschuere_anfordern_gerade_treppen_mobil
  • Contents of Modal: [HTML Code aus dem Beispiel kopieren]

• Erstelle ein Container und in diesem Container ein 1/3 – 2/3 Nested Column und der Container erhält folgende Einstellungen:
  • General:
    • Interior Content Width: Site Width
    • Column Alignment: Flex End
    • Column Justification: Flex End
    • Column Spacing: 1 %
    • Container Visibility: Small Screen
    • CSS ID: custom-info-block-gradient
  • Design:
    • Margin nach oben: 140px
    • Padding nach oben: 196px
    • Padding nach unten: 40px
  • Background:
    • Container Background Color: #E9E9E9
• In dem ersten Drittel wird das Bild der Broschüre angelegt, hierfür verwendet man ein „Image“ mit folgenden Einstellungen
  • 1/3 Nested Column
    • General:
      • Alignment: Flex start
      • Content Layout: Row
      • Content Alignment: Center
    • Design:
      • Margin nach oben: -155px
      • Margin nach unten: 0px
    • Extras:
      • Absolute Offset: -150px
  • Image
    • Design:
      • Image Max Width: 250px
      • Alignment: Left
• In das zweite Drittel wird ein „Title“ eingefügt, sowie ein „Text Block“ und ein „Button“
• Das Column bekommt folgende Einstellungen:
  • General:
    • Content Alignment: Center
• Einstellungen für den Title
  • Design:
    • HTML Heading Tag: H2
    • Typography: Level 3
    • Font Color: White
• Im „Text Block“ wird die Typography auf Body gesetzt und die Font Color auf White
• Der Button erhält folgende Einstellungen
  • Design:
    • Button Style: Custom
    • Gradient Start Color: rgba(242,108,8,0)
    • Gradient End Color: rgba(242,108,8,0)
    • Gradient End Position: 100
    • Gradient Angle: 180
    • Button Text Color: White
    • Button Border Size: 2 (überall)
    • Button Border Color: White
    • Button Size: Custom
    • Padding nach oben: 10px
    • Padding nach rechts: 30px
    • Padding nach unten: 9px
    • Padding nach links: 30px
    • Typography: Body
• Auf das 1/2 Column folgt ein 1/1 Column mit den Einstellungen:
• In das Column wird ein Code Block mit folgenden Zeilen notiert:
  
• Drauf folgt die Einbindung eines Modals
  • Name Of Modal: Entsprechenden Namen ergänzen, z. B. broschuere_anfordern_gerade_treppen_mobil
  • Contents of Modal: [HTML Code aus dem Beispiel kopieren] –

Beispiel ist mobil sichtbar

• Erstelle einen Container und in diesem Container eine Spalte mit dem Modul „Title“
• In dem „Title“ wird der Text für die Überschrift gesetzt und folgende Einstellungen vergeben
  • Design:
    • HTML Heading Tag: H2
    • Typography: Level 2
• Füge unter dem „Title“ eine weitere Spalte ein und in diese Spalte das Modul „Post Cards“
• Einstellungen für die Spalte sind folgende
  • Design:
    • Column Spacing: 0%
    • Margin: 0px
    • Padding nach oben und unten: 0px
    • Padding nach links: 38px
• Einstellungen für das Modul „Post Cards“
  • General:
    • Post Type: Beiträge
    • Posts By: Kategorien
    • Post Status: Veröffentlicht
    • Include Kategorien: Benefits
    • Exclude Kategorien: Kategorien
    • Number of Posts: 5
    • Order By: Menu Order
    • CSS ID: custom-postcart-gradient-border
  • Design:
    • Layout: Carousel
    • Number of Columns: 3
    • Transition Speed: 500
    • Show Navigation: Arrows
    • Margin nach oben: 0px
    • Margin nach unten: -40px
• Unter dem Modul „Post Cards“ folgt das Modul „Code Block“; der entsprechende Code kann aus dem Beispiel kopiert werden.

• Einen Container anlegen und dort zwei Columns einfügen
• Das erste Column ist für den „Title“, sofern einer benötigt wird
• Das zweite Column ist für das Modul „FAQ“, welches folgende Einstellungen erhält
  • General:
    • Display Filters: Hide
    • Number Of FAQ Posts: Individuelle Anzahl der FAQs, z. B. 5
    • Post Status: Published
    • Categories: Name der FAQs eintragen, z. B. FAQ Bewegungsspiele
    • Order: Ascending
  • Design:
    • Divider Line Color: #E9E9E9
    • Toggle Padding rechts und links: 10px
    • Title Tag: H3
    • Title Typography: Body
    • Icon Size: 24
    • Icon Color: Purple
    • Icon Boxed Mode: No
    • Icon Alignment: Right
    • Content Typography: Body
    • FAQ Toggle Hover Accent Color: #A31AFF
    • FAQ Toggle Active Accent Color: Purple

• Erstelle einen Container, der die folgenden Einstellungen erhält:
  • General:
    • Column Spacing: 0px
  • Design:
    • Padding nach unten: 64px
  • Background:
    • Container Background Color: Orange
• In den Container wird eine „1/2 Nested Column“ eingefügt und darin auf der linken Seite das Modul „Lightbox“ und auf der rechten Seite das Modul „Textblock“
• Die linke Spalte erhält folgende Einstellungen
  • General:
    • CSS ID: custom-image-fullsize
  • Background:
    • Background Color: Black
• Das Modul „Ligthbox“ erhält folgende Einstellungen
  • Thumbnail Image: Entsprechendes Bild auswählen
  • Content Type: Video
  • Video URL: Entsprechende URL hinterlegen
• Die rechte Spalte erhält folgende Einstellungen
  • General:
    • Alignment: Stretch
    • Content Alignment: Center
  • Design:
    • Padding nach rechts und links: 60px
  • Background:
    • Background Color: Orange
• In das Modul „Text Block“ auf der rechten Seite wird folgender Code vor dem Namen integriert: siehe Beispiel
  • Design:
    • Margin nach unten: 30px
    • Typography: Body
    • Font Color: White
• Es folgt in dieser Spalte ein weiterer „Text Block“ für das Zitat mit den Einstellungen:
  • Design:
    • Margin nach unten: 30px
    • Typography: Body
    • Font Color: White
• Nach den beiden „Text Blöcken“ wird das Modul „Button“ eingefügt mit den Einstellungen
  • General:
    • Button URL: Entsprechende URL ergänzen
    • Button Text: Entsprechenden Text ergänzen
  • Design:
    • Typography: Body
    • Button Span: Standard

• Erstelle einen Container, der die folgenden Einstellungen erhält:
  • General:
    • Column Spacing: 0px
  • Design:
    • Padding nach unten: 64px
  • Background:
    • Container Background Color: Orange
• In den Container wird eine „1/2 Nested Column“ eingefügt und darin auf der linken Seite das Modul „Lightbox“ und auf der rechten Seite das Modul „Textblock“
• Die linke Spalte erhält folgende Einstellungen
  • General:
    • CSS ID: custom-image-fullsize
• Das Modul „Ligthbox“ erhält folgende Einstellungen
  • Thumbnail Image: Entsprechendes Bild auswählen
  • Content Type: Video
  • Video URL: Entsprechende URL hinterlegen
• Die rechte Spalte erhält folgende Einstellungen
  • General:
    • Alignment: Stretch
    • Content Alignment: Flex Start
  • Design:
    • Margin nach oben: 0px
    • Padding nach oben und unten: 40px
    • Padding nach rechts und links: 20px
  • Background:
    • Background Color: Orange
• In das Modul „Text Block“ auf der rechten Seite wird folgender Code vor dem Namen integriert: siehe Beispiel
  • Design:
    • Typography: Body
    • Font Color: White
• Es folgt in dieser Spalte ein weiterer „Text Block“ für das Zitat mit den Einstellungen:
  • Design:
    • Typography: Body
    • Font Color: White
• Nach den beiden „Text Blöcken“ wird das Modul „Button“ eingefügt mit den Einstellungen
  • General:
    • Button URL: Entsprechende URL ergänzen
    • Button Text: Entsprechenden Text ergänzen
  • Design:
    • Typography: Body
    • Button Span: Standard

Beispiel ist mobil sichtbar

• Erstelle einen Container mit folgenden Einstellungen
  • Interior Content Width: Site Width
• Innerhalb des Containers wird ein „Nested Column“ gesetzt mit einem „Title“ für die Headline und die Einstellungen für die Überschrift sind:
  • Design:
    • HTML Heading Tag: H2
    • Typography: Level 2
• Darauf folgt eine weitere Spalte mit dem Modul „Post Cards“
  • General: 
    • Post Card: Feature Post custom
    • Post Type: Beiträge
    • Posts By: Kategorien
    • Include Kategorien: Feature Post
    • Exclude Kategorien: Kategorien
    • Number of Posts: z. B. 9
    • Order By: Menu Order
  • Design:
    • Layout: Carousel
    • Number of Columns: 3
    • Column Spacing: 30
    • Transition Speed: 500
    • Show Navigation: Arrows
    • Margin nach oben: -10px

• Erstelle einen Container mit folgenden Einstellungen
  • General:
    • Interior Content Width: Site Width
    • Column Alignment: Center
    • Column Justification: Flex Start
    • Container Visibility: Medium Screen, Large Screen
  • Design:
    • Margin nach unten: 50px
    • Padding nach oben und unten: 100px
  • Background:
    • Container Background Color: #E9E9E9
    • Background Image: entsprechendes Bild einfügen
    • Background Position: Center Top
    • Background Size: Cover
• In dem Container wird ein 1/2 Columns erstellt, wobei das linke frei bleibt
• Das rechte Column bekommt folgende Einstellungen
  • Design:
    • Column Spacing nach links: -6%
    • Column Spacing nach rechts: 0.2%
    • Padding: 64px (überall)
  • Background:
    • Background Color: White
• In dem rechte Column wird „Avada Form“ erstellt
  • General: 
    • Form: Hier wird das entsprechende Formular ausgewählt

• Erstelle einen neuen Container für das Formular für mobil mit folgenden Einstellungen
  • General:
    • Interior Content Width: Site Width
    • Column Alignment: Center
    • Container Visibility: Small Screen
  • Design:
    • Padding: 0px (überall)
  • Background:
    • Container Background Color: #E9E9E9
    • Background Image: Entsprechende Bild einfügen
    • Background Position: Left Top
    • Background Size: Cover
    • Background Blend Mode: Disabled
• Auch hier werden zwei 1/2 Columns erstellt, wobei das linke Column frei bleibt und das rechte mit Inhalten befüllt wird und folgende Einstellungen erhält
  • Design: 
    • Padding: 40px (überall)
    • Order: 2
• In das rechte Column wird das Modul „AVADA Form“ eingefügt
  • Form: Das entsprechende Formular auswählen
• Unterhalb der 1/2 Columns folgt ein 1/1 Column, das unter „Design“ die Einstellung 1 unter Order hat,
• Innerhalb des Columns folgt ein Image mit den Einstellungen
  • General:
    • Image Aspect Ratio: 16:9

Beispiel ist mobil sichtbar

• Erstelle einen Container und in diesem Container einen „1/2 Nested Column“, dabei erhält der Container folgende Einstellungen
  • General: 
    • Container Visibility: Small Screen auswählen
  • Design:
    • Margin nach oben und unten: 50px
    • Padding nach oben: 64px
    • Padding nach unten: 100px
• Auf die linke Seite wird das „1/2 Nested Column“ eingebunden
  • General:
    • Content Alignment: Center
  • Design:
    • Column Spacing nach rechts: 0%
    • Margin nach unten: 0px
    • Padding nach unten: 0px
• Innerhalb der Spalte wird das Modul „Title“ eingebunden, der folgende Einstellungen hat:
  • Design:
    • HTML Heading Tag: H2
    • Typography: Level 2
• Auf das Modul „Title“ folgt das Modul „Image“
  • General:
    • Image: Bild hinterlegen
• Es folgt das Modul „Checkliste“ mit diesen Einstellungen
  • Unter „Addd / Edit Items“ werden die Punkte ergänzt, die als Stichpunkte ausgegeben werden sollen
  • Unter „Select Icon“ das Häkchen auswählen
  • Icon/Number Color: Black
  • Icon/Number Circle: Nein
  • Icon/Number Circle Color: White
  • Text Color: Black
• Es folgt das Modul „Text Block“ mit den Einstellungen:
  • Design:
    • Margin nach oben, links und rechts: 0px
    • Typography: Body
    • Font Color: Black
• Auf das Modul „Text Block“ folgt das Modul „Button“ mit den Einstellungen
  • General:
    • Button URL: Ziel-URL einfügen
    • Button Text: Text einfügen
  • Desgin:
    • Button Style: Custom
    • Gradient Start Color: Purple
    • Gradient End Color: Purple
    • Gradient Angle: 180
    • Button Text Color: White
    • Button Type: Flat
    • Button Border Color: White
    • Padding nach oben: 12px
    • Padding nach rechts: 48px
    • Padding nach unten: 11px
    • Padding nach links: 48px
    • Typography: Body
    • Button Span: Ja
    • Margin nach oben: 20px
• Nach dem Button wird das Modul „Code Block“ eingefügt
  • Der entsprechende Code kann aus dem Beispiel-Modul entnommen werden

Beispiel ist mobil sichtbar

• Flexible Builder: Drag-and-drop page creation with granular control
• Global Settings: Central management of fonts, spacing, colors
• Reusable Elements: Save and reuse components across pages
• Responsive by Default: Mobile, tablet, desktop automatically handled

Every page element uses one of these predefined fonts. No hardcoding. No exceptions.

• Level 1 to Level 5 (not the same like H1, H2, H3, …)
• Body
• Location-Links

Hint: The TK bracket for the headlines will be included to the headlines 1 and 2 threw code for brand consistency.

Responsive font size threw css clamp definition.

• clamp(minimum, preferred, maximum);
• Example – Body
• clamp(18px, 1.8vw, 20px)

1. Open Element in Avada BuilderSelect the text element (heading or paragraph)
2. Go to Typography Settings (Design Tab)Look for „Font“ or „Typography“, then for the globus icon and dropdown in the element options
3. Select from Global Font ListChoose Level 1, 2, 3, 4, 5, Body, or Anchor Links
4. Save & PreviewAlways preview on mobile and desktop to check appearance

Dos:

• Use global fonts from dropdown
• Follow hierarchy (Level 1 for main title)
• Use Body for all paragraph text
• Check font on mobile/desktop

Don’ts:

• Hardcode custom font sizes
• Use Level 1 and 2 for body text
• Skip typography settings
• Create new custom fonts
• Mix fonts inconsistently
• Change global fonts

The container element has defined default settings for the padding.

You can change that in the builder by setting your own values in the design tab of the container settings.

Top: 1.5rem
Right: 30px
Bottom: 4vh
Left: 30px

The column element has defined default settings for the margins and spacing.

You can change that in the builder by setting your own values in the design tab of the column settings.

Top: 0.25rem
Bottom: 0.25rem

Spacing: 4%

The title element has defined default settings for the margins.
You can change that in the builder by setting your own values in the design tab of the column settings.

Margins:
Top: 36px
Right: 0px
Bottom: 4vh
Left: 0px

Margins Mobile:
Top: -10px
Right: 25px
Bottom: 2vh
Left: 25px

Do’s

• Use default spacing values
• Follow responsive breakpoints
• Keep column gaps consistent
• Use Title-Module templates
• Check alignment on all devices

Don’ts

• Add custom padding randomly
• Use different gaps per layout
• Override responsive defaults
• Create custom module spacing
• Forget to check mobile view

1. In Avada Page Editor, click „Library“
   Located in the left sidebar next to „New Element“
2. Browse by category
   Containers, Columns, Modules organized by type
3. Hover to preview
   See thumbnail of component before inserting
4. Click „Insert“ to add to your page
   Component inserted with all formatting intact

With naming convention

„1. Desktop – Hero“
„2. Key Benefits“
„3. Newsletter Signup“
Team clarity & efficiency

Without naming convention

„Container 1“ – What’s here?
„Copy of Section“ – Original or copy?
„Untitled“ – No context
Team confusion & errors

Format: [Number] [Optional: Desktop/Mobil] [Content Theme]

Example: 7. Desktop – Broschüre

Be Descriptive: Name should explain what content is in the container. Future you will thank you.

Use Consistent Format: Follow the structure [Number.] [Optional: Desktop/Mobil] [Content Theme] pattern on all pages.

Use Title Case: Capitalize first letter of each main word: “1. Desktop – Hero“

Name Containers, Not Columns: Focus on naming top-level containers. Columns follow parent container name.

1. Select the container element
   Click on the container in the page builder
2. Look for „Container Name“ or „Label“ field
   Usually in the top section of element options
3. Enter descriptive name
   Example: “1. Desktop – Hero“
4. Save and verify in page structure tree
   Name should appear in the backend structure view

Dos

• Name all major containers
• Follow the format
• Use clear, descriptive names
• Use Title Case
• Update names when moving content

Don’ts

• Leave containers „Untitled“
• Use generic names like „Row“ or „Box“
• Make names too long
• Use special characters or lowercase
• Duplicate names on same page