• Jetzt starten
  • Newsletter
  • Kategorien
    • Onlineshop & E-Commerce
    • Shopdesign
    • Marketing
    • Suchmaschinen (SEO)
    • Produkte
    • Zahlung & Versand
    • Rechtsfragen
    • Händlergeschichten
  • Suche
  • Menü Menü
vschwarz

Wenn der Editor nicht ausreicht – wie Sie mit CSS das Design Ihres ePages-Shops anpassen können – Teil 2

1. November 2011/0 Kommentare/in Shopdesign /von

Im ersten Beitrag zum Thema CSS haben wir Ihnen hier im ePages Blog gezeigt, wie Sie mit CSS Codes einzelne Elemente Ihres Shops manipulieren können und wie Sie den dazu benötigten Code herausfinden können. Diese Änderungen bezogen sich stets auf den gesamten Shop. Im zweiten Teil der Reihe zeigen wir Ihnen, wie Sie Änderungen per CSS nur für spezielle Seiten durchführen.

 

 

Haben Sie nach unserer Anleitung im ersten Blogbeitrag den richtigen Code herausgefunden, können Sie nahezu jedes Element in Ihrem Shop modifizieren, indem Sie den Code im Menü „Einstellungen -> Allgemeine Einstellungen -> Erweiterte Einstellungen“ einfügen. Doch diese Codes wirken sich stets auf den gesamten Shop aus.
Ein Beispiel: Blenden Sie also zum Beispiel per CSS-Code die linke Menüleiste aus, verschwindet Sie in Ihrem Shop, egal, auf welcher Seite Sie sich gerade befinden. Vielleicht aber möchten Sie das linke Menü nur auf der Startseite ausblenden, um mehr Platz für eine große Grafik auf der Startseite zu haben. Klickt ein Kunde dann auf eine Kategorie oder ein Produkt, soll die Menüleiste wieder angezeigt werden, damit etwa die Warenkorbvorschau angezeigt werden kann.
Wie kann dies erreicht werden?
Zunächst der passende Code, um die linke Menüleiste auszublenden:
<style type=“text/css“>
.NavBarLeft
{
display: none;
}
</style>
Würden wir diesen Code nun in den allgemeinen Einstellungen einfügen, würde die linke Menüleiste verschwinden. Das Problem: Der Contentbereich wird je nach gewähltem Template nicht nach links verschoben, so dass eine Lücke auf der linken Seite stehen bleibt.
Dies beheben wir, indem wir den Code entsprechend anpassen und dem Browser mitteilen, dass der Contentbereich auf der linken Seite keinen Außenabstand besitzen soll. Der Befehl dafür lauten „margin-left: 0px;“
Der CSS-Code sieht nun also so aus:
<style type=“text/css“>
.ContentArea
{
margin-left: 0px !important;
}
.NavBarLeft
{
display: none;
}
</style>
Das Ergebnis im Shop wird nun so aussehen:
Ausblendend der Menüleiste nur auf der Startseite
Gut, wir haben also den CSS-Code, der die Menüleiste ausblendet. Fügen wir ihn im Menü „Einstellungen-> Allgemeine Einstellungen > Erweiterte Einstellungen“ ein, wird dies im gesamten Shop passieren. Doch das wollen wir ja gar nicht. Das Menü soll lediglich auf der Startseite des Shops ausgeblendet werden, um so etwa Platz für eine großflächige Grafik zu machen.
Dazu müssen wir den Code also an anderer Stelle einfügen. Wechseln Sie in das Menü „Inhalt/Content“ und dort in die Datenblatt-Ansicht. Hier können Sie für jede einzelne Seite CSS-Code einfügen und diesen dann nur für diese Seite wirken lassen. Da wir ja die Startseite modifizieren möchten, wechseln wir direkt auf den Reiter „Allgemein“.
Im Feld „Erweiterte Beschreibung“ tragen wir unseren CSS-Code ein. Wichtig: Nutzen Sie dafür nicht den Editor, sondern direkt das Eingabefeld.
Nun noch einmal speichern und den Seiten-Cache aktualisieren. Fertig, Sie haben erfolgreich auf der Startseite die linke Menüliste ausgeblendet.
+ posts
  • Für mehr Auswahl im Warenkorb: Radio-Buttons bei Versand & Zahlung
  • Werden Sie zum Verleger - Wie sie Download-Produkte in ePages verkaufen können
  • Neuauflage des kostenlosen Handbuchs „Internetrecht“ verfügbar
  • Damit Ihre Kunden sich selbst ein Bild machen können - wie Sie Bildergalerien in ePages nutzen
