Mit Upfront kannst Du das Design Deiner Webseite so einfach anpassen, dass Du nie wieder ein anderes Theme benötigst.
Dank des leistungsstarken und intuitiven Designs der Theme-Plattform kannst Du den gesamten Inhalt Deiner Webseite per Drag-and-Drop im Front-End bearbeiten und bearbeiten. Das Erstellen einer Webseite nimmt überhaupt keine Zeit in Anspruch. Es ist wirklich so einfach.
In dieser siebenteiligen Serie, die die Verwendung von Upfront vorstellt, zeige ich Dir, wie Du ein vorhandenes Upfront-Theme – in diesem Fall Spirit – in eine völlig andere Webseite umwandelst, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten usw responsives Layout.
Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:
Teil 1: Die Grundlagen, Themenfarben und Typografie
Teil 2: Strukturieren Deiner Webseite mit Regionen
Teil 3: Gestalte Deine Webseite mit Elementen
Teil 4: Elemente und benutzerdefinierten Code optimieren
Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten
Teil 6: Responsive Webseiten erstellen
Teil 7: Arbeiten mit Seiten und Beiträgen
Wir werden das Spirit-Thema aufgreifen und seine Regionen, Inhalte, Typografie und andere Elemente komplett überarbeiten und Folgendes umwandeln:
Darin ein Produktthema, komplett mit eigenem Branding, Farben, Typografie, Schaltflächen, Bildern, Kontaktformular und anderen Elementen:
Lass uns anfangen.
Installation von Upfront und Spirit
Als Erstes musst Du Upfront und Spirit installieren. Du kannst dies tun, indem Du den PSOURCE Manager herunterlädst. Nach der Installation aktiviere ihn im Backend Deiner Webseite. Navigiere zu „Themes“, klicke auf UpFront ubd Spirit und installiere beide.
Wenn Du Upfront und Spirit bereits installiert hast, stelle sicher, dass Du über die neuesten Versionen verfügst. Dies ist wichtig, da sich Upfront noch in der Entwicklung befindet und regelmäßig neue Versionen veröffentlicht werden.
Gehe als Nächstes zu „Darstellung“ > „Themen“ und aktiviere „Spirit“.
Bearbeiten in Upfront
Es ist wichtig, Pretty Permalinks zu aktivieren. Gehe zu Einstellungen > Permalinks und aktiviere das Optionsfeld neben „Beitragsname“.
Jetzt kannst Du mit der Bearbeitung Deiner Webseite beginnen. Klicke in der Admin-Leiste oben auf der Seite auf „Upfront“.
Löschen, Ändern der Größe und Verschieben
Beginnen wir mit dem Löschen von Dingen.
Du musst lediglich mit der Maus über ein Element fahren und auf das rote „x“ klicken, das oben rechts angezeigt wird.
Die Größenänderung ist genauso einfach. Lass uns die Größe desselben Elements ändern. Bewege den Mauszeiger darüber, klicke auf den orangefarbenen Griff und ziehe ihn auf die gewünschte Größe.
Wenn Du ein Element, beispielsweise einen Text oder ein Bild, verschieben möchtest, bewege den Mauszeiger darüber und klicke und ziehe es an die gewünschte Stelle.
Hinweis: Wenn Du dich fragst, warum Du die Größe des „Spirit“-Logos nicht ändern kannst, liegt das daran, dass es sich um ein Standardbild handelt, das mit diesem speziellen Design geliefert wird. Du kannst gerne Dein eigenes Logo hochladen oder es einfach löschen.
Themenfarben
Hast Du schon einmal ein tolles Theme für Deine Webseite gefunden und das Layout gefiel Dir, aber die Farben gefielen Dir einfach nicht?
Mit Upfront kannst Du alle Deine Theme-Farben von einem zentralen Ort aus steuern und ersparst Dir so den Aufwand, die Farben einzelner Elemente jedes Mal zu ändern, wenn Du Deine Meinung änderst. Das bedeutet, dass Du die Farben steuern kannst – und die Konsistenz auf Deiner gesamten Webseite aufrechterhalten – für Dinge wie Text, Rahmen, Hintergründe, Farben … alles! Es ist wie eine Farbpalette für Deine Webseite.
Wenn Du zu den Designeinstellungen gehst und dann auf „Farben“ klickst, wirst Du sehen, dass Spirit sechs Designfarben zugewiesen wurden.
Das Theme, das ich erstelle, hat Markenfarben. Ich muss also nur auf jede Standardfarbe klicken, meinen Hexadezimalcode eingeben (oder eine Farbe aus der Farbauswahl auswählen) und auf „OK“ klicken. Jedes Element in meinem Theme wird automatisch auf die entsprechenden Farben aktualisiert.
Schaue Dir das GIF unten an, um zu sehen, wie das alles funktioniert. Wenn Du Upfront installiert hast, kannst Du die Designeinstellungen selbst ausprobieren (oder versuchen, die Spirit-Demoseite anzupassen).
Text bearbeiten
Das Bearbeiten von Text in Upfront ist einfach. Du musst lediglich auf einen Textbereich doppelklicken. Wenn Du erneut doppelklickst, um ein Wort auszuwählen (oder dreimal klicken, um einen Absatz auszuwählen), wird die Textbearbeitungssymbolleiste eingeblendet, die Dir die folgenden Optionen bietet :
Typelement – Dazu gehören H1, H2, H3, H4, H5, H6, P und das Codeformat
Fett – Mache den Text fett
Kursivschrift – Schreibe Deinen Text kursiv
Ausrichtung – Links, Mitte und rechts richtet Deinen Text aus bzw. im Blocksatz
Liste – Erstelle eine Liste mit Aufzählungszeichen oder Nummern
Blockquote – Erstelle ein Blockquote
Link – Verlinke Text mit einer URL, einem Beitrag oder einer Seite, einem Anker oder einem Lightbox-Element
Inline-Symbole – Füge ein Symbol ein
Textbearbeitung
Textbearbeitung in Upfront.
Die Textbearbeitungssymbolleiste enthält Symbole, die Du beliebig vergrößern oder verkleinern und deren vertikale Ausrichtung anpassen kannst.
Wenn Du mit der Verwendung der Symbolleiste fertig bist, klicke einfach an eine andere Stelle auf der Seite und die Symbolleiste wird ausgeblendet.
Typografie
Mit Upfront kannst Du Deine Schriftarten von einem einfachen Ort in der Seitenleiste aus verwalten. Gehe einfach zu den Designeinstellungen und klicke dann auf Typografie.
Für jedes Typelement kannst Du Schriftart, Stärke/Stil, Farbe, Größe und Zeilenhöhe angeben.
Du kannst auch benutzerdefinierte CSS-Regeln hinzufügen, aber wir werden uns später in einem anderen Beitrag dieser Serie damit befassen.
Mit dem Theme Fonts Manager kannst Du Deinem Theme beliebige Google-Schriftarten hinzufügen. Klicke einfach auf „Themenschriftarten-Manager“ und wähle eine Google-Schriftart aus. Klicke dann auf „Hinzufügen“, um sie zu Deiner Liste der Themenschriftarten hinzuzufügen. Du kannst dann im Schriftart-Dropdown-Menü auf diese Schriftart zugreifen, etwa so:
Konsistente Typografie
Der beste Weg, Deinen Text, einschließlich Deiner Überschriften und Absatztexte, zu formatieren, besteht darin, alles auf einmal zu erledigen. Der einfachste Weg, dies zu tun, besteht darin, Deiner Webseite Beispieltext hinzuzufügen, ihn in den Designeinstellungen zu formatieren und ihn dann zu löschen.
So machst Du es:
Kopiere den Beispieltext, den wir bei CodePen hochgeladen haben, und stelle sicher, dass die Formatierung erhalten bleibt
Füge den Text in ein beliebiges Textelement in Upfront ein
Gehe zu den Designeinstellungen und wähle Typografie aus, falls diese noch nicht geöffnet ist
Wähle für jedes Schriftelement Schriftart, Stärke/Stil, Farbe, Größe und Zeilenhöhe
Der Beispieltext wird bei jeder Auswahl automatisch aktualisiert, sodass Du alle Deine Änderungen auf einmal sehen kannst. Aus gestalterischer Sicht kannst Du so schnell erkennen, ob Deine Schriftarten- und Farbauswahl für verschiedene Schriftelemente übereinstimmen.
Das obige GIF veranschaulicht, wie Du Änderungen an Deiner Typografie in einer Live-Vorschau anzeigen kannst, wenn Du Aktualisierungen in den Designeinstellungen vornimmst.
Zusammenfassung
Lasse uns noch einmal zusammenfassen, was wir bisher bei der Zusammenstellung unserer neuen Webseite erreicht haben:
Wir haben herausgefunden, wie Du Elemente wie Bilder und Textbereiche löschen, verschieben und in der Größe ändern kannst.
Alle Themenfarben wurden aktualisiert, um dem Branding unserer neuen Webseite zu entsprechen
Wir haben alle Schriftelemente (H1, H2, P usw.) mit neuen Schriftarten und -größen aktualisiert
Wir haben auch benutzerdefinierte Schriftarten hinzugefügt.
Im nächsten Beitrag dieser Reihe werden wir weiter an unserer neuen Webseite arbeiten und uns dieses Mal darauf konzentrieren, wie man mithilfe von Regionen ein benutzerdefiniertes Layout erstellt, das sich von Spirit unterscheidet.
Lies den nächsten Beitrag in dieser Reihe: Teil 2: Strukturiere Deine Webseite mit Regionen