Showcase & Anleitung

Simple Composer

Der schlanke Seiten-Editor für WordPress. Diese Seite ist selbst damit gebaut und zeigt jedes Element, jeden Parameter und das Zusammenspiel mit dem Theme „Simple Base“.

Überblick

Was Simple Composer macht

Ein eigener Editor in der Seiten-Metabox. Er erzeugt WPBakery-kompatible Shortcodes und rendert sie im Frontend selbst. WPBakery darf deaktiviert bleiben, bestehendes Theme-CSS mit vc_row, wpb_column & Co. greift unverändert weiter.

Schlank

Sechs Elemente, kein Ballast: Bereich, Zeile, Spalte, Textbereich, Einzelbild, Bildergalerie.

Kompatibel

Gleiche Shortcodes, gleiche Klassen, gleiches Markup wie WPBakery 8.3. Bestehende Seiten lassen sich im Code-Modus einfügen.

Eigenständig

Raster-CSS und Stretch-Skript liefert das Plugin mit, ohne jQuery. Bilder kommen aus der WordPress-Mediathek.

Grundlagen

So ist eine Seite aufgebaut

Der Standardweg ist immer derselbe: Bereich → Zeile → Spalte → Element. Eine Zeile darf auch ohne Bereich auf oberster Ebene stehen. Spalten entstehen über das Zeilenlayout, sie haben keinen eigenen Hinzufügen-Knopf.

Ebene Shortcode Enthält
Inhaltsbereich vc_section Zeilen
Zeile vc_row Spalten
Spalte vc_column Textbereich, Einzelbild, Bildergalerie
Textbereich vc_column_text HTML (WordPress-Editor)
Einzelbild vc_single_image ein Bild aus der Mediathek
Bildergalerie vc_gallery mehrere Bilder, Lightbox

Anleitung

Der Editor in vier Schritten

1 · Seite anlegen

Der Editor erscheint als Metabox auf Seiten (Beitragstyp page). Der Standard-Editor ist dort abgeschaltet. Weitere Beitragstypen aktiviert der Filter scomp_post_types.

2 · Elemente hinzufügen

Bereich oder Zeile hinzufügen. Die Zeile bringt ihre Spalten per Layout-Vorlage mit (1/1, 1/2+1/2, 1/3+2/3, 1/3×3, 1/4×4) oder freier Eingabe.

3 · Einstellen

Ein Klick öffnet den Dialog des Elements: Parameter in Tabs, Textbereiche mit dem WordPress-Editor. Elemente lassen sich duplizieren, löschen und per Drag & Drop verschieben.

4 · Speichern

Beim Speichern entsteht der kompakte Shortcode in post_content. Unter dem Editor zeigt „Shortcode-Ausgabe“ live, was gespeichert wird.

Live-Demo

Spaltenlayouts

Die Breite einer Spalte ist ein Bruch (a/b) oder eine Zahl N (= N/12). Erlaubt sind Nenner, die Teiler von 12 sind, sowie 5. Es wird gekürzt: 6/12 wird zu 1/2. Ungültiges wird zu 1/1.

Jede Spalte hat drei Breiten: Desktop (Basis), Tablet (768–991 px) und Telefon (unter 768 px). Was nicht eingestellt ist, übernimmt den Desktop-Wert. Neue Zeilen mit mehreren Spalten setzen Telefon auf 1/1 (untereinander), die mit vier Spalten außerdem Tablet auf 1/2. Im Layout-Dialog wählst du je Breakpoint per Auswahlliste ein anderes Layout.

1/2 + 1/2

1/2

1/2

1/3 + 2/3

1/3

2/3

1/3 × 3

1/3

1/3

1/3

1/4 × 4

1/4

1/4

1/4

1/4

1/4 + 1/2 + 1/4

1/4

1/2

1/4

1/5 × 5 (Fünftel)

1/5

1/5

1/5

1/5

1/5

Live-Demo

Zeilen-Optionen

Abstand zwischen Spalten

Wählbar von 0 bis 35 px (Klasse vc_column-gap-N). Unten dieselbe Zeile mit 0, 15 und 35 px.

Abstand 0

Abstand 0

Abstand 15

Abstand 15

Abstand 35

Abstand 35

Gleiche Höhe

Diese Spalte hat mehr Text und ist dadurch höher. Mit „Spalten gleich hoch“ ziehen alle Spalten der Zeile auf dieselbe Höhe, hier sichtbar an den Hintergrundflächen.

Das ist die Voraussetzung für saubere Kartenlayouts.

Kurzer Text.

Vertikal ausrichten (Mitte)

Die Spalte links ist hoch, dieser Text steht dank „Inhalt vertikal ausrichten: Mitte“ in der Mitte der Zeile. Möglich sind Oben, Mitte und Unten. Das setzt Flex-Klassen (vc_row-o-content-middle).

Live-Demo · neu in 0.11.0 / 0.12.0

Inhaltsaufteilung der Spalte

