UpFront 3: Layout Deiner Webseite mit Elementen

Von Bildern und Text bis hin zu Galerien, Karten und Schaltflächen – UpFront ermöglicht es Dir, Elemente per Drag & Drop an eine beliebige Stelle auf Deiner Webseite zu ziehen.

Während Regionen die Bausteine bereitstellen, die für die Strukturierung Deiner Webseite erforderlich sind, stellen Elemente die Kernfunktionalität bereit. Insgesamt stehen 16 Elemente zur Verfügung, mit denen Du alles von einfachen Textbereichen bis hin zu fortgeschritteneren benutzerdefinierten codierten Lösungen erstellen kannst.

Im heutigen Beitrag werfen wir einen Blick auf jedes der Elemente, wie sie funktionieren und erkunden ihre Einstellungen.

Dies ist der dritte Beitrag in unserer Serie, in dem wir die Verwendung von UpFront vorstellen. Wir passen ein bestehendes UpFront-Theme – in diesem Fall Spirit – an und verwandeln es in eine völlig andere Webseite, 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 und Inhalte komplett und verwandeln es in ein Produkttheme, komplett mit eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und anderen Elementen.

Bisher haben wir in dieser Serie Designfarben aktualisiert, benutzerdefinierte Schriftarten hinzugefügt, Bereiche gelöscht, das Headerbild aktualisiert und einen Videobereich in voller Breite hinzugefügt. Hier ist ein Blick auf unsere bisherigen Fortschritte:

Links unser Fortschritt. Auf der rechten Seite, worauf wir hinarbeiten.

Text

Mit dem Textelement kannst Du an beliebiger Stelle auf Deiner Webseite einen neuen Textbereich erstellen. Einmal erstellt, doppelklicke einfach und gib Deinen Text ein.

Weitere Informationen zum Formatieren von Text und zur Verwendung der Textbearbeitungssymbolleiste findest Du unter Teil 1: Die Grundlagen, Themenfarben und Typografie.

Bild

Füge Deiner Webseite ein Bild hinzu. Ziehe einfach das Element, in dem Du ein Bild anzeigen möchtest, per Drag & Drop. Das Elementfeld fordert Dich auf, ein neues Bild hinzuzufügen. Du kannst dann eine neue Datei hochladen oder ein vorhandenes Bild aus Deiner Mediengalerie auswählen.

Zuschneiden in UpFront: Besser als das bestehende ClassicPress-Zuschneiden.

Die Abmessungen werden in der oberen linken Ecke angezeigt, sodass Du die Größe Deines Bildes auf die gewünschte Höhe und Breite ändern kannst.

Wenn Du den Mauszeiger über das Bild bewegst, werden weitere Optionen zum Zuschneiden, Verknüpfen und Hinzufügen einer Beschriftung sowie Bildeinstellungen zum Hinzufügen von Alt-Text angezeigt.

Wenn Du auf die Option zuschneiden klickst, hast Du auch die Möglichkeit, das aktuelle Bild zu ändern und zu ersetzen.

Galerie

Mit den Galerieelementen kannst Du eine Galerie anzeigen.

Sobald Du Deine Bilder hinzugefügt hast, gibt es viele Optionen für das grundlegende Styling in den Elementeinstellungen.

Sortierung von Etiketten: Wenn aktiviert, erscheint in den Einstellungen für jedes einzelne Bild ein „Tag“-Symbol. Wenn Du Deinen Bildern Beschriftungen hinzufügst, werden diese oben in der Galerie angezeigt.
Thumbnail-Verhältnis: Wähle eines der drei Standardverhältnisse (1:1, 2:3 oder 4:3) oder bleibe beim Standardverhältnis Deines Themes.
Größe der Miniaturansicht: Ziehe den Bereichsschieberegler, um die Größe Deiner Bilder anzupassen. Die Abmessungen werden unten angezeigt, damit Du Deine Größen in Schach halten kannst.
Thumbnail-Padding: Ziehe den Schieberegler erneut, um den Abstand zwischen den Bildern anzupassen. Wenn Du unten „Even padding“ aktivierst, fügt UpFront automatisch die gleiche Polsterung um alle Bilder in der Galerie hinzu.
Untertiteleinstellungen: Füge Bildunterschriften hinzu, unter Bildern oder gar nicht.

