Zeilen & Spalten anpassen
Gerade eben haben wir bereits einige Möglichkeiten kennengelernt Spalten auf den verschiedenen Geräten unterschiedlich auszugeben. Darüber hinaus gibt es aber natürlich noch eine ganze Menge gestalterischer Möglichkeiten Zeilen und Spalten den individuellen Vorstellungen anzupassen.
Vorab möchte ich aber nochmal deutlich machen wo ihr in WP-Bakery eine Zeile bearbeitet – und wo eine Spalte:
Schauen wir uns zuerst die wichtigsten Einstellungsmöglichkeiten der Zeile an – und zwar im TAB „Allgemeine Einstellungen“:
ZEILE STRECKEN
Diese Option ist hilfreich wenn man einer Zeile gerne Hintergrundfarben/Bild verpassen möchte. Hier könnt ihr nämlich bestimmen ob die Zeile aus dem allgemeinen Seitenraster ausbrechen und ausnahmsweise breiter werden darf.
– Standard: Die Zeile kann maximal so breit werden wie die Inhaltsbreite von euerm Theme vorgegeben wird.
– Zeile strecken: Die Zeile darf so breit werden wie Bildschirm breit ist – der eigentliche Inhalt bleibt aber weiterhin maximal so breit wie von euerm Theme vorgegeben. Das macht z.B. Sinn wenn die Zeile eine Hintergrundfarbe hat.
– Zeile und Inhalt strecken: Jetzt wird die Zeile wirklich komplett gestreckt inklusive Inhalt. Selten wirklich sinnvoll.
– Zeile und Inhalt strecken ohne Abstände: Auch hier wird die Zeilte inklusive Inhalt gestreckt, jedoch werden zusätzlich noch sämtliche Innenabstände entfernt. Ein Anwendungsfall wäre z.B. wenn in einer Spalte ein Bild platziert ist und dieses randlos eingebunden werden soll.
COLUMNS GAP
Hier könnt ihr die Abstände zwischen den Spalten vergrößern/verkleinern.
FULL HEIGHT ROW
Soll die Zeile die gesamte Browser-Fensterhöhe einnehmen? Dann könnt ihr das hier aktivieren. Die Zeile passt sich also immer an die Browser-Fensterhöhe an.
EQUAL HEIGHT
Alle Spalten einer Zeile haben die gleiche Höhe – nämlich die der größten in dieser Zeile (oder, wenn ihr die FULL HEIGHT ROW zusätzlich aktiviert habt, die gesamte Bildschirm-Höhe).
INHALTSPOSITION
Vertikale Positionierung der Inhalte in den Spalten (Oben, Mitte oder Unten).
ZEILE DEAKTIVEREN
Blendet die Zeile über alle Geräte hinweg aus.
ZEILEN-ID
Hier könnt ihr der Zeile eine individuelle ID/Namen verpassen. Damit könnt ihr diese anschließend z.B. mit CSS noch individueller gestalten (aber das würde hier den Rahmen sprengen 😉 ABER: Ihr könnt diese ID auch nutzen um z.B. über einen Anker-Link zu dieser Spalte zu springen.
ZEILEN-KLASSE
Dient auch in erster Linie um die Zeile via CSS noch individueller gestalten zu können. Wie bei einer ID könnt ihr hier der Zeile eine ID/Namen geben und diese dann per CSS gezielt ansprechen. Ihr fragt euch nun sicherlich, wo ist nun der Unterschied zur Zeilen-ID!? Im Gegensatz zu einer Zeilen-ID dürft ihr eine Zeilen-Klasse auch mehreren Elementen geben. Den Namen den Ihr bei Zeilen-ID hinterlegt, sollte wirklich nur einmal vorkommen.
Schauen wir uns noch den TAB „Designeinstellungen“ an. Dieser findet sich im Übrigen bei fast allen Elementen, auch bei Spalten. Diesen habe ich bereits in Teil 1 meines WPBakery Tutorials näher erklärt. Siehe Feintuning – Abstände und Farben
Sowohl bei Zeilen als auch bei Spalten habt ihr die Möglichkeit Parallax-Effekte zu ergänzen, dazu mehr im nächsten Abschnitt.
Moin,
Danke für deine tollen Erklärungen.
Ich arbeite schon länger mit dem Bakery Page Builder und habe bei dir noch weitere Anregungen mitnehmen können.
Hast du vielleicht auch einen Tipp für mich?
Ich möchte nur auf einer Seite (nicht Startseite) am rechten Rand ein Menu einrichten, von dem nur die Überschrift zu sehen sein soll und erst beim Mouseover oder klick auf den „Hauptmenüpunkt“ sollen die Unterseiten aufploppen, ähnlich wie hier https://www.hide-alsterdorf.de/ .
Hast du einen Tipp für mich? 🙂
HG Wiebke
Hi Wiebke,
ich fürchte mit den Standard-Modulen wird das nicht hinhauen. Es sei denn Du kennst Dich etwas mit CSS aus, dann könntest Du es mit dem Modul „WP Custom Menu“ umsetzen.
Alternativ könntest Du Dich nach Add-ons umsehen, ein konkretes Add-on das Deine Anforderung abdeckt fällt mir nicht direkt ein.
Hier ist eine umfassende Übersicht: Addons
Liebe Grüße, Julian
Hallo, danke für dein tutorial! Vielleicht kannst du mir helfen – ich kann nicht herausfinden, wie ich die komische Abstände vermeide, die entstehen, wenn ich eine Zeile beispielsweise für Handy ausblende, für desktop aber nicht. In so einem Fall habe ich dann auf dem desktop Ansicht ein Abstand, welcher eigentlich die ausgeblendete Zeile ist.
Kennst du dafür irgendein Trick oder weisst du bitte, was ich falsch mache?
Vielen Dank im Voraus für deine Antwort!
Suzi
Hi Suzi,
das liegt ganz oft an Innenabständen (Paddings) die eine Zeile hat.
Ich vermute Du blendest zudem nicht eine ganze Zeile für Mobilgeräte aus, sondern nur eine „Spalte“, korrekt? Denn üblicherweise (ohne Addons) gibt es für „Zeilen“ keine responsiven Optionen, man kann sie nur komplett deaktiveren, für alle Geräte.
Wenn nun also bei Dir die Zeile Innenabstände hat und Du blendest lediglich eine Spalte für das Smartphone aus, dann bleiben die Innenabstände der Zeile weiterhin auf dem Smartphone sichtbar (da es ja der übergeordnete „Container“ ist).
Ich hoffe das war halbwegs verständlich ausgedrückt 😉
Ansonsten melde Dich gern wieder.
Liebe Grüße
Julian