Wie nutze ich das Wordpress?

Pflegeanleitung

scroll

WP-Bakery Page Builder

Außer dem Blog werden alle Bereiche mit dem WP-Bakery Page Builder gepflegt. Dieser sog. Shortcode Builder lässt Shortcodes über ein schönes UI zusammenbasteln. Video-Anleitungen sind hier zu finden.

Alle Einstellungen werden unten im Detail beschrieben.

  • Bitte verwende den Backend-Editor, der Frontend-Editor wird derzeit nicht überall unterstützt.
  • Erstelle immer zuerst einen Inhaltsbereich und darin eine Zeile, dann können in die Zeile beliebige Module eingefügt werden. Ohne den Inhaltsbereich geht der Inhalt über die volle Breite des Browsers und wird nicht zentriert.
  • Für kleine vertikale Abstände erstelle mehrere Zeilen in einem Inhaltsbereich
  • Für große vertikale Abstände erstelle einen neuen Inhaltsbereich
  • nutze niemals Pixeleinstellungen im Tab „Designeinstellungen“ (sprich mit dem Programmierer, er kann dir eine neue CSS-Klasse bauen, damit alles einheitlich bleibt und auch noch responsive funktioniert)

Grid / Raster

Bitte Einstellungen aus Screenshot Rechts übernehmen. Genauer gesagt heißt das:

  • Standard: 12 Spalten breit
  • Sehr große Geräte: 8 Spalten breit, 2 Spalten Offset links
  • Ausnahmen bestätigen die Regel

Keyvisual

Das Keyvisual-Modul ist über ein Formular in Posts, Seiten und Showcases pflegbar. Es existieren verschiedene Varianten:

Allgemein

  • Keyvisual anzeigen?
    Das Keyvisual kann hiermit an- und ausgeschaltet werden
  • Ist Karte?
    Nur auf Kontaktseite, zeigt die Google Map im Hintergrund
  • Pulse-Variante?
    Die Farbe des pulsierenden Mini-Trenners (einfach ausprobieren)
  • Dachzeile (optional)
    Steht über der Headline
  • Headline (optional)
    H1-Element auf der Seite (falls leer wird davon ausgegangen, dass Feld Worte gepflegt ist, dann wird daraus die H1 extrahiert)
  • Vimeo Video URL (optional)
    Wenn gepflegt, wird im Hintergrund ein Vimeo Video geloopt. Das Hintergrundbild dient in diesem Fall als „Fallback“ für Geräte, die kein Video abspielen können und als Preload-Bild, das angezeigt wird, solange das Video geladen wird.
  • Vimeo Video URL (Play-Button, optional)
    Video wird nach Klick auf Button im Fullscreen-Modus abgespielt.
  • Hintergrundbild (optional)
    Wird im Hintergrund angezeigt
  • Hintergrund ist
    Hell oder Dunkel
  • Worte (optional)
    Wird für vertikale Wort-Slider verwenden, siehe unten.
  • Button-Text (optional)
    Wenn ein Fullscreen-Video gepflegt ist, dann wird dieser Text für den Button verwendet.
  • Overlay (Verlauf)
    Hier können verschiedene Overlays / Verläufe gewählt werden, die sowohl über den Hintergrund, als auch über das Video gelegt werden.

Phrasen-Slider

Beispiel: Employer Branding, B2B Marketing, …

Dazu Headline leer lassen und in Worte kommasepariert die Phrasen eintragen (Employer Branding, B2B Marketing).

Wort-Slider mit feststehendem Wort

Beispiel: Brand Consulting, Brand Conversations, … Das Wort Brand bleibt immer stehen.

Dazu Headline pflegen (Brand) und in Worte kommasepariert Consulting,Conversations,…

Modul: Showcase

Dieses Modul wird auf der Startseite verwendet. Im Einstellungsdialog kann der entsprechende Showcase ausgewählt werden.

Modul: xCard