Verwenden des Gallery-Elements

Um die Bilder neu anzuordnen, schalte die Schaltfläche „Ein/Aus“ unter dem Einstellungszahnrad auf „Ein“ und klicke dann und ziehe sie an die gewünschte Stelle. Im ausgeschalteten Zustand kannst Du die Bilder verschieben.

Wie beim Bild-Element gibt es Einstellungen für einzelne Galeriebilder, sodass Du sie ersetzen und zuschneiden kannst. Du kannst auch auf andere Beiträge, Seiten oder Webseiten oder noch größere Versionen oder eine Lightbox verlinken.

Landkarte

Wenn Du jemals Ewigkeiten damit verbracht haben, eine Karte auf Deiner Webseite einzurichten, wirst Du überwältigt sein, wie einfach es ist, dies mit UpFront zu tun.

Alles, was Sie tun musst, ist, über das Kartenelement zu ziehen, eine Adresse einzugeben (oder Deinen aktuellen Standort zu verwenden) und die Eingabetaste zu drücken. Die Karte wird mit Deinem Standort aktualisiert.

Du kannst die Karte in den Einstellungen aktualisieren:

Lage der Karte: Gib eine neue Adresse ein, um die Karte zu aktualisieren.
Zoomstufe der Karte: Verwende den Bereichsschieberegler, um Deinen Standort zu vergrößern und zu verkleinern.
Kartenstil: Ändere den Standard-Roadmap-Stil in Satellit, Hybrid oder Terrain.
Kartensteuerelemente: Aktiviere die Anzeige von Schwenken, Zoomen, Kartentyp, Maßstab, Straßenansicht und Übersichtskarte.
Ziehbare Karte: Aktiviere diese Option, wenn Benutzer auf die Karte klicken und sie ziehen können sollen.
Marker ausblenden: Blende den roten Stift aus, der die Kartenposition markiert.

Verwenden des Like-Box-Elements

Gefällt mir Box

Oder sollte ich sagen, Facebook Like Box. Dies ist einfach – ziehe einfach das Element auf Deine Webseite, gib die URL für Deine Facebook-Seite ein und drücke die Eingabetaste. Das Element wird aktualisiert, um alle Deine Facebook-Freunde anzuzeigen.

Je größer Du die Größe der „Gefällt mir“-Box ändern, desto mehr Facebook-Nutzer kannst Du auf Deiner Webseite anzeigen.

Youtube-Videos

Ob du nur ein Video oder eine Liste von Videos hinzufügen möchtest, das YouTube-Element erledigt alles.

Wenn du das Element ziehst, wirst du aufgefordert, entweder mehrere Videos oder ein einzelnes Video auszuwählen. Wähle eines aus und fülle dann die Einstellungen aus.

Einzelnes Video

Video-URL: Gib deine URL ein.
Titel: Gib an, wie viele Zeichen für den Titel angezeigt werden sollen.
Beschreibung: Gib eine maximale Anzahl an Zeichen für die Beschreibung an.

Mehrere Videos

Galerie oder Liste: Wähle aus, wie du deine Videos anzeigen möchtest.
Benutzerkanal oder Wiedergabeliste: Wähle eine Option aus und gib deinen YouTube-Benutzernamen oder die Kanal-ID ein.
Anzeige der neuesten Videos: Wähle aus, wie viele Videos du anzeigen möchtest.
Titel: Gib eine maximale Anzahl an Zeichen für den Titel an
Beschreibung: Gib eine maximale Anzahl an Zeichen für die Beschreibung an. Diese Option ist nicht verfügbar, wenn du die Option Liste ausgewählt hast.
Miniaturbildgröße: Ziehe den Schieberegler, um die Video-Bilder zu verkleinern.

