Style Guide

Typografie
Edit

Um die Schriftfamilie und die Farbe zu bearbeiten, die global auf allen Typenelementen verwendet werden, wählen Sie das Element Body und bearbeiten Sie die Klasse Body (All Pages).

FONT
Dies ist die globale Schriftart, die auf der Website verwendet wird.

Edit

Um die globale H1-Klasse zu bearbeiten editieren Sie die Klasse ALL H1 Heading.

H1
Dies ist die Hauptüberschrift der Seite, verwenden Sie sie nur einmal, im Hero-Abschnitt.

Edit

Um die globale H2-Klasse zu bearbeiten, editieren Sie die Klasse ALL H2 Heading.

H2
Verwenden Sie dies als Überschrift für Ihre verschiedenen Abschnitte auf der ganzen Seite.

Edit

Um die globale H3-Klasse zu bearbeiten bearbeiten Sie die ALL H3 Heading-Klasse.

H3
Verwenden Sie dies für die Titel Ihrer verschiedenen Elemente in Ihren Abschnitten, z. B. Schlüsselvorteile oder Dienstleistungen.

Edit

Um die globale H4-Klasse zu bearbeiten bearbeiten Sie die ALL H4 Heading-Klasse.

H4
Verwenden Sie dies für die Titel Ihrer verschiedenen Elemente in Ihren Abschnitten, z. B. Schlüsselvorteile oder Dienstleistungen.

Edit

Um die globale Absatzklasse (P) zu bearbeiten, bearbeiten Sie die Klasse ALLE Absätze.

PARAGRAPHS
Use paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between them clarify when one paragraph ends and another begins.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Edit

To edit the Small Paragraph class edit the Large-P class.

LARGE PARAGRAPH
Manchmal brauchen Sie einen großen Absatz, z. B. unter Ihrem Hero-Abschnitt, um der Überschrift einen Kontext zu geben.

Edit

To edit the Small Paragraph class edit the Small-P class.

SMALL PARAGRAPH
Manchmal möchten Sie einen kleineren Text haben, z. B. wenn Sie Geschäftsbedingungen erwähnen, dann können Sie diese Klasse immer dann verwenden, wenn Sie einen Text mit niedriger Hierarchie benötigen.

Edit

Um die Farbe der Klasse Light-Text zu bearbeiten, bearbeiten Sie die Klasse Light-Text.

LIGHT TEXT COLOR
Manchmal benötigen Sie Ihren Text auf einem dunklen Hintergrund, so dass Sie diese leichte Textklasse auf alle Ihre Typenelemente anwenden können

Edit

Um die in einem Rich-Text-Element eingebetteten Typ-Elemente zu bearbeiten, markieren Sie den Text und bearbeiten Sie die in Rich-Text eingebettete Klasse ALL Heading

Achten Sie darauf, dass Sie die Option "Nest-Selektor" aktivieren.

RICH TEXT

You'll be using Rich Text elements on dynamic content like blog posts. Wenn Sie Überschriften und Textstile benötigen, die sich vom Rest Ihrer Website unterscheiden, können Sie sie hier bearbeiten.

H1 Heading innerhalb eines Rich Text

H2 Heading innerhalb eines Rich Text

H3 Heading inside a Rich Text

Dies ist ein Absatzelement innerhalb eines Rich Text.

Edit

Um Änderungen an der Größe der Sprechblasen und der linken Polsterung vorzunehmen, bearbeiten Sie die Klasse List.

LIST

  • Wenn Sie einmal eine Liste mit Punkten haben, die Sie erledigen müssen
  • Es ist besser, ein Listenelement zu verwenden
  • The SEO for your site will benefit
Farbe
Edit

Markieren Sie die Hintergrundfarbe, die Sie bearbeiten möchten, und klicken Sie auf EDIT SWATCH (Stiftsymbol).

Dark Color

Primary Brand Color

Secondary Brand Color

Mid Green Color

Blue

Light Color

Weiß

Red
↪Lo_Cf_200D↩

Buttons
Edit

Um die Größe und das Padding aller Tasten zu bearbeiten, bearbeiten Sie die Klasse Button.

Spezifische Änderungen am Ghost-Button, wie Hintergrundfarbe & Rand, sollten in der Klasse Ghost-Button vorgenommen werden.

Um die nativen Textlinks zu bearbeiten, bearbeiten Sie die Klasse ALL Links

Änderungen an den Farben der inversen Tasten können durch Bearbeiten der Klassen Inverse Combo vorgenommen werden.

FORMS
Edit

Um die verschiedenen Elemente zu bearbeiten, indem Sie die klassifizierten Start mit Form markieren

Vielen Dank! Ihre Einreichung wurde empfangen!
Oops! Beim Absenden des Formulars ist etwas schief gelaufen.
Layout Elements
Edit

Um die linke und rechte Padding auf allen Abschnitten zu bearbeiten, wählen Sie den obersten Abschnitt auf dieser Seite aus und bearbeiten Sie die Klasse Section-Padding

SECTION PADDING

Jeder Ihrer Abschnitte sollte die Klasse Section-Padding enthalten, um sicherzustellen, dass die Abschnitte gleichmäßig gepolstert sind und Ihre Elemente die Ränder des Bildschirms nicht berühren.

Edit

Um die Max-Breite des Containerelements zu bearbeiten, wählen Sie auf dieser Seite den obersten Container aus und bearbeiten Sie die Klasse Container

CONTAINER

Jeder Abschnitt auf der Seite sollte einen Container haben, in dem der Hauptinhalt innerhalb einer maximalen Breite zentriert bleibt, um die Lesbarkeit und Konsistenz zu verbessern.

Popups
Edit

Um den Inhalt des Popups zu bearbeiten, klicken Sie auf das Symbol und bearbeiten Sie die Texte / Links aus dem Override-Panel.

Um das Design des Popups zu bearbeiten, doppelklicken Sie auf das Symbol to edit styling / elements

Um das Popup auf anderen Seiten zu verwenden, kopieren Sie das Popup-Background-Wrap-Element von dieser Seite (einschließlich des Symbols innen).

Um die offene Animation zu bearbeiten, wählen Sie den untenstehenden Button und bearbeiten Sie das Open-Popup auf dem Interaktionspanel.

Open Popup