Hier beginnen

Styling

Beginnen wir mit dem Styling der Vorlage.

Farben

Die Web3 X-Vorlage basiert auf Farbfeldern, d. h. Sie können ein Farbfeld leicht bearbeiten, um es auf der gesamten Website zu aktualisieren.

Dazu müssen Sie nur auf die Registerkarte "Stil" in der rechten Seitenleiste gehen und dann im Abschnitt "Typografie" zu "Farben" scrollen. Wenn Sie auf die Farbe klicken, können Sie alle Farbfelder sehen und sie so bearbeiten, dass sie auf der gesamten Website auf die gewünschte Farbe aktualisiert werden.

Schriftarten

Die Web3 X-Vorlage verwendet eine einzige Schriftart für die gesamte Seite, die im Selektor Body (Alle Seiten) eingestellt ist. Das bedeutet, dass Sie die Schriftart auf der gesamten Website mit einem Klick aktualisieren können.

Klicken Sie auf einer beliebigen Seite einfach auf die orangefarbene Auswahloption oben rechts auf der Registerkarte Stil und wählen Sie dann Körper (Alle Seiten). Danach können Sie zum Abschnitt Typografie gehen und die Schriftart in eine beliebige Schriftart für Ihre Unternehmensmarke ändern.

Falls Sie eine benutzerdefinierte oder hochwertige Schriftart benötigen, die nicht in Webflow verfügbar ist, können Sie jederzeit zu Projekteinstellungen > Schriftarten gehen und benutzerdefinierte Schriftarten hochladen oder Ihr Adobe Fonts-Konto verbinden.

Grafiken und Icons

Bei einigen Symbolen oder Grafiken in der Vorlage handelt es sich um normale Bilder/Grafiken, so dass diese beim Aktualisieren aller Farben weiterhin die Farbe der Vorlage haben.

Das liegt daran, dass es sich bei diesen Grafiken um Bilder handelt (PNG, JPG, SVG usw.), so dass eine Aktualisierung des Webflow-CSS (Styling) keine Auswirkungen auf sie hat. Wenn Sie diese Grafiken wiederverwenden möchten, können Sie sie jederzeit herunterladen und mit einer beliebigen Designsoftware (z. B. Photoshop, Illustrator, Sketch, Figma usw.) bearbeiten oder direkt Ihre eigenen Bilder/Grafiken hochladen, die zu Ihrer Marke passen.

Statische Seiten

Statische Inhalte sind alle Inhalte, die nicht auf einem CMS basieren, d. h. nicht dynamisch sind (wie z. B. ein Blogbeitrag).

Sie können all diese Inhalte leicht erkennen, da sie im Navigator auf der linken Seite grau dargestellt werden und einen blauen Rahmen aufweisen, wenn Sie darauf klicken oder den Mauszeiger darüber bewegen.

Wenn Sie diese Art von Inhalt bearbeiten möchten, können Sie einfach darauf doppelklicken, und Sie können direkt dort etwas eingeben.

Dynamischer Inhalt (CMS)

Dynamische Inhalte sind alle Inhalte, die dynamisch sind und automatisch auf der Grundlage der im CMS-Bereich in der linken Seitenleiste (direkt unter dem Seiten-Symbol) hinzugefügten Inhalte generiert werden.

Sie können all dies leicht erkennen, da es im Navigator auf der linken Seite als lila angezeigt wird und einen lila Rahmen aufweist, wenn Sie darauf klicken oder den Mauszeiger darauf setzen.

Dieser Inhalt sollte direkt im CMS-Bereich aktualisiert werden. Dies soll Ihnen die Aktualisierung sehr erleichtern, da es sehr wahrscheinlich ist, dass er ständig aktualisiert werden muss (z. B. durch Hinzufügen eines neuen Blogbeitrags).

Wenn Sie eine komplette, automatisch generierte CMS-Seite bearbeiten möchten (z. B. einen Blog-Beitrag), finden Sie diese Seite am unteren Ende aller Seiten im Abschnitt Seiten in der linken Seitenleiste zur Bearbeitung.

