Website-Thema – Duda Support

Um mehr über das Website-Thema zu erfahren, besuchen Sie die Duda University

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.

Text des Themas

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.

Designtext konfigurieren

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.

Designtext aktualisieren

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.

Schriftart Library

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. Informationen zum Hinzufügen einer benutzerdefinierten Schriftart zu Ihrer Website finden Sie unter Benutzerdefinierte Schriftart.

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.

Benutzerdefinierte Schriftart

Sie können benutzerdefinierte Schriftarten aus der Google Schriftart-Bibliothek hinzufügen oder benutzerdefinierte Schriftartdateien (TTF, OTF, EOT, WOFF2 oder WOFF) hochladen. Um eine optimale Leistung zu erzielen, wird empfohlen, beim Hinzufügen von benutzerdefinierten Schriftarten WOFF- oder WOFF2-Dateien zu verwenden.

Hinweis

Wenn Sie nur einen .otf oder .ttf Datei verwenden, empfehlen wir, einen externen tool wie FontSquirrel zu verwenden, um sie in das gewünschte Format zu konvertieren.
Um die Vorschriften der DSGVO einzuhalten, werden benutzerdefinierte Schriftarten aus unserem CDN geladen, ohne dass die Google Fonts API aufgerufen werden muss.
Wenn Sie eine Website als Vorlage speichern, enthält sie alle benutzerdefinierten Schriftarten, die hinzugefügt wurden.
Wenn Sie eine Website zurücksetzen, werden benutzerdefinierte Schriftarten entfernt.

Benutzerdefinierte Schriftart hinzufügen

So fügen Sie eine benutzerdefinierte Schriftart hinzu:

Sie können benutzerdefinierte Schriftarten an einem der folgenden Orte hinzufügen:
- Klicken Sie im Seitenbereich auf Design und dann auf Text. Erweitern Sie den gewünschten Textabschnitt. Klicken Sie neben der Liste Schriftart auf das Symbol Schriftart hinzufügen und verwalten ().
- Klicken Sie im Designeditor eines widgetfür jedes Textelement auf das Symbol Schriftart hinzufügen und verwalten ().
Wählen Sie eine der folgenden Optionen aus:
- Google Schriftart. Wählen Sie eine Schriftart aus der Liste Google Schriftart aus. Die Schriftart wird in der Liste Hinzugefügte Google-Schriftart unten angezeigt. Um eine Schriftart zu entfernen, klicken Sie auf das X neben der Schriftart in der Liste. Bitte beachten Sie, dass in der Liste möglicherweise bereits die Schriftart angezeigt wird, die der Vorlage hinzugefügt wurde. Es wird empfohlen, die Vorlage Schriftart nicht zu entfernen.
- Custom Schriftart. Klicken Sie auf Schriftart hochladen, um eine benutzerdefinierte Schriftart-Datei hochzuladen. Es können mehrere Schriftarten gleichzeitig ausgewählt werden. Um eine Schriftart zu entfernen, klicken Sie auf das X neben der Schriftart in der Liste.
Klicken Sie auf Fertig.

Die Schriftart wird der Liste der Schriftarten auf der gesamten Website hinzugefügt.

Hinweis

Adobe-Schriftarten werden nicht in der Schriftartenliste angezeigt. Sie müssen die Schriftfamilie zum Code hinzufügen.

Benutzerdefinierte Schriftart entfernen

Wenn Sie eine Schriftart entfernen, die derzeit auf der Website verwendet wird, wird der Text auf die Standardschriftart zurückgesetzt. Sie können die Standardschriftart nicht entfernen.

So entfernen Sie benutzerdefinierte Schriftarten von einer Website:

Klicken Sie im Seitenbereich auf Design und dann auf Text. Erweitern Sie den Textabschnitt, der die benutzerdefinierte Schriftart verwendet. Klicken Sie neben der Liste Schriftart auf das Symbol Schriftart hinzufügen und verwalten ().
Klicken Sie auf das X neben der Schriftart in der Liste, um die Schriftart von der Website zu entfernen.

Wenn Sie eine Google-Schriftart entfernen, müssen Sie die Website erneut veröffentlichen, damit die Änderung wirksam wird. Wenn Sie jedoch eine hochgeladene Schriftart entfernen, ist es nicht erforderlich, sie erneut zu veröffentlichen, damit die Änderung wirksam wird.

Theme-Farben

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.

Designfarben konfigurieren

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.

Designfarben automatisch konfigurieren

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.

Verbinden Sie Designfarben mit widget

So verbinden Sie ein widget mit einer Designfarbe:

Klicken Sie auf ein Widget, um das 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.

Themenfarben umbenennen

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.

Designfarben entfernen

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".

Website Schaltfläche

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".

Themenbilder

In diesem Abschnitt können Sie den Stil der Bild-Widgets auf Ihrer Website steuern. Sie können das Bildlayout ändern, den Rahmenstil, abgerundete Ecken oder Schatteneffekte hinzufügen oder bearbeiten.

Theme Zeilen and Columns

Anmerkung

Diese Informationen gelten speziell für den klassischen Editor und sind für Editor 2.0 (früher als All-Flex-Editor bezeichnet) nicht relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird.

In diesem Abschnitt können Sie das Thema für Zeilen und Spaltendesign in Bezug auf Hintergrundfarbe und Standardabstände definieren. Änderungen, die an einzelnen Zeilen oder Spalten vorgenommen werden, überschreiben das Thema Zeilen und Spalte Einstellungen.

Theme-Hintergrund

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.

Passen Sie den Website-Hintergrund an

So passen Sie den Hintergrund Ihrer Website an:

Klicken Sie im linken Bereich auf „Design“ und 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).

Anpassen des Hintergrunds pro Seite

So passen Sie den Hintergrund pro Seite an:

Klicken Sie im linken Bereich auf „Design“ und 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).

Layout der Website

Anmerkung

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.

Seitenleisten-Layout für desktop

Anmerkung

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.