Hier starten
Wenn Sie gerade Invstor X Webflow Ecommerce Template gekauft haben und nach den Grundlagen suchen, wie Sie mit der Bearbeitung beginnen können, beginnen Sie hier.
Erste Schritte
Vielen Dank für den Kauf der Invstor X-Vorlage. In dieser kurzen Anleitung decken wir alle Grundlagen ab, wie man grundlegende Elemente (d.h. Farben, Schriftarten, CMS-Inhalte, etc.) der Invstor X Webflow-Vorlage bearbeitet.
Wenn Sie mit Webflow noch nicht sehr vertraut sind, empfehlen wir Ihnen den Webflow 101 Crash Course der Webflow University, in dem Sie alle Grundlagen erlernen, um sofort loslegen zu können.
Styling
Beginnen wir mit dem Styling der Vorlage.
Farben
Die Invstor X-Vorlage verwendet Farbfelder, 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 Invstor X-Vorlage verwendet eine einzige Schriftart für die gesamte Seite, die im Selektor Body (Alle Seiten) eingestellt ist, so 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.
Seiten bearbeiten
Jetzt ist es an der Zeit, mit den nächsten Schritten zur Bearbeitung Ihrer Website-Seiten fortzufahren. Normalerweise gibt es 2 Arten von Inhalten, die bearbeitet werden, und zwar die folgenden.
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 in ähnlicher Weise wie CMS-Inhalte erkennen, da sie im Navigator auf der linken Seite ebenfalls violett angezeigt werden und einen violetten 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 erstellte eCommerce-Seite für Produkte bearbeiten möchten, finden Sie diese Seite fast am unteren Ende aller Seiten direkt über den CMS-Sammlungsseiten zur Bearbeitung.
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 die rechte Seitenleiste 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 ganz einfach zum Abschnitt Seiten in der linken Seitenleiste gehen, 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.
Benutzer-Seiten
Die Invstor X-Vorlage enthält Benutzerseiten wie "Konto erstellen", "Anmelden", "E-Mail bestätigen", "Passwort vergessen" und mehr. Obwohl diese Seiten statisch sind, können sie Ihre bestehenden Seiten erheblich verbessern und Ihnen Zeit bei der Entwicklung sparen.
Sie können Ihre Benutzerseiten mit 3 verschiedenen Methoden verbinden:
- Mitgliedschaften: Wenn Sie Webflow-Mitgliedschaften auf Ihrer Website verwenden, können Sie die in der Vorlage enthaltenen Benutzerseiten schnell anpassen, um die Mitgliedschaftsseiten zu individualisieren.
- Integrationen: Auf der anderen Seite, wenn Sie externe Integrationen wie Memberstack oder Outseta verwenden, können Sie unsere Vorlagenseiten verwenden, um die Integration anzupassen.
- Code exportieren: Wenn Sie die Seiten außerhalb von Webflow hosten möchten, können Sie den Code der Vorlagenseite exportieren und ihn mit Ihrem Backend verbinden.
Wie Sie sehen, können Sie die Benutzerseiten auf verschiedene Weise optimal nutzen.
Invstor X Webflow-Vorlagenunterstützung
Wie Sie oben sehen konnten, wurde Invstor X auf Webflow aufgebaut, wobei die besten Praktiken verwendet wurden, um es Ihnen sehr einfach zu machen, die Vorlage zu bearbeiten und sie an Ihre Bedürfnisse anzupassen.
Sollten Sie jedoch jemals ein Problem haben, Hilfe benötigen oder einfach nur Hallo sagen wollen, schicken Sie uns eine E-Mail an invstorx@brixtemplates.com - wir helfen Ihnen gerne.
Kundenspezifisches Design und Entwicklung
Auf der anderen Seite, wenn Sie auf der Suche nach Hilfe, um eine einzigartige und personalisierte Version von Invstor X, oder einfach nur eine erstaunliche Website entworfen und entwickelt von Grund auf auf Webflow, fühlen Sie sich frei, in Kontakt mit unserer Webflow Design & Development Agency zu bekommen. Das erstaunliche Team hinter Invstor X Webflow Template kann Ihnen helfen.
Häufig gestellte Fragen
Wie kann ich weitere Symbole für die Vorlage erhalten?
Suchen Sie nach einer breiteren Icon-Familie, die Sie in dieser Webflow-Vorlage verwenden können? Werfen Sie einen Blick auf unsere BRIX Templates Icon Fonts und erhalten Sie eine Sammlung von über 100 Icons für Ihre Vorlage.
Werden Sie eine Vorlage für X veröffentlichen?
Haben Sie eine Idee für eine andere Webflow-Vorlage, die Sie gerne verwirklicht sehen würden? Schicken Sie uns Ihre Webflow-Vorlagenidee und gewinnen Sie einen Sonderpreis, wenn wir sie auswählen.
