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.
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 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.
Like-Box
– Verwendung des Like-Box-Elements
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ähle aus wie die Videos angezeigt werden sollen.
– Nutzerkanal oder Playlist: Triff eine Auswahl und gib Deinen YouTube-Nutzernamen oder die Kanal-ID ein.
– Neueste Videos anzeigen: Lege fest, wie viele Videos angezeigt werden sollen. – **Titel:** Lege eine maximale Zeichenanzahl für den Titel fest.
– Beschreibung: Gib eine maximale Zeichenanzahl für die Beschreibung ein. Diese Option steht nicht zur Verfügung, wenn Du die Option „Liste“ ausgewählt hast.
– Thumbnail-Größe: Verschiebe den Schieberegler, um die Größe der Videobilder anzupassen.
Tabs (Registerkarten)
Wenn Du mehr Inhalte auf weniger Raum anzeigen möchtest, 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. Du kannst Tabs sogar mit individuellem CSS gestalten; wie Du eigenen Code in Dein Theme einbindest, erfährst Du jedoch ausführlich im nächsten Beitrag dieser Serie.
Widget
In Upfront gibt es keine speziellen „Widget-Bereiche“, da dein gesamtes Theme Widget-fähig ist. Das bedeutet, dass Du Widgets an einer beliebigen Stelle Deiner Webseite platzieren kannst. Ziemlich cool, oder?
Nachdem Du das Widget-Element auf Dein Theme gezogen hast, gehst Du zu den Einstellungen, um ein Widget auszuwählen. Du kannst auf alle Standard-WordPress-Widgets zugreifen – wie etwa Seiten, Kalender oder Archive – oder jedes andere Widget wählen, das durch Deine Plugins bereitgestellt wird.
Angenommen, Du möchtest ein einfaches Kontaktformular mit unserem Kontakt-Widget anzeigen: Installiere und aktiviere einfach das Plugin, öffne deine Webseite in Upfront und ziehe das Widget-Element an die gewünschte Stelle für das Formular. Wähle „Kontaktformular“ aus der Dropdown-Liste und klicke auf „OK“. Fertig!
Code
– Füge deiner Webseite mithilfe des Code-Elements einen Bandcamp-Musikplayer hinzu.
Das Code-Element veranschaulicht eindrucksvoll die Leistungsfähigkeit von Upfront. Wenn Du das Element auf die Seite ziehst, kannst Du 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 Webseiten 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 Webseite/Theme programmieren möchten. Stelle Dir zum Beispiel vor, Du möchtest ein Bild Deiner Katze auf der Webseite 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. Du könntest beispielsweise einen „Zurück nach oben“-Button oder sogar ein individuelles Produktkarussell erstellen.
Login
Mit dem Login-Element kannst Du ein Anmeldeformular an einer beliebigen Stelle Deiner Webseite platzieren. Wenn Du das Element auf die Seite ziehst, wird es standardmäßig als Formular angezeigt; in den Einstellungen kannst Du dies jedoch in ein Dropdown-Menü ändern, falls der Login-Bereich nicht zu viel Platz auf Deiner Webseite einnehmen soll. Zudem lassen sich der Text für den Anmelde-Button anpassen und ein Abmelde-Link einblenden.
Kontakt
– Erstelle ein einfaches E-Mail-Formular mit dem Kontakt-Element.
Mit dem Kontakt-Element kannst Du ein einfaches Formular mit Feldern für Name, E-Mail-Adresse und Nachricht anzeigen.
In den Einstellungen kannst Du 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 kannst Du 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 kannst Du deine Menüs an beliebiger Stelle anzeigen lassen: Ziehe das Element einfach an die gewünschte Position und wähle das Menü aus, das angezeigt werden soll.
Dieses Element bietet einige wirklich tolle Styling-Optionen:
– Burger-Menü: Anstelle eines horizontalen Menüs kannst du ein Burger-Menü zu Deinem Theme hinzufügen. Du kannst festlegen, ob es links, rechts, oben auf der Seite oder über die gesamte Seite hinweg angezeigt werden soll. Zudem kannst Du wählen, ob das Menü über dem Inhalt liegen oder den Inhalt zur Seite verschieben soll. ABSOLUT NÜTZLICH IM RESPONSIVE-MODUS!
– Ausrichtung der Menüpunkte: Richte das Menü linksbündig, zentriert oder rechtsbündig aus.
– Verhaltenseinstellungen: Du kannst 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 ClassicPress-Menüfunktion integriert ist; Du kannst also mit mehreren Menüs auf Deiner Webseite arbeiten und diese anzeigen lassen.
Akkordeon
Ähnlich wie das Tabs-Element ist das Akkordeon-Element eine großartige Wahl, wenn Du viele Inhalte auf wenig Raum unterbringen möchtest.
Es verfügt über einen grundlegenden voreingestellten Stil (abhängig vom verwendeten Standard-Theme), doch Du kannst in den Einstellungen jederzeit eigene, individuelle Stilvorlagen erstellen.
Button
Egal, ob Du einen Link zu einer anderen Seite Deiner Webseite oder eine Download-Möglichkeit für ein Produkt einfügen möchtest – mit dem Button-Element kannst Du eine Schaltfläche erstellen und passend zu Deiner Webseite gestalten.
– Verwendung des Button-Elements
Wie bei allen Elementen ziehe es einfach an die gewünschte Stelle, woraufhin ein Standard-Button angezeigt wird. Du kannst per Doppelklick auf den Button den Text bearbeiten oder in den Einstellungen ein vordefiniertes Button-Design auswählen bzw. erstellen.
Wenn Du ein vordefiniertes Button-Design bearbeitest, kannst Du 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 kannst du Slider sowohl als Bereiche (Regions) als auch als Elemente hinzufügen. Wenn Du das Slider-Element auf die Seite ziehst, kannst Du 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 kannst du 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 Webseite!
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 Webseite 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 Du klickst.
Beim Klonen entsteht eine exakte Kopie: Jedes einzelne Merkmal des Originalelements wird übernommen, sodass ein identisches Element entsteht, das Du anschließend bearbeiten kannst.
Mit dem Klon-Werkzeug kann ich schnell die drei Textbereiche im Hauptteil der Startseite erstellen.
Zusammenfassung
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.
Lies den nächsten Beitrag dieser Reihe: Teil 4: Feinabstimmung von Elementen und eigener Code