Liegen mehrere Elemente in einer Spalte, bestimmt Spalte → Design-Optionen → Inhaltsaufteilung, wie sie angeordnet werden: Untereinander (Standard), Grid, Flex oder Table. Zusatzfelder (Spaltenanzahl, Richtung, Umbruch, Verteilung, vertikale Ausrichtung, Abstand) erscheinen passend zur Auswahl. Unter dem Telefon-Breakpoint (768 px) wird alles wieder einspaltig.

Grid · 3 Spalten · Abstand 20 px

Sechs Textbereiche in einer Spalte, als Raster mit drei Spalten.

Text 1

Ein Textbereich in der Spalte.

Text 2

Ein Textbereich in der Spalte.

Text 3

Ein Textbereich in der Spalte.

Text 4

Ein Textbereich in der Spalte.

Text 5

Ein Textbereich in der Spalte.

Text 6

Ein Textbereich in der Spalte.

Grid · automatisch · Bilder

Ohne feste Spaltenzahl füllt das Raster die Breite nach Platz (Mindestbreite 200 px). Vier Einzelbilder, Abstand 10 px.

Flex · zentriert

Elemente behalten ihre Inhaltsbreite und stehen mittig (Horizontale Verteilung: Mitte), Abstand 15 px.

Flex 1

Flex 2

Flex 3

Flex · verteilt

Horizontale Verteilung „Verteilt“ (space-between): erstes Element links, letztes rechts.

Flex 1

Flex 2

Flex 3

Table · vertikal mittig

Gleich breite Zellen nebeneinander (table-layout: fixed), Abstand 20 px, Ausrichtung Mitte.

Text

Kürzerer Text, vertikal in der Mitte.

Text

Dieser Text ist deutlich länger und macht die Zelle höher. Die anderen Zellen richten sich per „Vertikale Ausrichtung: Mitte“ daran aus.

Live-Demo

Einzelbild

Bildquelle aus der Mediathek (Attachment-ID), Bildgröße aus allen in WordPress registrierten Größen, Ausrichtung links, zentriert oder rechts, optional mit Link. Ohne gewähltes Bild gibt das Element nichts aus.

Links

Zentriert, Lightbox

Rechts, mit Link (neuer Tab)

Der Link wird im WPBakery-Format gespeichert: onclick="custom_link" und link="url:…|target:%20_blank". Erlaubt sind http, https, mailto, tel und relative URLs. Mit onclick="link_image" öffnet das Bild in der Lightbox.

Live-Demo

Bildergalerie

Mediathek-Mehrfachauswahl, Vorschauleiste per Drag & Drop sortierbar. Einstellbar: Spalten 1 bis 9, Bildgröße, Abstand (0 bis 40 px), Seitenverhältnis, Eckenradius und Galerie-Titel für die Lightbox. Ein Klick öffnet Fancybox 3 mit Bildtitel und Beschreibung aus der Mediathek.

3 Spalten · 4:3 · Radius 8 px · Abstand 20 px

2 Spalten · 16:9 · ohne Radius · Abstand 5 px

4 Spalten · 1:1 · Radius 24 px

Live-Demo

Design-Optionen

Bei jedem Element gleich: Hintergrundfarbe, Hintergrundbild (Mediathek) mit Stil (Cover, Contain, nicht wiederholen, wiederholen), Rahmenfarbe, Rahmenstil, Rahmenradius, Rahmenbreite sowie Außen- und Innenabstand je Seite. Sie landen als css="…" im Shortcode und werden im <head> ausgegeben.

Hintergrund + Radius

Hintergrund #e6dfd3, Radius 12 px, Innenabstand 24 px.

Rahmen

Rahmen 2 px gestrichelt in Akzentfarbe, Innenabstand 24 px.

Dunkel

Hintergrund #1f2a2e, nur oben ein 4-px-Rand.

Dieser Bereich ist auf Fensterbreite gestreckt („Strecken“). Der Inhalt bleibt im Container. Mit „Strecken, Inhalt auch“ läuft auch der Inhalt bis zum Rand.

Breite & Höhe

Strecken und Volle Höhe

Option Wirkung
Strecken Bereich/Zeile auf Fensterbreite, Inhalt bleibt im Container
Strecken, Inhalt auch Auch der Inhalt läuft über die volle Breite
Strecken, Inhalt auch (ohne Abstände) Wie oben, ohne seitliche Abstände (an der Zeile)
Volle Höhe Bereich füllt die Fensterhöhe; „Inhalt positionieren“ nur dann wählbar

Das Stretch-Skript braucht keinen Container-Ausbruch im Theme. Am besten funktioniert es mit der Seitenvorlage Volle Breite des Themes „Simple Base“. Bekannte Grenze: In display:grid-Containern kann eine horizontale Scrollleiste entstehen.

Neu in 0.7.0

Der Code-Modus

Über dem Editor stehen die Schalter Visuell | Code. Im Code-Modus ist die ganze Seite als Shortcode-Text editierbar. So lassen sich Shortcodes fremder Seiten (etwa aus WPBakery) einfügen. Beim Wechsel zurück zu Visuell wird der Text eingelesen und als Baum aufgebaut.

  • Von Simple Composer erzeugter Code (kompakt oder eingerückt) wird verlustfrei zurückgelesen.
  • Fremde Shortcodes (zum Beispiel Formulare) bleiben als Text in einem Textbereich stehen.
  • Lose Inhalte werden passend umhüllt: Text im Bereich bekommt Zeile und Spalte.
  • Nicht unterstützte Attribute (css_animation, offset, disable_element) werden verworfen. Eine gelbe Box listet jeden Hinweis.
  • Bildgrößen als Maße (300x200) fallen auf den Standard zurück.

