Hier beginnen

Erste Schritte

Vielen Dank für den Kauf der Agencypro X-Vorlage. In dieser kurzen Anleitung behandeln wir alle Grundlagen, wie man grundlegende Elemente (d.h. Farben, Schriftarten, CMS-Inhalte usw.) der Agencypro 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

Agencypro X-Vorlage ist mit Farbfeldern aufgebaut, d. h. Sie können ein Farbfeld leicht bearbeiten, um es site-weit 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 Agentur 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.

Seiten bearbeiten

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

Statischer Inhalt

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 von mehr Bestand).

Wenn Sie die automatisch erstellte eCommerce-Seite für Produkte bearbeiten möchten, finden Sie diese Seite zur Bearbeitung 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. einen Effekt entfernen), können Sie die Elemente mit Interaktionen leicht erkennen, da diese in der linken Seitenleiste des Navigators mit einem kleinen Interaktionssymbol (einem kleinen Donner) versehen sind.

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.

Über die Seite Karte

Wenn Sie also die Karte bearbeiten möchten, um die Standorte Ihres Büros zu ändern, brauchen Sie nur die SVG-Datei herunterzuladen und sie mit einer beliebigen Designsoftware wie Adobe XD, Sketch oder Figma zu bearbeiten. Sobald Sie fertig sind, brauchen Sie es nur noch einmal hochzuladen und es wird übernommen.

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.

Agencypro X Webflow-Vorlagenunterstützung

Wie Sie oben sehen konnten, wurde Agencypro 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 agencyprox@brixtemplates.com - wir helfen Ihnen gerne.

Kundenspezifisches Design und Entwicklung

Wenn Sie jedoch Hilfe bei der Erstellung einer einzigartigen und personalisierten Version von Agencypro X oder einfach nur eine erstaunliche Website suchen, die von Grund auf mit Webflow entworfen und entwickelt wurde, können Sie sich gerne mit unserer Webflow Design & Development Agencypro in Verbindung setzen. Das fantastische Team hinter Agencypro X Webflow Template kann Ihnen helfen.