Produkte (eCommerce)

Produkte oder eCommerce-Inhalte funktionieren ähnlich wie die dynamischen Inhalte des CMS, allerdings ist dies ausschließlich auf eCommerce-Produkte ausgerichtet.

Sie können eCommerce-Inhalte auf ähnliche Weise wie CMS-Inhalte erkennen, da sie in der linken Seitenleiste ebenfalls lila angezeigt werden und einen lila Rahmen haben, wenn Sie darauf klicken oder den Mauszeiger darüber bewegen.

Dieser Inhalt sollte direkt auf der Registerkarte eCommerce in der linken Seitenleiste aktualisiert werden. Dies soll Ihnen die Aktualisierung sehr erleichtern, da es sehr wahrscheinlich ist, dass er ständig aktualisiert werden muss (z. B. Änderung eines Produktpreises oder Hinzufügen weiterer Bestände).

Wenn Sie die automatisch generierte eCommerce-Seite für Produkte bearbeiten möchten, finden Sie diese Seite fast am Ende aller Seiten direkt über den CMS-Sammlungsseiten.

Nützliche Hinweise

Neben den grundlegenden Erklärungen, die wir oben gegeben haben, geben wir hier noch einige Tipps und Anleitungen, die sich aus den häufigsten Fragen ergeben, die wir erhalten.

Wechselwirkungen

Wenn Sie eine Interaktion in der Vorlage bearbeiten möchten (z. B. um einen Effekt zu entfernen), können Sie die Elemente mit Interaktionen leicht erkennen, da diese in der linken Seitenleiste ein kleines Interaktionssymbol (ein kleiner Donner) haben.

Wenn Sie auf dieses kleine Interaktionssymbol klicken, öffnet sich in der rechten Seitenleiste die Registerkarte Interaktionen für dieses Element, wo Sie die Interaktion bearbeiten können.

Mobile oder Tablet-Ansicht

Jedes Mal, wenn Sie eine Änderung vornehmen (z. B. einen neuen Abschnitt entwerfen), ist es eine gute Praxis, die obere Navigation des Ansichtsfensters aufzurufen und zu sehen, wie sie auf Tablet und Handy aussieht.

Wenn Sie nur einen Vorlagenabschnitt mit aktualisiertem Text oder Bildern bearbeiten und keine Vorlagenklasse löschen, sollte dies nicht erforderlich sein. Wenn Sie die Vorlage jedoch tiefergehend anpassen, Klassen bearbeiten oder neue Abschnitte erstellen, ist es immer gut, Ihre mobilen und Tablet-Ansichten ständig zu bearbeiten, um sicherzustellen, dass alles perfekt aussieht.

Bearbeitung von Meta Title, Desc und Featured Image

Wenn Sie den Titel, die Beschreibung und das Bild anpassen möchten, die angezeigt werden, wenn Sie Ihre Website an einem beliebigen Ort (z. B. Facebook, Twitter usw.) teilen, können Sie einfach zum Abschnitt Seiten in der linken Seitenleiste gehen und auf das kleine Einstellungssymbol der Seite klicken, die Sie anpassen möchten, und alle diese Einstellungen werden angezeigt.

Bitte beachten Sie, dass es wichtig ist, dies auf Seitenbasis zu ändern.

Backups

Wenn etwas schief geht, z. B. wenn Ihnen die Entwicklung der Website nicht gefällt, wenn Sie einige wichtige Klassen gelöscht haben, die erforderlich waren, damit die Vorlage gut aussieht, oder wenn Sie einfach aus irgendeinem Grund zu einer früheren Version zurückkehren möchten, können Sie jederzeit den Bereich "Backups" aufrufen.

Sie finden es im Abschnitt Einstellungen in der linken Seitenleiste und können dann alle automatischen oder manuellen Sicherungen sehen. Die Wiederherstellung einer alten Sicherung ist nur einen Klick entfernt.