Snippets für Inhaltsseiten einfach erklärt

Wir gehen mit dir einmal die Ordner in der Sidebar durch, erklären dir die wichtigsten Snippets und zeigen dir anhand von Beispielen die wichtigsten Funktionen, die unsere Snippets haben. Viele Funktionen haben sie gemeinsam, sodass du nach und nach mit der Anwendung der Snippets vertrauter wirst.

Wenn du als admin in der cloud software angemeldet bist, kannst du dich in den Designmodus einer beliebigen Seite navigieren und findest dann auf der rechten Seite eine Sidebar mit all unseren Snippets. Damit du diese nicht von oben bis unten durchsuchen musst, findest du ganz oben eine Sortierung nach Typ, die dir die Suche erleichtert. Außerdem kannst du im Suchfeld nach einem bestimmten Begriff suchen.

Kacheln

Schauen wir uns zuerst an, welche Möglichkeiten du mit Kacheln hast. Du siehst, die Liste ist lang. Wir zeigen dir jetzt an ein paar Beispielen, wie die unterschiedlichen Arten von Kacheln funktionieren.

Für einen Inhalt, also ein Foto, eine Galerie oder ein Video mit Text daneben, kannst du die passenden Snippets auf die Seite ziehen. Du findest die verschiedenen Varianten immer mit Bild und Video rechts oder Bild links. Wenn du das Snippet auf die Seite ziehst, kannst du einfach deinen Text direkt dort anpassen und musst dafür nicht in den Code. Dein Bild kannst du ändern, indem du auf den blauen Button mit der Kamera klickst. Im sich öffnenden Dialog kannst du dann entweder ein Foto aus deinen Medien auswählen, ein Foto von deinem Computer hochladen oder über den “Extern hinzufügen”-Button ein Foto aus unserer großen Foto-Datenbank auswählen. Wenn du ein Foto ausgewählt hast, kannst du mit Klick auf den orangenen Button noch ein paar Anpassungen vornehmen. Hier kannst du den Titel ändern, der auch für deine Suchmaschinen-Optimierung wichtig ist. Außerdem kannst du die Skalierung ändern, die Bildgröße anpassen und dem Bild eine Verlinkung hinzufügen.

Probier dich einfach mal durch die unterschiedlichen Snippets und probier aus, welche Möglichkeiten du hast. Am besten legst du dir dafür extra eine Testseite an, auf der du nach Herzenslust austesten kannst, welche Snippets dir am besten gefallen.

Überschriften

Unter “Überschriften” findest du genau das, was du dort erwarten würdest. Hier haben wir für dich Snippets für alle wichtigen Überschriften angelegt, die du auch einfach wieder auf die Seite ziehen kannst. Den Text deiner Überschrift kannst du jetzt auch ganz einfach wieder direkt auf der Seite ändern, ohne dafür in den Code zu müssen. Wenn du dich darin aber gut auskennst, kannst du mit Klick auf den blauen Button an der Überschrift in den Code des Snippets gelangen.

Text

Das Gleiche findest du auch für Texte, auch hier haben wir dir Snippets angelegt. Beim Text hast du ein paar tolle Möglichkeiten, die wir dir jetzt zeigen wollen. Das gilt übrigens für alle Textbereiche in den Snippets, die du bei uns findest.

Wenn du mit der Maus einmal in den Text klickst, öffnet sich auf der linken Seite eine Sidebar. Hier hast du unterschiedliche Möglichkeiten zur Formatierung deines Textes. Du kannst zum Beispiel ein Wort oder eine Phrase mit der Maus auswählen und dann mit Klick auf die Sidebar den Text formatieren. Hier kannst du fett, kursiv, unterstrichen oder durchgestrichen auswählen. Außerdem kannst du die Textfarbe ändern, die Schriftgröße anpassen oder die Textausrichtung ändern. Unsere Empfehlung: unsere Kollegen haben dir deine Schriften, Farben und Schriftgrößen bereits passend zu deinem Corporate Design eingestellt und du musst eigentlich nichts selber anpassen. Um ein einheitliches Bild zu behalten, empfehlen wir, keine gesonderten Schriftfarben oder -größen zu verwenden.

