Mehr Infos

Dein WordPress DIVI 1×1 

Globaler Style Guide

Basierend auf der Vorlage von DIVIs globalen Style Guide.

01. Farben

In diesem Bereich geht’s um die Farben. Du kannst jede Farbe im Text-Modul unter Hintergrund anpassen. Außerdem notierst du dir den Farbcode unterhalb des Farbenquadrats ebenso. Übertrage diese Farben auch zu den Standard-Farben in den DIVI Theme Optionen.

 

#8f006b

#cc0099

#f2f2f2

#e0e0e0

#444444

#000000

#F9F9F9

#e0e0e0

#444444

#000000

02. Typografie

Hier kannst du deine unterschiedlichen Schriftarten für den Fließtext, die Überschriften und weitere anpassen.

Standard

Variante

Überschrift / Heading 1

Heading 1

Heading 1

Überschrift / Heading 2

Heading 2

Heading 2

Überschrift / Heading 3

Heading 3

Heading 3

Überschrift / Heading 4

Heading 4

Heading 4

Fließtext

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Aufzählung

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
    • Lorum Ipsum
    • Lorum Ipsum
    • Lorum Ipsum

Aufzählung (Nummern)

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum
  1. Lorum Ipsum

  2. Lorum Ipsum

  3. Lorum Ipsum

Alle in einer Übersicht

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum
  1. Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum
  1. Lorum Ipsum

Teiler

03. Buttons

In diesem Bereich entwickelst du deine Buttons.

Standard

Variante

04. Formulare

Im Bereich Formulare, setzt du die Standards für deine Formulare. 

Standard

Variante

Kontaktformular

3 + 11 =

05. Bilder und Videos

In diesem Bereich setzt du die unterschiedlichen Möglichkeiten für Bilder und Videos. 

Standard

Variante

Bilder

Video

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

06. Informationen

Hier designst du die Call-to-actions und weitere Informationstexte.

Standard

Variante

Informationstext

Dein Titel

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.

P

Dein Titel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

Handlungsaufruf (CTA)

Dein Titel

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.

Dein Titel

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.

Handlungsaufruf (CTA)

Dein Titel

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.

Umschalter

Dein Titel

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.

Dein Titel

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.

Akkordeon

Dein Titel

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.

Dein Titel

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.

Dein Titel

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.

Dein Titel

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.

07. Social

Es geht weiter mit den Testimonials, den Social Media Hinweisen. 

Standard

Variante

Person

Vorname Nachname

Vorname Nachname

Arbeitsstelle

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.

Vorname Nachname

Vorname Nachname

Arbeitsstelle

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.

Testimonial

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.

Vorname, Nachname

Berufsbezeichnung, Unternehmen

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.

Vorname, Nachname

Berufsbezeichnung, Unternehmen

08. Blog

Einige der Designmöglichkeiten für deine Blogartikel. 

Standard

Variante

09. Zähler

Hier geht’s um Zahlen.

Standard

Variante

Balkenzähler

  • Ihr Titel 50% 50%
  • Ihr Titel 50% 50%

Countdown-Timer

Ihr Titel

Tag(e)

:

Stunde(n)

:

Minute(n)

:

Sekunde(n)

Ihr Titel

Tag(e)

:

Stunde(n)

:

Minute(n)

:

Sekunde(n)

Kreiszähler

%

Ihr Titel

%

Ihr Titel

Zähler

%

Ihr Titel

%

Ihr Titel

10. Vollbreite Kopfzeile

Jede Seite beginnt mit einer Kopfzeile, hier breit und schmal. 

Dein Titel

11. Vollbreite Kopfzeile – Vollbild

Eine weitere Variante für die vollbreite Kopfzeile ist in Vollbild. 

Dein Titel

Ein möglicher Untertitel

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