Verwenden des Tabs-Elements.

Tabs

Wenn du mehr Inhalt in weniger Platz anzeigen möchtest, bieten Tabs eine elegante Lösung. Das grundlegende Tabs-Element kommt mit grundlegender Formatierung. Das Hinzufügen eigener Formatierungen ist einfach und es gibt Optionen zum Bearbeiten des aktiven, hover und statischen Zustände der Tabellentitel. Du kannst sogar Tabs mit benutzerdefiniertem CSS formatieren, aber wir werden im nächsten Beitrag dieser Reihe ausführlich auf das Hinzufügen von benutzerdefiniertem Code zu deiner Webseite eingehen.

Widget

Es gibt keine widgetisierten Bereiche in UpFront, da deine gesamte Webseite widgetisiert ist. Das bedeutet, dass du Widgets überall auf deiner Webseite platzieren kannst. Cool, oder?

Nachdem Du das Widget-Element auf Deine Webseite gezogen hast, gehe zu den Einstellungen, um ein Widget auszuwählen. Du kannst auch jedes der standardmäßigen ClassicPress-Widgets wie Seiten, Kalender und Archive zugreifen oder ein anderes Widget auswählen, das von Deinen Plugins erstellt wurde.

Angenommen, Du möchtest ein einfaches Newsletterformular mit unserem PS-eNewsletter-Widget anzeigen. Alles, was Du tun musst, ist das Plugin zu installieren und zu aktivieren, dann Deine Webseite in UpFront zu öffnen und ein Widget-Element dorthin zu ziehen, wo Du ein Formular anzeigen möchtest. Wähle in der Dropdown-Liste Kontaktformular aus und klicke auf OK. Alles erledigt!

Füge mithilfe des Code-Elements einen Bandcamp-Musikplayer zu Deiner Webseite hinzu.

Code

Das Code-Element trägt in gewisser Weise dazu bei, die Leistungsfähigkeit von UpFront zu demonstrieren. Wenn Du ziehst und Elemente darüber erstellst, kannst Du zwischen „Code von Drittanbietern einbetten“ oder „Benutzerdefinierten Code schreiben“ wählen.

Die Einbettungscode-Option wurde entwickelt, damit Du Einbettungscode von Webseiten wie Bandcamp, Twitter und SoundCloud hinzufügen kannst.

Die benutzerdefinierte Codeoption ist für fortgeschrittene Benutzer, die ihr eigenes Element für ihre Webseite codieren möchten. Angenommen, Du möchtest auf Deiner Webseite ein Bild Deiner Katze zeigen, das beim Klicken miau.mp3 abspielt. Das kannst Du mit dem Code-Element tun.

Natürlich gibt es weitere nützliche Möglichkeiten, wie Du das Code-Element nutzen kannst. Du könntest eine Schaltfläche „Zurück nach oben“ oder sogar ein benutzerdefiniertes Produktkarussell erstellen.

Login

Mit dem Login-Element kannst Du überall auf Deiner Webseite ein Login-Formular platzieren. Wenn Du über das Element ziehst, wird es standardmäßig als Formular angezeigt, aber in den Einstellungen kannst Du dies in ein Dropdown-Menü ändern, wenn Du nicht möchtest, dass der Login zu viel Platz auf Deiner Webseite beansprucht. Du kannst auch den Text für die Anmeldeschaltfläche ändern und einen Abmeldelink anzeigen.

Richte ein einfaches E-Mail-Formular mit dem Kontaktelement ein.

Kontakt

Mit dem Kontaktelement kannst Du ein einfaches Formular mit Namens-, E-Mail- und Nachrichtenfeldern anzeigen.

