Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
CMS-General

Inspektor verwenden, um Ihre Vorlage zu gestalten

Zuletzt aktualisiert am: November 21, 2018

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Nachdem Sie Ihre Vorlage strukturiert und einige Standardinhalte hinzugefügt haben, ist es an der Zeit, sich über die Gestaltung Ihrer Website Gedanken zu machen. 

Der Inspektor befindet sich rechts im Design-Manager. Hier können Sie die Eigenschaften von Layouts, Modulen und Gruppen bearbeiten sowie Module zu einem Drag-and-Drop-Layout hinzufügen. Verwenden Sie für die Gestaltung Ihrer Vorlage den Inspektor:

  • Stylesheets oder JavaScript-Dateien an Ihre Vorlage anhängen
  • HTML-Markup für Kopf- oder Fußzeile zu Ihrer Vorlage hinzufügen
  • Benutzerdefinierte CSS-Klassen und Inline-Styling für ein bestimmtes Modul oder eine bestimmte Gruppe hinzufügen

Kopfzeilen- und Textoptionen Ihrer Vorlage anpassen

Wenn Sie auf Ihre Vorlage im Design-Manager zugreifen, wird der Layout-Inspektor auf der rechten Seite angezeigt, wenn keine Module ausgewählt sind. Die im Layout-Inspektor vorgenommenen Änderungen wirken sich auf die gesamte Vorlage aus. Hier können Sie die Kopfzeilen- und Textoptionen Ihrer Vorlage anpassen.

Stylesheets und JavaScript-Dateien anhängen

Klicken Sie in den Optionen „Verlinkte Stylesheets“ und „Verlinkte JavaScript-Dateien“ auf „Hinzufügen“, um ein Stylesheet oder eine JavaScript-Datei auszuwählen, die an die Vorlage angehängt wird. Sie können in der Dropdown-Liste „Domain-Stylesheets“ auswählen, ob Sie diese einschließen oder ausschließen oder Standard-Domain-Stylesheets verwenden möchten.

Weitere Informationen zur Erstellung und Bearbeitung von CSS-Dateien für die Gestaltung Ihrer Website finden Sie hier..

HTML-Markup für Kopf- oder Fußzeilen hinzufügen

In den Feldern „Zusätzliches -Markup“ und „Zusätzliches Markup vor “ können Sie das HTML-Markup für Kopf- oder Fußzeilen hinzufügen, das auf die Vorlage angewendet wird.

Eine Klasse oder ein Inline-Styling zur Vorlage hinzufügen

Im Feld „Body-Klassen“ können Sie eine Klasseneigenschaft zur Vorlage hinzufügen. Im Feld „Inline-Body-Styling“ können Sie dem HTML-Text der Vorlage auch Inline-Styling hinzufügen.

Styling-Optionen für Ihr Modul oder Ihre Gruppe anpassen

Wenn Sie ein bestimmtes Modul in Ihrer Vorlage auswählen, wird der Modul-Inspektor angezeigt. Wenn Sie eine Gruppe von Modulen in Ihrer Vorlage auswählen, wird der Gruppen-Inspektor angezeigt. Der Inspektor ermöglicht es Ihnen, die Styling-Optionen des Moduls oder der Gruppe anzupassen.

Die verfügbaren Styling-Optionen variieren, je nachdem, ob Sie ein E-Mail-Vorlage-Modul, ein Seitenmodul oder eine Modulgruppe personalisieren. Das Beispiel unten zeigt die Styling-Optionen, die für ein Rich-Text-Modul in einer Seitenvorlage verfügbar sind.

CSS-Klasse hinzufügen

Mit der Eigenschaft „HTML-Klasse“ können Sie in Ihren Vorlagen Klassen für Module zuweisen, damit diese mithilfe von CSS gestaltet werden können. Obwohl Ihre Vorlage bereits über zahlreiche Standardklassen verfügt, geben benutzerdefinierte Klassen Designern mehr Kontrolle über das Aussehen einer Vorlage und bewahren gleichzeitig die Flexibilität des Drag-and-Drop-Layout-Editors.  

