UpFront 1: Die Grundlagen, Themenfarben und Typografie

Upfront macht das Anpassen des Designs Deiner Webseite so einfach, dass Du nie wieder ein ClassicPress-Theme benötigst.

Dank des leistungsstarken und intuitiven Designs der Theme-Plattform kannst Du alle Inhalte Deiner Webseite per Drag-and-Drop auf das Frontend ziehen und bearbeiten. Das Erstellen einer Website nimmt keine Zeit in Anspruch. Es ist wirklich so einfach.

In dieser siebenteiligen Serie, in der wir die Verwendung von UpFront vorstellen, zeigen wir Dir, wie Du ein bestehendes UpFront-Theme – in diesem Fall Spirit – in eine völlig andere Webseite verwandeln kannst, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten und responsivem Layout.

Im Laufe dieser Serie werden wir Dir anhand vieler Beispiele zeigen, wie Du UpFront verwenden kannst:

Wir nehmen das Spirit-Thema und überarbeiten seine Regionen, Inhalte, Typografie und andere Elemente komplett, um dies anzupassen:

Darin ein Produktthema, komplett mit eigenem Branding, Farben, Typografie, Buttons, Bildern, Kontaktformular und anderen Elementen:

Fangen wir an.

UpFront und Spirit installieren

Das Wichtigste zuerst, Du musst UpFront und Spirit installieren.

Wenn Du UpFront und Spirit bereits installiert hast, stelle sicher, dass Du über die neuesten Versionen verfügst. Dies ist wichtig, da UpFront sich noch in der Entwicklung befindet und regelmäßig neue Versionen veröffentlicht werden.

Gehe als nächstes zu Themes > Themes und aktiviere Spirit.


Bearbeitung 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 Sachen.

Alles, was Du tun musst, ist, den Mauszeiger über ein Element zu bewegen und auf das rote „x“ zu klicken, das oben rechts erscheint.

Die Größenänderung ist genauso einfach. Ändern wir die Größe desselben Elements. Bewege den Mauszeiger darüber, klicke auf den orangefarbenen Griff und ziehe ihn auf die gewünschte Größe.

Wenn Du ein Element verschieben möchtest, z. B. Text oder ein Bild, bewege den Mauszeiger darüber, klicke und ziehe es.

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. Gerne kannst Du Dein eigenes Logo hochladen oder einfach löschen.

Theme Farben

Hast Du jemals ein tolles Theme für Deine Webseite gefunden und das Layout geliebt, aber die Farben haben Dir einfach nicht gefallen?

UpFront ermöglicht es Dir, alle Deine Designfarben von einem zentralen Ort aus zu steuern, so dass Du die Farben einzelner Elemente jedes Mal ändern musst, wenn Du Deine Meinung änderst. Das bedeutet, dass Du die Farben steuern und die Konsistenz auf Deiner Webseite aufrechterhalten kannst, z. B. für Text, Rahmen, Hintergründe, Farben… alles! Es ist wie eine Farbpalette für Deine Webseite.

Wenn Du zu Theme-Einstellungen gehst und dann auf Farben klickst, siehst Du, dass Spirit sechs Themenfarben zugewiesen wurden.

Das Theme, das ich baue, hat Markenfarben, also muss ich nur auf jede Standardfarbe klicken, meinen Hexadezimalcode eingeben (oder eine Farbe aus dem Farbwähler auswählen) und auf OK klicken. Jedes der Elemente in meinem Theme wird automatisch auf die entsprechenden Farben aktualisiert.

Schaue Dir das GIF unten an, um zu sehen, wie alles funktioniert. Wenn Du UpFront installiert hast, warum spielst Du nicht selbst mit den Theme-Einstellungen (oder versuche die Spirit-Demo-Site anzupassen).

Stelle sicher, dass Du auf Speichern klickst, wenn Du fertig bist.

Bearbeiten von Text

