Von Bildern und Texten bis hin zu Galerien, Karten und Schaltflächen – mit UpFront kannst Du Elemente per Drag-and-Drop an jeder beliebigen Stelle Deiner Webseite platzieren.
Während „Regionen“ die Bausteine ​​für die Strukturierung Deiner Webseite liefern, sorgen die „Elemente“ für die eigentliche Funktionalität. Insgesamt stehen 16 Elemente zur Verfügung, mit denen Du alles Mögliche erstellen kannst – von einfachen Textbereichen bis hin zu komplexen, individuell programmierten Lösungen.
Im heutigen Beitrag stellen wir die einzelnen Elemente vor, erklären ihre Funktionsweise und gehen auf die jeweiligen Einstellungen ein.
Dies ist der dritte Teil unserer Serie zur Einführung in Upfront. Wir nehmen uns ein bestehendes Upfront-Theme vor – in diesem Fall „Spirit“ – und wandeln es in eine völlig neue Webseite um, inklusive eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout.

Wir nehmen das „Spirit“-Theme, überarbeiten dessen Bereiche und Inhalte grundlegend und wandeln es in ein Produkt-Theme um – komplett mit eigenem Branding, Farben, Schaltflächen, Bildern, Typografie, Newsletter-Anmeldeformular und weiteren Elementen.
Im bisherigen Verlauf dieser Serie haben wir die Theme-Farben angepasst, benutzerdefinierte Schriftarten hinzugefügt, Bereiche entfernt, das Header-Bild aktualisiert und einen Videobereich in voller Breite eingefügt. Hier ist ein Überblick über unseren bisherigen Fortschritt:

Links siehst Du den aktuellen Stand, rechts das Ziel, auf das wir hinarbeiten.

Upfront-Elemente

Text

Mit dem Textelement kannst Du an jeder beliebigen Stelle Deiner Webseite einen neuen Textbereich erstellen. Nach dem Erstellen genügt ein Doppelklick, um Deinen Text einzugeben.
Mehr über die Textgestaltung und die Verwendung der Bearbeitungsleiste erfährst Du unter Upfront: Grundlagen, Theme-Farben und Typografie.

Bild

Füge Deiner Webseite ein Bild hinzu. Ziehe das Element einfach per Drag-and-Drop an die gewünschte Stelle. Der Elementrahmen fordert Dich auf, ein neues Bild hinzuzufügen. Du kannst dann eine neue Datei hochladen oder ein vorhandenes Bild aus Deiner Mediathek auswählen.

– Upfront-Zuschneidefunktion: Besser als die Standard-Zuschneidefunktion.
Die Abmessungen werden in der oberen linken Ecke angezeigt, sodass Du die Größe des Bildes an die gewünschte Höhe und Breite anpassen kannst.
Wenn Du mit der Maus über das Bild fährst, erscheinen weitere Optionen zum Zuschneiden, Verlinken und Hinzufügen einer Bildunterschrift sowie Bildeinstellungen für Alt-Texte.
Ein Klick auf die Zuschneide-Option bietet zudem die Möglichkeit, das aktuelle Bild zu ändern oder auszutauschen.

Galerie

Mit dem Galerie-Element kannst Du – wie der Name schon sagt – eine Galerie anzeigen.
Sobald Du Bilder hinzugefügt hast, stehen Dir in den Element-Einstellungen zahlreiche Optionen für die grundlegende Gestaltung zur Verfügung.
– Label-Sortierung: Wenn diese Funktion aktiviert ist, erscheint ein „Tag“-Symbol in den Einstellungen für jedes einzelne Bild. Wenn Du Bildern Labels (Schlagwörter) hinzufügst, werden diese oben in der Galerie angezeigt.
– Thumbnail-Seitenverhältnis: Wähle eines der drei Standard-Seitenverhältnisse (1:1, 2:3 oder 4:3) oder behalte das Standardverhältnis Ihres Themes bei.
– Thumbnail-Größe: Verschiebe den Regler, um die Größe von Bildern anzupassen. Die Abmessungen werden darunter angezeigt, damit Du die Größe im Blick behalten kannst.
– Thumbnail-Abstand: Verschiebe den Regler erneut, um den Abstand zwischen den Bildern anzupassen. Wenn Du die Option „Gleichmäßiger Abstand“ darunter aktivierst, fügt UpFront automatisch denselben Abstand um alle Bilder der Galerie herum hinzu.
– Einstellungen für Bildunterschriften: Füge Bildunterschriften über oder unter den Bildern hinzu – oder verzichte ganz darauf.