Eintrag teilen
  • Teilen auf Facebook
  • Teilen auf WhatsApp
  • Teilen auf LinkedIn
  • Per E-Mail teilen
https://blog.epages.com/wp-content/uploads/2021/03/Schreibtisch_schwarz.jpg 314 848 vschwarz https://blog.epages.com/wp-content/uploads/2021/11/logo-epages-blog.svg vschwarz2011-11-01 15:53:362011-11-01 15:53:36Wenn der Editor nicht ausreicht – wie Sie mit CSS das Design Ihres ePages-Shops anpassen können – Teil 2
0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar Antworten abbrechen

Du musst angemeldet sein, um einen Kommentar abzugeben.

Beiträge suchen

Neueste Beiträge

  • Minimaler Aufwand, maximale Performance: Mit KI-Tools Ihr Online-Marketing boosten
  • Mit FAQs, Design-Templates, Tracking und weiteren Features das Marketing für Ihren Shop abstimmen
  • Wichtige Gesetzesänderungen im E-Commerce: Was Online-Händler zum Jahreswechsel wissen sollten
  • Performance Max-Kampagnen, Artikelnummern, Themes und mehr: Neue Features für ePages Now
  • Dynamisches Retargeting: Ihr Erfolgsrezept für den Umsatz-Push im Jahresendspurt!

Kategorien

  • ePages Direct
  • Händlergeschichten
  • Marketing
  • Onlineshop & E-Commerce
  • Produkte
  • Rechtsfragen
  • Shopdesign
  • Suchmaschinen (SEO)
  • Zahlung & Versand

Podcast

epages podcast

E-Commerce-Tipps gibt es jetzt auch zum Hören! In „Digital handeln“ sprechen wir mit Experten und Händlern und tauchen tiefer in aktuelle Themen des E-Commerce ein.

podcast digital handeln apple podcast digital handeln spotifiy podcast digital handeln google podcast digital handeln soundcloud

Sie haben Fragen?

epages facebook community

In unserer ePages Community bringen wir Shopbetreiber, ePages-Mitarbeiter und -Partner zusammen, um alle Themen rund um die ePages-Software und den Onlinehandel zu diskutieren.

Jetzt beitreten

Tipps für einen erfolgreichen Start in den E-Commerce

Checkliste: So starten Sie in den E-Commerce
Quellen für Produktideen: Die ultimative Liste
Produktfotos: So vermeiden Sie Fehler
Die richtige Kategoriestruktur für Ihren Online-Shop
Farbpsychologie im E-Commerce so setzen Sie Farben füer Ihren Onlineshop gekonnt ein
21 Tipps mit denen Sie Ihren Onlineshop bekannt machen

ePages Blog Newsletter

ePages Blog Newsletter

© 2023 ePages · Pilatuspool 2 · 20355 Hamburg · Deutschland

Kontakt · AGB · Impressum · Datenschutz
Privatsphäre-Einstellungen ändern · Historie der Privatsphäre-Einstellungen · Einwilligungen widerrufen

  • Deutsch
    • English (Englisch)
    • Français (Französisch)
    • Español (Spanisch)
Nach oben scrollen
Wählen Sie die passende Lösung für Ihr Business

Website für stationäre Händler

Laden
Verkaufen mit Ladengeschäft

Website für Onlinehändler

Online
Nur online verkaufen

Anmelden

Shop für Ihr Ladengeschäft

Laden
Ladengeschäft

Nur online verkaufen

Online
Online verkaufen