Upfront Teil 7: Arbeiten mit Seiten und Beiträgen

<div>Ganz gleich, ob Du Dein Unternehmensportfolio um eine detaillierte Seite für Produkte und Dienstleistungen erweitern oder einfach nur schnell einen Blogbeitrag verfassen möchtest: Upfront bietet eine leistungsstarke und zugleich intuitive Plattform, mit der Du Seiten und Beiträge direkt im Frontend Deiner Webseite erstellen kannst. Mit Upfront kannst Du Seiten und Beiträge ganz nach Deinen Wünschen gestalten – und Deine Inhalte bleiben auch bei einem Theme-Wechsel erhalten, ganz ohne unerwünschte Shortcodes oder unsaubere Formatierungen. Im heutigen Beitrag – dem letzten Teil unserer Serie zur Einführung in Upfront – zeige ich Dir, wie einfach sich Seiten und Beiträge erstellen lassen. Im Rahmen dieser Serie passen wir ein bestehendes Upfront-Theme an (in diesem Fall „Spirit“) und verwandeln es in eine völlig neue Webseite – inklusive eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout.</div> <div></div> <div></div> <div> <div><strong>Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:</strong></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-part-1-die-basics-themefarben-und-schriftarten/">Teil 1: Die Grundlagen, Themenfarben und Typografie</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-2-strukturierung-deiner-webseite-mit-bereichen/">Teil 2: Strukturieren Deiner Webseite mit Regionen</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-3-layout-deiner-webseite-mit-elementen/">Teil 3: Gestalte Deine Webseite mit Elementen</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-teil-4-elemente-mit-individuellem-code-anpassen/">Teil 4: Elemente und benutzerdefinierten Code optimieren</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-5-plugins-hinzufuegen-und-powerform-formulare-stylen/">Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/">Teil 6: Responsive Webseiten erstellen</a></div> <div><a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-7-arbeiten-mit-seiten-und-beitraegen/">Teil 7: Arbeiten mit Seiten und Beiträgen</a></div> </div> <div></div> <div>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 Rahmen dieser Serie haben wir die Farben des Themes angepasst, eigene Schriftarten eingebunden, Bereiche entfernt, das Header-Bild aktualisiert, einen Videobereich in voller Breite hinzugefügt, ein Newsletter-Anmeldeformular mit „Gravity Forms“ erstellt und gestaltet sowie das responsive Layout für Mobilgeräte optimiert.</div> <div></div> <h2>Einen neuen Beitrag erstellen</h2> <div>Um einen Beitrag zu erstellen, klicke einfach in der linken Seitenleiste auf „New Post“ (Neuer Beitrag). Daraufhin lädt der Upfront-Beitragseditor; hier kannst Du Texte und Bilder zu Deinem Beitrag hinzufügen (klicke dazu einfach doppelt auf die Textbereiche), jedoch keine Upfront-Elemente (darauf kommen wir gleich noch zu sprechen). Sollte Dir die rechte Seitenleiste bekannt vorkommen, liegt das daran, dass sie nahezu identisch mit den Veröffentlichungsoptionen im Beitragseditor ist. Über diese Seitenleiste kannst Du einen Entwurf speichern, eine Vorschau des Beitrags anzeigen sowie den Status, die Sichtbarkeit und das Veröffentlichungsdatum des Beitrags anpassen. Vor allem aber kannst Du hier auf „Publish“ (Veröffentlichen) klicken, um Deinen Beitrag zu veröffentlichen und mit der Welt zu teilen. Im unteren Bereich der Seitenleiste findest Du weitere Optionen zum Hinzufügen von Kategorien und Schlagworten (Tags) sowie zum Anpassen der URL. Wenn Du auf „Publish“ klickst, werden Deine Inhalte gespeichert und veröffentlicht, und die gewohnte Upfront-Seitenleiste erscheint wieder auf der linken Seite. Wenn Du auf „Cancel“ (Abbrechen) klickst, kehrst Du ebenfalls zum Upfront-Editor zurück. Vergiss nicht, Deinen Entwurf zu speichern, da Deine Inhalte sonst verloren gehen.</div> <div></div> <div></div> <h2>Erstellen einer neuen Seite</h2> <div>Das Erstellen einer Seite funktioniert fast genauso wie das Erstellen eines neuen Beitrags. Der einzige Unterschied besteht darin, dass Du nach einem Klick auf „Neue Seite“ in der linken Seitenleiste aufgefordert wirst, der Seite einen Namen zu geben und eine Seitenvorlage auszuwählen. Wenn Du auf „Seite erstellen“ klickst, gelangst Du zum Seiteneditor; dort kannst Du Deiner Seite Texte, Bilder und weitere Elemente hinzufügen. Wichtig ist dabei: Wenn Du dich gegen die Verwendung einer Seitenvorlage entscheidest, kannst Du der Seite keine Elemente hinzufügen (darauf gehen wir gleich noch näher ein).</div> <div></div> <div> <h3>Vorgefertigte Vorlage vs. keine Vorlage</h3> Upfront basiert auf einem Layout-Konzept, das es Dir ermöglicht, komplexe Seiten für Deine Webseite zu erstellen und auch bei einem Theme-Wechsel weiterhin auf Deine Inhalte zuzugreifen. Das bedeutet, dass Du nicht dauerhaft an Upfront gebunden bist und keine Zeit damit verschwenden musst, Shortcodes aus Deinen Seiten zu entfernen, falls Du dich für einen Wechsel des Themes entscheidest. Es ist jedoch wichtig, beim Erstellen einer neuen Seite die richtige Vorlage zu wählen, falls Du später ein anderes Theme verwenden möchtest. Wenn Du eine neue Seite ohne Vorlage erstellst – also im Dropdown-Menü „Page Template“ (Seitenvorlage) die Option „None“ (Keine) wählst –, erstellst Du im Grunde eine Standard-Seite. Der einzige Unterschied besteht darin, dass Dein Inhalt als neues Element gespeichert wird. Wenn Du die neue Seite speicherst oder veröffentlichst und in den Upfront-Editor wechselst, kannst Du Deinen Text wie jedes andere Element verschieben. Um den Seiteninhalt zu bearbeiten, doppelklicke einfach darauf, und Du gelangst zurück in den Seiteneditor. Wenn Du dich hingegen für eine vorgefertigte Vorlage entscheidest, wird Dein Inhalt Teil des Layouts und nicht in der Datenbank Deiner Webseite gespeichert. Das bedeutet: Wenn Du zu einem anderen Theme wechselst – etwa „PS Padma“ –, kannst Du nicht auf Deine Inhalte zugreifen. Sobald Du das ursprüngliche Theme jedoch wieder aktivierst, werden auch die Inhalte wiederhergestellt; sie gehen also nicht verloren. </div> <div> <h3>Hinzufügen von Upfront-Elementen zu Seiten und Beiträgen</h3> Wenn Du eine Seite oder einen Beitrag speicherst oder veröffentlichst, kehrdt Du zum Upfront-Editor zurück, wo Du auf Elemente zugreifen kannst. Das bedeutet, dass Du deinem Beitrag oder Deiner Seite neue Elemente hinzufügen sowie Inhalte verschieben, in der Größe ändern oder löschen kannst (da diese nun als Elemente behandelt werden).  Upfront bietet Nutzern derzeit die Möglichkeit, globale Header- und Footer-Bereiche zu erstellen. Im Theme „Spirit“ fungiert die Navigationsleiste als globaler Header, und der Footer ist – nun ja – der Footer. Wenn Du einen Aspekt eines Bereichs änderst, der als globaler Bereich definiert ist, werden auch alle anderen Seiten, die diesen Bereich nutzen, entsprechend aktualisiert und zeigen den Bereich mit Deinen Änderungen an. Dies ist äußerst praktisch, da die meisten Seiten Deiner Webseite wahrscheinlich über globale Header und Footer verfügen. Du musst diese Elemente also nur an einer einzigen Stelle aktualisieren. Im Theme „Spirit“ verwendet die Startseite keinen globalen Header. Stattdessen gibt es einen „Hero“-Bereich, gefolgt vom Navigationsbereich. Alle anderen Seiten in „Spirit“ nutzen einen globalen Navigations-Header. Wenn Du das Design ändern möchtest, musst Du also den Navigationsbereich auf der Startseite manuell anpassen und ihn anschließend auf allen anderen „Spirit“-Seiten (auf denen er als globaler Bereich definiert ist) ebenfalls ändern. <h3>Zugriff auf Beiträge und Seiten</h3> Um auf die vollständigen Listen Deiner Beiträge und Seiten zuzugreifen, klicke in der linken Seitenleiste auf <strong>Beiträge / Seiten / Kommentare</strong>. Es öffnet sich ein Overlay, in dem Du Deine Inhalte bearbeiten, ansehen oder in den Papierkorb verschieben kannst. Klicke einfach oben auf die Reiter „Beiträge“ und „Seiten“, um zwischen den beiden Ansichten zu wechseln. <h2>Zusammenfassung</h2> In diesem Beitrag haben wir gesehen, wie einfach es ist, Seiten und Beiträge mit Upfront zu erstellen. Dies ist der letzte Beitrag unserer Serie zur Nutzung unserer Theme-Plattform. Im Laufe von sieben Beiträgen haben wir das „Spirit“-Theme angepasst und daraus einen vollständig responsiven One-Pager für ein Produkt entwickelt. Dabei haben wir die Typografie aktualisiert, Bilder sowie ein Video in voller Breite eingebunden und ein Newsletter-Anmeldeformular mit Powerform erstellt und gestaltet. Ich hoffe, diese Artikelreihe war hilfreich für Dich! Mit Upfront ist die individuelle Gestaltung Deiner Webseite so einfach, dass Du nie wieder ein anderes Theme benötigen wirst. Lies den ersten Beitrag dieser Reihe: <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-part-1-die-basics-themefarben-und-schriftarten/"><strong>Teil 1: Grundlagen, Theme-Farben und Typografie</strong></a> </div>