– Verwendung des Galerie-Elements
Um die Reihenfolge der Bilder zu ändern, stelle den Schalter unter dem Einstellungs-Zahnrad auf „Ein“ (On) und verschiebe die Bilder per Drag-and-Drop an die gewünschte Position. Ist die Funktion deaktiviert, kannst Du die Bilder ebenfalls verschieben.
Wie beim Bild-Element gibt es auch hier Einstellungen für einzelne Galeriebilder, sodass Du diese austauschen und zuschneiden kannst. Zudem kannst Du auf andere Beiträge, Seiten oder Webseiten verlinken oder auf größere Versionen bzw. eine Lightbox verweisen.

Karte

Wenn Du schon einmal viel Zeit damit verbracht hast, eine Karte auf Deiner Webseite einzurichten, wirst Du begeistert sein, wie einfach das mit Upfront geht.
Du musst lediglich das Kartenelement auf die Seite ziehen, eine Adresse eingeben (oder Deinen aktuellen Standort verwenden) und die Eingabetaste drücken. Die Karte aktualisiert sich entsprechend Deines Standorts.

Du kannst die Karte in den Einstellungen anpassen:
– Kartenstandort: Gib eine neue Adresse ein, um die Karte zu aktualisieren.
– Zoomstufe: Verwende den Schieberegler, um in die Karte hinein- oder herauszuzoomen.
– Kartenstil: Ändere die Standardansicht (Straßenkarte) in Satellit, Hybrid oder Gelände.
– Kartensteuerelemente: Aktiviere Funktionen wie Verschieben, Zoomen, Kartentyp, Maßstab, Street View und Übersichtskarte.
– Verschiebbare Karte: Aktiviere diese Option, wenn Nutzer die Karte anklicken und verschieben können sollen.
– Marker ausblenden: Blende die rote Stecknadel aus, die den Standort auf der Karte markiert.

– Verwendung des Like-Box-Elements

Like-Box

Oder besser gesagt: Facebook-Like-Box. Das ist ganz einfach: Ziehe das Element auf Deine Webseite, gib die URL Deiner Facebook-Seite ein und drücke die Eingabetaste. Das Element aktualisiert sich und zeigt Deine Facebook-Freunde an.
Je größer Du die Like-Box ziehst, desto mehr Facebook-Nutzer können auf Deiner Webseite angezeigt werden.

YouTube

Egal, ob Du nur ein einzelnes Video oder eine ganze Liste von Videos einbinden möchtest – das YouTube-Element erledigt beides.
Wenn Du das Element auf die Seite ziehst, wirst Du aufgefordert, entweder mehrere Videos oder ein einzelnes Video auszuwählen. Triff Deine Wahl und nimm die Einstellungen vor.

Einzelnes Video

– Video-URL: Gib die URL ein.
– Titel: Lege fest, wie viele Zeichen für den Titel angezeigt werden sollen.
– Beschreibung: Gib die maximale Zeichenanzahl für die Beschreibung an.

Mehrere Videos

– **Galerie oder Liste:** Wählen Sie aus, wie die Videos angezeigt werden sollen.
– **Nutzerkanal oder Playlist:** Treffen Sie eine Auswahl und geben Sie Ihren YouTube-Nutzernamen oder die Kanal-ID ein.
– **Neueste Videos anzeigen:** Legen Sie fest, wie viele Videos angezeigt werden sollen. – **Titel:** Geben Sie eine maximale Zeichenanzahl für den Titel ein.
– **Beschreibung:** Geben Sie eine maximale Zeichenanzahl für die Beschreibung ein. Diese Option steht nicht zur Verfügung, wenn Sie die Option „Liste“ ausgewählt haben.
– **Thumbnail-Größe:** Verschieben Sie den Schieberegler, um die Größe der Videobilder anzupassen.
– Verwendung des Tabs-Elements.
### Tabs (Registerkarten)
Wenn Sie mehr Inhalte auf weniger Raum anzeigen möchten, bieten Tabs eine elegante Lösung. Das Standard-Tab-Element verfügt bereits über ein grundlegendes Design. Eigene Stile lassen sich einfach hinzufügen, und es gibt Optionen zur Anpassung der Zustände „Aktiv“, „Hover“ (beim Überfahren mit der Maus) und „Statisch“ für die Tab-Titel. Sie können Tabs sogar mit individuellem CSS gestalten; wie Sie eigenen Code in Ihre Website einbinden, erfahren Sie jedoch ausführlich im nächsten Beitrag dieser Serie.
### Widget
In Upfront gibt es keine speziellen „Widget-Bereiche“, da Ihre gesamte Website widget-fähig ist. Das bedeutet, dass Sie Widgets an einer beliebigen Stelle Ihrer Website platzieren können. Ziemlich cool, oder?
Nachdem Sie das Widget-Element auf Ihre Website gezogen haben, gehen Sie zu den Einstellungen, um ein Widget auszuwählen. Sie können auf alle Standard-WordPress-Widgets zugreifen – wie etwa Seiten, Kalender oder Archive – oder jedes andere Widget wählen, das durch Ihre Plugins bereitgestellt wird.
Angenommen, Sie möchten ein einfaches Kontaktformular mit unserem Kontakt-Widget anzeigen: Installieren und aktivieren Sie einfach das Plugin, öffnen Sie Ihre Website in Upfront und ziehen Sie das Widget-Element an die gewünschte Stelle für das Formular. Wählen Sie „Kontaktformular“ aus der Dropdown-Liste und klicken Sie auf „OK“. Fertig!
Fügen Sie Ihrer Website mithilfe des Code-Elements einen Bandcamp-Musikplayer hinzu.
### Code
Das Code-Element veranschaulicht eindrucksvoll die Leistungsfähigkeit von Upfront. Wenn Sie das Element auf die Seite ziehen, können Sie zwischen „Code von Drittanbietern einbetten“ (Embed 3rd Party code) und „Eigenen Code schreiben“ (Write Custom Code) wählen.

