Leerer Block zum vielseitigen Befüllen mit Inhalt

Der leere Block ist ein Container, der ganz individuell mit dem unterschiedlichsten Inhalt befüllt werden kann. Wie wäre es mit einer Überschrift (h1), einem Textblock (p) und einem Button (a.Button)? Oder einem Bild (img), Video (video), Tabelle (table), Formular (form) & Co.

Inhalte aller Art sollten stets in einen Block gepackt werden, weil sie so einheitliche Abstände zum Rand der Website und zu anderen Blöcken & Elementen einhalten. Packst du die Elemente einfach so auf die Seite in Pinegrow, werden diese an den Rand geklatscht und folgen keinem stimmigen Design. Um Elemente in einen Block zu packen, ziehst du sie einfach von der Seitenleiste in den Block - entweder in der Vorschau oder im Tree-Tab.

Tipps:

• Alle Blöcke der Basic-Komponenten haben einheitliche Seitenränder von 50px (Desktop), 25px (Tablets) und 20px (Mobil).
• Alle Blöcke der Basic-Komponenten haben eine maximale Breite von 1600px.
• Du kannst jedes div zu einem Block machen, indem du ihm die Klasse .WrapContent gibst. So erhält es die einheitlichen Abstände.

Individuell befüllbare, mehrspaltige Blöcke

Die leeren Blöcke mit 2, 3 oder 4 Spalten können ganz individuell mit dem unterschiedlichsten Inhalt befüllt werden. Überschrift (h1), Textblock (p), Button (a.Button) oder Bild (img) - alles kein Problem! Du kannt links einen Text und rechts ein Video (video) anzeigen, oder links und rechts ein Bild und in der Mitte ein Formular.

Ziehe einfach alle Arten von Inhalt aus der linken Sietenleiste in die Blöcke. Abstände und Umbrüche auf die mobile Version werden automatisch übernommen.

Block mit 3 Spalten

Der Block mit 3 Spalten eignet sich dazu, Inhalte aller Art in 3 Spalten nebeneinander anzugeigen. Das können Bilder, Videos, Formulare, Text und vieles mehr sein. Zieh' einfach die Inhalte, die du willst, in die leeren Blöcke hinein.

Die Abstände zwischen den Inhalten betragen automatisch 50px und auf kleineren Displays unter 750px Breite werden die 3 Blöcke untereinander angezeigt. Willst du deren Reihenflge ändern, kannst du die Blöcke einfach miteinander tauschen. Willst du, dass die Blöcke eher (z.B. schon bei 1000px Breite) untereinander dargestellt werden, weil der Inhalt sonst zu eng wird, kannst du den Breakpoint der .WrapContent33 Klasse anpassen ((min-width:501px) and (max-width:999px) anstatt (min-width:501px) and (max-width:749px))

Fertiger Header-Bereich mit Hamburger-Menü

Der Block "Header L Hamburg" bietet sich an, wenn du eine etwas umfangreichere Kopfzeile mit einem mobilen Hamburger Menü haben möchtest. Neben Logo und Menü kannst du noch eine Kurzbeschreibung und Kontakt-Links nutzen.

Ziehe den Block einfach auf deine Seite (idealerweise in den <header> Bereich bzw. deine Master-Seite), alle Elemente, Abstände und das Menü werden automatisch korrekt angezeigt.

Weitere Tipps zu Header-Bereichen

Packe den Block "Header L Hamburg" am besten in ein <header>-Element, idealerweise in die bereits durch das Starterprojekt vorbereitete Seite master.html. Diese Masterseite sorgt dafür, dass die Kopfzeile / Header (und Footer) auf jeder Unterseite deiner Website gleich bleiben und sich nur der Inhalt dazwischen verändert. Das vereinfacht die Pflege deiner Website erheblich. Mehr zur Masterseite >

Den Header-Block kannst du natürlich frei gestalten. Stelle Hintergrundfarben am besten im Element das den Header-Block enthält - etwa einem <header>-Element ein. Mit der CSS-Einstellung "position: sticky" und "top: 0" kannst du den Header oben stehen lassen, wenn du durch deine Seite scrollst.

Fertiger Header-Bereich mit horizontalem Scroll-Menü

Den Block "Header L Scroll" kannst du verwenden, wenn du eine umfangreichere Kopfzeile mit einem mobilen horizontalen Scroll-Menü nutzen möchtest. Neben Logo und Menü hast du noch eine Kurzbeschreibung und Kontakt-Links dabei.

Ziehe den Block einfach auf deine Seite (idealerweise in den <header> Bereich bzw. deine Master-Seite), alle Elemente, Abstände und das Menü werden automatisch korrekt angezeigt.

Weitere Tipps zu Header-Bereichen

Packe den Block "Header L Scroll" am besten in ein <header>-Element, idealerweise in die bereits durch das Starterprojekt vorbereitete Seite master.html. Diese Masterseite sorgt dafür, dass die Kopfzeile / Header (und Footer) auf jeder Unterseite deiner Website gleich bleiben und sich nur der Inhalt dazwischen verändert. Das vereinfacht die Pflege deiner Website erheblich. Mehr zur Masterseite >

Den Header-Block kannst du natürlich frei gestalten. Stelle Hintergrundfarben am besten im Element das den Header-Block enthält - etwa einem <header>-Element ein. Mit der CSS-Einstellung "position: sticky" und "top: 0" kannst du den Header oben stehen lassen, wenn du durch deine Seite scrollst.

Einfacher Header mit Hamburger-Menü

Der Block "Header S" ist eine ganz einfache, minimalistische Kopfzeile mit Platzhalter für ein Logo und das Menü. Auf mobilen Geräten wird ein Hamburger-Menü (3 Striche) angezeigt. Der Header S kann bei Bedarf um alle möglichen Funktionen und Elemente erweitert werden.

Ziehe den Block einfach auf deine Seite (idealerweise in den <header> Bereich bzw. deine Master-Seite), alle Elemente, Abstände und das Menü werden automatisch korrekt angezeigt.

Weitere Tipps zu Header-Bereichen

Packe den Block "Header S" am besten in ein <header>-Element, idealerweise in die bereits durch das Starterprojekt vorbereitete Seite master.html. Diese Masterseite sorgt dafür, dass die Kopfzeile / Header (und Footer) auf jeder Unterseite deiner Website gleich bleiben und sich nur der Inhalt dazwischen verändert. Das vereinfacht die Pflege deiner Website erheblich. Mehr zur Masterseite >

Den Header-Block kannst du natürlich frei gestalten. Stelle Hintergrundfarben am besten im Element das den Header-Block enthält - etwa einem <header>-Element ein. Mit der CSS-Einstellung "position: sticky" und "top: 0" kannst du den Header oben stehen lassen, wenn du durch deine Seite scrollst.

Voll funktionsfähiges Hamburger-Menü

Der Block "Menu Hamburg" kann beliebig an jeder Stelle verwendet werden, wo du ein Menü einbauen willst. Auf mobilen Geräten (unter 500px Bildschirmbreite) wird er als Hamburger Menü (drei Striche) angezeigt.

Mobile Darstellung & Animationen ändern

Standardmäßig schaltet die Darstellung des Menüs bei Bildschrimbreiten unter 500px in die mobile Darstellung (3 Striche) um. Du kannst diesen Umschaltpunkt frei ändern. Dabei musst du leider die CSS-Breackpoints an verschiedenen Stellen ändern. Das Div mit der Klasse "MenuHamburgIcon", das die drei Menüstriche enthält, wird beispielsweise im CSS ab 501px Bildschirmbreite versteckt (display: none). Ändere diesen Wert gern ab, wenn das Menü bei breiteren oder schmaleren Bildschrimgrößen umschalten soll. Bitte kontrolliere folgende Elemente, die alle einen Umsprungpunkt für das mobile Menü haben, und passe die Breakpoints auf deinen Wunschwert an:

• div .MenuHamburgIcon
• div .MenuHamburg / .HideMobileMenu
• ul .MenuHamburgWrap
• a (Menülink: .MenuHamburg .HeaderMenuLink a)
• Bei Dropdown-Menü: ul .MenuDropdownHamburg
• Bei Sub-Dropdown-Menü: ul .SubmenuDropdown

Auch die Animation des mobilen Menüs lässt sich völlig frei anpassen. Standardmäßig transformieren sich die drei Striche zum Schließen-Symbol des mobilen Menüs. Diese Animation kannst du in der Pinegrow Interaction des Div mit der Klasse "MenuHamburgIcon" im Interactions Tab vollständig ändern.

Aktiven Menüpunkt anzeigen

Um darzustellen, auf welcher Unterseite sich ein Nutzer gerade befindet, wird der aktuelle Menüpunkt oft optisch hervorgehoben. Dies geschieht in den Menüs der Pinegrow Forest Basic-Komponenten durch die Klasse "MenuActive". Diese kannst du natürlich beliebig gestalten und dem li-Element im Menü vergeben, das optisch hervorgehoben werden soll.

Nutzt du eine Masterseite mit dem gleichen Menü auf allen Unterseiten, kannst du auf jeder Unterseite einen anderen Menüpunkt die Klasse .MenuActive vergeben. Klicke dazu für jeden Menüpunkt (li-Element) im Actions-Tab auf "Define Editable". Gib eine Field Id (z.B. "MenuHome") ein und tippe bei Classes "MenuActive" ein. Jetzt kannst du im Tab Element Properties auf jeder Unterseite verschiedene Menüpunkte optisch hervorheben.

Wenn du einen Onepager hast (eine Website ohne Unterseiten) kannst du verschiedene Menüpunkte optisch hervorheben je nachdem, auf welchen Abschnitt der Seitenbesucher gerade gescrollt hat. Nutze dazu Pinegrow-Interactions und lege bei jedem Abschnitt (div oder section) eine Scroll-Scene an. Die Animation soll die dem Menüpunkt (li-Element) die Klasse "MenuActive" verleihen, wenn der Abschnitt ins Bild kommt.

Voll funktionsfähiges Scroll-Menü

Der Block "Menu Scroll" kann beliebig an jeder Stelle verwendet werden, wo du ein Menü einbauen willst. Am besten funktioniert es absolut positioniert (position: absolute) in einem div mit festgelegter Höhe (height: 50px (zum Beispiel); position: relative). Auf mobilen Geräten (unter 500px Bildschirmbreite) wird das Menü als ein horizontales Scrollmenü mit Pfeil angezeigt.

Umschalten auf mobile Darstellung ändern

Standardmäßig schaltet die Darstellung des Menüs bei Bildschrimbreiten unter 500px in die mobile Darstellung (Scroll-Menü) um. Du kannst diesen Umschaltpunkt frei ändern. Dabei musst du leider die CSS-Breackpoints an verschiedenen Stellen ändern. Das Div mit der Klasse "MenuScrollArrowBG", das den Scroll-Pfeil enthält, wird beispielsweise im CSS ab 501px Bildschirmbreite versteckt (display: none). Ändere diesen Wert gern ab, wenn das Menü bei breiteren oder schmaleren Bildschrimgrößen umschalten soll. Bitte kontrolliere folgende Elemente, die alle einen Umsprungpunkt für das mobile Menü haben, und passe die Breakpoints auf deinen Wunschwert an:

• nav .MenuScroll
• ul .MenuScrollWrap
• div .MenuScrollArrowBG

Auch die Animation des Menüs lässt sich völlig frei anpassen. Standardmäßig erscheinen die Dropdown-Menüs bei hover und ein Klick auf den Scroll-Pfeil scrollt zum nächsten Menüpunkt. Diese Animationen kannst du im Interactions Tab vollständig ändern.

Aktiven Menüpunkt anzeigen

Um darzustellen, auf welcher Unterseite sich ein Nutzer gerade befindet, wird der aktuelle Menüpunkt oft optisch hervorgehoben. Dies geschieht in den Menüs der Pinegrow Forest Basic-Komponenten durch die Klasse "MenuActive". Diese kannst du natürlich beliebig gestalten und dem li-Element im Menü vergeben, das optisch hervorgehoben werden soll.

Nutzt du eine Masterseite mit dem gleichen Menü auf allen Unterseiten, kannst du auf jeder Unterseite einen anderen Menüpunkt die Klasse .MenuActive vergeben. Klicke dazu für jeden Menüpunkt (li-Element) im Actions-Tab auf "Define Editable". Gib eine Field Id (z.B. "MenuHome") ein und tippe bei Classes "MenuActive" ein. Jetzt kannst du im Tab Element Properties auf jeder Unterseite verschiedene Menüpunkte optisch hervorheben.

Wenn du einen Onepager hast (eine Website ohne Unterseiten) kannst du verschiedene Menüpunkte optisch hervorheben je nachdem, auf welchen Abschnitt der Seitenbesucher gerade gescrollt hat. Nutze dazu Pinegrow-Interactions und lege bei jedem Abschnitt (div oder section) eine Scroll-Scene an. Die Animation soll die dem Menüpunkt (li-Element) die Klasse "MenuActive" verleihen, wenn der Abschnitt ins Bild kommt.

Fertiger Titel-Bereich mit Farbverlauf

Der Block "Title Gradient" ist ein fertiger Titelbereich mit Hintergrundbild und Platz für Überschrift, Beschreibungstext & Co., der sich mit einem Farbverlauf vom Hintergrundbild abhebt.

Ziehe den Block einfach auf deine Seite, wähle ein Hintergrundbild aus und befülle ihn mit den Texten und Elementen, die du brauchst. In der mobilen Ansicht wechselt der Farbverlauf von horizontal zu vertikal.

Fertiger Titel-Bereich mit Inhalt

Der Block "Title Divide" ist ein fertiger Titelbereich mit Hintergrundbild und Platz für Überschrift, Beschreibungstext & Co.

Ziehe den Block einfach auf deine Seite, wähle ein Hintergrundbild aus und befülle ihn mit den Texten und Elementen, die du brauchst. In der mobilen Ansicht wird der Inhalt unter dem Titelbild dargestellt.

Fertiger Titel-Bereich mit Inhalt auf Hintergrundbild

Der Block "Title Overflow" ist ein fertiger Titelbereich mit Hintergrundbild und Platz für Überschrift, Beschreibungstext & Co., der in das Hintergrundbild hineinragt.

Ziehe den Block einfach auf deine Seite, wähle ein Hintergrundbild aus und befülle ihn mit den Texten und Elementen, die du brauchst.

Fertiger Titel-Bereich mit Text auf Hintergrundbild

Der Block "Title Inside" ist ein fertiger Titelbereich mit Hintergrundbild und Platz für Überschrift, Beschreibungstext & Co., der über dem Hintergrundbild überlagert wird.

Ziehe den Block einfach auf deine Seite, wähle ein Hintergrundbild aus und befülle ihn mit den Texten und Elementen, die du brauchst. Du kannst frei bestimmen, wo und wie der Inhalt das Hintergrundbild überlagern soll.

Einfacher Textblock ohne Bild

Der Block "Simple Textblock" ist ein ganz einfacher Block gefüllt mit Text. Er enthält standardmäßig kein Bild und ein einfaches Layout. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite und befülle ihn mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Dem Block einen farbigen Hintergrund geben

Wenn du den Hintergrund des Blocks ändern willst, solltest du nicht dem Block selbst eine andere Hintergrundfarbe oder Hintergrundbild verpassen. Der Block hat eine maximale Breite von 1600px, damit der Inhalt auf großen Monitoren nicht unansehnlich breit gezogen wird. Würdest du dem Block selbst einen Hintergrund verpassen, würde auf großen Bildschirmen ein weißer Rand links und rechts erscheinen.

Packe lieber den Block in ein div-Element. Diesem kannst du eine Klasse (z.B. .Hintergrundbild) vergeben und hier die Hintergrundfarbe oder das Hintergrundbild einstellen. Dann zieht sich der Hintergrund immer über die ganze Breite.