In den Einstellungen kannst Du die E-Mail-Adresse eingeben, an die Nachrichten gesendet werden sollen. Du kannst Dich auch dafür entscheiden, das Betrefffeld im Formular anzuzeigen. Du kannst auch die Inline- oder On-Button-Klick-Validierung sowie die Position der Feldbeschriftung auswählen.

Menü

Mit dem Menüelement kannst Du Deine Menüs überall anzeigen, ziehe einfach das Element darüber und wähle das Menü aus, das Du anzeigen möchtest.

Es gibt einige wirklich coole Styling-Optionen, die mit diesem Element einhergehen:

Burger-Menü: Anstelle eines horizontalen Menüs kannst Du Deiner Webseite ein Burger-Menü hinzufügen. Du kannst auswählen, ob es links, rechts, oben auf Deiner Seite oder über die gesamte Seite angezeigt werden soll. Du kannst das Menü auch über Deinen Inhalten anzeigen oder Deine Inhalte zur Seite schieben.
Menüelementausrichtung: Richte das Menü links, zentriert oder rechts aus.
Verhaltenseinstellungen: Du kannst festlegen, dass Menüs automatisch aktualisiert werden, wenn neue Seiten hinzugefügt werden, und auch Floating-Menüs aktivieren. Schwebende Menüs sind eine großartige Option, wenn Du nur möchtest, dass Deine Navigation schwebt und nicht eine ganze Region.

Es ist erwähnenswert, dass das Menüelement vollständig in ClassicPress-Menüs integriert ist, was bedeutet, dass Du mit mehreren Menüs auf Deiner Webseite arbeiten und diese anzeigen kannst.

Akkordeon

Ähnlich wie das Tabs-Element ist das Accordion-Element eine großartige Option, wenn Du viel Inhalt auf kleinem Raum anzeigen möchtest.

Es wird mit einem grundlegenden voreingestellten Stil geliefert, abhängig von dem von Dir verwendeten Standardtheme, aber Du kannst jederzeit Deinen eigenen benutzerdefinierten Präsentationsstil in den Einstellungen erstellen.

Button

Unabhängig davon, ob Du einen Link zu einer anderen Seite Deiner Webseite oder einen Link hinzufügen möchtest, über den Benutzer ein Produkt herunterladen können, kannst Du mit dem Schaltflächenelement eine Schaltfläche erstellen und gestalten, die zu Deiner Webseite passt.

Verwenden des Button-Elements

Wie bei allen Elementen ziehe es an die gewünschte Stelle und eine Standardschaltfläche wird angezeigt. Du kannst auf die Schaltfläche doppelklicken, um den Text zu bearbeiten, oder zu den Einstellungen gehen, um ein voreingestelltes Schaltflächendesign auszuwählen oder zu erstellen.

Wenn Du ein voreingestelltes Schaltflächendesign bearbeitest, kannst Du den Rahmen ändern, abgerundete Ecken hinzufügen und Schriftarten und Farben auswählen. Es gibt noch viel mehr, was Du mit benutzerdefiniertem CSS tun kannst, aber wir werden uns das in einem anderen Beitrag ansehen.

Slider

Mit Upfront kannst Du Slider als Regionen, aber auch als Elemente hinzufügen. Wenn Du über das Slider-Element ziehst, kannst Du wählen, ob Du einen Slider nur mit Bildern, Text über Bildern, Text unter Bildern oder Text an der Seite hinzufügen möchtest.

In den Einstellungen kannst Du den Sliderstil ändern, wenn Du Deine Meinung änderst. Du kannst auch ändern, wie schnell sich die Bilder drehen und wie sie übergehen (nach oben, unten, links, rechts oder überblenden). Die Schieberegler können auch ein- oder ausgeschaltet werden oder nur beim Hover angezeigt werden.

Beiträge

Zu guter Letzt kannst Du mit dem Posts-Element einen einzelnen Beitrag oder eine Liste von Beiträgen anzeigen. Du kannst auch auswählen, ob ein Auszug oder ein vollständiger Beitrag angezeigt werden soll.

