C Head 100% Bild Text-Button
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Bild-Text 40-60
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Text-Bild 60-40
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Head 100% Text-Button Bild
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Kontakt 3spaltig-mit-Icons
Melden Sie sich bei mir
C Te-Bi-Symbole mit Strichen
activities
Aenean bibendum pulvinar felis sed pretium. Fusce sodales ante sit amet mi imperdiet luctus. Aliquam sed velit dui. Nunc vitae justo non nunc cursus dictum.
Quisque pretium cursus ipsum, non consectetur metus bibendum et. Sed enim leo, placerat at suscipit eu, ultricies id nisi. Aenean vulputate eros a egestas lacinia.
Camping
Bonfire
Trips
Amenities
Donec finibus volutpat enim sed ultricies. Ut in justo sed nulla ornare consequat at non ante.
C Text Bild-als-HG-Bild
Deshalb hat das Bild gleiche Höhe mit Text, wird aber im Format beschnitten.
Button ist der „E Button outline dunkler“
Benefits
C mit Icon Kästchen
Bei den Kästchen unten hat die
H4 eine Hintergrundfarbe und die
Schriftgröße ist auf 1.2 rem reduziert.
Die oberen Kästchen sind als Raster aufgebaut, die unteren einfach nur Überschriften, denen eine Breite zugewiesen wurde, in einem Container.
Button ist der „E Button farbig“.
(E steht für Element, C für Container)
Bilder rechts sind als Raster einspaltig aufgebaut. So könnte ich für alle Bilder den vertikalen Abstand ändern.
Activities
Nature
Learning
Activities
Nature
Learning
C Bild im Text integriert
Das Bild unten wird umflossen, weil es im Text eingefügt ist. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Hier wird das Bild umflossen, weil ich das Bild-Element aus dem Gutenbergetditor genommen habe, bei dem man Float left auswählen kann. Das geht beim GP-Image-Element leider nicht. Mit CSS-Klasse .abrunden20 habe ich die Ecken des Bild-Elements abgerundet. (Gibt 5, 10, 15, 20).
Rechts die Bilder: Oberes Bild einzeln als Image-Element, dann Abstand-Element für Abstand zur Galerie unten. Galeriebilder sind abgerunden mit CSS-Klasse .abrunden20 beim Galerie-Element. – – – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Flache Bilder breit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
C Gutenberg Galerie mit Featherlight
Bei „Link zu“ ist Mediendatei angewählt. Wenn nachträglich Bilder zur Galerie hinzugefügt werden, muss man das über das + Zeichen beim Galerie-Block machen (rechts neben Bildunterschrift-Symbol), sonst werden die Bilder nicht in der Großansicht angezeigt.
Bildecken aller Bilder abrunden geht nur über CSS-Klasse: Bei Galerie-Block => Erweitert => CSS-Klasse: abrunden5 eintragen.
Habe 5, 10 15, 20 definiert
Man kann auch ohne „Bild zuschneiden“ machen, dann wird aber nicht Masonry angezeigt, sonder pro Reihe gecleared.
C Gutenberg Galerie mit Featherlight
Bei „Link zu“ ist Mediendatei angewählt. Wenn nachträglich Bilder zur Galerie hinzugefügt werden, muss man das über das + Zeichen beim Galerie-Block machen (rechts neben Bildunterschrift-Symbol), sonst werden die Bilder nicht in der Großansicht angezeigt.
Bildecken aller Bilder abrunden geht nur über CSS-Klasse: Bei Galerie-Block => Erweitert => CSS-Klasse: abrunden5 eintragen.
Habe 5, 10 15, 20 definiert
Öffnungszeiten
Jeden 2. Sonntag im Monat von 14 bis 17 Uhr
und nach Vereinbarung: 06186 9150125
Experiences
What you get
Integer sed tellus pretium, accumsan libero eu, cursus ante. Ut id eros metus. Sed fringilla tincidunt tortor tincidunt molestie. Curabitur ac diam vel odio consequat sollicitudin non eget neque.
Das Ganze mit Icon in der H4
Text GP-H-Element mit Aussenabstand links 4.9rem. Icongröße 2.8rem, abstand rechts 1.1rem. Schöner ist unten mit kleinerem Icon im Kreis.
Awesome trips
Hier ist das Icon in einem extra Container.
In dem Container ist ein GP-H-Element als D definiert. Bei Icon ist dann Text entfernen angeklickt, Schriftgröße 1em und ein Außenabstand von 27px. Ecken mit 50% gerundet
Unforgettable memories
Quisque pretium cursus ipsum, non consectetur metus bibendum et. Sed enim leo, placerat at suscipit eu, ultricies id nisi. Aenean vulputate eros a egestas lacinia.
Strong friendships
Quisque pretium cursus ipsum, non consectetur metus bibendum et. Sed enim leo, placerat at suscipit eu, ultricies id nisi. Aenean vulputate eros a egestas lacinia.
C Testimonials mit runden Bildern
Testimonials
Sed at mi aliquet, egestas nisl id, faucibus orci. Nunc auctor urna lorem, id vehicula lectus pharetra eu. Integer semper, risus ac ultrices vestibulum, diam augue fermentum purus, eu molestie diam ante ut purus. Donec placerat maximus elementum.
Susan Doe
Sed at mi aliquet, egestas nisl id, faucibus orci. Nunc auctor urna lorem, id vehicula lectus pharetra eu. Integer semper, risus ac ultrices vestibulum, diam augue fermentum purus, eu molestie diam ante ut purus. Donec placerat maximus elementum.
Kate Smith
Sed at mi aliquet, egestas nisl id, faucibus orci. Nunc auctor urna lorem, id vehicula lectus pharetra eu. Integer semper, risus ac ultrices vestibulum, diam augue fermentum purus, eu molestie diam ante ut purus. Donec placerat maximus elementum.
Adam Doe
C abgesoftetes Bild mit Buttons
Dynam Blog Platzierung
Beitrag 3
Beitrag 2
Beitrag 1
Inner Container mit H2 Überschrift
Und Generate-Blocks H als p definiert (mehr Einstellungsmöglichkeiten als ein normaler Absatz). Bei mehrspaltigem Inhalt muss ein Rasterlement in den Inner-Container gelegt werden oder einzelne Container mit entprechender Breite, die dann Flex Row haben.