Vorab solltest Du Dir ein wenig Grundwissen zum Website-Baukasten aneignen, damit Dir die Entscheidungen im Gestaltungsprozess leichter fallen. Lies hier Informationen zu den auswählbaren Themes, nützliche Tipps zu Bildformaten, Empfehlungen zu passenden Schriftartkombinationen und Schriftgrößen sowie alles Wichtige zum Thema Komponenten.
Die 3 Themes
Im Baukasten stehen Dir aktuell drei Themes (Dark bzw. Dunkel, Light bzw. Hell, Custom) zur Auswahl, die alle unterschiedliche Aspekte vereinen. Zur Veranschaulichung kannst Du hier einen Blick auf die unterschiedlichen Themes werfen. Das hilft Dir sicher bei der Festlegung für Deine eigene Website.
In den beiden Themes Dark und Light sind die grundlegenden Farben bereits festgelegt. Das Dark-Theme wird von dunklen Farben, sprich Schwarztönen, dominiert. Das Light-Theme ist heller und erstrahlt in Weißtönen. Diese beiden Themes setzen auf einen klaren Kontrast von Schrift und Hintergründen. Alles ist für eine gute Lesbarkeit und Übersicht konzipiert. Mit diesen schlichten, zeitlosen Themes kannst Du im Prinzip nicht daneben liegen.
Das Custom-Theme bietet mehr individuellen Spielraum und lässt sich nach Deinen Bedürfnissen gestalten, da weniger vorgegeben ist. Der Kreativität sind hier kaum Grenzen gesetzt, es lässt sich munter kombinieren. Hier liegt die Lesbarkeit und Übersicht der Website letztendlich in Deinen Händen und bedenke den Mehraufwand durch zusätzliche Gestaltungsmöglichkeiten.
Im Website-Baukasten kommen unterschiedliche Bildformate zum Einsatz, je nach Einsatzort des Bildes. Damit die Bilddateien korrekt dargestellt werden, kannst Du Dich an die folgenden Vorgaben halten. So ist garantiert, dass immer genau der richtige Teil im Blickfeld der Betrachtenden steht.
Die Bildformate im Überblick
Einsatzbereich
Min. Maße (px)
Min. Maße (px) x2
Ausschnitt
Safearea
Unternehmenslogo / Logo zentriert (1)
170 x 140
340 x 280
scale to fit
Volle Auflösung
Unternehmenslogo / Logo linksbündig (1)
225 x 100
450 x 200
scale to fit
Volle Auflösung
Titelbild Startseite
1920 x 940
3840 x 1880
crop
Safearea
Titelbild Inhaltsseite
1920 x 450
3840 x 900
crop
Safearea
Bild mit Text - landscape
470 x 248
940 x 496
crop
Volle Auflösung
Bild mit Text - portrait
248 x 330
496 x 660
crop
Volle Auflösung
Bild ohne Text - landscape
700 x 369
1400 x 737
crop
Volle Auflösung
Bild ohne Text - portrait
525 x 700
1050 x 1400
crop
Volle Auflösung
Bild - Full Width
1920 x 450
3840 x 900
crop
Safearea
Hinweisfenster
570 x 300
1140 x 600
crop
Volle Auflösung
2-spaltig - landscape
570 x 300
1140 x 600
crop
Volle Auflösung
2-spaltig - portrait
525 x 700
1050 x 1400
crop
Volle Auflösung
3-spaltig - landscape
370 x 230
760 x 400
crop
Volle Auflösung
3-spaltig - portrait
340 x 453
680 x 906
crop
Volle Auflösung
4-spaltig - landscape
285 x 150
570 x 300
crop
Volle Auflösung
4-spaltig - portrait
270 x 360
540 x 720
crop
Volle Auflösung
Galerie - Vorschaubild
970 x 604
1940 x 1208
crop
Volle Auflösung
Speisekartenkategorie
370 x 198
740 x 396
crop
Volle Auflösung
Speise
770 x 345
1540 x 690
crop
Volle Auflösung
Aktuelles - Bild
770 x 405
1540 x 810
crop
Volle Auflösung
Kontakt
370 x 230
740 x 460
crop
Volle Auflösung
Galerie-Bilder
Hoch-/Querformat
Hoch-/Querformat
Original (2)
Volle Auflösung
Galerie-Detail
Hoch-/Querformat
Hoch-/Querformat
Original (2)
Volle Auflösung
Link
330 x 212
680 x 425
crop
Volle Auflösung
(1): Immer mit Außenabstand anlegen. Der empfohlene Abstand liegt bei 15 px an jeder Seite. (Tatsächlich kann der nötige Abstand von Datei zu Datei variieren und die Angaben sind ohne Gewähr. Korrigiere entsprechend nach, wenn die Darstellung nicht optimal erscheint.
(2): Die Datei wird automatisch auf eine Miniaturansicht skaliert.
Weitere Informationen zu den Begriffen crop und safearea findest Du weiter unten.
Hier findest Du eine grafische Übersicht zu den Bildformaten und kannst diese als Vorlage herunterladen:
Als Safearea (deutsch: Schutzbereich) bezeichnet man den Bereich innerhalb einer Grafik, der, wenn diese auf einer Website zum Einsatz kommt, garantiert sichtbar und lesbar ist. Indem Du Dich also an die Vorgaben der Safearea hältst, stellst Du sicher, dass keine Informationen verloren gehen.
Hintergrund des Einsatzes der Safearea ist die Tatsache, dass Homepages auf vielen unterschiedlichen Endgeräten mit unterschiedlichen Auflösungen betrachtet werden, sodass überall eine andere Darstellung erfolgt. Die Safearea garantiert aber, dass die wesentlichen Informationen, die innerhalb des Bereichs liegen, immer im Fokus stehen und nicht abgeschnitten werden.
Safearea - Titelbild Startseite
Hier siehst Du die Angaben zur Safearea für das Titelbild. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Du sichergehen willst, dass diese nicht verloren gehen.
Safearea - Bild (Full Width)
Hier siehst Du die Angaben zur Safearea für das Titelbild, wenn Du ein Bild mit voller Breite (Full Width) darstellen möchtest. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Du sichergehen willst, dass diese nicht verloren gehen.
Begriffserklärung: Ausschnitte
Als Cropping (deutsch: Abschneiden, Stutzen) wird das Beschneiden von Bildrändern zum Zwecke der Bildformatänderung bezeichnet. Dadurch wird verhindert, dass Ränder entstehen oder das Bild in irgendeiner Weise verzerrt werden muss.
Zur Veranschaulichung siehst Du hier in Grau dargestellt das Originalformat des Bildes. Der rot markierte Bereich ist die Zielformatierung, die durch das Cropping erreicht werden soll. Das Bild wird also auf volle Breite und Höhe skaliert.
Als scale to fit (deutsch: Skalierung nach Maß) wird die Erweiterung des Bildausschnitts bezeichnet, sodass kleinere Bildformate passend untergebracht werden können. Dadurch wird die Verzerrung und das Beschneiden eines Bildes vermieden.
Zur Veranschaulichung siehst Du hier in Grau (überlagert von Rot) das Originalformat des Bildes. Der rot markierte Bereich ist der Bildausschnitt, der angezeigt wird. Das Originalformat des Bildes bleibt unberührt und wird in das gewünschte Format eingefügt. Dabei entstehen keine Verzerrungen oder Abschnitte an den Rändern.
Schriftarten – Empfohlene Kombinationen
Die folgenden Kombinationen empfehlen wir Dir für Deine digitalen Auftritte:
Die Schriftgrößen werden automatisch und dynamisch an das jeweilige Endgerät angepasst, um eine optimale Lesbarkeit und Übersicht zu garantieren. Du musst somit keine Schriftgrößen festlegen. Die folgenden Informationen dienen rein zur Veranschaulichung und zum Verständnis.
Bereich
Schriftschnitt
Desktop
Tablet
Mobil
H1
Bold
70
70
35
H2
Bold
35
35
25
H3
Bold
25
25
20
Fließtext
Regular
16
16
15
Zusatztext
Regular
14
14
12
Button
Bold
16
16
16
Navigation (mobil)
Bold
-
40
30
Komponenten
Keine Vorlage
Wenn Du keine Vorlage auswählst, wird der Inhalt schlicht textbasiert dargestellt und das Bild erscheint unter dem Text.
Aktionskarten
Wenn Du die Vorlage „Aktionskarten“ ausgewählt hast, wird der Inhalt automatisch generiert. Es werden alle aktiven Aktionskarten, abhängig von der gesetzten Gültigkeit in den jeweiligen Karten, angezeigt. Gibt es mehr als eine Aktionskarte, werden die einzelnen Einträge als Kacheln angezeigt – inklusive des Gültigkeitszeitraums, sodass die Besuchenden der Website direkt den Überblick erhalten, welche Karte in welchem Zeitraum gültig ist.
Aktuelles
Wenn Du die Vorlage „Aktuelles“ ausgewählt hast, wird der Inhalt automatisch generiert. Es werden all Deine Termine & Neuigkeiten präsentiert, außer Du beschränkst die Präsentation über die Angaben, dort kannst Du Kategorien auswählen oder die Anzeige auf nur Termine, nur Neuigkeiten oder Termine und Neuigkeiten beschränken.
Die Übersicht wird in Form von kleinen Kacheln dargestellt
Termine & Neuigkeiten werden durch Icons unterschiedlich markiert
Der Einleitungstext wird aus der Beschreibung gezogen
Bild – volle Breite
Wenn Du die Vorlage „Bild – volle Breite“ ausgewählt hast, wird ein Bild über die volle Breite der Website dargestellt.
Download
Wenn Du die Vorlage „Download“ ausgewählt hast, kannst Du eine Datei bereitstellen, die von Deinen Besuchenden heruntergeladen werden kann.
Mehrspaltig
Wenn Du eine der mehrspaltigen Vorlagen auswählst, wird der eingegebene Text in der gewählten Anzahl der Spalten dargestellt und Du kannst pro Spalte ein Bild festlegen.
Du hast die Wahl zwischen zweispaltig, dreispaltig und vierspaltig
Es empfiehlt sich, für alle Spalten entweder ein Bild oder kein Bild festzulegen, damit die Spalten bündig und symmetrisch verlaufen
Wähle bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)
Galerie-Diashow
Wenn Du die Vorlage „Galerie-Diashow“ ausgewählt hast, wird (nur) die ausgewählte Galerie als Diashow angezeigt.
Galerie
Wenn Du die Vorlage „Galerie“ ausgewählt hast, wird der Inhalt automatisch generiert und sämtliche Galerien werden angezeigt.
Darstellung in einer Mosaikform
Alle Formate sind erlaubt
Die Bilder werden automatisch möglichst in einem Block dargestellt und sortiert
Detailansicht ist über das Anklicken des Bildes abrufbar (inkl. Titel und Beschreibung)
Angaben
Über die Angaben kannst Du steuern, welche Galerien angezeigt werden sollen. Hier kannst Du einen oder mehrere Parameter angeben, um die angezeigten Galerien zu filtern. Lege eindeutige Galerien fest, zeige alle Galerien einer Kategorie oder nur die relevanten Einträge. Kombiniere die Angaben untereinander, um die Auswahl weiter zu beschränken.
Galerie
Wenn Du eine Galerie festlegst, wird nur die ausgewählte Galerie angezeigt.
Kategorie
Du kannst eine Kategorie auswählen und alle Galerien, die dieser Kategorie zugeordnet sind, werden angezeigt.
Relevanz
Wenn Deine Galerien in den Einstellungen mit einem Datum versehen sind, kannst Du hier eine zeitliche Relevanz in Tagen angeben. Alle Galerien, die in die festgelegte Zeitspanne fallen, werden angezeigt (z. B. alle Galerien der letzten 30 Tage).
Gibt es aktive Galerien, bei denen kein Datum gesetzt wurde, werden diese unabhängig von einer gesetzten Relevanz immer angezeigt.
HTML
Wenn Du die Vorlage „HTML“ ausgewählt hast, kannst Du HTML-Inhalte auf Deiner Website einbinden.
Binde bequem einen beliebigen HTML-Inhalt in Deine Website ein
Karte
Wenn Du die Vorlage „Karte“ ausgewählt hast, wird der Inhalt automatisch generiert. Es wird eine Karte auf Deiner Seite eingebunden, die den Standort Deines Betriebs zeigt. (Der Standort wird aus den Unternehmenseinstellungen übernommen.)
Bitte prüfe vor dem Einbinden und Aktivieren ggf. die Angaben unter Impressum und Datenschutz, da es sich hier um einen externen Inhalt über einen Drittanbieter handelt. Es kann sein, dass Du Deine Datenschutzerklärung anpassen musst.
Kontaktformular
Wenn Du die Vorlage „Kontaktformular“ ausgewählt hast, kannst Du Deinen Besuchenden ein Formular bereitstellen, über das Du Rückmeldungen erhalten kannst. Zudem können Besuchende den Newsletter abonnieren.
Darstellung ähnlich wie die allgemeine Kontaktseite (exkl. Standortkarte)
Felder sind individuell auswählbar
Möglichkeit zum Newsletter-Abo
Link
Wenn Du die Vorlage „Link“ ausgewählt hast, kannst Du auf weiterführende, externe Seiten verlinken. Deine Besuchenden landen dann auf der gewünschten Seite, wenn Sie den Link anklicken.
Die verschiedenen Linkarten werden durch unterschiedliche Icons dargestellt
Mittagstisch
Wenn Du die Vorlage „Mittagstisch“ ausgewählt hast, wird der Inhalt automatisch generiert. Es werden kurze Vorschauen der Speisekarten im Kartenordner „Mittagstisch“ angezeigt.
Störer
Wenn Du die Vorlage „Störer“ ausgewählt hast, kannst Du eine Anzeige anschalten, die die Besuchenden der Seite „stört“. Mit Text und Bild kannst Du so auf etwas aufmerksam machen, das Deine Besuchenden auf keinen Fall verpassen dürfen.
Text mit Bild
Wenn Du die Vorlage „Text mit Bild links“ oder „Text mit Bild rechts“ ausgewählt hast, kannst Du einen Text verfassen und daneben ein passendes Bild platzieren.
Das Bild erscheint immer bündig auf der angegebenen Seite
Pflegst Du nur den Text oder nur das Bild, wird der Inhalt zentral ausgegeben
Wähle bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)
Umfrage
Wenn Du die Vorlage „Umfrage“ ausgewählt hast, wird der Inhalt automatisch generiert. Deine Besuchenden können an einer bereits erstellten Umfrage teilnehmen. Diese wählst Du unter Angaben aus.
Optimierte Darstellung der Umbrüche
Die Seitenzahlen werden farbig dargestellt
Farbe der Eingabefelder entspricht jeweils der nicht genutzten Hintergrundfarbe (Corporate Design > Hintergrund 1 oder 2)
Captchas arbeiten unsichtbar im Hintergrund
Speisekarten & Vorschau Karte
Wenn Du die Vorlage „Vorschau Karte“ ausgewählt hast, wird der Inhalt automatisch generiert. Es wird speziell eine Karte präsentiert, die Du unter Angaben auswählst.
Kategorien (1. Ebene) werden per Kachel dargestellt
Bilder werden nur dargestellt, wenn alle Kategorien Bilder haben (gilt nur für 1. Ebene)
Nach Auswahl der Kategorie lässt sich über die Reiter die Kategorie wechseln
Hervorgehobene Produkte werden ohne Bild dargestellt (farbig markiert)
Produktbilder können manuell geöffnet werden
Widget
Binde über die Vorlage „Widget“ das Widget auch an anderer Stelle auf Deiner Website ein (neben der Reservierungsseite). Du kannst auch einen direkten Einstiegspunkt festlegen, um gezielt inhaltlich zu arbeiten. Beispielsweise kannst Du auf Deinen Online-Gutscheinverkauf hinweisen und entsprechend den Einstiegspunkt im Widget anpassen, damit die Gäste mit wenigen Klicks an der gewünschten Stelle landen.
YouTube-Video
Wenn Du die Vorlage „YouTube Video“ auswählst, kannst Du einfach und bequem ein YouTube-Video direkt auf Deiner Website einbetten.
Sämtliche Formulare und Umfragen sind mit einem CAPTCHA versehen, das unsichtbar im Hintergrund arbeitet, um den Schutz vor Spam und unbefugtem Zugriff zu erhöhen.
Die Informationen sind allgemeiner Art und stellen keine Rechtsberatung dar. Das Supportportal erhebt keinen Anspruch auf Vollständigkeit. Änderungen bleiben ohne Vorankündigung jederzeit vorbehalten. Es wird an dieser Stelle darauf hingewiesen, dass die ausschließliche Verwendung der männlichen Form geschlechtsunabhängig verstanden werden soll.
Einzelnes Modul
aktuelle Seite
Ihre PDF-Datei wird generiert
Ihre PDF-Datei ist fertig
Es tut uns leid! Versuchen Sie es bitte noch einmal
