Wissensdatenbank
Leitfäden
Academy
Video-Tutorials
Versuchen Sie es mit:
Zuletzt angesehene Artikel:

Inhaltsverzeichnis

Konfigurieren des Instant Site-Designs

Sie können eine responsive Instant Site-Vorlage verwenden, um schnell mit dem Verkauf Ihrer Produkte online zu beginnen. Ihre Website wird auf allen Geräten, Desktops, Tablets und Handys professionell aussehen. Sie können das Erscheinungsbild der Instant Site ganz unkompliziert an Ihre Vorstellungen anpassen. Wenn Sie keine technisch versierte Person sind, können Sie aus den voreingestellten Darstellungsoptionen unter Ecwid-Verwaltung → Website wählen. Erfahrene Benutzer mit Programmierkenntnissen können CSS-Änderungen vornehmen, um dem Shop ein einzigartiges Aussehen zu verleihen.

In diesem Artikel geht es um die Originalversion unserer Instant Site, die allgemein für alle neuen Ecwid-Benutzer verfügbar ist. Wenn Sie wissen möchten, wie Sie das Design der New-Gen Instant Site (die sich jetzt in der geschlossenen Beta-Phase befindet) bearbeiten können, lesen Sie unseren Artikel zur Konfiguration der New-Gen Instant Site

Reihenfolge der Abschnitte

Instant Site besteht aus den folgenden Abschnitten:

  • Titelbild (die erste Kachel)
  • Shop
  • Mission des Unternehmens (Warum Sie sich für uns entscheiden sollten)
  • Info
  • Kundenempfehlungen
  • Standort
  • Kontaktinformationen 

Sie können alle Abschnitte der Instant Site ausblenden und ihre Reihenfolge auf die gewünschte Art und Weise ändern. Gehen Sie dazu zu Ihrer Ecwid-Verwaltung → Website, klicken Sie auf Bearbeiten und klicken Sie dann auf Abschnitte sortieren:

Screen_Capture_on_2019-10-11_at_21-51-23.gif

Wenn Sie zum Beispiel nur Ihren Shop einrichten, können Sie den Abschnitt Kundenmeinungen ausblenden, bis Sie Feedback von Ihren Kunden erhalten. Wenn Ihr Geschäft saisonaler Natur ist, können Sie den Shop-Teil innerhalb Ihrer Instant Site einfach aus- und dann wieder einblenden, wenn Sie wieder eröffnen. Falls Sie Ihr Titelbild niedriger anzeigen möchten, können Sie es unter einen anderen Abschnitt Ihrer Instant Site verschieben usw.

Wenn Sie kein Titelbild benötigen, können Sie es in ein schmales oberes Menü verwandeln.

Themen für das Titelbild

Der Titelbild-Abschnitt stellt Ihren Kunden den Shop vor. Sie können eines von 79 Designs für Ihr Shop-Titelbild auswählen. Gehen Sie dazu in Ihrer Ecwid-Verwaltung zu Website → Erscheinungsbild der Website→ und klicken Sie auf Bearbeiten → Themen. Wählen Sie das Thema, das Ihrem Unternehmen am nächsten kommt:

Choose_a_design_theme_for_instant_site.png

Sie können das ausgewählte Thema auch jederzeit bearbeiten: Laden Sie Ihr eigenes Titelbild hoch, ändern Sie die Typografie usw. Möglich ist dies in den entsprechenden Abschnitten des Instant Site Editors. 

Cover-Hintergrund

Unter Hintergrundoptionen können Sie aus den Hintergrundtypen Farbe, Verlauf, Bild oder Video für die erste Kachel Ihrer Instant-Site wählen:

Hintergrundtyp für Instant Site-Titelbild

Die Option Farbe eignet sich gut für ein minimalistisches Aussehen oder für eine Kombination mit einem Titelbild (siehe Titelbild-Layouts unten). Sie können jede Farbe als Titelbildhintergrund festlegen:

Hintergrundfarbe für Instant Site-Titelbild

Für einen fantastischen Look probieren Sie den Typ Verlauf als Titelhintergrund aus. Sie können einen Verlauf aus der Galerie auswählen oder eine Mischung aus zwei Farben mit einem bevorzugten Winkel anwenden:

Hintergrundverlauf für Instant Site-Titelbild

Für Titelbild können Sie ein Bild von Ihnen oder Ihrem Shop-Team hochladen, ein Bild mit Ihren Waren oder einem anderen Bild, das potenzielle Kunden anlockt, und ihnen einen positiven Eindruck über Ihr Geschäft vermittelt. Die empfohlene Dateigröße für das Titelbild beträgt 1.400 x 1050 Pixel oder größer im JPG-, PNG- oder GIF-Format:

Hintergrundbild für Instant Site-Titelbild

Wenn Sie keine guten Bilder für das Titelbild haben, können Sie einige tolle Fotos auf Stockbilder-Websites finden wie Shutterstock, Depositphotos, Pixabay und andere.

Wenden Sie ein Overlay auf Ihr Hintergrundbild an, um den Text auf dem Bild leicht lesbar zu machen (und, um eine bestimmte Stimmung zu erzeugen). Das kann ein einfarbiges Overlay oder ein Verlauf mit einem benutzerdefinierten Winkel sein:

Overlay für Titelbild in Instant Site

Sie können problemlos ein Youtube/Vimeo Video als Titelbildhintergrund hinzufügen, um so Ihre besten Produkte zu präsentieren oder um Ihre Instant Site für ein Ereignis zu animieren – einfach den Link für Ihr Video in das Textfeld setzen, die Änderungen speichern und das Video wird in Ihrem Titelbildhintergrund lautlos abgespielt:

Video als Titelbild-Hintergrund in Ecwid

Vielleicht möchten Sie Ihrem Hintergrundvideo ein Overlay hinzufügen, sodass der Text im Video leicht zu lesen ist. Sie können eine vorgeschlagene verwenden oder wählen Sie eine beliebige Farbe oder einen Verlauf für ein Overlay aus.

Titelbild-Layout

Unter Titelbild-Layout können Sie wählen, welchen Teil der ersten Kachel Ihr Titelbild einnehmen soll. Es stehen sechs Optionen zur Auswahl:

Titelbild-Layout in Ecwid Instant Site

Wenn Sie ein Halbbild oder ein Seitenleistenlayout mit einem Titelbild im Hintergrund wählen, beträgt die empfohlene Größe für das Titelbild 1.800х700 px oder 1.200х1200.

Wenn Sie kein Titelbild auf Ihrer Seite benötigen, wählen Sie die Option „Oberes Menü“, um es in eine schmale Kopfzeile zu verwandeln.

Sie können auch die Überschrift und Beschreibung positionieren und ausrichten, um den besten Platz für diese in Ihrem Titelbild zu finden.

Call to Action-Schaltfläche

Die Call-to-Action-Schaltfläche bringt Kunden direkt zur Produktliste. Standardmäßig ist sie aktiviert und heißt „Jetzt einkaufen“:

Call-to-Action-Schaltfläche in Instant Site-Titelbild

Sie können den Text im Feld Beschriftung der Schaltfläche ändern und einen Namen Ihrer Wahl verwenden. Wenn Sie zum Beispiel Tickets online verkaufen, können Sie sie „Jetzt buchen“ nennen. Für digitale Produkte wie E-Books, Bilder oder andere herunterladbare Materialien kann die Schaltfläche „Jetzt herunterladen“ heißen.

Typografie im Titelbild

Wenn Sie eine andere Farbe und Größe für die Call-to-Action-Schaltfläche festlegen und eine andere Schriftart für die Beschriftung verwenden möchten, können Sie diese Änderungen im Menü Typografie vornehmen, das als Nächstes erscheint. Die Schriftfarbe passt sich automatisch der gewählten Schaltflächenfarbe an, damit die Beschriftung gut abgelesen werden kann.

Darüber hinaus können Sie unter Typografie ändern, wie die Überschrift und die Beschreibung der Instant Site aussehen – wählen Sie die gewünschte Schriftart aus einer Dropdown-Liste mit über 60 vorgeschlagenen Schriftarten, erhöhen und reduzieren Sie ihre Schriftgröße und wählen Sie eine beliebige Schriftfarbe aus.

Typografie im Instant Site Editor

Um passende Farben für Titelbild-Elemente zu finden, können Sie Websites wie Canva und Color Hunt für eine Inspiration zur Farbpalette verwenden oder Ihr Coverbild zu einem Dienst hochladen wie Image Color Picker, um die genauen Codes für dessen Farben zu finden.

Shop-Logo

Sie können ein Logo hochladen, das auf Ihren Schaufenster-Seiten angezeigt wird. Dieses Logo wird standardmäßig auch in Ihren E-Mail-Benachrichtigungen, Rechnungen und als Favicon (auf Englisch) verwendet.

Wenn Sie das Shop-Logo später ändern, müssen Sie das neue Logo auch manuell in E-Mail-Benachrichtigungen und Rechnungen hochladen. 

Das Store-Logo sollte nicht weniger als 140 x 140 px groß sein (oder mindestens 280 x 280 px für eine gute Darstellung auf Retina). Sie können ein größeres Bild hochladen. In diesem Fall wird Ecwid die Größe automatisch an den Logoblock von 480 x 140 px anpassen.

Die unterstützten Bildformate sind JPEG, PNG, GIF.

So fügen Sie Ihrem Schaufenster ein Logo hinzu: 

  1. Rufen Sie von Ihrer Ecwid-Verwaltung aus Website auf und klicken Sie auf „Bearbeiten“.
  2. Klicken Sie auf der geöffneten Seite auf Überschrift & Titelbild.
  3. Scrollen Sie nach unten und klicken Sie auf Shop-Logo
  4. Klicken Sie auf Logo hochladen.
  5. Wählen Sie im Dropdown-Menü -Logo-Position aus, wo das Logo angezeigt werden soll. Es gibt auch die Möglichkeit, das Logo auszublenden und es nur für das Favicon zu verwenden.
  6. Wenn Sie Ihr Logo rund machen möchten, aktivieren Sie die Option Rundes Logo.

    Upload_store_logo.png

Scroll-Pfeil

Im Menü Scroll-Pfeil können Sie den Pfeil ausblenden, der die Besucher der Seite in den Shopbereich bringt oder einen Text hinzufügen, der die Besucher animieren soll, Ihren Shop zu besuchen:

Scroll-Pfeil in Instant-Site-Titelbild

Top-Menü 

Unter Oberes Menü können Sie das Aussehen der oberen Leiste Ihrer Instant Site anpassen und auswählen, welche Informationen Sie in der Kopfzeile anzeigen möchten: Telefonnummer, Öffnungszeiten, Standort, Links zu sozialen Medien usw.

Screenshot_2020-10-06_at_10.11.32.png

Um die Überschrift zu ändern und dieser ein traditionelleres Aussehen zu geben, aktivieren Sie die Option Navigation anzeigen. Die Navigation enthält Links zu den folgenden Abschnitten Ihrer einseitigen Instant Site: Speichern, Über uns, Standort, Kontakt:

Navigation im oberen Menü der Instant Site anzeigen

Voreingestellte Designoptionen für Ihren Shop

Sie können das Aussehen Ihres Shops ändern und es so anpassen, dass dieser Ihre Marke am besten widerspiegelt. So gelangen Sie zu den Designeinstellungen:

Sie können in Ihrer Ecwid-Verwaltung auf die Shop-Design-Optionen zugreifen. Gehen Sie zu WebsiteBearbeitenShop.

Shop-Design-Übersicht

Shop-Design-Optionen replizieren die Einstellungen der Seite Design in Ihrer Ecwid-Verwaltung. Die hier vorgenommenen Änderungen wirken sich auf alle Ihre Schaufenster aus.

Sie können Miniaturbildröße, Seitenverhältnis, Textausrichtung und Rand um die Produktkarte mithilfe der entsprechenden Optionen steuern:

Shop-Design im Instant Site Editor

Große Bilder eignen sich ideal, um selbst das kleinste Detail Ihrer Produkte in den Vordergrund zu rücken. Mittelgroße Bilder eignen sich für die meisten Produkte, kleine Bilder haben den Vorteil, dass mehr Produkte auf eine Seite passen. Mit mehreren Optionen für das Seitenverhältnis stehen Ihnen flexible Möglichkeiten zur optimalen Darstellung horizontaler, vertikaler oder quadratischer Bilder zur Verfügung.

Produktlisten und -kategorien

Erweitern Sie das Menü Produktliste &Kategorien, um das Erscheinungsbild der Seiten, auf denen Ihre Produkte aufgelistet werden, anzupassen. Sie können die Sichtbarkeit von Produktname, Preis, SKU, „Jetzt kaufen“-Schaltfläche und Zusätzliches Produktbild ändern:

Darstellungsoptionen für die Produktliste im Ecwid-Shop

Wenn Sie einen luftigeren Look wünschen, können Sie die Schaltflächen Artikelnummer und „Jetzt kaufen“ ausschalten oder sie nur bei Mausbewegungen anzeigen.

Falls auf der Shop-Startseite Kategoriekarten angezeigt werden, können Sie die Position des Kategorienamens anpassen.

Unter dem Block Navigation können Sie die Optionen Brotkrümel und „Sortieren nach“ ein- und ausschalten:

Navigation im Ecwid-Shop

Unten können Sie die Option Bildhintergrund abdunkeln aktivieren, um sie im Hintergrund des Shops mehr hervorstechen zu lassen.

Produktseite

Unter dem Menüpunkt Produktseite finden Sie voreingestellte Designoptionen, mit denen Sie das Erscheinungsbild von Seiten mit detaillierten Informationen über Ihre Produkte anpassen können. Hier können Sie die Elemente Seitenlayout, Layout der Bildergalerie und Seitenleiste ändern:

Darstellungsoptionen für die Produktseite im Ecwid-Shop

Wenn Sie die Reihenfolge der Blöcke in der Seitenleiste ändern möchten, können Sie die Elemente in der Liste ziehen und ablegen.

Sie können zusätzliche Produktbilder hochladen, um Ihren Artikel aus dem besten Blickwinkel zu präsentieren. Was die Galeriebilder angeht, können Sie vergrößerte Bilder mit den wichtigsten Details des Artikels, Seiten- und Rückseitenansichten, Bilder von passenden Produkten oder zusätzlichen Accessoires hochladen.

Verschiedenes

Unter dem Menüpunkt Verschiedenes können Sie die Sichtbarkeit der Symbole einstellen, die unter Ihren Produktlisten erscheinen. Sie können das Fußzeilenmenü, den „Anmeldelink“ und Brotkrümel deaktivieren:

Navigation unter Produktliste im Ecwid-Shop

Insgesamt geben Ihnen die Darstellungsoptionen viel Freiheit beim Aufbau einer einzigartigen professionell aussehenden Website, die Ihre Produkte auf bemerkenswerte Weise präsentiert.

Wenn Ihr Schaufenster erweiterte Anpassungen erfordert und Sie mit CSS vertraut sind, können Sie Ihr eigenes CSS-Thema (auf Englisch) von Grund auf erstellen oder fertige CSS-Optimierungen (auf Englisch) aus dem Ecwid-Hilfecenter verwenden. Wenn Sie mit der Programmierung nicht vertraut sind, aber ein benutzerdefiniertes CSS-Thema für Ihren Shop wünschen, können unsere Experten ein individuelles Design für Sie erstellen (kostenpflichtig).

Verwandte Artikel

Verbinden Ihrer Domain mit Ecwid Instant Site
Anpassungsmöglichkeiten in Ecwid (auf Englisch)

War dieser Beitrag hilfreich?

Großartig! Vielen Dank für Ihr Feedback!

Vielen Dank für Ihr Feedback!

Das tut uns leid! Was ist schief gelaufen?
78 von 122 fanden dies hilfreich
10
Wir verwenden Cookies und ähnliche Technologien, um Ihre Präferenzen zu speichern, die Effektivität unserer Kampagnen zu messen und anonymisierte Daten zu analysieren, um die Leistung unserer Website zu verbessern. Mit der Auswahl von „Akzeptieren“ stimmen Sie der Verwendung von Cookies zu.
Cookies akzeptieren Ablehnen