Beispiel zum Einfügen

[vc_section]
  [vc_row gap="30" equal_height="yes"]
    [vc_column width="1/2"]
      [vc_column_text]<h2>Titel</h2><p>Text links</p>[/vc_column_text]
    [/vc_column]
    [vc_column width="1/2"]
      [vc_single_image image="123" img_size="large" alignment="center"][/vc_single_image]
    [/vc_column]
  [/vc_row]
[/vc_section]

Nachschlagen

Parameter im Überblick

Inhaltsbereich

Parameter Werte
Breite Standard, Strecken, Strecken Inhalt auch, ohne Abstände
Volle Höhe Ja/Nein (nur Bereich)
Inhalt positionieren Oben, Mitte, Unten (Bereich: nur bei Volle Höhe)
Element-ID / Extra-Klasse Freitext, wird bereinigt
Design-Optionen siehe oben

Alle weiteren Elemente

Element Parameter
Zeile Abstand (0–35 px), gleich hoch, vertikal ausrichten, Breite, ID, Klasse, Design
Spalte Breite Desktop, Tablet, Telefon (Bruch oder Zahl; leer = wie Desktop), ID, Klasse, Inhaltsaufteilung (Grid, Flex, Table mit Zusatzfeldern), Design
Textbereich ID, Klasse, Design; Inhalt im WordPress-Editor
Einzelbild Bildquelle, Bildgröße, Ausrichtung, Link (+ neuer Tab), ID, Klasse, Design
Bildergalerie Bilder, Spalten 1–9, Bildgröße, Abstand, Seitenverhältnis, Eckenradius, Galerie-Titel, ID, Klasse, Design

Theme

Simple Base 0.3.0

Ein klassisches Basis-Theme ohne Abhängigkeiten. Es dient zum Testen von Simple Composer und als Parent-Theme für spätere Themes.

Seitenvorlagen

Vorlage Zweck
Standard Titel und Inhalt im Container (1170 px, 15 px Gutter, passend zu den −15 px der Zeilen)
Volle Breite Kein Container, kein Titel. Ideal für Strecken und Hintergrundbilder. Diese Demo gehört hierhin.
Leer Nur der Inhalt, ohne Kopf und Fuß. Reine Plugin-Ausgabe ohne Theme-Einfluss.

Zusätzliche Bildgrößen sb-wide (1600×900) und sb-square (600×600) erscheinen in der Größenauswahl von Einzelbild und Galerie.

Anpassen per Child-Theme

Das Parent lädt main.css und die style.css des aktiven Themes selbst. Das Design steuern :root-Variablen: --sb-container, --sb-gutter, --sb-color-*, --sb-font-*, --sb-header-bg, --sb-footer-*.

/*
Theme Name: Mein Theme
Template: simple-base
Version: 1.0.0
*/
:root {
  --sb-container: 1280px;
  --sb-gutter: 20px;
}

Hooks

Vor und nach jedem Bereich: sb_before_ und sb_after_ plus site, header, content, footer, entry.

Filter

sb_container_class, sb_show_title, sb_content_width, sb_copyright. Template-Tags in inc/template-tags.php sind per function_exists() überschreibbar.

Plugin-Rücksicht

.entry-content bekommt keine max-width auf Kindern, damit das Strecken greift. body hat overflow-x:hidden gegen Scrollleisten. Auf Plugin-Seiten setzt das Theme die Body-Klasse has-scomp, auf der Vorlage Volle Breite zusätzlich sb-fullwidth (gibt Bereichen den Seitenrand).

Praxis

Tipps

  • Bilder immer über die Mediathek einbinden. Nur echte Anhänge werden akzeptiert.
  • Für Karten-Layouts: Zeile mit „Spalten gleich hoch“ und Spalten mit Design-Optionen.
  • Fancybox lädt nur auf Seiten mit Galerie. Lädt das Theme es schon, schaltet add_filter( 'scomp_load_fancybox', '__return_false' ); das Laden ab. Dann bleibt nur das Markup.
  • Das alte Fancybox-Plugin nicht parallel laufen lassen (doppelte Initialisierung).
  • Vor dem ersten Speichern einer bestehenden Seite den Altinhalt im Code-Modus sichern: Der erste Speichern-Vorgang mit Elementen ersetzt ihn.

Ehrlich gesagt

Bewusst nicht enthalten

  • Rahmenstile vc_box_*, Animationen (css_animation), Platzhalterbild
  • Zoom-Variante beim Einzelbild
  • Hover-Effekte und Bildunterschrift unter dem Bild in der Galerie
  • Slider, Tabs, Akkordeon, Parallax, Video-Hintergrund
  • WPBakery-Elemente außerhalb der sechs Startelemente (kommen als Text durch)