Textblock mit Bild

Der Block "Text Image" ist ein ganz einfacher Block mit Text und Bild nebeneinander. Packst du mehrere davon untereinander, wechselt sich Text und Bild links und rechs ab. Es gibt ihn in zwei Versionen: Bei "Text Image Left" ist der Text zuerst links, bei "Text Image Right" ist der Text zuerst rechts. In der mobilen Ansicht steht das Bild immer unter dem Text. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle ein Bild aus und befülle den Textbereich mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Anpassen des Textblocks

Die Blöcke "Text Image Left" und "Text Image Right" lassen sich vollständig anpassen:

• Ändern der Reihenfolge von Text & Bild: beim Block "Text Image Left" wird der Text zuerst links angezeigt, beim folgenden Bereich dann rechts. Willst du den Text zuerst rechts anzeigen, nutze den Block "Text Image Right". Die Klasse "TxtImgWrapR" entscheidet, in welcher Richtung Text und Bild angezeigt werden.
• Richtungswechsel von Text & Bild abschalten: wenn du nicht willst, dass sich die Reihenfolge von Text und Bild auf größeren Monitoren nebeneinander abwechselt (mobil ist das Bild immer unter dem Text), wählst du das zweite Div mit anderer Reihenfolge und der Klasse "TxtImgWrap" aus und stellst im Style-Tab auf Displaygrößen über 750px Breite bei der Regel ".TxtImgBG:nth-child(even) .TxtImgWrap" die flex-direction auf "row". 
• Hintergrundfarbe ändern: standardmäßig ändert sich die Hintergrundfarbe bei jedem zweiten Text-Bild-Block für eine bessere optische Trennung ab. Wähle (am besten im Tree-Tab) das Div mit der Klasse "TxtImgBG" aus, das einen grauen Hintergrund hat. Im Style-Tab kannst du in der Regel ".TxtImgBG:nth-child(even)" die Farbe des sich abwechselnden Hintergrunds ändern. Willst du nicht, dass sich die Farbe ändert, tippe bei "background-color" den Wert "transparent" ein.
• Seitenverhältnis von Text und Bild ändern: standardmäßig werden Text und Bild auf größeren Browserfenstern über 750px Breite in einem Platzverhältnis von 50% zu 50% nebeneinander dargestellt. Willst du, dass das Bild mehr oder weniger Platz einnimmt, kannst du andere Werte bei der Einstellung "width" bei den Divs mit der Klasse "TxtImgTextWrap" und "TxtImgImageWrap" im Style-Tab einstellen.

Textblock mit vollseitigem Bild

Der Block "Text Image Full" ist ein Block mit Text und Bild in Kacheloptik nebeneinander. Packst du mehrere davon untereinander, wechselt sich Text und Bild links und rechs ab. Es gibt ihn in zwei Versionen: Bei "Text Image Full Left" ist der Text zuerst links, bei "Text Image Full Right" ist der Text zuerst rechts. In der mobilen Ansicht steht das Bild immer unter dem Text. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle ein Bild aus und befülle den Textbereich mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Anpassen des Textblocks

Die Blöcke "Text Image Full Left" und "Text Image Full Right" lassen sich vollständig anpassen:

• Ändern der Reihenfolge von Text & Bild: beim Block "Text Image  Full Left" wird der Text zuerst links angezeigt, beim folgenden Bereich dann rechts. Willst du den Text zuerst rechts anzeigen, nutze den Block "Text Image Full Right". Die Klasse "TxtImgFull" entscheidet, in welcher Richtung Text und Bild angezeigt werden.
• Richtungswechsel von Text & Bild abschalten: wenn du nicht willst, dass sich die Reihenfolge von Text und Bild auf größeren Monitoren nebeneinander abwechselt (mobil ist das Bild immer unter dem Text), wählst du das zweite Div mit anderer Reihenfolge und der Klasse "TxtImgFull" aus und stellst im Style-Tab auf Displaygrößen über 750px Breite bei der Regel ".TxtImgFullBG:nth-child(even) .TxtImgFull" die flex-direction auf "row". 
• Hintergrundfarbe ändern: standardmäßig ändert sich die Hintergrundfarbe bei jedem zweiten Text-Bild-Block für eine bessere optische Trennung ab. Wähle (am besten im Tree-Tab) das Div mit der Klasse "TxtImgFullBG" aus, das einen grauen Hintergrund hat. Im Style-Tab kannst du in der Regel ".TxtImgFullBG:nth-child(even)" die Farbe des sich abwechselnden Hintergrunds ändern. Willst du nicht, dass sich die Farbe ändert, tippe bei "background-color" den Wert "transparent" ein.
• Seitenverhältnis von Text und Bild ändern: standardmäßig werden Text und Bild auf größeren Browserfenstern über 750px Breite in einem Platzverhältnis von 50% zu 50% nebeneinander dargestellt. Willst du, dass das Bild mehr oder weniger Platz einnimmt, kannst du andere Werte bei der Einstellung "width" bei den Divs mit der Klasse "TxtImgFullTextWrap" und "TxtImgFullImageWrap" im Style-Tab einstellen.

Textblock auf Bild

Der Block "Text on Image" kann als Highlight verwendet werden, um Text auf einem Bild zu platzieren. Es gibt ihn in zwei Versionen: Bei "Text on Image Left" ist der Text links, bei "Text on Image Right" ist der Text rechts. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle ein Bild aus und befülle den Textbereich mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Anpassen des Textblocks

Die Blöcke "Text on Image Left" und "Text on Image Right" lassen sich vollständig anpassen:

• Ändern der Position des Textfeldes: Das Textfeld ist nicht absolut auf dem Hintergrund platziert, sondern wird durch Abstände positioniert. Im Div mit der Klasse "TxtonImgBGL" bzw. "TxtonImgBGR" kannst du die Abstände (padding) anpassen.
• Hintergrundfarbe des Textfelds ändern: Standardmäßig ist der Hintergrund des Textfeldes halbtransparent Schwarz. Wählst du das Textfeld (Klasse "TxtonIngWrap") aus, kannst du im Style-Tab die Hintergrundfarbe frei ändern. 
• Ausschnitt vom Hintergrundbild ändern: Das Hintergrundbild wird je nach Browserbreite unterschiedlich stark beschnitten. Je nach Bild willst du vielleicht immer die Mitte im Sichtfeld haben, oder eher den rechten Rand. Wählst du das Hintergrundbild aus (img mit der Klasse "ImgBG"), kannst du diesen Ausschnitt im Style-Tab durch die Einstellung "object-position" ändern. Bei object-position: center center; wird das Bild mittig ausgerichtet. Bei object-position: top left; ist immer die obere linke Ecke des Bildes zu sehen.

Hinweis: Änderst du mit object-position den Bildausschnitt, vergib am besten jedem Hintergrundbild eine eigene Klasse. So kannst du jedes Bild anders beschneiden.

Block mit 3 Icons

Der Block "Icons" kann verwendet werden, um optisch ansprechend und übersichtlich auf Stärken, Zahlen oder Kontaktdaten hinzuweisen. Standardmäßig enthält der Block drei Icons, kann aber um mehr erweitert werden. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle die passenden Icons (als Bild oder SVG) aus und verwende eigene Beschriftungen.

Anpassen des Blocks "Icons"

Der Block "Icons" lässt sich vollständig anpassen:

• Hinzufügen neuer Icons: Willst du noch mehr Icons hinzufügen, duplizierst du am besten ein vorhandenes Icon (Div mit der Klasse "Icon3Wrap". Willst du weniger Icons, lösche sie einfach.
• Ändern eines Icons als Bild oder SVG: Standardmäßig sind die Icons als Bilder (img) eingebaut. Du kannst frei ein Bild (z.B. PNG oder JPG) wählen. Du kannst aber auch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "Icons3Wrap" und gib ihm die Klasse "Icons3Image"
• Anordnung der Icons ändern: Die Anordnung der Icons wird im Div mit der Klasse "Icons3Wrap" bestimmt, das alle Icons enthält. Die Abstände zwischen den Icons werden mit der CSS-Einstellung "gap" festgelegt. Hast du zum Beispiel 6 Icons und willst, dass jeweils 3 Stück nebeneinander in zwei Zeilen stehen, kannst du mit der Einstellung "max-width" die Breite des Divs begrenzen, damit nicht mehr als 3 Icons nebeneinander passen. Du musst deine Darstellung möglicherweise für verschieden breite Browserfenster (Desktop / Mobil) anpassen.

Übersicht in Kartenoptik

Der Block "Cards" kann als Übersicht verwendet werden, um Leistungen / Themen ansprechend darzustellen. Alle Abstände und Ansichten (Mobil / Tablet / Desktop) sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle Bilder aus und befülle die Textbereiche mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Anpassen des Blocks "Cards"

Der Block "Cards" lässt sich vollständig anpassen:

• Inhalter weniger strecken: Damit auch bei unterschiedlich langem Inhalt / Text der untere Button bei allen Karten auf der gleichen Höhe ist, wird die Überschrift immer ganz oben, der Button ganz unten und der Text mittig dazwischen angezeigt. Willst du das nicht, kannst du beim Inhalt-Block mit der Klasse "CardTxtWrap" im Style-Tab bei "display" den Wert zu "block" ändern.
• Umstellung auf Tabletgröße vermeiden: Standardmäßig wird bei Browserbreiten zwischen 500px und 750px das Bild neben dem Text dargestellt. Wenn du kein Bild nutzen willst oder dir diese Darstellung nicht gefällt, kannst du das ändern. Stelle eine Breite zwischen 500px und 750px ein und setze im Style-Tab beim Div mit der Klasse "CardWrap" die Einstellung "display: block". Beim Div "CardImgWrap" und "CardTxtWrap" setzt du die Einstellung "width: auto".
• Hintergrundfarbe ändern: Die Hintergrundfarbe kannst du im Div mit der Klasse "CardWrap" im Style-Tab ändern.

Kompakte Übersicht

Der Block "Overview" kann ähnlich wie "Cards" als Übersicht verwendet werden, um Leistungen / Themen ansprechend darzustellen. Overview ist dabei nochmal kompakter und nutzt Icons anstelle von Bildern. Alle Abstände und Ansichten (Mobil / Tablet / Desktop) sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle Bilder / Icons aus und befülle die Textbereiche mit den Texten, Überschriften, Buttons und Elementen, die du brauchst.

Anpassen des Blocks "Overview"

Der Block "Overview" lässt sich vollständig anpassen:

• Inhalter strecken: Damit auch bei unterschiedlich langem Inhalt / Text der untere Button bei allen Übersichtsfeldern auf der gleichen Höhe ist, kannst du beim Inhalt-Block mit der Klasse "OverviewWrap" im Style-Tab folgende Werte eintragen:
  display: flex;
  flex-direction: column;
  justify-content: space-between;
• Ändern eines Icons als Bild oder SVG: Standardmäßig sind die Icons als Bilder (img) eingebaut. Du kannst frei ein Bild (z.B. PNG oder JPG) wählen. Du kannst aber auch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "OverviewWrap" und gib ihm die Klasse "OverviewIcon"
• Hintergrundfarbe ändern: Die Hintergrundfarbe jedes Übersichtsfeldes kannst du im Div mit der Klasse "OverviewWrap" im Style-Tab ändern. Willst du den Feldern unterschiedliche Hintergrundsfarben geben, vergib ihnen verschiedene Klassen, in der du die Hintergrundfarbe einstellst. Willst du den kompletten Hintergrund des Blocks ändern, packst du den Block "Overview" am besten in ein Div, dem du dann die Hintergrundfarbe zuweist.

Vorgefertigte Checkliste

Der Block "Checklist" kann vielfältig als Übersicht verwendet werden, um Vorteile / Themen ansprechend darzustellen. Das Checklist-Item (also ein Haken mit Text) kann auch einzeln aus dem Blog kopiert und anderswo auf der Website verwendet werden. Alles ist bereits so eingestellt, dass der Block ganz einfach verwendet werden und individuell angepasst werden kann.

Ziehe den Block einfach auf deine Seite und befülle ihn mit deinen eigenen Beschriftungen.

Anpassen des Blocks "Checklist"

Der Block "Checklist" lässt sich vollständig anpassen:

• Neue Checklist-Items hinzufügen oder entfernen: Um noch mehr Checklist-items in deiner Checkliste hinzuzufügen, duplizierst du am besten eines der li-Elemente mit der Klasse "ChecklistItem". Willst du ein Checklist-Item entfernen, löschst du einfach das li-Element.
• Design des Häkchens ändern: Um den Stil des Häkchens zu ändern wählst du das span-Element mit der Klasse "ChecklistSign" aus und bearbeitest es im Style-Tab. Dort kannst du die Farbe (color), Größe (font-size) und mehr ändern. Möchtest du ein anderes Häkchen verwenden, tauschst du den Code im Tab Element Code im span-Element aus:
  &#10003; > ✓︎
  &#10004; > ✔︎
  &#9989; > ✅︎
  &#9745; > ☑
• Checklist-Item durch Bild austauschen: Willst du ein ganz individuelles Häkchen nutzen, kannst du auch ein Bild oder SVG (auch auf der Pinegrow SVG Library) nutzen. Ziehe einfach ein img-Element oder ein SVG in das li-Element mit der Klasse "ChecklistItem", gib der Grafik die Klasse "ChecklistSign" und lösche das alte Häkchen. Die Größe steuerst du über die CSS-Einstellungen width und height.
• Abstände und Anzahl der Spalten ändern: Das ul-Element mit der Klasse "Checklist" bestimmt die Anzahl der Spalten (standardmäßig 2 Spalten (columns) ab 750px Browserbreite), die Abstände der Spalten und den Außenabstand. Im Style-Tab kannst du alle Einstellungen individuell anpassen, damit deine Liste so dargestellt wird, wie du es willst.

Vorgefertigte Preisliste

Der Block "Price List Item" ist ein Element einer Preisliste mit Titel, Beschreibung, Preis und Mengenangaben. Packe einfach mehrere dieser Blöcke untereinander, um eine Speisekarte oder Preisliste deiner Leistungen zu erhalten. Alles ist bereits so eingestellt, dass der Block ganz einfach verwendet werden und individuell angepasst werden kann.

Ziehe den Block einfach auf deine Seite und befülle ihn mit deinen eigenen Angaben. Du kannst die Preisliste einfach so zwischen andere Inhalte deiner Seite packen oder in einen anderen Block (wie z.B. "Block 2 Columns") ziehen.

Anpassen des Blocks "Price List Item"

Der Block "Price List Item" lässt sich vollständig anpassen:

• Weitere Speise / Produkt / Leistung hinzufügen: Der Block "Price List Item" zeigt nur ein Produkt, Speise oder Leistung. Willst du mehrere anzeigen, ziehst du den Block einfach mehrfach auf deine Seite. Durch diesen Aufbau lassen sich größere Preislisten einfacher managen.
• Einzelne Elemente löschen: Benötigst du keine Beschreibung oder Mengenangaben, kannst du die entsprechenden p-Elemente einfach rauslöschen.
• Abwechselnde Hintergrundfarbe ändern: Standardmäßig wird die Hintergrundfarbe der Preisliste für eine bessere lesbarkeit abwechselnd Grau und Weiß dargestellt. Die Farbe kannst du bei ausgewähltem Price List Item-Block im Style-Tab einstellen (.PriceListItemWrap:nth-child(even)). Lösche diese Regel einfach raus, wenn du keinen Farbwechsel möchtest.

Vorgefertigtes Akkordion

Der Block "Accordion" kann gut genutzt werden, um zusätzliche Informationen zu verstecken, etwa bei FAQs oder Leistungen. So nehmen Inhalte nicht so viel Platz auf der Website ein. Alle Abstände und Animationen sind bereits so vorbereitet, dass der Block ganz einfach verwendet werden und individuell angepasst werden kann.

Ziehe den Block einfach auf deine Seite und befülle ihn mit deinen eigenen Texten und Inhalten.

Anpassen des Blocks "Accordion"

Der Block "Accordion" lässt sich vollständig anpassen:

• Neues Akkordion hinzufügen oder entfernen: Um noch mehr Akkordions zu erhalten, kannst du einfach ein Akkordion (Div mit der Klasse "AccordionWrap") duplizieren. Dupliziere am besten nicht das erste Akkordion, weil es die Animationsvorlage enthält.
• Ändern der Hintergrundfarben: Um den eingeklappten Inhalt besser von der Kopfzeile zu unterscheiden, bietet sich der Einsatz von unterschiedlichen Hintergrundfarben an. Gib am besten entweder der Kopfzeile (Div mit der Klasse "AccordionHead") oder dem versteckten Inhalt (Div mit der Klasse "AccordionContent") im Style-Tab eine andere Hintergrundfarbe (background-color). Füge zur besseren Optik noch ein paar Abstände (padding) hinzu.
• Bilder & mehr in den versteckten Bereich: Du kannst in das Div mit der Klasse "AccordionContent", das anfangs versteckt und dann ausgeklappt wird, alle möglichen Inhalte wie Bilder (img), Videos, Überschriften, Tabellen und mehr ziehen.
• +-Symbol umgestalten oder ersetzen: Das Symbol zum Öffnen / Schließen des Akkordions ist ein span (+-Zeichen) mit der Klasse "AccordionCloseIcon". Im Style-Tab kannst du dieses Symbol in der Größe (font-size), Farbe (color) & Co. anpassen. Du kannst auch ein anderes Symbol in das span schreiben oder ein Bild oder SVG nutzen. Wichtig für die Animation ist nur, dass das Symbol die Klasse "AccordionCloseIcon" besitzt.

Vorgefertigte Tabelle

Der Block "Table" enthält eine vollständig anpassbare und erweiterbare Tabelle. Sie ist ganz normal in HTML aufgebaut und kann ganz einfach verwendet werden.

Ziehe den Block einfach auf deine Seite und passe ihn mit deinen eigenen Inhalten an.

Anpassen des Blocks "Table"

Der Block "Table" lässt sich vollständig nach den Regeln einer HTML-Tabelle anpassen:

• Neue Zeile hinzufügen / entfernen: Um eine weitere Zeile hinzuzufügen, duplizierst du am besten das letzte tr-Element der Tabelle. Willst du eine Zeile entfernen, löschst du einfach das entsprechende tr-Element.
• Neue Spalte hinzufügen / entfernen: Eine neue Spalte hinzuzufügen, ist leider nicht so einfach. Du musst in jeder Zeile (also in jedem tr-Element) ein td-Element (in der ersten Zeile th-Element) hinzufügen. Am besten duplizierst du dafür das jeweils unterste td-Element. Das kann bei größeren Tabellen sehr zeitraubend sein. Um eine Spalte zu entfernen, musst du in jedem tr-Element ein td-Element (oder th) löschen.
• Sich abwechselnde Hintergrundfarben ändern: Zur besseren Lesbarkeit erscheint jede zweite Zeile der Tabelle in einer anderen Hintergrundfarbe (Grau). Das kannst du ändern, indem du eine solche Zeile (tr-Element) auswählst und im Style-Tab die Regel "tr:nth-child(odd)" anpasst. Willst du keine Farbänderung, gibst du ein: background-color: transparent. Die Hintergrundfarbe der Kopfzeile kannst du in den th-Elementen ändern.
• Felder miteinander verschmelzen: Manchmal möchte man, dass eine Zeile über mehrere Spalten geht oder dass einzelne Felder miteinander verschmolzen werden. Das kannst du machen, indem du z.B. in einer Tabelle mit 3 Spalten, nur 2 td-Elemente in einer Zeile (tr-Element) hast. Wähle das Feld (td-Element) aus, das über mehrere Spalten laufen soll und gehe in den Tab "Element Properties". Dort kannst du im Feld "Colspan" eine 2 eintippen. Somit erstreckt sich das Feld über 2 Spalten.
• Spalten gleich breit machen: Befüllst du die Felder der Tabelle mit unterschiedlich langem Inhalt, werden die Spalten wahrscheinlich unterschiedlich breit angezeigt. Gib am besten den th oder td-Elementen im Style-Tab eine feste Breite (width).
• Tabelle mobil horizontal scrollbar machen: Je kleiner die Bildschirmbreite ist, umso gestauchter wird der Inhalt deiner Tabelle. Auf mobilen Geräten macht es deshalb oft Sinn, die Tabelle horizontal scrollbar zu machen. Gib dafür der Tabelle oder den Spalten eine feste Breite und lege sie in ein Div, das die CSS-Einstellung "overflow: scroll" hat.

Vorgefertigte Zustimmung von externem Inhalt (DSGVO)

Der Block "Consent External" kann vielfältig verwendet werden, um externe Inhalte wie YouTube-Videos, Google Maps & Co. DSGVO-konform einzubinden. Der Seitenbesucher muss erst zustimmen, bevor die Inhalte extern geladen werden. Alles ist bereits so eingestellt, dass der Block ganz einfach verwendet werden und individuell angepasst werden kann.

Ziehe den Block einfach auf deine Seite und befülle ihn mit deinen eigenen Beschriftungen.

Anpassen des Blocks "Consent External Content"

Der Block "Consent External Content" lässt sich vollständig anpassen:

• Eigenes Hintergrundbild hinzufügen: Du kannst das Hintergrundbild mit der Klasse "ImgBG" ganz einfach im Element Properties-Tab ändern. Nutze am Besten einen Screenshot oder Vorschau des Inhalts, wie er später geladen wird.
• Farbe des Overlay ändern: Das Div mit der Klasse "ConsentExtWrap" dunkelt den Hintergrund leicht ab, damit der Text besser lesbar ist. Im Style-Tab kannst du diese Farbe und Transparenz durch die Einstellung background-color ändern.
• Zu ladenden Inhalt bzw. iframe ändern: Willst du ein Video, Karte oder andere Inhalte per iframe in deine Website einbinden, bekommst du immer einen Code mit einem src-Attribut. Den Link, der hinter "src=" gibst du in die Animation ein. Wähle den Button aus, öffne den Interactions-Tab und bearbeite die Animation. Dort kannst du den Link in das src-Attribut des iframes einfügen.
• Einen anderen (Play-)Button wählen: Du kannst jedes beliebige Element nutzen, um den Inhalt zu laden. Bei einem Video bietet sich auch ein Play-Icon an. Ziehe am besten das andere Element in das Div mit der Klasse "ConsentExtWrap" und kopiere ganz einfach die Interaction vom p-Element mit der Klasse "Button" und füge sie bei dem Element ein, das dein Zustimmung-Button sein soll.
• Größe des Blocks verändern: Die Größe des Zustimmungs-Blocks sollte der Größe deines iframes entsprechen. Oft haben iframes feste Größen, machmal passen sie sich an den Inhalt an. Du kannst die Größe des Blocks im Style-Tab ändern, wenn du das Div mit der Klasse "ConsentExtBG" auswählst.

Formen für abwechslungsreiche Übergänge

Die Blöcke "Divider Form Above" und "Divider Form Below" können über und unter einem Element platziert werden, das eine andere Hintergrundfarbe hat, als das Element davor. So wird der Farbwechsel nicht nur durch eine gerade Linie, sondern eine Schräge oder jede andere beliebige Form eingeleitet. Alles ist bereits so eingestellt, dass der Block ganz einfach verwendet werden und individuell angepasst werden kann.

Ziehe den Block einfach auf deine Seite und gestalte ihn nach deinen Vorlieben.

Anpassen des Blocks "Divider Form Above / Below"

Die Blöcke "Divider Form Above" und "Divider Form Below" lassen sich vollständig anpassen:

• Eigene Form hinzufügen: Du kannst die standardmäßige schräge Form surch eine Welle oder jede andere beliebige Form austauschen. Erstelle dazu am besten eine SVG-Form mit einer Breite von 1000px und einer Höhe von 100px. Füge die svg selbst in den Block ein und vergib ihr die Klasse "FormBreakAbove" (oben) bzw. "FormBreakBelow" (unten). Du kannst auch die Pfad-Werte der Form direkt in den <path> des svg-Elements reinkopieren.
• Bild als Formhinzufügen: Du kannst auch eine Bildgrafik als Übergang zwischen Blöcken nutzen (z.B. eine Papier-Risskante). Ziehe ein img-Element in den Block und gib ihm die Klasse "FormBreakAbove" (oben) bzw. "FormBreakBelow" (unten).
• Form wiederholen und nicht strecken: Standardmäßig wird die Form durch die CSS-Einstellung "width: 100%" auf die Breite des Browsers gestreckt bzw. gestaucht. Willst du, dass sich die Form wie bei einer Welle wiederholt, kannst du sie als Hintergrundbild einbauen. Nimm ein Div, gib ihm die Klasse "FormBreakAbove" (oben) bzw. "FormBreakBelow" (unten) und wähle eine Grafik als Hintergrundbild aus (background-image), die du sich wiederholen lässt (background-repeat: repeat-x).
• Die Form lässt sich nicht strecken: Hast du eine eigene SVG-Grafik erstellt, die sich nicht strecken lässt, liegt das vermutlich am fehlenden Attribut (preserveAspectRatio="none"), das du im Code-Tab in dein svg-Element schreiben kannst. Nutzt du das img-Element, solltest du dieses Attribut in deine Bilddatei schreiben (z.B. mit einem Code-Editor oder Bildprogramm).
• Eine dünne Linie ist zwischen Form und Block zu sehen: Siehst du eine dünne Linie zwischen der Form und dem Block über bzw. unter ihr, kannst du dieses ganz einfach beheben, indem du beim svg-Element im Style-Tab für die Klasse "FormBreakAbove" die Einstellung "margin-top: -99px" und für die Klasse "FormBreakBelow" die Einstellung "margin-top: -1px" vornimmst. So rückt die Form ein Pixel näher an den Block und die dünne Linie verschwindet.

Leerer Block mit Hintergrundbild zum vielseitigen Befüllen mit Inhalt

Der Block "Divider" ist ein Container mit Hintergrundbild, der ganz individuell mit dem unterschiedlichsten Inhalt befüllt werden kann. Wie wäre es mit einer Überschrift (h1), einem Textblock (p) und einem Button (a.Button)? Oder einem Bild (img), Video (video), Tabelle (table), Formular (form) & Co. Der "Divider" kann als Element zur Abwechslung eingesetzt werden, um Inhalte abzutrennen oder hervorzuheben.

Ziehe den Block einfach auf deine Seite und gestalte ihn nach deinen Vorlieben. Ziehe jede beliebige Form von Inhalt in diesen Block.

Anpassen des Blocks "Divider"

Der Block "Divider" lässt sich vollständig anpassen:

• Abstände des Inhalts ändern: Willst du z.B., dass mehr oder weniger vom Hintergrundbild über oder unter deinem Inhalt zu sehen ist kannst du die Abstände (padding) im Div mit der Klasse "DividerWrap" im Style-Tab ändern.
• Farbe & Transparenz des Overlay ändern: Standardmäßig dunkelt der Overlay das Hintergrundbild ab. Du kannst es aber auch aufhellen, einfärben oder einen Farbverlauf nutzen. Wähle das Div mit der Klasse "DividerOverlay" auf und ändere die Hintergrundfarbe (background-color) im Style-Tab.
• Hintergrundbild ändern: Du kannst selbstverständlich das Hintergrundbild (img mit der Klasse "ImgBG") ändern. Klicke es am besten im Tree-Tab an und wähle im Tab Element properties die Bilddatei.
• Video als Hintergrund einbauen: Wenn du kein Bild, sondern ein Video als Hintergrund haben willst, kannst du das umsetzen. Ziehe einfach ein video-Element anstelle des Bildes in den Block und gib ihm die Klasse "ImgBG". Tipp: Aktiviere am besten die Autoplay- und Loop-Option.
• Ausschnitt des Hintergrundbilds ändern: Das Hintergrundbild wird standardmäßig mittig auf die Größe des Inhalts zugeschnitten. Je nach Browserbreite bzw. Gerät (Desktop / mobil) können so wichtige Bildinhalte abgeschnitten werden. Wähle das Bild (img mit der Klasse "ImgBG") aus und passe den Bildausschnitt mit der CSS-Einstellung object-position an. Bei object-position: center top wird immer der obere mittige Bereich des Bildes angezeigt, bei object-position: left bottom die untere linke Ecke.

Wichtig: Änderst du den Bildausschnitt des Hintergrunds, gib dem Bild dabei am besten eine neue Klasse. Sonst verstellt du den Ausschnitt bei allen Hintergrundbildern, die die Klasse "ImgBG" verwenden.

3 Icons mit Hintergrundbild

Der Block "Divider Icons" kann verwendet werden, um optisch ansprechend und übersichtlich auf Stärken, Zahlen oder Kontaktdaten hinzuweisen. Standardmäßig enthält der Block drei Icons, kann aber um mehr erweitert werden. Alle Abstände sind bereits eingestellt, sodass der Block ganz einfach verwendet werden kann.

Ziehe den Block einfach auf deine Seite, wähle die passenden Icons (als Bild oder SVG) und das Hintergrundbild aus und verwende eigene Beschriftungen.

Anpassen des Blocks "Divider"

Der Block "Divider" lässt sich vollständig anpassen:

• Hintergrundbild ändern: Du kannst selbstverständlich das Hintergrundbild (img mit der Klasse "ImgBG") ändern. Klicke es am besten im Tree-Tab an und wähle im Tab Element properties die Bilddatei.
• Hinzufügen neuer Icons: Willst du noch mehr Icons hinzufügen, duplizierst du am besten ein vorhandenes Icon (Div mit der Klasse "DividerIconWrap". Willst du weniger Icons, lösche sie einfach.
• Ändern eines Icons als Bild oder SVG: Standardmäßig sind die Icons als Bilder (img) eingebaut. Du kannst frei ein Bild (z.B. PNG oder JPG) wählen. Du kannst aber auch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "DividerIconWrap" und gib ihm die Klasse "DividerIcon"
• Anordnung der Icons ändern: Die Anordnung der Icons wird im Div mit der Klasse "DividerIconsWrap" bestimmt, das alle Icons enthält. Die Abstände zwischen den Icons werden mit der CSS-Einstellung "gap" festgelegt. Hast du zum Beispiel 6 Icons und willst, dass jeweils 3 Stück nebeneinander in zwei Zeilen stehen, kannst du mit der Einstellung "max-width" die Breite des Divs begrenzen, damit nicht mehr als 3 Icons nebeneinander passen. Du musst deine Darstellung möglicherweise für verschieden breite Browserfenster (Desktop / Mobil) anpassen.
• Farbe & Transparenz des Overlay ändern: Standardmäßig dunkelt der Overlay das Hintergrundbild ab. Du kannst es aber auch aufhellen, einfärben oder einen Farbverlauf nutzen. Wähle das Div mit der Klasse "DividerOverlay" auf und ändere die Hintergrundfarbe (background-color) im Style-Tab.
• Video als Hintergrund einbauen: Wenn du kein Bild, sondern ein Video als Hintergrund haben willst, kannst du das umsetzen. Ziehe einfach ein video-Element anstelle des Bildes in den Block und gib ihm die Klasse "ImgBG". Tipp: Aktiviere am besten die Autoplay- und Loop-Option.
• Ausschnitt des Hintergrundbilds ändern: Das Hintergrundbild wird standardmäßig mittig auf die Größe des Inhalts zugeschnitten. Je nach Browserbreite bzw. Gerät (Desktop / mobil) können so wichtige Bildinhalte abgeschnitten werden. Wähle das Bild (img mit der Klasse "ImgBG") aus, gib im am besten eine eigene Klasse und passe den Bildausschnitt mit der CSS-Einstellung object-position an. Bei object-position: center top wird immer der obere mittige Bereich des Bildes angezeigt, bei object-position: left bottom die untere linke Ecke.

Block mit Zitat und Hintergrundbild

Der Block "Divider Quote" ist dafür gedacht, ein gut lesbares Zitat auf einem Hintergrundbild anzuzeigen. Er kann gut als optisches Highlight zum Abtrennen von Inhalten genutzt werden.

Ziehe den Block einfach auf deine Seite, schreibe ein Zitat rein und wähle Bilder aus.

Anpassen des Blocks "Divider Quote"

Der Block "Divider Quote" lässt sich vollständig anpassen:

• Zitat ändern und gestalten: Schreibe einfach dein eigenes Zitat in den Text mit der Klasse "DividerQuote". Im Style-Tab kannst du es optisch anpassen, wie es dir gefällt.
• Bild und Namen des Autors ändern: Das Bild des Autoren kannst du im Bild mit der Klasse "DividerQuoteImg" im Tab Element properties ändern. Im Style-Tab gestaltest du das Design. Willst du kein Bild, kannst du es einfach löschen. Willst du den Autorennamen optisch anpassen, gib ihm am besten eine eigene Klasse.
• Hintergrundbild ändern: Du kannst selbstverständlich das Hintergrundbild (img mit der Klasse "ImgBG") ändern. Klicke es am besten im Tree-Tab an und wähle im Tab Element properties die Bilddatei.
• Farbe & Transparenz des Overlay ändern: Standardmäßig dunkelt der Overlay das Hintergrundbild ab. Du kannst es aber auch aufhellen, einfärben oder einen Farbverlauf nutzen. Wähle das Div mit der Klasse "DividerOverlay" auf und ändere die Hintergrundfarbe (background-color) im Style-Tab.
• Video als Hintergrund einbauen: Wenn du kein Bild, sondern ein Video als Hintergrund haben willst, kannst du das umsetzen. Ziehe einfach ein video-Element anstelle des Bildes in den Block und gib ihm die Klasse "ImgBG". Tipp: Aktiviere am besten die Autoplay- und Loop-Option.
• Ausschnitt des Hintergrundbilds ändern: Das Hintergrundbild wird standardmäßig mittig auf die Größe des Inhalts zugeschnitten. Je nach Browserbreite bzw. Gerät (Desktop / mobil) können so wichtige Bildinhalte abgeschnitten werden. Wähle das Bild (img mit der Klasse "ImgBG") aus und passe den Bildausschnitt mit der CSS-Einstellung object-position an. Bei object-position: center top wird immer der obere mittige Bereich des Bildes angezeigt, bei object-position: left bottom die untere linke Ecke.

Block mit vorgefertigtem Formular

Der Block "Contact Form" ist ein vorgefertigtes Formular mit verschiedenen Arten von Eingabefeldern, Auswahlfeldern, Checkboxen und mehr. Dabei handelt es sich um das HTML-Grundgerüst eines Formulars, das du vollständig an deine Bedürfnisse anpassen und mit deinem eigenen Skript verknüpfen kannst.

Ziehe den Block einfach auf deine Seite und passe die Felder und Checkboxes so an, dass dein Formular genau die Informationen abfragt, die du benötigst. Nutze ganz klassisches HTML um das Formular anzupassen und zu erweitern.

Anpassen des Blocks "Contact Form"

Der Block "Contact Form" lässt sich vollständig an diene Bedürfnisse anpassen:

• Eigenes Formular bauen: Du kannst die Formular-Elemente wie Eingabefelder, Select-Felder, Radio Buttons oder Checkboxes frei anordnen, duplizieren, löschen, beschriften und anpassen, wie du es für dein Kontaktformular, Anmeldeformular oder sonstiges Formular benötigst.
• Eigenes Skript verwenden: Der Block enthält nur die Formular-Elemente. Damit das Kontaktformular funktioniert, braucht es noch ein Skript. Dieses ist oft in PHP programmiert und bestimmt, wie das Formular funktionieren soll (also dass es z.B. eine E-Mail mit den Kontaktinformationen verschicken soll). Du musst dem Formular sagen, wo dein Skript liegt. Wähle dazu das form-Element aus und gib im Tab Element properties unter "Action" den Pfad zu deinem Skript ein. Als "Method" gibst du in den meisten Fällen "post" ein.
• Formularfelder in nur einer Spalte anzeigen: Standardmäßig werden die Felder des Formulars auf größeren Bildschirmbreiten in zwei Spalten dargestellt. Willst du das nicht, ändere einfach bei einem Formular-Element mit der Klasse "ContactForm2CmnsFieldWrap" im Style-Tab die Einstellung bei width auf "100%".

Block mit vorbereitetem Kontaktbereich

Der Block "Contact Area" ist ein vorgefertigter Kontaktbereich mit Platzhaltern für eine Telefonnummer, E-Mail-Adresse und Anschrift neben einem Kontaktformular. Dabei handelt es sich um das HTML-Grundgerüst eines Formulars, das du vollständig an deine Bedürfnisse anpassen und mit deinem eigenen Skript verknüpfen kannst.

Ziehe den Block einfach auf deine Seite und passe die Kontaktinformationen und das Formular so an, wie du es gerne hättest.

Anpassen des Blocks "Contact Area"

Der Block "Contact Area" lässt sich vollständig an deine Bedürfnisse anpassen:

• Ändern eines Icons als Bild oder SVG: Standardmäßig sind die Icons als svg-Elemente eingebaut. Du kannst ein anderes Icon z.B. durch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "FlexCenterVertical" und gib ihm die Klasse "ContaktIcon". Auf diese Weise kannst du auch ein img-Element in den Kontaktbereich ziehen, um ein JPG oder PNG-Bild zu nutzen.
• Telefonnummer verlinken: Standardmäßig besteht die E-Mail-Adresse schon aus einem Link. Du kannst aber auch die Telefonnummer verlinken. Markiere dazu die Telefonnummer und klicke im Kontextmenü auf "Link". Gibst du die Telefonnummer in folgendem Format ein, startet beim Klick darauf auf dem Smartphone automatisch ein Anruf: tel:+49123456789.
• Eigenes Formular bauen: Du kannst die Formular-Elemente frei anordnen, duplizieren, löschen, beschriften und anpassen, wie du es für dein Kontaktformular benötigst. Brauchst du mehr Elemente, kannst du dir aus dem Block "Contact From" zusätzliche Eingabefelder, Select-Felder, Radio Buttons oder Checkboxes kopieren.
• Eigenes Skript verwenden: Der Block enthält nur die Formular-Elemente. Damit das Kontaktformular funktioniert, braucht es noch ein Skript. Dieses ist oft in PHP programmiert und bestimmt, wie das Formular funktionieren soll (also dass es z.B. eine E-Mail mit den Kontaktinformationen verschicken soll). Du musst dem Formular sagen, wo dein Skript liegt. Wähle dazu das form-Element aus und gib im Tab Element properties unter "Action" den Pfad zu deinem Skript ein. Als "Method" gibst du in den meisten Fällen "post" ein.
• Kontaktbereich in nur einer Spalte anzeigen: Standardmäßig wird der Kontaktbereich auf größeren Bildschirmbreiten in zwei Spalten dargestellt. Willst du das nicht, ändere einfach beim Div mit der Klasse "ContactAreaWrap" im Style-Tab die Einstellung bei display auf "block" und bei den Divs mit der Klasse "ContactArea50" die Einstellung width auf "auto".
• Formular durch eine Karte austauschen: Wenn du kein Kontaktformular benötigst, kannst du das form-Element einfach entfernen und z.B. ein Bild (img-Element) mit einer Karte in den Kontaktbereich reinziehen.

Block mit kleinem Footer

Der Block "Footer S" ist ein vorgefertigter Footerbereich mit Platzhaltern für ein Logo, Links zu rechtlich relevanten Seite wie Impressum und Datenschutz sowie Links zu verschiedenen Socialmedia-Kanälen. Der Block eignet sich sehr gut als dezente Fußzeile ganz am Ende der Website, die nur die nötigsten Informationen bietet.

Ziehe den Block am besten in den footer-Bereich deiner Masterseite (master.html des Starterprojekts). Dann wird er auf allen Unterseiten ganz unten angezeigt. Änderst du den Footer in der Masterseite, werden die Änderungen auf jede Unterseite übertragen.

Anpassen des Blocks "Footer S"

Der Block "Footer S" lässt sich vollständig an deine Bedürfnisse anpassen:

• Ändern der Hintergrundfarbe: Die Hintergrundfarbe änderst du, indem du das Div mit der Klasse "FooterS" am besten im Tree-Tab auswählst und im Style-Tab die Einstellung "background-color" anpasst.
• Ändern des Logos: Klicke einfach den Logo-Platzhalter an (img-Element mit der Klasse "ImageFit") und wähle im Tab Element properties den Pfad zu deinem Logo (egal ob JPG, PNG oder SVG) unter "Source".
• Verlinkung der Socialmedia-Icons: Standardmäßig sind ein paar Socialmedia-Icons als svg-Elemente eingebaut. Du kannst ein anderes Icon z.B. durch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "FooterSSOcialmediaIconWrap" und gib ihm die Klasse "FooterSocialmediaIcon". Auf diese Weise kannst du auch ein img-Element nutzen, um ein JPG oder PNG-Bild zu verwenden. Setze einen Link zu deinen Socialmedia-Eintrag durch einen Rechtsklick auf das Icon > Transform > Add link.

Block mit mittelgroßem Footer

Der Block "Footer M" ist ein vorgefertigter Footerbereich mit Platzhaltern für Telefonnummer, E-Mail-Adresse, Anschrift, Logo, Beschreibungstext und Links zu Unterseiten. Der Block eignet sich sehr gut als mittelgroße Fußzeile ganz am Ende der Website.

Ziehe den Block am besten in den footer-Bereich deiner Masterseite (master.html des Starterprojekts). Dann wird er auf allen Unterseiten ganz unten angezeigt. Änderst du den Footer in der Masterseite, werden die Änderungen auf jede Unterseite übertragen.

Anpassen des Blocks "Footer M"

Der Block "Footer M" lässt sich vollständig an deine Bedürfnisse anpassen:

• Ändern der Hintergrundfarbe: Die Hintergrundfarbe änderst du, indem du das Div mit der Klasse "FooterMBG" am besten im Tree-Tab auswählst und im Style-Tab die Einstellung "background-color" anpasst. Den Hintergrund der unteren Fußleiste änderst du über das Div mit der Klasse "FooterLLegalWrap"
• Ändern des Logos: Klicke einfach den Logo-Platzhalter an (img-Element mit der Klasse "FooterMLogo") und wähle im Tab Element properties den Pfad zu deinem Logo (egal ob JPG, PNG oder SVG) unter "Source".
• Ändern eines Icons als Bild oder SVG: Standardmäßig sind die Icons als svg-Elemente eingebaut. Du kannst ein anderes Icon z.B. durch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "FlexCenterVertical" und gib ihm die Klasse "FooterContactIcon". Auf diese Weise kannst du auch ein img-Element in den Kontaktbereich ziehen, um ein JPG oder PNG-Bild zu nutzen.
• Telefonnummer verlinken: Du kannst E-Mail-Adressen und Telefonnummern verlinken. Markiere dazu die Telefonnummer /E-Mail und klicke im Kontextmenü auf "Link". Gibst du die Telefonnummer in folgendem Format ein, startet beim Klick darauf auf dem Smartphone automatisch ein Anruf: tel:+49123456789. Bei folgendem Link öffnet sich das E-Mail-Programm mit bereits eingetragener Mail-Adresse: mailto:info@url.de.
• Mehrere Spalten nutzen: Willst du mehr als der standardmäßig 3 verbauten Spalten nutzen, duplizierst du am besten die mittlere Spalte mit der Klasse "FooterMColumnM", so passen die Abstände am besten. Du kannst die Spalten mit mehr Links oder anderen Inhalten nach Belieben füllen. Die Spalten werden mehrzeilig dargestellt, wenn sie nicht nebeneinander in den Footer passen. Sollte eine Spalte zu breit werden, kannst du ihre Breite im Style-Tab durch die width oder max-width Einstellung ändern.

Block mit großem Footer

Der Block "Footer L" ist ein vorgefertigter Footerbereich mit Platzhaltern für Logo, Beschreibungstext, Socialmedia-Links, Kontakinformationen und viel Platz für Links zu Unterseiten. Der Block eignet sich sehr gut als große Fußzeile ganz am Ende einer umfangreichen Website.

Ziehe den Block am besten in den footer-Bereich deiner Masterseite (master.html des Starterprojekts). Dann wird er auf allen Unterseiten ganz unten angezeigt. Änderst du den Footer in der Masterseite, werden die Änderungen auf jede Unterseite übertragen.

Anpassen des Blocks "Footer L"

Der Block "Footer L" lässt sich vollständig an deine Bedürfnisse anpassen:

• Ändern der Hintergrundfarbe: Die Hintergrundfarbe änderst du, indem du das Div mit der Klasse "FooterLBG" am besten im Tree-Tab auswählst und im Style-Tab die Einstellung "background-color" anpasst. Den Hintergrund der unteren Fußleiste änderst du über das Div mit der Klasse "FooterLLegalWrap"
• Ändern des Logos: Klicke einfach den Logo-Platzhalter an (img-Element mit der Klasse "FooterLLogo") und wähle im Tab Element properties den Pfad zu deinem Logo (egal ob JPG, PNG oder SVG) unter "Source".
• Verlinkung der Socialmedia-Icons: Standardmäßig sind ein paar Socialmedia-Icons als svg-Elemente eingebaut. Du kannst ein anderes Icon z.B. durch die SVG Library in Pinegrow nutzen. Ziehe einfach das gewünschte Icon als SVG in das Div mit der Klasse "FlexCenter" und gib ihm die Klasse "FooterSocialmediaIcon". Auf diese Weise kannst du auch ein img-Element nutzen, um ein JPG oder PNG-Bild zu verwenden. Setze einen Link zu deinen Socialmedia-Eintrag durch einen Rechtsklick auf das Icon > Transform > Add link.
• Ändern eines Kontakt-Icons als Bild oder SVG: Standardmäßig sind die Kontakt-Icons als svg-Elemente eingebaut. Du kannst ein anderes Icon z.B. durch die SVG Library in Pinegrow nutzen. Oder du ziehst ein img-Element in den Kontaktbereich und gibst ihm die Klasse "FooterContactIcon", um ein JPG oder PNG-Bild zu nutzen.
• Telefonnummer verlinken: Du kannst E-Mail-Adressen und Telefonnummern verlinken. Markiere dazu die Telefonnummer / E-Mail und klicke im Kontextmenü auf "Link". Gibst du die Telefonnummer in folgendem Format ein, startet beim Klick darauf auf dem Smartphone automatisch ein Anruf: tel:+49123456789. Bei folgendem Link öffnet sich das E-Mail-Programm mit bereits eingetragener Mail-Adresse: mailto:info@url.de.
• Mehrere Spalten nutzen: Willst du mehr als die standardmäßig 4 verbauten Spalten nutzen, duplizierst du am besten eine Spalte mit der Klasse "FooterLWrap25". Du kannst die Spalten mit mehr Links oder anderen Inhalten nach Belieben füllen. Auf größeren Bildschrimbreiten werden alle Spalten nebeneinander angezeigt. Wenn das zu eng ist, kannst du im Div mit der Klasse "FooterL25Wrapper" im Style-Tab die Einstellung "flex-wrap: wrap" hinzufügen, wodurch die Spalten untereinander angezeigt werden, wernn sie nicht mehr nebeneinander passen.