WebMasterService N3rds@Work

8. UpFront Seiten und Beiträge

Wikis > UpFront Wiki > 8. UpFront Seiten und Beiträge

UpFront glänzt wirklich, wenn es darum geht, schöne Inhalte für Deine Webseite zu erstellen. Egal, ob Du einen einzigartig gestalteten Blog-Beitrag oder eine wunderschöne Kontaktseite wünscht, mit UpFront kannst Du jedes Detail jedes Teils Deines Inhalts steuern. Lasse uns Schritt für Schritt neue Beiträge und Seiten erstellen.

8.1 Erstelle einen neuen Beitrag

Klicke zunächst im UpFront-Editor auf Neuen Beitrag.

upfront_create_new_post_button

Schreibmodus

Wichtig zu beachten: Alles, was Du im Schreibmodus erstellst (d. H. Beiträge und Seiten), wird in der Datenbank Deiner WordPress-Webseite gespeichert. Die Titel- und Inhaltsbereiche sind im Wesentlichen dieselben wie die im WordPress-Administrator verfügbaren. Alle mit diesen Bereichen erstellten Inhalte werden in der Datenbank gespeichert und für alle Themen zugänglich gemacht.

Wenn der Schreibmodus aktiv ist, wird die UpFront-Seitenleiste ausgeblendet und Nicht-Post-Elemente ausgeblendet, um ein ablenkungsfreies Schreiberlebnis zu ermöglichen.

Das Schreiben ist einfach: Gib Deinem Beitrag einen Titel, füge ein Funktionsbild hinzu (optional) und beginne mit dem Schreiben Deines Beitrags im Hauptinhaltsbereich.

upfront_post_example

Bilder einfügen

Bilder können eine leistungsstarke Möglichkeit bieten, Ideen in Blog-Beiträgen zu veranschaulichen. UpFront-Bildeinfügungen bieten mehr Kontrolle und Flexibilität für die Platzierung von Bildern in Deinen Blog-Beiträgen, sodass Du beeindruckende Bildlayouts erstellen kannst.

Um ein Bild hinzuzufügen, füge einfach eine doppelte Rückgabe hinzu und bewege den blinkenden Textcursor auf den leeren Absatz, der erstellt wird. Ein Einfügesymbol wird angezeigt. Klicke darauf und wähle das Bild aus, das Du einfügen möchtest. Jedes Theme wird mit einer Sammlung von Bildern geliefert, die für dieses Thema am besten geeignet sind. Du kannst auch Standard-WordPress-Bildeinfügungen verwenden, indem Du im Medienmanager die Option WP-Standardeinstellungen auswählst, um die verschiedenen verfügbaren Bildgrößen anzuzeigen.

Wenn Du mit dem Layout Deines Bildes zufrieden bist, schließe Deinen Beitrag ab, indem Du Tags und Kategorien hinzufügst. Aktualisiere dann den URL-Slug für Deinen Beitrag.

Beitrags-Einstellungen

Im UpFront-Editor siehst Du einen zusätzlichen Dropdown-Bereich, in dem die Einstellungen für den aktuellen Beitrag festgelegt werden.

upfront_post_settings

Auf der ersten Registerkarte kannst Du den Titel, die URL und die Meta-Beschreibung bearbeiten (für Designdesigner). Du kannst den Beitrag auch speichern, den Beitragsstatus ändern und eine Vorschau des Beitrags anzeigen.

upfront_post_settings_cat_tags

Auf der zweiten Registerkarte kannst Du die Kategorien und Tags des Beitrags verwalten.

8.2 Erstelle eine neue Seite

Das Erstellen von Seiten in UpFront unterscheidet sich geringfügig von dem, was Du sonst mit WordPress tun würdest. Wenn Du auf “Neue Seite” klickst, wirst Du aufgefordert, eine von drei Optionen auszuwählen: Seitenname, Permalink oder Seitenvorlage. Wenn Du eine neue Seite ohne Vorlage erstellst, ist dies eine ähnliche Erfahrung wie beim Erstellen eines neuen Beitrags mit dynamischem Inhalt, der den Schreibmodus verwendet.

Durch das Erstellen einer Seite als eine Vorlage kannst Du ein vorhandenes Seitenvorlagen-Design replizieren und verwenden. Derzeit enthalten alle Seitenvorlagen statische UpFront-Elemente. Dies bedeutet, dass mit ihnen erstellte Inhalte und Layouts nur für das derzeit aktive Theme verfügbar sind.

Beitrags-Vorlage ändern

UpFront 1.1 führte eine intuitivere Erfahrung mit einzelnen Posts ein. Anstelle des imposanten Pfostenblocks, der in älteren Versionen der Plattform verwendet wurde, führte Version 1.1 das Konzept dynamischer Elemente ein und zerlegte Pfostenblöcke in eine Reihe kleinerer, entkoppelter Elemente. Diese Änderung bietet eine bessere Kontrolle über die einzelne Beitragsvorlage.

Ändern des Aussehens der Post-Vorlage

Lasse uns das Potenzial der neuen Erfahrung mit einzelnen Beitrag anhand eines Beispiels untersuchen, mit dem die Beitrags-Vorlage für das Panino-Theme geändert wird.

Panino single post screenshot

Das Bild hier zeigt das ursprüngliche Panino-Post-Layout (links) und das geänderte Layout (rechts).

Im Standardlayout sind die Teile Titel, Datum und Inhalt im Post-Datenelement enthalten. Als solche bilden sie alle einen Block. Du kannst es jedoch auflösen. Hier sind einige der Schritte, die zum Erstellen des Layouts auf der rechten Seite erforderlich sind:

  • Lösche das Feature-Image-Element
  • Wähle das Element Post Data aus, erstelle eine neue Voreinstellung, nennee Titel und schalte die Datums- und Inhaltsteile aus
  • Füge ein Feature-Image-Element direkt unter dem Titel hinzu
  • Erstelle eine weitere Voreinstellung für Post-Daten mit dem Namen Datum und schalte die Titel- und Inhaltsteile aus
  • Füge ein Autorenelement hinzu und positioniere es rechts vom Datum

Im Vergleich zum ursprünglichen Layout enthielt die Struktur:

  • Ein Feature-Bildbereich
  • Post Data Default {Datum, Titel, Inhalt}

Die neue Layoutstruktur lautet wie folgt:

  • Post-Daten — Title
  • Feature Bild
  • Post-Daten — Date
  • Autor
  • Post-Daten — Content

Wir haben das Layout in kleinere, wieder verwendbare Teile unterteilt. Es gibt noch einige andere Verzierungen, die wir vorgenommen haben, z. B. die Größe des Autorengravatars auf 50 Pixel zu ändern, ihn zu einem Kreis zu machen und ihn in Übereinstimmung mit dem Autorennamen zu positionieren. Jedes dynamische Element verfügt über eigene Einstellungen, die wie jedes andere Element in UpFront untersucht werden können. Sie werden auch mit einer Vorlage geliefert, bei der es sich um eine HTML-Vorlage handelt, die Sie bearbeiten können, um das Erscheinungsbild Ihrer Website weiter anzupassen. Beispielsweise lautet der Autorentext standardmäßig Nach Autorenname, aber im aktualisierten Panino-Design haben wir die Vorlage geändert und Nach entfernt. Ähnlich wie bei anderen Aspekten von UpFront können Benutzer mit Datenelementen auch benutzerdefiniertes CSS hinzufügen, wodurch sie äußerst flexibel sind.

Wiki-Kategorie: Stichworte: