Vorab sollten Sie sich ein wenig Grundwissen zum Website-Baukasten aneignen, damit Ihnen die Entscheidungen im Gestaltungsprozess leichter fallen. Lesen Sie 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 Ihnen aktuell drei Themes (Dark, bzw. Dunkel, Light, bzw. Hell, Custom) zur Auswahl, die alle unterschiedliche Aspekte vereinen. Zur Veranschaulichung können Sie hier einen Blick auf die unterschiedlichen Themes werfen. Das hilft Ihnen sicher bei der Festlegung für Ihre 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 können Sie im Prinzip nicht daneben liegen.
Das Custom-Theme bietet mehr individuellen Spielraum und lässt sich nach Ihren 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 letzendlich in Ihren Händen und bedenken Sie 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, können Sie sich an die folgenden Vorgaben halten. So ist garantiert, dass immer genau der richtige Teil im Blickfeld der Betrachter steht.
Die Bildformate im Überblick
Einsatzbereich
Min. Maße (px)
Min. Maße (px) x2
Ausschnitt
Safearea
Logo zentriert (1)
170 x 140
340 x 280
scale to fit
Volle Auflösung
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. Korrigieren Sie 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 finden Sie weiter unten.
Hier finden Sie eine grafische Übersicht zu den Bildformaten und können 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 Sie sich also an die Vorgaben der Safearea halten, stellen Sie 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 sehen Sie die Angaben zur Safeare für das Titelbild. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, dass diese nicht verloren gehen.
Safearea - Bild (Full Width)
Hier sehen Sie die Angaben zur Safearea für das Titelbild, wenn Sie ein Bild mit voller Breite (Full Width) darstellen möchten. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, 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 sehen Sie 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 sehen Sie 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 Ihnen für Ihre digitalen Auftritte:
Die Schriftgrößen werden automatisch und dynamisch an das jeweilige Endgerät angepasst, um eine optimale Lesbarkeit und Übersicht zu garantieren. Sie müssen 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 Sie keine Vorlage auswählen, wird der Inhalt schlicht textbasiert dargestellt und das Bild erscheint unter dem Text.
Aktionskarten
Wenn Sie die Vorlage Aktionskarten ausgewählt haben, wird der Inhalt automatisch generiert. Es werden alle aktiven Aktionskarten, abhängig 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 Besucher der Website direkt den Überblick erhalten, welche Karte in welchem Zeitraum gültig ist.
Aktuelles
Wenn Sie die Vorlage Aktuelles ausgewählt haben, wird der Inhalt automatisch generiert. Es werden all Ihre Termine & Neuigkeiten präsentiert, außer Sie beschränken die Präsentation über die Angaben, dort können Sie 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 Sie die Vorlage Bild – volle Breite ausgewählt haben, wird ein Bild über die volle Breite der Website dargestellt.
Download
Wenn Sie die Vorlage Download ausgewählt haben, können Sie eine Datei bereitstellen, die von Ihren Besuchern heruntergeladen werden kann.
Mehrspaltig
Wenn Sie eine der mehrspaltigen Vorlagen auswählen, wird der eingegebene Text in der gewählten Anzahl der Spalten dargestellt und Sie können pro Spalte ein Bild festlegen.
Sie haben 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ählen Sie bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)
Galerie-Diashow
Wenn Sie die Vorlage Galerie-Diashow ausgewählt haben, wird (nur) die ausgewählte Galerie als Diashow angezeigt.
Galerie
Wenn Sie die Vorlage Galerie ausgewählt haben, 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 können Sie steuern, welche Galerien angezeigt werden sollen. Hier können Sie einen oder mehrere Parameter angeben, um die angezeigten Galerien zu filtern. Legen Sie eindeutige Galerien fest, zeigen Sie alle Galerien einer Kategorie oder nur die relevanten Einträge. Kombinieren Sie die Angaben untereinander, um die Auswahl weiter zu beschränken.
Galerie
Wenn Sie eine Galerie festlegen, wird nur die ausgewählte Galerie angezeigt.
Kategorie
Sie können eine Kategorie auswählen und alle Galerien, die dieser Kategorie zugeordnet sind, werden angezeigt.
Relevanz
Wenn Ihre Galerien in den Einstellungen mit einem Datum versehen sind, können Sie 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 einer gesetzten Relevanz immer angezeigt.
HTML
Wenn Sie die Vorlage HTML ausgewählt haben, können Sie HTML-Inhalte auf Ihrer Website einbinden.
Binden Sie bequem einen beliebigen HMTL-Inhalt in Ihre Website ein
Karte
Wenn Sie die Vorlage Karte ausgewählt haben, wird der Inhalt automatisch generiert. Es wird eine Karte auf Ihrer Seite eingebunden, die den Standort Ihres Betriebs zeigt. (Der Standort wird aus den Unternehmenseinstellungen übernommen.)
Bitte prüfen Sie 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 Sie Ihre Datenschutzerklärung anpassen müssen.
Kontaktformular
Wenn Sie die Vorlage Kontaktformular ausgewählt haben, können Sie Ihren Besuchern ein Formular bereitstellen, über das Sie Rückmeldungen erhalten können. Zudem können Besucher den Newsletter abonnieren.
Darstellung ähnlich wie die allgemeine Kontaktseite (exkl. Standortkarte)
Felder sind individuell auswählbar
Möglichkeit zum Newsletter-Abo
Link
Wenn Sie die Vorlage Link ausgewählt haben, können Sie auf weiterführende, externe Seiten verlinken. Ihre Besucher landen dann auf der gewünschten Seite, wenn Sie den Link anklicken.
Die verschiedenen Linkarten werden durch unterschiedliche Icons dargestellt
Mittagstisch
Wenn Sie die Vorlage Mittagstisch ausgewählt haben, wird der Inhalt automatisch generiert. Es werden kurze Vorschauen der Speisekarten im Kartenordner Mittagstisch angezeigt.
Störer
Wenn Sie die Vorlage Störer ausgewählt haben, können Sie eine Anzeige anschalten, die den Besucher der Seite "stört". Mit Text und Bild können Sie so auf etwas aufmerksam machen, dass Ihre Besucher auf keinen Fall verpassen dürfen.
Text mit Bild
Wenn Sie die Vorlage Text mit Bild links oder Text mit Bild rechts ausgewählt haben, können Sie einen Text verfassen und daneben ein passendes Bild platzieren.
Das Bild erscheint immer bündig auf der angegebenen Seite
Pflegen Sie nur den Text oder nur das Bild, wird der Inhalt zentral ausgegeben
Wählen Sie bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)
Umfrage
Wenn Sie die Vorlage Umfrage ausgewählt haben, wird der Inhalt automatisch generiert. Ihre Besucher können an einer bereits erstellten Umfrage teilnehmen. Diese wählen Sie 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 Sie die Vorlage Vorschau Karte ausgewählt haben, wird der Inhalt automatisch generiert. Es wird speziell eine Karte präsentiert, die Sie unter Angaben auswählen.
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 Rezepte werden ohne Bild dargestellt (farbig markiert)
Rezeptbilder können manuell geöffnet werden
Widget
Binden Sie über die Vorlage Widget das Widget auch an anderer Stelle auf Ihrer Website ein (neben der Reservierungsseite). Sie können auch einen direkten Einstiegspunkt festlegen, um gezielt inhaltlich zu arbeiten. Beispielsweise können Sie auf Ihren 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 Sie die Vorlage YouTube Video auswählen, können Sie einfach und bequem ein YouTube-Video direkt auf Ihrer Website einbetten.
Sämtliche Formulare und Umfragen sind mit einem CAPTCHA versehen, das unsichtbar im Hintergrund arbeitet, um den Schutz vor Spam und unbefugten 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