Eine spannende Sache gibt es aber hier noch für dich: Eine Verlinkung setzen. Dafür wählst du einfach das Wort aus, von dem aus du auf einen anderen Inhalt verlinken möchtest und klickst dann einfach auf den “Verknüpfung”-Button. In dem sich öffnenden Fenster kannst du dann einen Titel für die Verlinkung angeben (der ist wieder wichtig für deine Suchmaschinen-Optimierung). Außerdem kannst du auf eine URL, eine Seite oder auf eine Datei verlinken und auswählen, ob sich der Link in einem neuen Fenster öffnen soll, oder nicht. Klicke dann einfach auf “Speichern” und deine Verlinkung wurde gesetzt.

Bilder + Beschriftung

Hier findest du mehrere Bilder mit Text. Wie du Bilder und Text bearbeiten kannst, hast du ja bereits gelernt und die Vorgehensweise ist genau die gleiche. Das Schöne an unseren Snippets ist, dass viele ähnlich funktionieren und du so nach und nach immer vertrauter mit ihrer Anwendung wirst.

Galerien und Container

Hier wird es etwas spannender. Denn hier kannst du Galerien und Inhaltscontainer hinterlegen. Wie du die anlegst, erfährst du in den Beiträgen “Galerien anlegen und befüllen” und “Inhaltscontainer anlegen und befüllen”. Wir gehen hier jetzt einmal davon aus, dass du schon eine Galerie und/oder einen Container hast, den du verwenden möchtest.

Dafür ziehst du dir einfach das für dich passende Snippet auf die Seite. Wir zeigen dir einmal die klassische Galerie. Wenn du das Snippet auf deine Seite gezogen hast, passiert erstmal nichts, denn Galerien können im Designmodus nicht angezeigt werden. Im Frontend werden sie dann aber später ausgespielt. Mit Klick auf den “Bearbeiten”-Button öffnet sich ein Fenster, in dem du deine gewünschte Galerie auswählen kannst. Klicke dafür einfach auf “Wählen” und wähle deine Galerie aus. Du kannst dann noch einstellen, wie viele Einträge in einer Zeile angezeigt werden sollen. Unter “Erweitert” kannst du außerdem das Intervall einstellen und die Bildgröße ändern, falls du das möchtest. Klicke anschließend auf “Speichern” und deine Galerie wird später auf der Seite im Frontend angezeigt.

Mit Containern funktioniert das übrigens genauso. Probier dich auch hier einfach mal durch die unterschiedlichen Einstellungen durch und schau, wie dir die Galerien und Container am besten gefallen. Einen kleinen Tipp für das Anzeigen von Containern haben wir aber noch: Wenn du ein Container-Snippet auf deine Seite gezogen hast, kannst du mit Klick auf den “Bearbeiten”-Button nicht nur einstellen, wie viele Einträge je Zeile und Seite gezeigt werden sollen, du kannst auch ein “Paging” einstellen und entscheiden, ob der Nutzer auf einen Button klicken soll, um mehr Einträge angezeigt zu bekommen. Auch hier kannst du die unterschiedlichen Pagings einmal testen und schauen, was dir am besten gefällt.

Jahresplanung

Mit Sicherheit kennst du unsere Gartenwelt schon oder hast vielleicht sogar eine eigene Jahresplanung, die du anzeigen lassen willst. Auch dafür findest du fertige Snippets, die du verwenden kannst. Wenn du dich für eines entschieden hast, kannst du auch hier wieder auf den “Bearbeiten”-Button klicken und im sich öffnenden Fenster unterschiedliche Einstellungen vornehmen. Im Beitrag “Eine Jahresplanung im Frontend verknüpfen und anzeigen lassen” erfährst du, welche Einstellungen du dort vornehmen kannst.

Kalender

