Schaufenster
Hier zeigen wir Dir Webseiten Elemente, deren Namen und wie Du Sie für Deine neue Webseite nutzen kannst.
Inhalt
Unsere Schaufenster Seite zeigt Dir die wichtigsten Webseiten Elemente mit den dazugehörigen Begriffen. Im Teil1 findest Du die Beschreibung der grundlegenden Webseitenelemente. Der zweite und der dritte Teil widmen sich dann den Standard Divi und zusätzlichen Divi Essential Designelementen bzw. Designmodulen. Mit den Designmodulen kannst Du Deine Inhalte optimal präsentieren und Deine zukünftige Webseite schick und modern aussehen lassen. Die Designmodule sorgen später auch für den Spaß der Besucher an Deiner Webseite, also für eine optimale usability (Benutzerfreundlichkeit) und steigern das Benutzererlebnis (User Experience – kurz – UX).
Egal ob Du Deine neue Webseite selbst gestaltest oder wir das übernehmen, hier findest Du viele interessante Elemente / Module aber vor allem INSPIRATION. Also lass Dir Zeit beim Stöbern und viel Spaß.
1. Teil grundlegende Webseitenelemente
Bewege Deine Maus über die einzelnen Elemente im unten dargestellten Webseiten Dummy, um zu sehen wie die einzelnen Bereiche heißen und wo Du sie findest.
Impressum Datenschutz AGB Kontakt
Home Menüpunkt1 Menüpunkt2
Impressum Datenschutz AGB Kontakt
© 2011 – 2021 batcam.de – alle Rechte vorbehalten –
2. Teil Divi Designmodule
Mit den verschiedenen Designmodulen kannst Du Deine Webseiteninhalte ansprechend und auf verschiedene Arten präsentieren. Natürlich sollte Deine Seite nicht mit Designmodulen überladen sein, aber etwas Spaß und Spielerei gehört schon dazu.
Bedenke, eine Webseite mit der der Besucher agieren kann ist immer spannender als eine rein informative, ausschließlich textbasierte Seite.
Designmodul:
Textmodul
Eins der beiden wichtigsten Designmodule ist das Textmodul. Im Textmodul stellst Du die wichtigen Inhalte auf Deiner Webseite übersichtlich dar. Zur Formatierung und Darstellung Deiner Texte gibt es umfangreiche Möglichkeiten. So kannst Du ihn natürlich in verschiedenen Schriftarten und Größen darstellen, mit einem Rahmen versehen, vor ein Bild setzen (hier ist die gute Lesbarkeit wichtig), in Spalten formatieren und vieles mehr.
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.
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.
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.
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.
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.
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.
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. 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.
Designmodul:
Bildmodul
Das zweite der beiden wichtigsten Designmodule ist das Bildmodul. Mit dem Bildmodul fügst Du Bilder in Deine Webseite ein. Zur Formatierung und Darstellung Deiner Bilder gibt es umfangreiche Möglichkeiten. Einige wie Schlagschatten und Ränder siehst Du hier.
Slider
Der Slider ist ein starkes und flexibles Designmodul. Mit dem Slider können Bilder, Videos, Farbfelder, Texte, CTA Button (CTA = Call-to-Action) und weitere Inhalte in einem Bereich (Slide) übereinandergelegt werden. Von diesen Bereichen (Slides) aus Bildern, Farbfeldern, Texten etc. können im Slider wiederum mehrere übereinandergelegt werden.
Ein Slider kann zusätzlich animiert werden. Jetzt wechseln sich die einzelnen Slides automatisch ab. So ist es möglich, viel Information ansprechend auf relativ kleinem Raum zu präsentieren. Auch die Größe eines Sliders ist flexibel wählbar. Er kann über die gesamte Seitenbreite (full width) oder nur über die Breite einer Spalte gehen.
Zähler
Mit dem Designmodul Zähler können die unterschiedlichsten zählbaren Ereignisse dargestellt werden. So könntest Du die steigende Anzahl Deiner Kunden, wie viele Menüs Du zubereitet hast, wie viele Automarken Du reparierst und so weiter ansprechend visualisieren.
Auch für die Formatierung (optische Gestaltung) des Designmodul Zähler hast Du fast unbeschränkte Möglichkeiten. Du kannst ein Bild, eine Farbe, ein Video oder einen Verlauf für den Hintergrund wählen, Größe, Farbe und Schriftart individuell anpassen, bestimmen wie viele Zähler sich auf einer Zeile befinden und natürlich kannst Du auch bestimmen, was passieren soll, wenn der Besucher sich mit der Maus über den Zähler bewegt. Bewege Deinen Mauszeiger über die Zähler unter diesem Text, um zu sehen was passiert.
Zähler
Tassen Kaffee
%
Expertise
Baustellen
Jahreszeiten
Balkenzähler und Kreiszähler
Die Designmodule Balkenzähler und Kreiszähler geben Dir zusätzliche Möglichkeiten zählbare Ereignisse prozentual darzustellen. Hier könntest Du den Fortschritt von Projekten in Deinem Betrieb, den Qualifikationsgrad Deiner Mitarbeiter, den Grad der Erreichung Deiner Klimaziele und vieles mehr auf ansprechende Weise visualisieren. Auch bei diesen Designelementen hast Du die verschiedensten Möglichkeiten zur Formatierung.
- Balkenzähler 82%
%
Kreiszähler
Designmodul:
Akkordeon
Mit dem Designmodul Akkordeon kannst Du Inhalte mit zusätzlichen oder erweiterten Informationen auf Deiner Webseite übersichtlich darstellen. Du forderst Deinen Webseitenbesucher zum Agieren mit Deiner Seite auf. Im Gegenzug erhält Deinen Webseitenbesucher ergänzende Informationen zu dem ihn interessierenden Eintrag / Thema.
Der klassische Anwendungsfall für das Designmodul Akkordeon ist der FAQ (frequently asked questions also häufig gestellte Fragen) Bereich. Du könntest aber auch ergänzende Informationen zu Gerichten einer Speisekarte, zu Produkten mit denen Du arbeitest, zu Deinen Dienstleistungen und zu vielen anderen Themen bereitstellen.
Auch beim Designmodul Akkordeon hast Du die verschiedensten Möglichkeiten zur Formatierung und Anpassung an Deine Bedürfnisse.
1. Eintrag
Beschreibender Text des ersten Eintrags – 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.
2. Eintrag
Beschreibender Text des zweiten Eintrags – 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.
3. Eintrag
Beschreibender Text des dritten Eintrags – 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.
4. Eintrag
Beschreibender Text des vierten Eintrags – 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.
5. Eintrag
Beschreibender Text des fünften Eintrags – 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.
Designmodul:
Registerkarte
Mit dem Designmodul Registerkarte hast Du auch die Möglichkeit textlastige Informationen auf Deiner Webseite zu gruppieren, ähnlich wie beim Modul Akkordeon. Dabei bietet Dir das Designmodul Registerkarte jedoch eine andere Darstellungsmöglichkeit. Hier sind Deine Überschriften für die Inhalte nebeneinander in Tabs, ähnlich wie beim Browser organisiert.
Über die Registerkarten könntest Du zum Beispiel verschiedene Öffnungszeiten, unterschiedliche Leistungen, verschiedene Preise und einiges mehr auf Deiner Webseite darstellen.
Das Designmodul Registerkarte bietet Dir verschiedene Möglichkeiten zur Formatierung.
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.
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
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.
3. Teil Divi Essential (zusätzliches Plugin) Designmodule
Mit den verschiedenen Designmodulen vom Plugin Divi Essential kannst Du Deine Webseiteninhalte noch ansprechender präsentieren. Natürlich sollte Deine Seite nicht mit Designmodulen überladen sein, aber etwas Spaß und Spielerei gehört schon dazu. Weitere Informationen zu den Divi Essential Modulen findest Du auf der Divi Essential Webseite.
Bedenke, eine Webseite mit der der Besucher agieren kann ist immer spannender als eine rein informative, ausschließlich textbasierte Seite.
Lottie Modul
Mit diesem Modul können annimierte Lottie Grafiken angezeigt werden.
Überschrift
Hier steht Dein Text, hier steht Dein Text, hier steht Dein Text.
Text Color Motion Modul
Mit diesem Modul kann die Farbe der Schrift mit einem mehrfarbigen Bewegungseffekt versehen werden..
BEWEGTER TEXT
Text Highlight Modul
Mit diesem Modul kann Text durch mehrere Effekte (unterstreichen, durchstreichen etc.) hervorgehoben werden.
Webdesign von batcam.de macht einfach Sinn!
Divi Essential Designmodul:
Text Mask Modul
Mit diesem Modul kann eine durchsichtige Text-Maske über einem Hintergrundbild platziert werden.