Zum Inhalt springen
Sie befinden sich hier: gap-medinfo.de » Block-Beispiele

Block-Beispiele

Überschriften

– Überschrift H2

– Überschrift H3

– Überschrift H4

absatz

Für Fließtext. Wenn nicht für jeden Absatz ein neuer Block gemacht werden soll, dann mit „Shift+Enter“ einen Absatz einfügen.

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Liste

  • fjhvbahbv
  • mvn.amnvm,ybv
  • .fmdnvm,fnavm,anfdb

Pullquote

Für Texte die hervorgehoben werden sollen, wie z. B. Infoboxen.

skdfvskjbvsfb

sfbdfbsdfbsdb

Zitat

Hier kann im Block-Menü unter „Styles“ gewählt werden zwischen großer und normaler Textgröße.

sadvbakjsbvjakbvkjabvbabdvabv

dsvasdbasbafbabafb

sadvbakjsbvjakbvkjabvbabdvabv

dsvasdbasbafbabafb

Galerie

Hier können beliebig viele Bilder nebeneinander dargestellt werden. Die Größe der Bilder lassen sich im Block-Menü einstellen. Es kann jedoch nur eine Größe für alle gewählt werden. Die Anordnung der Bilder macht dann das Plugin. Daher die Reihenfolge gut wählen und ausprobieren. Es kann, muss aber kein Untertitel für das Bild eingegeben werden. Wenn kein Untertitel eingegeben wird, ist kein blauer Hintergrund zu sehen.

Einzelbild

Ein einzelnes Bild kann hier mit Bildunterschrift oder ohne ausgewählt werden. Im Block-Menü kann die Größe bestimmt werden und im Format-Menü die Formatierung wie zentriert, linksbündig usw.

Testbild
Bildunterschrift

Cover

Das Coverbild kann mit unterschiedlichen Farben überdeckt werden. Diese sind rechts im Menüfeld „Block“ einstellbar.

Coverbild

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Abstandhalter

Mit diesem Block könnt ihr Abstände zwischen den Blöcken einfügen, falls diese zu eng aneinander angezeigt werden. Achtet aber bitte darauf nie mehr als 40px Abstand einzufügen, da dies sonst auf mobilen Geräten seltsam aussehen kann. Die Größe des Abstandes könnt ihr über das Block-Formatierungsmenü unter „Abstandshalter-Einstellungen“ rechts einstellen. Standardabstand ist 20px. (Hier wurde zur Ansicht ein 200px Abstand eingefügt!)

Youtube Video

Einfach den Link des Videos einfügen.

Zusatzklassen (können bei "Erweitert" eingegeben werden): 
video-width-center (Video nur 520 px breit und zentriert auf der Seite)
video-width-left (Video nur 520 px breit und linksbündig)

Tabelle

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

Buttons

Button

Diesen Button für Verlinkungen nutzen.

Button KONTUR

Diesen Button für Hervorhebungen ohne Verlinkung nutzen

Dieser Button hat vielerlei Einstellmöglichkeiten, die je nach Bedarf genutzt werden können. Hier kann auch eine andere Farbe oder ähnliches eingestellt werden. Bitte aber nur in Ausnahmefällen verwenden.

Trennzeichen


Medien und text

Das Bild kann je nach Wahl größer oder kleiner gezogen werden, durch ziehen des blauen Punktes.
Die Schriftgröße kann ebenfalls gewählt werden.

Testbild

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

Advanced List

Hier können im Gegensatz zur „normalen“ Liste verschiedene Icons als Aufzählungszeichen ausgewählt werden. Zudem kann die Linienhöhe und der Raum zwischen Icon und Text gewählt werden. „Margin“ wählt den Abstand des Icons zum Text und „Padding“ den Abstand von Icon und Text zueinander und zum Seiteninhalt links (einfach ausprobieren).

  • fydfbyfbyfbyb
  • ybybbydbyfb
  • asdvasvasdvasdv
  • adsvasbabfb
  • asvbsdbasbasb

Accordion

Ein Accordion Menü kann z.B. für weiterführende Infos oder gesonderte Beschreibungen genutzt werden, die der User je nach Bedarf öffnen kann. Dies verhindert, dass die Seite zu voll wirkt und kann bestimmte Inhalte zusätzlich hervorheben. In das Accordion-Feld können verschiedene Block-Formate eingefügt werden. Es können beliebig viele Accordion-Felder hintereinander eingefügt werden.

Wenn alle Accordionfelder geöffnet angezeigt werden sollen, müssen die Inhalte in verschiedene Accordion-Blocks hintereinander eingefügt werden. Soll nur ein Accordionfeld geöffnet angezeigt werden, kann man auf das Plus unter dem Accordionfeld klicken, um so weitere Inhalte einzufügen.

Als Öffnungssymbol sollte für eine einheitliche Ansicht das Plus im gefüllten Kreis ausgewählt werden.
Zudem sollte „Initial collapsed“ aktiviert werden, um die Accordions zu Beginn geschlossen anzuzeigen.

Accordion 1

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Screenshot Tala med

Accordion 2

lksjbvjkabvkbnfmvymbmncbjkdfbjkabymbm,cxbvnfb

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

TABS

In diesem Tab-Block können ähnlich wie im Accordion Inhalte eingefügt werden, die je nach Bedarf angeklickt und gelesen werden können. Dies kann eine zu lange Seite vermeiden und ist gut einsetzbar, wenn man z. B. mehrere Optionen anbietet.

Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.

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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Image Slider

Hier können verschiedene Bilder mit oder ohne Text und mit oder ohne Farb-Overlay eingefügt und entweder verlinkt werden oder bei klicken auf das Bild öffnet sich das Bild größer.

Slider image

Testbild 1

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.

Slider image

Testbild 2

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

Slider image

Testbild 3

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Seitenumbruch

Seitenumbruch zeigt unten an der Seite mehrere Seitenzahlen an, die dann jeweils durchgeklickt werden können. Dies sollte aber nur bei sehr viel Text angewandt werden.

Seiten: 1 2