Die Option zum Einbetten von Code ist dafür gedacht, Einbettungscodes von Websites wie Bandcamp, Twitter und SoundCloud hinzuzufügen.
Die Option für eigenen Code richtet sich an fortgeschrittene Nutzer, die ein eigenes Element für ihre Website programmieren möchten. Stellen Sie sich zum Beispiel vor, Sie möchten ein Bild Ihrer Katze auf der Website präsentieren, das beim Anklicken die Datei „meow.mp3“ abspielt. Genau das lässt sich mit dem Code-Element umsetzen.
Natürlich gibt es noch viele weitere nützliche Anwendungsmöglichkeiten für das Code-Element. Sie könnten beispielsweise einen „Zurück nach oben“-Button oder sogar ein individuelles Produktkarussell erstellen.
### Login
Mit dem Login-Element können Sie ein Anmeldeformular an einer beliebigen Stelle Ihrer Website platzieren. Wenn Sie das Element auf die Seite ziehen, wird es standardmäßig als Formular angezeigt; in den Einstellungen können Sie dies jedoch in ein Dropdown-Menü ändern, falls der Login-Bereich nicht zu viel Platz auf Ihrer Website einnehmen soll. Zudem lassen sich der Text für den Anmelde-Button anpassen und ein Abmelde-Link einblenden.
– Erstellen Sie ein einfaches E-Mail-Formular mit dem Kontakt-Element.
### Kontakt
Mit dem Kontakt-Element können Sie ein einfaches Formular mit Feldern für Name, E-Mail-Adresse und Nachricht anzeigen.
In den Einstellungen können Sie die E-Mail-Adresse hinterlegen, an die die Nachrichten gesendet werden sollen. Außerdem lässt sich festlegen, ob das Betreff-Feld im Formular angezeigt werden soll. Zudem können Sie zwischen einer Validierung direkt im Eingabefeld (Inline-Validierung) oder erst beim Klicken auf den Button wählen sowie die Position der Feldbezeichnung bestimmen.
### Menü
Mit dem Menü-Element können Sie Ihre Menüs an beliebiger Stelle anzeigen lassen: Ziehen Sie das Element einfach an die gewünschte Position und wählen Sie das Menü aus, das angezeigt werden soll.
Dieses Element bietet einige wirklich tolle Styling-Optionen:
– **Burger-Menü:** Anstelle eines horizontalen Menüs können Sie ein Burger-Menü zu Ihrer Website hinzufügen. Sie können festlegen, ob es links, rechts, oben auf der Seite oder über die gesamte Seite hinweg angezeigt werden soll. Zudem können Sie wählen, ob das Menü über dem Inhalt liegen oder den Inhalt zur Seite verschieben soll.
– **Ausrichtung der Menüpunkte:** Richten Sie das Menü linksbündig, zentriert oder rechtsbündig aus.
– **Verhaltenseinstellungen:** Sie können Menüs automatisch aktualisieren lassen, wenn neue Seiten hinzugefügt werden, und „Floating Menüs“ (schwebende Menüs) aktivieren. Schwebende Menüs sind eine hervorragende Option, wenn nur die Navigation schweben soll, anstatt eines ganzen Bereichs.
Erwähnenswert ist auch, dass das Menü-Element vollständig in die WordPress-Menüfunktion integriert ist; Sie können also mit mehreren Menüs auf Ihrer Website arbeiten und diese anzeigen lassen.
### Akkordeon
Ähnlich wie das Tabs-Element ist das Akkordeon-Element eine großartige Wahl, wenn Sie viele Inhalte auf wenig Raum unterbringen möchten.
Es verfügt über einen grundlegenden voreingestellten Stil (abhängig vom verwendeten Standard-Theme), doch Sie können in den Einstellungen jederzeit eigene, individuelle Stilvorlagen erstellen.
### Button
Egal, ob Sie einen Link zu einer anderen Seite Ihrer Website oder eine Download-Möglichkeit für ein Produkt einfügen möchten – mit dem Button-Element können Sie eine Schaltfläche erstellen und passend zu Ihrer Website gestalten.
– Verwendung des Button-Elements
Wie bei allen Elementen ziehen Sie es einfach an die gewünschte Stelle, woraufhin ein Standard-Button angezeigt wird. Sie können per Doppelklick auf den Button den Text bearbeiten oder in den Einstellungen ein vordefiniertes Button-Design auswählen bzw. erstellen.
Wenn Sie ein vordefiniertes Button-Design bearbeiten, können Sie den Rahmen anpassen, abgerundete Ecken hinzufügen sowie Schriftarten und Farben wählen. Mit individuellem CSS sind noch viele weitere Anpassungen möglich – darauf gehen wir jedoch in einem anderen Beitrag ein.
### Slider
Mit Upfront können Sie Slider sowohl als Bereiche (Regions) als auch als Elemente hinzufügen. Wenn Sie das Slider-Element auf die Seite ziehen, können Sie wählen, ob der Slider nur Bilder, Text über den Bildern, Text unter den Bildern oder Text neben den Bildern enthalten soll.
In den Einstellungen können Sie den Stil des Sliders nachträglich ändern. Zudem lassen sich die Geschwindigkeit des Bildwechsels sowie die Übergangseffekte (nach oben, unten, links, rechts oder Überblenden) anpassen. Auch die Slider-Bedienelemente können ein- oder ausgeschaltet oder so konfiguriert werden, dass sie nur beim Überfahren mit der Maus (Hover-Effekt) erscheinen.
### Beiträge
Nicht zuletzt ermöglicht dir das Element „Beiträge“ (Posts), einen einzelnen Beitrag oder eine Liste von Beiträgen anzuzeigen. Du kannst zudem wählen, ob ein Auszug oder der vollständige Beitrag dargestellt werden soll.
Und hier kommt das Beste: Du kannst festlegen, welche Teile deiner Beiträge angezeigt werden sollen. Wenn du also nur den Titel, den Inhalt und das Datum des Beitrags anzeigen möchtest, ist das problemlos möglich. Darüber hinaus kannst du die Reihenfolge dieser Elemente per Drag-and-Drop anpassen; so kannst du beispielsweise zuerst den Titel, dann das Datum und schließlich den Inhalt anzeigen lassen – oder die Reihenfolge jederzeit ändern.
Wenn die Option „Beitragsliste“ (Post List) aktiviert ist, kannst du in den Einstellungen eine Paginierung (Seitennummerierung) hinzufügen.
### Elemente löschen
Nachdem wir uns nun mit den Elementen von Upfront vertraut gemacht haben, fahren wir mit der Anpassung von „Spirit“ fort.
Beginnen wir damit, die Elemente zu löschen, die wir nicht benötigen. Um ein Element zu löschen, fährst du einfach mit der Maus darüber und klickst auf das rote „x“-Symbol in der oberen rechten Ecke.
Ich werde nun die überflüssigen Elemente entfernen, darunter das Textelement im Header, die aus der Vorlage „Spirit“ stammenden Textelemente im „Über uns“-Bereich sowie die Textelemente im Footer.
### Elemente einfügen
Jetzt kommt der spaßige Teil: das Hinzufügen neuer Elemente zu unserer Website!
Um ein Element hinzuzufügen – wie bereits erwähnt –, musst du lediglich eines der Elemente aus der Liste der verschiebbaren Elemente (Draggable Elements) anklicken, die Maustaste gedrückt halten und das Element auf deine Website ziehen.
Ich füge nun die für meine Website benötigten Elemente hinzu, darunter ein Logo, eine Text-Unterüberschrift, einen Button sowie Bilder für den Header-Bereich. Sieh dir das untenstehende GIF an, um die Änderungen in Aktion zu erleben.
### Elemente klonen
Wenn dein Layout Elemente ähnlicher Größe enthält – zum Beispiel drei Textbereiche –, musst du nicht drei separate Textelemente erstellen und diese einzeln gestalten. Stattdessen kannst du einfach einen Textbereich erstellen und diesen klonen.
Um ein Element zu klonen, klicke mit der rechten Maustaste darauf und wähle im Dropdown-Menü die Option „Clone“ (Klonen) aus. Das geklonte Element haftet am Mauszeiger und wird an der Stelle platziert, an die Sie klicken.
Beim Klonen entsteht eine exakte Kopie: Jedes einzelne Merkmal des Originalelements wird übernommen, sodass ein identisches Element entsteht, das Sie anschließend bearbeiten können.
Mit dem Klon-Werkzeug kann ich schnell die drei Textbereiche im Hauptteil der Startseite erstellen.
## Fazit
Fassen wir zusammen, was wir bei der Erstellung unserer neuen Website bisher erreicht haben:
– Alle nicht benötigten Elemente der Vorlage „Spirit“ wurden gelöscht.
– Wir haben neue Textelemente im Header, im Hauptbereich der Startseite und im Footer hinzugefügt und gestaltet.
– Das „Spirit“-Logo wurde durch das neue Logo unserer Website ersetzt.
– Neue Schaltflächen wurden erstellt und gestaltet.
– Zudem haben wir neue Bilder in den Header, den Hauptbereich der Startseite und den Footer eingefügt.
Wir haben in diesem Beitrag viel geschafft! Im nächsten Artikel dieser Reihe arbeiten wir weiter an unserer neuen Website und konzentrieren uns darauf, wie sich durch eigenen Code (Custom Code) das Erscheinungsbild und die Gestaltung der Website weiter anpassen lassen.
**Lesen Sie den nächsten Beitrag dieser Reihe:** [Teil 4: Feinabstimmung von Elementen und eigener Code](https://cp-psource.github.io/upfront/tutorial-tweaking.html)