Stylesheet
Atoms: die kleinsten Einheiten eines Designs
- Farbpalette
- Typographie
Molecules: Kleine Kombinationen aus Atoms
- Links
- Buttons
- Felder
Organisms: Konstrukte aus Molecules
Hero header
Page Intros
Textblöcke
Call to Action
///// Atoms: Die kleinsten Bausteine des Webdesigns.
Farben:
Lassen sich im Plugin Central Color Palette verändern.
Sie sind direkt via css mit verschiedenen Elemente wie Text, buttons, Feldern verknüpft.
Hintergrundfarben können unter Erweitert/Klasse eingestellt werden. Einer dieser Werte:
primary-color
secondary-color
tertiary-color
dark-neutral
mid-neutral
light-neutral
So sind die Farben mit dem Plugin "Central Colour Palette" verknüpft. wird dort eine Farbe geändert, ändert sie sich überall wo die Klasse gesetzt wurde.
Typographie:
-
Schriftart, Größe und Farbe werden via CSS definiert.
-
Webfonts werden manuell auf dem Server samt fonts.css abgelegt.
-
die Font-Namen aus fonts.css müssen in styles.css entsprechend übernommen werden.
Headline 1 im Texteditor
Headline 2 im Texteditor
Headline 3 im Texteditor
Headline 4 im Texteditor
Headline 5 im Texteditor
Headline 6 im Texteditor
Das ist ein default Fließtext. Lorem ipsum dolor sit amet, consectetur adipisici elit, ist ein Blindtext, der nichts bedeuten soll, sondern als Platzhalter im Layout verwendet wird, um einen Eindruck vom fertigen Dokument zu erhalten.
- 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.
Separator:
////// Molecules
////// Organisms
////// Organisms: Hero Header
Headline 1 im Header
h3 Subline im Header
////// Organisms: Page intro
h2 Headline zentriert
Intro text zentriert. Section breite 60%. 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.
////// Organisms: Basic Text block
h2 headline modul gefolgt von einem separator
Headline 3 im Texteditor
Das ist ein default Fließtext. Lorem ipsum dolor sit amet, consectetur adipisici elit, ist ein Blindtext, der nichts bedeuten soll, sondern als Platzhalter im Layout verwendet wird, um einen Eindruck vom fertigen Dokument zu erhalten.
////// Organisms: Volle breite Call to action
h2 volle breite call to action
Hier befindet sich der call-to-action Bereich, in dem der Kunde zum Beispiel dazu aufgefordert wird Kontakt mit Ihrem Unternehmen aufzunehmen
h2 headline modul gefolgt von einem separator
Headline 3 im Texteditor
Headline 4 im Texteditor
Headline 5 im Texteditor
Headline 6 im Texteditor
Das ist ein default Fließtext. Lorem ipsum dolor sit amet, consectetur adipisici elit, ist ein Blindtext, der nichts bedeuten soll, sondern als Platzhalter im Layout verwendet wird, um einen Eindruck vom fertigen Dokument zu erhalten.
- 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.
Aufruf / Call to Action
Inhalt des Call to Action
Aufruf / Call to action
Bereit, mehr herauszufinden?
Schicke uns heute eine Textzeile für ein freies Zitat!
Textboxes Examples
Designed directly in beaver builder
Textblock
Inhalt des Textblocks
Beiträge verschiedene Ansichten
Blog Beitrag 3
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,…
Blog Beitrag 2
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,…
Blog Beitrag 1
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,…
Blog Beitrag 3
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,…
Blog Beitrag 2
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,…
Blog Beitrag 1
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,…
Jetzt kommen alle Module so wie sie ohne manuelle Anpassungen aussehen. Das ist die Modulbibliothek.
Modulbibliothek
Text/Bild - Raster
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. 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.
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.
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.
Alle Module
Reihenfolge wie in Editor
ohne Anpassungen
Audio player
Listen
Button
Headline Modul (H2)
Headline modul
Button group
HTML
listenpunkt 1 div liste
punkt 2
punkt 3
-
listenpunkt 1 ul liste
-
punkt 2
-
punkt 3
Texteditor
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
paragraph 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.
- ipsum dolor sit amet
- consetetur sadipscing elitr
- sed diam nonumy eirmod tempor
- invidunt ut
- labore et dolore
- magna aliquyam erat, sed
quote Lorem ipsum dolor sit amet, consetetur sadipscing elitr
default separator:
Inhaltsslider
default galerie:
Icon
Icongruppe
diashow
Empfehlungen
Empfehlungen
Total super Produkt! (h4)
Empfehlungen slider, slide 1
Der Text kommt aus dem mce-Editor. Headline formate, Absatz usw. können also flexibel verfasst werden.
∗∗∗∗∗
Total super Produkt! (h4)
Empfehlungen slider, slide 1
Der Text kommt aus dem mce-Editor. Headline formate, Absatz usw. können also flexibel verfasst werden.
∗∗∗∗∗
Textboxen
textboxen in spalten
textboxen in spalten
Kontaktformular
Aufruf
Aufruf (call to action)
inhalt call to action
Suchfeld
Anmeldung
Menü
Akkordeon
Preisbox
preisbox preis 1
preis 2
Seitenleiste
Tabs
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.
Countdown
counter
Beiträge
Beitragskarussell
Beitragsslider