Sieht genau so aus, wie das Showcase-Modul, kann aber individuell konfiguriert werden.

Modul: C&S Accordions

Für Accordions kann das voreingestellte Modul C&S Accordion verwendet werden.

Der Inhalt eines Accordions kann frei gestaltet werden. Von reinem Text, über mehrspaltige Layouts bis hin zu einfachen Button-Listen ist alles möglich.

Die Farbe richtet sich nach der CSS-Klasse eines darüberliegenden Elements (bspw. Spalte, Zeile, Inhaltsbereich; hier: Spalte). Die verschiedenen Optionen sind unten gelistet.

-highlight-mandy

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-dodger-blue

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-nugget

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-turquoise

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-mountain-meadow

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-electric-violet

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

-highlight-night-shadz

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Buttons

Es gibt zwei Varianten, Buttons ohne und mit Icon. Der Unterschied liegt im Type. Dieser ist entweder Standard oder Link. Die Buttons können im Standard auf interne wie externe URLs (auch Dateien) verlinken, durch ein kleines Script auch auf der eigenen Seite scrollen (siehe unten). Die Icon-Buttons können farbig unterschiedlich sein.

On-Page Scroll

Damit der Button auf der gleichen Seite scrollt, muss vorher bei einem Inhaltsbereich oder einer Zeile eine ID gesetzt werden. Dann muss ganz unten in den Einstellungen Advanced on click action angeklickt und On click code muss folgendes Script bekommen, wobei der Teil #accordions-section die ID des Zielelements bekommen muss (die Raute bleibt stehen).

window.scrollToElement('#accordions-section');

Standard-Button

Link-Button mit Icon

Wie bei den Accordions bestimmt die -highlight-* Klasse über die Farbe des Icons. Diese CSS-Klasse kann auf die Spalte, die Zeile oder den Inhaltsbereich gesetzt werden.

Dachzeile

Dunkles Theme h1

Überschrift h2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Überschrift h3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Überschrift h3

sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Dachzeile

Helles Theme h1

Überschrift h2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Überschrift h3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Überschrift h3

sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Modul: Kundenslider

Stellt Kunden-Logos als Slider dar. Das Modul selbst hat keine Einstellungsmöglichkeiten. Es werden alle Kunden verwendet, die im Backend unter dem Menüpunkt Kunden angelegt sind.

Modul: Mitarbeiterslider

Das Modul biete keine Einstellungsmöglichkeiten. Eine Pflege der Mitarbeiter ist im entsprechenden Menüpunkt im Backend möglich.

Modul: Partner

Das Modul biete keine Einstellungsmöglichkeiten. Eine Pflege der Partner ist im entsprechenden Menüpunkt im Backend möglich.

Alle Logos sollten im Optimalfall as SVG (kleinste Dateigröße) mit einer Bühne (Größe) von 300×150 eingestellt werden. Nur so kann garantiert werden, dass alle Kacheln gleich groß sind.

Achtung: Der Text auf der Rückseite darf nicht zu viel werden, da sonst die Gefahr eines Overflow besteht.

Modul: Awards

Das Modul biete keine Einstellungsmöglichkeiten. Eine Pflege der Awards ist im entsprechenden Menüpunkt im Backend möglich.

Bildgrößen siehe Modul Partner.

Modul: Karten-Slider

Hinweis: Kann momentan nur im Frontend-Bearbeitenmodus hinzugefügt werden.

In einen Card-Slider können nur xCard-Module gelegt werden. Nach der Pflege mehrerer xCards slidet der Slider. Wenn nur eine xCard eingefügt ist, wird der Slider wie eine xCard dargestellt.

[cs_card_slider]

Karte #1

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Mehr erfahren

Karte #2

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Mehr erfahren
[/cs_card_slider]

Bildgrößen

Zusätzlich zu den Standardgrößen von WordPress wurden für das Theme folgende Größen hinzugefügt:

background-image-full-hd (1920x1080px)
container-width-16-9 (1140x642px)
container-width (1140x642px)
container-width-half (570x321px)
container-width-third (380x214px)

Wie benutzen???

Wird mittels Modul: Einzelbild ein Bild eingefügt, dass über die ganze Containerbreite gehen soll, dann sollte container-width als Bildgröße gesetzt werden. Wird in einem Zweispalter ein Bild eingefügt, so bietet sich container-width-half an. Gleiche Mechanik gilt für container-width-third.

Das background-image-full-hd wird momentan nur intern verwendet, kann aber beim bisher nicht benutzten Modul Background-Slider verwendet werden.

Bild-Vergrößerung aka Ajax-Effekt

Mit einem Klick kann ein Bild vergrößert werden. Das funktioniert bei

  • Medien einfügen > Bild
  • Medien einfügen > Galerie
  • Page-Builder Modul: Einzelbild

Die Detaileinstellungen können den Screenshots rechts entnommen werden (Medien-Datei/Link to large image).

Bild

Galerie

Modul: Einzelbild

Spotify-Playlist

Spotify > Playlist öffnen > … > Teilen > Code zum Einbetten kopieren. Dadurch bekommt man den kompletten Einbettungscode. Jetzt ein Modul Ungefiltertes HTML verwenden, um den Code einzufügen. Damit die Playlist responsive wird ist noch zusätzlicher HTML-Code notwendig. Am Schluss muss es so aussehen (mit der individuellen URL).

<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://open.spotify.com/embed/user/nohlen2016/playlist/4mYqi3fjeg7SMsZ9BcDH0Q" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>

Icon-Liste

Die Icon-Liste ist kein klassisches Modul, sondern eine Kombination aus Text- und Icon-Modul (im Wechsel). Durch eine zusätzliche CSS-Klasse icon-list wird die Liste optimal gestylt.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Mitarbeiter Interview

Hierbei handelt es sich nicht um ein klassisches Modul. Durch eine geschickte Kombination von CSS-Klassen und den Modulen Icon und Text wird daraus ein schön gestyltes Interview.

Dazu müssen auf der Spalte folgende CSS-Klassen hinzugefügt werden:

icon-list interview

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Animationen

Die Animationen wurden mit After-Effekts erstellt und sind direkt im Theme verankert. Wenn neue Animationen dazu kommen müssen also die Programmierer eingreifen. Die Animationen können trotzdem mit folgenden Shortcodes dynamisch in jedem Text-Bereich positioniert werden:

[cs_animation url="/wp-content/themes/triggercode-theme-child/animations/kundenbereiche/index.html"]

[cs_animation url="/wp-content/themes/triggercode-theme-child/animations/umsatz/index.html"]

Icons und Buttons

Dieses Ergebnis erhält man in der Kombination von Icon- und Button-Modul. Die Farbe wird wieder über die -highlight-* CSS-Klassen besteht (siehe Accordions).

Pulses

Diese werden über einen Shortcode in ein Text-Modul (oder beim Blog direkt im Editor) eingefügt. Der Shortcode heißt cs_pulse (in eckigen Klammern).

cs_pulse var=“1″ animated=“yes“

Dabei kann der Wert var irgendwas zwischen 1 und 11 sein, animated kann yes oder no sein.

Var 1


Var 2


Var 3


Var 4


Var 5


Var 6


Var 7


Var 8


Var 9


Var 10


Var 11


Var 12


Formulare

  • werden im Backend mit Formidable gepflegt
  • werden über den Shortcode aus der Formularübersicht eingefügt

Dropdowns

Die Option erlaube automatische Vervollständigung muss ausgewählt sein, damit das Dropdown gut aussieht.

Formulareinstellungen

Alle Haken im Bereich AJAX setzen.

Randnotiz

Showcases

Übersichtsseite

Bei dieser Seite muss als Template Showcase Overview eingestellt werden.