Du hast wichtige Termine und Veranstaltungen, die du zeigen willst? Dann schau dir mal unsere Kalender-Snippets an. Zieh dir einfach eines der Snippets auf die Seite und schon werden deine Termine angezeigt. Wie du die anlegst, erfährst du im Beitrag “Termine erstellen”. Du kannst aber auch hier mit dem “Bearbeiten”-Button weitere Einstellungen an der Darstellung vornehmen. Du kannst deine Kalendereinträge nach Schlüsselwörtern filtern oder unter “Erweitert” bestimmte Monate anzeigen lassen und einstellen, wie viele Einträge je Zeile und Seite angezeigt werden sollen. Du siehst: Viele Einstellungen wiederholen sich und sind irgendwann für dich vollkommen normal.

Formulare

Wann immer deine Kunden mit dir in Kontakt treten sollen, kommen Formulare ins Spiel. Wir haben dir die Wichtigsten als Snippet vorbereitet und alles, was du tun musst, ist, die Snippets auf deine gewünschte Seite zu ziehen. Mit dem “Bearbeiten”-Button kannst du dann auch hier wieder Anpassungen vornehmen.

Bei E-Mail Adresse trägst du die E-Mail Adresse ein, an die die Nachricht deiner Kunden geschickt werden soll. Du kannst dann bei den benutzerdefinierten Feldern noch zusätzlich Angaben des Kunden mit in das Formular aufnehmen, wenn du das möchtest. Unter “Erweitert” kannst du dann noch weitere Einstellungen vornehmen. Hier kannst du eine Seite verlinken, auf der der Kunde landen soll, wenn er das Formular ausgefüllt hat. Wir nehmen hier gerne eine “Danke”-Seite. Darunter kannst du noch zusätzliche Felder angeben. Wir empfehlen: “Bestätigungsnachricht senden” und “Datenschutz bestätigen”. Unter “Sortierung” kannst du die Felder anordnen. Da das aber sehr technisch ist, kannst du dich hier auf die Voreinstellungen verlassen. Möchtest du, dass eine Sicherheitsabfrage zum Absenden des Formulars gemacht wird, setzt du den Haken bei “Mit Sicherheitsabfrage”. Und das war es eigentlich auch schon. Klicke anschließend auf “Speichern” und dein Kontaktformular kann verwendet werden.

Karten & Rundgang

Wenn du deinen Kunden zeigen möchtest, wo sie dich finden können, sind die Karten deine Wahl. Diese Snippets kannst du einfach auf deine Seite ziehen und sie werden durch die Unternehmensinfos im Backend automatisch gefüllt. Wenn du hier auf den “Bearbeiten”-Button klickst, kannst du noch einstellen, was angezeigt werden soll und was nicht. Außerdem kannst du einen bestimmten Standort auswählen, falls du mehrere hast.

Unternehmen

Hier findest du alle Snippets, die zu deinem Unternehmen passen könnten. Du hast hier ein Snippet für die Anzeige deiner Standorte, Neuigkeiten, Stellenausschreibungen, Partner und Mitarbeiter. Zieh dir die Snippets einfach mal auf deine Testseite und schau, was sie machen. Grundsätzlich kannst du sie alle mit dem “Bearbeiten”-Button konfigurieren und Einstellungen vornehmen. Die meisten Infos und Inhalte pflegst du im Backend in den passenden Bereichen.

Template

Hier findest du für dein Template spezifische Snippets. Das ist vor allem für dich relevant, wenn du ein besonderes Template und nicht unser Standard-Template hast. Hierzu können wir dir also keine detaillierten Erklärungen im Helpcenter liefern, denn diese Snippets können sehr speziell sein. Solltest du dazu Fragen haben, wende dich am besten an deinen Projektmanager oder, wenn du keinen direkten Ansprechpartner bei uns hast, an unseren Support.

Trenner

Das Wichtigste zum Schluss: Damit deine Snippets auf der Seite nicht aneinander kleben und ein bisschen Abstand haben, haben wir dir die Abstände mit unseren Trennern mal vorbereitet. Hier hast du die Wahl zwischen einem schmalen und einem breiten Abstand und kannst auch einen Trennstrich einbauen.

Hier noch einmal alle Snippets im Video: