Designer

Text vergrößernText reduzieren

Lay-out-DesignDer Designer ermöglicht es Ihnen, die gewählte Vorlage oder das gewählte Thema zu personalisieren. Der Designer bietet viele Möglichkeiten zur Personalisierung und ist daher weniger einfach zu bedienen als die Standardlayoutverwaltung. Diese Seite beschreibt die Funktionen des Designers.

Navigieren Sie zu Einstellungen > Layout und klicken Sie auf das Register Designer. Klicken Sie dann auf Start. Wir empfehlen die Verwendung eines großen Bildschirms (mindestens 1920x900 Pixel), um optimal mit dem Designer arbeiten zu können.

Der Designer besteht aus der Vorschau im Hintergrund, einem Fenster mit der mobilen Ansicht Ihrer Website und dem Designfenster.

Mobile Ansicht

Die meisten Menschen werden Ihre Website mit einem Smartphone besuchen. Die mobile Ansicht zeigt Ihnen, wie Ihre Website auf einem kleinen Bildschirm aussehen wird. Achten Sie darauf, dass die Website nicht zu breit wird, damit kein horizontaler Scrollbalken angezeigt wird. Alle Vorlagen sind standardmäßig mobilfreundlich, aber der Designer lässt viele Freiheiten, so dass dies auch gestört werden kann.

Die Icons am oberen Rand ermöglichen die Darstellung in verschiedenen Auflösungen.

Mit dem Symbol Aktualisieren können Sie die Skripte auf der Website aktualisieren, um die neueste Version zu sehen.

Design-Fenster

Entwürfe

Die erste Schaltfläche gibt Ihnen einen Überblick über Ihre personalisierten Designs.

Design hinzufügen
Mit dieser Schaltfläche können Sie ein neues Design hinzufügen oder ein Design aus einem anderen Webshop kopieren.
Publizieren
Nach dem Veröffentlichen ist das Design live und für Ihre Besucher sichtbar.
Anpassen
Damit können Sie den Namen, die Kommentare und die Kopierrechte des Entwurfs bearbeiten.
Löschen
Mit dieser Aktion können Sie den Entwurf löschen. Diese Aktion kann nicht rückgängig gemacht werden.

Elemente

Elemente bilden die HTML-Struktur Ihrer Website. Nachdem Sie ein Element ausgewählt haben, wird ein Webformular angezeigt, mit dem Sie die Eigenschaften des Elements ändern können.

Es gibt viele Elemente und Eigenschaften, die über das Webformular angepasst werden können. Das wichtigste Element ist Webpage. Mit diesem Formular wird automatisch der zugrundeliegende CSS-Selektor geändert.

Eigenschaften, die bereits angepasst wurden, sind durch einen grünen Hintergrund im Formularfeld gekennzeichnet. Wenn Sie den Wert einer Eigenschaft leer lassen, wird diese Eigenschaft entfernt.

Subelemente

Einige Elemente enthalten Unterelemente. Wenn Sie auf die Links klicken, wird ein neues Formular angezeigt, mit dem Sie die Eigenschaften des Unterelements ändern können.

Medien

Eigenschaften von Elementen können nur für bestimmte Bildschirmgrößen oder in der Druckversion gelten. Mit einem Klick auf die Links werden die Eigenschaften des Elements für ein bestimmtes Medium angepasst.

Speichern

Verwenden Sie dieses Symbol, um den Entwurf zu speichern. Dadurch wird der Entwurf nicht veröffentlicht.

Gestaltung

Ermöglicht es Ihnen, die HTML-Struktur der Website zu ändern. Sie können Objekte hinzufügen, verschieben und löschen.

Es gibt sichtbare Objekte (Suchfunktion, Warenkorb, Sprachauswahl, Navigation) und unsichtbare Container, die zur Strukturierung der Website verwendet werden. Container werden typischerweise verwendet, um Elemente zu gruppieren oder Hintergründe hinzuzufügen.

Anpassungen an der Struktur können Sie durch Ziehen von Elementen oder mit den Pfeilen nach oben/unten vornehmen. Sie können ein neues Element hinzufügen, indem Sie auf Hinzufügen am unteren Rand klicken. Um ein Element zu entfernen, klicken Sie auf das Symbol Löschen.

In den Designbeispielen wird die Struktur automatisch angepasst. Sollte die Anpassung nicht automatisch erfolgen, klicken Sie im Entwurfsfenster auf Speichern und anschließend in der mobilen Ansicht auf Laden.

CSS anpassen

Hier können Sie die Layout-Codes (CSS-Code) der Website anpassen.CSS - Cascading Style Ssheets ist keine Programmiersprache, sondern eine Stilsprache, mit der man die Formatierung von Website-Elementen definieren kann.

CSS anpassen, ist das etwas für einen Laien?

CSS kann leicht erlernt werden. Wir empfehlen diese Methode für Anwender, die ihre eigene Website individuell gestalten wollen und Zeit investieren, um sich mit CSS vertraut zu machen.

Nützliche Links mit Informationen über CSS:

  • W3Schools - Tutorials zum Erlernen von CSS
  • CSS-Tricks - unser Favorit mit vielen CSS-Informationen

Hilfe zur CSS-Anpassung

Für CSS-Code-Anpassungen kann unser Helpdesk keine Unterstützung bieten. Das Hinzufügen von CSS-Unterstützung würde bedeuten, dass wir das Webdesign anpassen müssten und das würde EasyWebshop viel teurer machen. Wir haben jedoch einige gute Kontakte zu Webdesignern, die gegen eine Gebühr bei CSS-Anpassungen helfen können.

Wir raten davon ab, Webdesigner direkt oder mit einem Administrator-Account in Ihren Webshop einloggen zu lassen. Das führt manchmal zu Diskussionen über Änderungen, die nicht gewollt waren. Lassen Sie nur Personen in Ihren Shop einloggen, denen Sie vertrauen! Stattdessen kann der Webdesigner einen Basic-Webshop erstellen und das Layout in diesem Webshop gestalten. Sie können das Layout dann mit der Kopierfunktion in Ihren Webshop kopieren.

Einstellungen

Hier können Sie den Dunkelmodus, den Vollbildmodus und die Syntaxhervorhebung des CSS-Codes ein- und ausschalten. Außerdem gibt es eine Option, um das Design-Fenster transparent zu machen. Die Einstellungen beziehen sich auf das Design-Fenster, also nicht auf die Website.

Wie kann ich die Eigenschaft X ändern?

Den Hintergrund ändern

Wählen Sie das gewünschte Element aus, z. B. Webpage. Klicken Sie bei Hintergrundbild auf das Symbol Bild bearbeiten. Wählen Sie ein Bild aus der Liste oder Hochladen Sie ein neues Bild.

Sie können ein Bild auch über die Galerie erwerben. Wenn Sie das Bild auf einer Seite verwenden möchten, empfehlen wir das Webformat. Für Hintergründe empfehlen wir das Format Groß.

Klicken Sie auf Einfügen, um das Bild als Hintergrund zu setzen. Nachdem das Hintergrundbild eingestellt ist, erscheint auch ein Symbol Bild löschen.

Farben anpassen

Der einfachste Weg, Farben zu ändern, ist im CSS-Code. Farbcodes sehen aus wie #ffffff oder rgba(255, 255, 255, 0.5). Bei letzterer Schreibweise ist der letzte Parameter (0,5 im Beispiel) die Transparenz.

Nützliche Links zum Zusammenstellen von Farben:

Schaltflächen anpassen

Wählen Sie das Element Webpage und das Unterelement Buttons. Im Formular können Eigenschaften wie Farbe, Größe, Rahmenstil etc. angepasst werden.

Das Unterelement Buttons mouse-over ermöglicht es, den Stil der Buttons zu ändern, wenn man mit der Maus darüberfährt. Zum Beispiel kann die Schaltfläche eine hellere Farbe erhalten.

Schriften anpassen

Sie können die Schriftart ändern, indem Sie ein Element auswählen und Schriftart im Formular anpassen.

Standardmäßig haben alle unsere Vorlagen eine Schriftart für das Hauptelement Webseite eingestellt. Es ist möglich, verschiedene Schriftarten für verschiedene Elemente einzustellen. Wir empfehlen dies jedoch nicht, um die Übersichtlichkeit zu wahren.

Mögliche Probleme

Ich sehe noch immer die alte Version der Website
Dies liegt üblicherweise daran, dass die alten Bilder noch immer im Cache des Webbrowsers liegen. Ein Webbrowser (Internet Explorer, Firefox, Google Chrome...) speichert Webseiten und Bilder auf Ihrer Festplatte. Auf diese Weise lädt die Seite bei Ihrem nächsten Besuch schneller. Wenn Sie die Seite besuchen, sehen Sie die alte Version des Fotos auf Ihrer Festplatte und nicht die aktive Version auf Ihrer Website.

Um dieses Problem zu lösen: Gehen Sie auf die Shop-Seite und klicken Sie auf Seite aktualisieren oder Seite neu laden.

Sie können auch die Tastaturkürzel verwenden: F5 oder STRG + R (Befehl + R auf dem Mac). Die neueste Version der Webseite wird nun geladen.
Das Favicon wird nicht angezeigt.
Verwenden Sie einen aktuellen Browser. In einigen alten Versionen des Internet Explorer wird kein Favicon angezeigt.
Verknüpfen Sie auch einen Domainnamen mit Ihrem Shop. Einige Browser zeigen das Favicon von EasyWebshop an, wenn kein Domainname verknüpft ist.

Nächste Seite: Texte und Webseiten bearbeiten

Starter wiki



Fragen und Antworten Kontakt