Jetzt kommt der coole Teil: Du kannst auswählen, welche Teile Deiner Beiträge angezeigt werden sollen. Wenn Du also nur Deinen Beitragstitel, den Beitragsinhalt und das Datum anzeigen möchtest, kannst Du dies tun. Darüber hinaus kannst Du die Reihenfolge, in der jeder dieser Beitrags-Teile angezeigt werden soll, per Drag & Drop verschieben, sodass Du Deinen Beitrags-Titel, das Datum und dann den Inhalt anzeigen oder die Reihenfolge ändern können, wenn Du Deine Meinung änderst.

Wenn Du die Option Beitragsliste aktiviert hast, kannst Du die Paginierung in den Einstellungen hinzufügen.

Elemente löschen

Nachdem wir nun mit den Elementen von UpFront vertraut sind, können wir mit der Anpassung von Spirit fortfahren.

Beginnen wir mit dem Löschen der Elemente, die wir nicht benötigen. Um ein Element zu löschen, bewege einfach den Mauszeiger darüber und klicke auf das rote „x“-Symbol in der oberen rechten Ecke.

Ich werde fortfahren und die Elemente löschen, die ich nicht benötige, einschließlich des Textelements in der Kopfzeile, der Textelemente im Abschnitt „Über“, die von Spirit übrig geblieben sind, und der Textelemente in der Fußzeile.

Elemente einfügen

Jetzt kommt der spaßige Teil – das Hinzufügen neuer Elemente zu unserer Seite!

Um ein Element hinzuzufügen – und wie ich bereits erwähnt habe – musst Du nur auf eines der Elemente in der Liste der ziehbaren Elemente klicken und es auf Deine Webseite ziehen.

Ich werde die neuen Elemente hinzufügen, die ich für meine Website benötige, darunter ein Logo, eine Text-Unterüberschrift, eine Schaltfläche und Bilder für den Kopfbereich. Sieh Dir das GIF unten an, um die Änderungen in Aktion zu sehen.

Klonen von Elementen

Wenn Du ein Layout mit ähnlich großen Elementen hast, z. B. drei Textbereiche, musst Du nicht drei separate Textelemente erstellen und diese individuell gestalten. Stattdessen kannst Du nur einen Textbereich erstellen und ihn klonen.

Um ein Element zu klonen, klicke mit der rechten Maustaste und wähle „Klonen“ in der Dropdown-Liste. Das geklonte Element wird sich an den Mauszeiger anheften und an Ort und Stelle fallen, wo immer Du klickst.

Wenn Du einen Klon erstellst, handelt es sich um einen absoluten Klon, was bedeutet, dass jeder einzelne Aspekt des ursprünglichen Elements kopiert wird, was zu einem identischen Element führt, das Du dann bearbeiten kannst.

Mit dem Klon-Tool kann ich schnell die drei Textbereiche im Hauptbereich der Homepage erstellen.

Zusammenfassung

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

Alle Elemente im Geist, die wir nicht brauchen, wurden gelöscht.
Wir haben neue Textelemente zum Header, Hauptteil der Homepage und Fußzeile hinzugefügt und gestaltet.
Das Spirit-Logo wurde durch das neue Logo für unsere Webseite ersetzt.
Neue Schaltflächen wurden erstellt und gestaltet.
Wir haben auch neue Bilder zum Header, Hauptteil der Homepage und zur Fußzeile hinzugefügt.

Wir haben in diesem Beitrag viel getan! Im nächsten Artikel dieser Reihe werden wir die Arbeit an unserer neuen Webseite fortsetzen und uns diesmal darauf konzentrieren, wie benutzerdefinierter Code implementiert werden kann, um das Erscheinungsbild unserer Webseite weiter anzupassen.

Lies den nächsten Beitrag in dieser Serie: Teil 4: Optimieren von Elementen und benutzerdefiniertem Code

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

Keine Themen zum Anzeigen...