Im Bereich "Website-Design" können Sie Änderungen vornehmen, die sich auf Ihre gesamte Website auswirken. Sie können den Text, die Schaltfläche, die Bilder, den Hintergrund und die Navigation Ihrer Website widget über das Design-Panel anpassen. Auf diese Weise können Sie schnell und effizient umfassende visuelle Änderungen vornehmen, die Entwurfszeit verkürzen und den Stil Ihrer Website auf allen Seiten konsistent halten.
Um das Fenster "Website-Design" zu öffnen, klicken Sie in der Seitenleiste auf "Design". Wenn das Website-Theme-Panel geöffnet ist, wird die Leinwand automatisch auf 50% Ansicht minimiert, so dass die gesamte Leinwand sichtbar ist, während die Einstellungen für das Website-Theme angepasst werden. Wenn Sie zur 100 %-Leinwandansicht zurückkehren möchten, klicken Sie auf das Dropdown-Menü in der oberen Leiste und wählen Sie 100 % aus. Die Möglichkeit zum Vergrößern oder Verkleinern ist auch im Vorschaumodus verfügbar.
Hinweis
-
Änderungen, die Sie an bestimmten widget oder Seiten vornehmen, überschreiben die im Bereich "Website-Design" festgelegten Themen. Wir empfehlen Ihnen, sich zunächst für ein Website-Design zu entscheiden und dann Anpassungen an Teilen Ihrer Website vorzunehmen, die Sie hervorheben oder von den anderen abheben möchten.
-
Vor März 2023 wurde das Website-Design als „Globales Design“ bezeichnet.
In diesem Abschnitt können Sie den Text auf Ihrer Website sowohl für Texte als auch für Überschriften aller Größen (H1 bis H6) festlegen. Sie können den Stil und das Aussehen von Text auf Ihrer gesamten Website ändern. Sie können die Schriftart und -größe ändern sowie Einstellungen für normalen Text, Links und Titel auswählen.
Das Ändern der Schriftgröße, des Stils, der Farbe und anderer Änderungen wirkt sich auf zukünftige Absätze und andere Texttypen sowie aktuelle widget aus, die mit Website-Text verbunden sind und nicht manuell geändert wurden.
So konfigurieren Sie Thema-Text:
-
Klicken Sie im linken Bereich auf Design.
-
Klicken Sie auf den Pfeil neben Text.
-
Klicken Sie auf den gewünschten Texttyp. Die Optionen sind:
-
DFLT. Dadurch wird das Design für alle Texte in widget festgelegt, die keiner Überschrift oder dem Absatzformat zugewiesen sind, wie z. B. der Navigations- widget. Hier können auch die Farbe des Linktextes und die Unterstreichung eingestellt werden. Darüber hinaus haben Sie die Möglichkeit, das Erscheinungsbild von Verknüpfungen für verschiedene Zustände anzupassen, einschließlich des Standard-Verknüpfungsstatus, der Verknüpfunghoverund der angeklickten Verknüpfung.
-
PAR. Dadurch wird das Thema für das Text-Widget festgelegt.
-
Überschrift und Unterpositionen H1-H6.
-
-
Sie können die Schriftart, die Stärke, die Größe (für desktop/Tablet und Mobilgeräte, separat), die Farbe, das Schriftartformat, die Wegbeschreibung, die Zeilenhöhe, die Buchstabenabstände ändern und auf Alle Großbuchstaben setzen.
Wenn Sie Änderungen im Thema-Text-Bereich vornehmen, wird der gesamte Text auf der Website geändert, der nicht durch individuelle, benutzerdefinierte Stiländerungen außer Kraft gesetzt wird. Wenn an einzelnen Elementen manuelle Änderungen vorgenommen werden, überschreibt dies das Website-Thema und alle am Website-Thema vorgenommenen Änderungen wirken sich nicht mehr auf den Stil dieser Elemente aus. Dies ist bei den individuellen Stileinstellungen eines bestimmten Website-Elements der Fall, z. B. wenn Sie nur die Farbe des Textes in einem bestimmten H1-Widget auf der Arbeitsfläche ändern:
-
Und dann habe ich die Schriftartengröße von H1 im Website-Theme geändert, die Schriftartengröße von H1 ändert sich auch im H1- widget.
-
Und dann hat ich die Farbe von H1 im Website-Theme geändert, das geänderte H1 wird mit der Farbänderung nicht aktualisiert.
Sie können den Designtext im Text Einstellungen aktualisieren, indem Sie auf Design klicken und dann Text auswählen. Sie können auch auf ein Text-Widget klicken, um das Kontextmenü zu öffnen, auf das Dropdown-Menü für die Überschriftenauswahl klicken und Design aktualisieren auswählen. Dies öffnet die Einstellungen für den Designtext, in denen Sie Aktualisierungen vornehmen können.
Der Editor bietet eine Vielzahl von Schriftarten für Ihre Verwendung. Legen Sie eine Schriftart für den Thementext fest oder wählen Sie die Unterscheidung Ihres Textes, indem Sie mehrere verschiedene Schriftarten auf Ihrer Website verwenden.
So zeigen Sie die verfügbaren Schriftarten an und sehen, wie sie aussehen:
-
Klicken Sie in der Seitenleiste auf Design und dann auf Text.
-
Wählen Sie eine Schriftart aus dem Dropdown-Menü "Schriftart " aus.
Farben ermöglichen es Ihnen, eine Farbpalette zu definieren und die einzelnen Farben mit Farbeinstellungen mit einem oder allen widget zu verknüpfen. Die Farbe eines Elements, das mit den Designfarben verknüpft ist, wird automatisch aktualisiert, wenn die verknüpfte Farbe in den Einstellungen für die Designfarben geändert wird. Auf diese Weise können Sie schnell Farbänderungen vornehmen, was die Entwurfszeit verkürzt und sicherstellt, dass der Stil Ihrer Website auf allen Seiten konsistent ist.
Kontoinhaber haben automatisch Berechtigungen für das Website-Thema und können Thema-Farben bearbeiten, anzeigen und verwenden. Teammitglieder und Kunden, die keine Berechtigungen für das Website-Thema haben, können Thema-Farben anzeigen und verwenden, diese jedoch nicht bearbeiten.
So konfigurieren Sie Thema-Farben:
-
Klicken Sie in der Seitenleiste auf Design und wählen Sie dann den Pfeil neben Farben aus.
-
Klicken Sie auf das Pluszeichen neben Primär oder auf die Einstellungen, die Sie definieren müssen.
-
Geben Sie den HEX- oder RGB-Wert der gewünschten Farbe ein oder verwenden Sie das Pipetten-Tool, um eine Farbe auszuwählen.
Wiederholen Sie diese Schritte nach Bedarf für jede Designfarbe. Als nächstes müssen Sie die Farben mit widgetauf Ihrer Website verbinden.
Wenn für die Website oder Vorlage noch keine Farben verbunden sind, kann dies automatisch erfolgen. Der automatische Theme-Farbgenerator scannt Ihre Website und erkennt die am häufigsten verwendeten Farben. Es generiert eine Liste von Farben, aus denen Sie auswählen können, und sobald sie ausgewählt sind, werden diese Farben zu Ihren Themenfarben und werden mit Ihrem Website-Widget verbunden.
So konfigurieren Sie Designfarben automatisch:
-
Klicken Sie in der Seitenleiste auf Design und wählen Sie dann den Pfeil neben Farben aus.
-
Klicken Sie auf Designfarben festlegen.
-
Klicken Sie auf Für mich verbinden oder Ich verbinde es selbst.
-
(Fakultativ) Wenn Sie "Ich verbinde es selbst" ausgewählt haben, klicken Sie auf das Plus-Symbol neben jeder Farbe im Design-Bedienfeld und wählen Sie die Farben einzeln aus.
-
Wählen Sie aus, welche der generierten Farben Sie verwenden möchten.
-
Klicken Sie auf Save & Connect Colors.
Die Farben werden im Abschnitt „Farben“ des Bereichs „Website-Thema“ angezeigt.
So verbinden Sie ein widget mit einer Designfarbe:
-
Klicken Sie auf ein widget, um das zugehörige Einstellungsmenü zu öffnen.
-
Öffnen Sie die Farbeinstellungen und wählen Sie eine der Thema-Farben oben aus.
-
Wiederholen Sie diesen Vorgang bei Bedarf für andere Elemente.
-
(Fakultativ) Wenn Sie eine der Themenfarben bearbeiten müssen, klicken Sie auf das Stiftsymbol (
) und die Einstellungen für die Themenfarben werden geöffnet, in denen Sie die gewünschte Farbe bearbeiten können.
Sobald ein widget mit Designfarben verbunden ist, wird es automatisch aktualisiert, wenn die verknüpfte Designfarbe aktualisiert wird.
So benennen Sie Thema-Farben um:
-
Klicken Sie in der Seitenleiste auf Design und dann auf Farben.
-
hover über den gewünschten Farbnamen und klicken Sie auf das Stiftsymbol. (
-
Geben Sie einen neuen Namen ein.
Der neue Name wird automatisch gespeichert und erscheint, wenn Sie die Maus in der Farbauswahl über die Farbe bewegen.
Sie können alle widget trennen, die mit einzelnen Designfarben verbunden sind.
So trennen Sie eine widget:
-
Klicken Sie im Seitenbereich auf Design.
-
Klicken Sie auf Farben.
-
Klicken Sie auf das Symbol mit den drei horizontalen Punkten (
) neben dem Text Farben und wählen Sie Designfarben entfernen aus.
-
Wählen Sie aus, welche Farben entfernt werden sollen, und klicken Sie dann auf "Ausgewählte Farben entfernen".
In diesem Abschnitt können Sie den Stil der primären und sekundären Schaltfläche widget auf Ihrer Website definieren. Wählen Sie eines unserer Button-Layouts aus und legen Sie den Text, die Hintergrundfarbe, den Rahmen, den hover Status, die Ecken und die Schattenstile fest.
Um die Schaltfläche "Zurück zum Anfang" auf dem Handy auszublenden, aktivieren Sie den Schalter im Abschnitt "Website-Layout".
In diesem Abschnitt können Sie den Hintergrundstil für Ihre Website festlegen. Sie können als Hintergrund eine Farbe oder ein Bild auswählen. Wählen Sie ein Hintergrundbild aus der Bildergalerie aus oder laden Sie Ihre eigenen Bilder hoch, um Ihre Website individuell zu gestalten. Die Änderungen gelten auch für die Desktop- und Tabletansicht.
Hinweis
Weitere Informationen zu den Hintergründen von Website-Elementen finden Sie unter Element-Hintergründe.
So passen Sie den Hintergrund Ihrer Website an:
-
Klicken Sie im linken Bereich auf Design, und klicken Sie dann auf den Pfeil neben Hintergründe.
-
Klicken Sie auf Standardhintergrund.
-
Klicken Sie entweder auf die Registerkarte Farbe oder Bild oder wählen Sie eine Farbe für den Website-Hintergrund aus oder laden Sie ein Bild hoch.
-
(Fakultativ) Klicken Sie auf den Schalter Dieses Bild nicht optimieren, um die Optimierung zu verhindern (diese Einstellungen werden angezeigt, nachdem ein Bild ausgewählt wurde).
So passen Sie den Hintergrund pro Seite an:
-
Klicken Sie im linken Bereich auf Design, und klicken Sie dann auf den Pfeil neben Hintergründe.
-
Klicken Sie auf Hintergrund pro Seite.
-
Wählen Sie eine Seite aus dem Dropdown-Menü aus und wählen Sie ein Bild oder eine Farbe für die entsprechende Seite aus.
-
(Fakultativ) Klicken Sie auf den Schalter Dieses Bild nicht optimieren, um die Optimierung zu verhindern (diese Einstellungen werden angezeigt, nachdem ein Bild ausgewählt wurde).
Legen Sie das Navigationslayout der Website für Desktops, Tablets und Mobilgeräte fest. Für die Desktop-Version können Sie zwischen zwei Breiten wählen: 960 Pixel oder 1.200 Pixel.
Änderungen am Navigationslayout beeinflussen oft das Verhalten des Headers und der übrigen Website. Wenn der Header nach dem Ändern eines Layouts fehlerhaft angezeigt wird, sollten Sie es mit einem anderen Layout probieren.
Sie können das Layout Ihrer desktop -Website in ein Seitenleistenlayout ändern. Das Seitenleisten-Layout zeigt die Kopfzeile an der Seite der Website an (entweder links oder rechts) und ist ein großartiges Design tool um Ihrer Website ein einzigartiges Aussehen zu verleihen. Der Header der Seitenleiste fungiert auch als Sticky Header, sodass er immer auf dem Bildschirm angezeigt wird, und Sie können widget auch wie jedes andere Zeilenblatt in die Seitenleiste einfügen.
Hinweis
-
Wenn Sie von einem traditionellen Website-Layout zu einem Seitenleisten-Layout wechseln, behält die Kopfzeile das Logo bei, und alle widget , die Sie hatten, werden entfernt (ähnlich wie beim Wechsel des Kopfzeilenlayouts in der oberen Kopfzeile). Die Hintergrundfarbe wird entsprechend dem von Ihnen ausgewählten Layout geändert.
-
Der verkleinerte Header lässt sich nicht für die Seitenleistennavigation verwenden. Die Seitenleiste wird auch beim Scrollen der Website stets angezeigt.
-
Bei Bildschirmen mit einer Breite unter 1090 Pixel wird der Inhalt der Seitenleiste bis auf das erste Bild ausgeblendet. Stattdessen wird ein Symbol zum Vergrößern des Menüs angezeigt. Sie können die Farbe der angezeigten Schaltfläche zum Öffnen im Designeditor ändern.
So ändern Sie das Website-Layout in ein Seitenleisten-Layout:
-
Klicken Sie im linken Bereich auf Design und dann auf den Pfeil neben Website-Layout.
-
Wählen Sie das Layout der Seitenleiste aus, Sie können Zeilen, Drag & Drop widget in die Kopfzeile der Seitenleiste einfügen und anpassen.
Um das Design der Kopfzeile der Seitenleiste zu bearbeiten, hover über die Seitenleiste und klicke oben rechts auf Seitenleiste . Sie können eines der verschiedenen Header-Layouts der Seitenleiste auswählen, die Sie auf Ihre Website anwenden möchten, es auf der linken oder rechten Seite des Bildschirms anzeigen, die Breite definieren und vieles mehr.