Im obigen Beispiel wird dem Feld „CSS-Klasse“ im Rich-Text-Modul die Zeichenfolge „bio“ hinzugefügt. Dies fügt dem Container-Div-Tag (einem HTML-Tag, der einen Bereich oder einen Abschnitt einer Seite angibt) des Moduls die HTML-Eigenschaft class="bio" hinzu. Diese bio-Klasse oder Elemente in dieser Klasse können jetzt gezielt in Ihrem Vorlagen-Stylesheet verwendet werden.

Bitte beachten: Verwenden Sie diese Option nicht in E-Mail-Vorlagen, da die Styling-Tags von einigen E-Mail-Clients nicht unterstützt werden.

In Ihrem Vorlagen-Stylesheet können Sie den zu gestaltenden Container-Div gezielt verwenden, indem Sie Ihre benutzerdefinierte Klasse auswählen und verschiedene CSS-Eigenschaften anwenden. Zum Beispiel kann, um dem Modul über bio-Klasse eine Hintergrundfarbe hinzuzufügen, CSS-Code wie im folgenden Beispiel geschrieben werden:

.bio {
background: #CCCCCC;
}

Sie können in Ihrem Modul nicht nur den Container-Div bearbeiten, sondern auch spezifische Elemente. Um dies zu tun, können Sie verschachtelte oder direkt nachfolgende Selektoren verwenden. Zum Beispiel kann, um den gesamten Absatztext im Modul in der bio-Klasse gezielt zu verwenden, ein verschachtelter CSS-Selektor wie im folgenden Beispiel geschrieben werden:


.bio p {
color: #000000;
}

Inline-Styling hinzufügen

Inline-Styling ist CSS-Code, der in Ihre HTML-Tags geschrieben wird. Durch das Hinzufügen von CSS-Eigenschaften und -Werten im Feld „Inline-Styling“ für ein Modul oder eine Gruppe wird Code auf das Modul oder Gruppen-Container-Div angewendet.

Im Beispiel oben werden „margin“ und „color“ verwendet, um die Abstände und die Farbe des Moduls anzupassen. Dadurch wird die HTML-Eigenschaft „style="margin-top:30px; color: #00349e;““ dem Container-Div-Tag des Moduls hinzugefügt.

Diese Option kann hilfreich sein, um Fehler in einer bestimmten Seitenvorlage zu beheben, ist jedoch weniger flexibel als die Verwendung des Felds „CSS-Klasse“, da Sie die Code-Änderungen innerhalb einzelner Module vornehmen müssen, anstatt in einem globalen Vorlagen-Stylesheet.

E-Mail-Clients sind in ihren HTML- und CSS-Renderingfunktionen stärker eingeschränkt als moderne Webbrowser. Daher stellt Inline-Styling die beste Option dar, damit Ihre E-Mails von vielen E-Mail-Clients unterstützt werden. E-Mail-Vorlagen-Module bieten weitere benutzerfreundliche Optionen für das Hinzufügen von Inline-Styling (siehe unten).

Wrapping-HTML hinzufügen

Obwohl der Drag-and-Drop-Layout-Editor keinen vollständigen Zugriff auf das HTML-Markup einer Vorlage bietet, können Sie zusätzlichen Wrapping-HTML-Code um bestimmte Module hinzufügen. Diese Option ist für Designer konzipiert, die zusätzliche Kontrolle über den HTML-Code einer Vorlage benötigen, jedoch auch von der Flexibilität des Drag-and-Drop-Layout-Editors über eine HTML-Vorlage für Rohdaten profitieren möchten.

Um diese Funktion zu implementieren, fügen Sie Ihr HTML-Markup und das HTML-HubL-Token (zum Rendern des Codes des Moduls) in das Feld „Wrapping-HTML“ ein. Das ältere Beispiel zeigt ein HTML5