Das Bearbeiten von Text in UpFront ist einfach. Alles, was Du tun musst, ist auf einen Textbereich zu doppelklicken, und wenn Du erneut doppelklickst, um ein Wort auszuwählen (oder dreimal klicken, um einen Absatz auszuwählen), wird die Textbearbeitungssymbolleiste angezeigt, die Dir die folgenden Optionen bietet:

  • Type-Element – Dazu gehören H1, H2, H3, H4, H5, H6, P und Codeformat
  • Fett – Text fett formatieren
  • Kursiv – Kursiv formatieren Sie Ihren Text
  • Ausrichtung – Links, zentriert und rechts ausrichten oder richten selbst Deinen Text aus
  • Liste – Erstellen einer Aufzählung oder nummerierten Liste
  • Blockquote – Erstelle ein Blockzitat
  • Link – Text mit einer URL, einem Beitrag oder einer Seite, einem Anker oder einem Leuchtkastenelement verknüpfen
  • Inline-Symbole – Einfügen eines Symbols


Textbearbeitung in UpFront

Die Textbearbeitungssymbolleiste enthält Symbole, die Du so groß oder klein machen kannst, wie Du möchtest, sowie deren vertikale Ausrichtung anpassen.
Wenn Du mit der Verwendung der Symbolleiste fertig bist, klicke einfach auf eine andere Stelle auf der Seite und die Symbolleiste verschwindet.

Typographie

UpFront ermöglicht es Dir, Deine Schriftarten von einem einfachen Ort in der Seitenleiste aus zu verwalten. Gehe einfach zu Theme-Einstellungen und klicke dann auf Typografie.

Für jedes Typelement kannst Du Schriftart, Gewicht/Stil, Farbe, Größe und Zeilenhöhe angeben.

Du kannst auch benutzerdefinierte CSS-Regeln hinzufügen, aber wir werden uns das später als Teil eines anderen Beitrags in dieser Serie ansehen.

Mit dem Theme Fonts Manager kannst Du eine beliebige Google-Schriftart zu Deinem Theme hinzufügen. Klicke einfach auf Theme Fonts Manager und wähle eine Google-Schriftart aus, dann klicke auf Hinzufügen, um sie zu Deiner Liste der Theme-Schriftstile hinzuzufügen.Du kannst dann im Dropdown-Menü Schriftart wie folgt auf diese Schriftart zugreifen:

Konsistente Typografie

Der beste Weg, um Deinen Text, einschließlich Deiner Kopfzeilen und Absatztexte, zu formatieren, besteht darin, alles auf einmal zu tun. Der einfachste Weg, dies zu tun, besteht darin, Beispieltext zu Deiner Webseite hinzuzufügen, ihn in den Designeinstellungen zu formatieren und dann zu löschen.

So geht’s:

  • Kopiere den Beispieltext, den wir bei CodePen hochgeladen haben, und stelle sicher, dass die Formatierung intakt bleibt.
  • Füge den Text in ein beliebiges Textelement in UpFront ein
  • Gehe zu Theme-Einstellungen und wähle Typografie, falls sie noch nicht geöffnet ist
  • Wähle für jedes Textelement eine Schriftart, Gewicht/Stil, Farbe, Größe und Zeilenhöhe

Der Beispieltext wird automatisch aktualisiert, wenn Du jede Auswahl triffst, sodass Du alle Deine Änderungen auf einmal sehen kannst. Aus gestalterischer Sicht kannst Du so schnell erkennen, ob Deine Schrift- und Farbauswahl für verschiedene Schriftelemente übereinstimmt.

Das obige GIF zeigt, wie Du Änderungen an Deiner Typografie live in der Vorschau anzeigen kannst, wennDu Aktualisierungen in den Designeinstellungen vornimmst.

Zusammenfassung

Lasse uns also zusammenfassen, was wir bisher bei der Zusammenstellung unserer neuen Webseite erreicht haben:

  • Wir haben herausgefunden, wie man Elemente wie Bilder und Textbereiche löscht, verschiebt und in der Größe ändert
  • Alle Themenfarben wurden aktualisiert, um dem Branding für unsere neue 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 Serie werden wir die Arbeit an unserer neuen Webseite fortsetzen und uns dieses Mal darauf konzentrieren, wie Du Regionen verwenden kannst, um ein benutzerdefiniertes Layout zu erstellen, das sich von Spirit unterscheidet.

Lese den nächsten Beitrag in dieser Serie: Teil 2: Strukturieren Deiner Webseite mit Regionen

Wenn Du Fragen zu dem hast, was wir in diesem Beitrag behandelt haben, kannst Du gerne im Forum unten nachfragen.



Keine Themen zum Anzeigen...

So verwendest Du die UpFront-Serie in der optimalen Reihenfolge: