WooCommerce Storefront Header CSS-Anpassungsleitfaden

Veröffentlicht: 2020-10-10

WooCommerce Storefront-Header-CSS Wenn Sie das Erscheinungsbild der Kopfzeile Ihres Storefront WooCommerce-Themes ändern möchten, möchten Sie vielleicht einige CSS-Tricks aus diesem kurzen Tutorial lernen.

Die WooCommerce Storefront ist ein einfaches und leistungsstarkes Thema, das kostenlos ist. Dieses Thema bietet Ihnen eine erhebliche Kontrolle über Ihr Geschäft in Bezug auf Produktpräsentation und Benutzerzugriff. Es ist kostenlos und bietet Ihnen eine Fülle von Anpassungsoptionen durch untergeordnete Themen.

Das Storefront-Design unterstützt den WordPress-Customizer, und Sie können die Kopfzeile in diesem Abschnitt bearbeiten.

Sie können den Storefront-Header jedoch mithilfe von Filtern anpassen. Mit CSS ist es jedoch einfacher, Ihre Regeln hinzuzufügen, um das Styling eines bestimmten Abschnitts zu ändern. Für dieses Tutorial müssen Sie über Programmierkenntnisse verfügen. Wir werden die CSS-Regeln im Abschnitt Zusätzliches CSS über den Customizer hinzufügen.

Der Vorteil bei der Verwendung dieses Abschnitts besteht darin, dass Sie mit dem WordPress-Customizer in Echtzeit bearbeiten können. Sie können die von Ihnen vorgenommenen Änderungen sehen, bevor Sie Ihre Änderungen veröffentlichen können.

Erwähnenswert ist auch, dass das Storefront-Design beim Anpassen das aktive Design sein muss.

Lassen Sie uns vor diesem Hintergrund einige Header-CSS-Tipps ansehen, mit denen Sie Ihr Geschäft auf die nächste Stufe bringen können.

  1. Kopfzeilengröße anpassen

Hier werden wir wieder den Theme Customizer verwenden, aber wir werden etwas CSS-Code in den Abschnitt „Zusätzliches CSS“ schreiben.

Fügen Sie den folgenden Code hinzu:

 * Impressum */

#masthead.site-header {

    Höhe: 155px!Wichtig;

    Rand unten: 0px

}

/* Mobiles CSS für Masthead */

@media only screen und (max-width: 320px) {

    #masthead.site-header {

    Höhe: 80px!Wichtig;

    Rand unten: 0px;

}

}

/* Impressum-Menü */

.storefront-primary-navigation a, .cart-contents a {

    Rand: 0 0 0 0;

}

.main-navigation ul {

    padding:0 0 10px 4px!wichtig;

}

.main-navigation li {

    Höhe: 38px! wichtig;}

/* Mobiles CSS für das Masthead-Menü */

@media only screen und (max-width: 320px) {

.main-navigation ul {

    Hintergrund:#D6DDE4!Wichtig;

}

}

/* Header-Bereich */

.site-header {

Polsterung oben: 0,5 m;

}

.site-header .custom-logo-link-img, .site-header .site-logo-anchor-img, .site-header .site-logo-link-img {

Rand unten: -45px;

}

Hier ist das Ergebnis: Kopfzeilengröße anpassen

  1. Entfernen Sie die Suchleiste aus der Kopfzeile des Designs

Fügen Sie diesen Code dem Abschnitt „Zusätzliches CSS“ hinzu.

 .site-header .widget_product_search {

Anzeige: keine;

}

Hier ist das Ergebnis: Suchleiste entfernen

  1. Ändern Sie die Farbe des Kopfzeilenmenüs

Mit dem Customizer können wir die Kopfzeile mit den gewünschten Farben anpassen. Sie können dies tun, indem Sie zu Anpassen navigieren, dann zur Kopfzeile und die gewünschte Farbe auswählen.

Diese Option färbt jedoch den gesamten Header-Bereich ein, einschließlich der Suchleiste, des Anmeldebereichs und des Logos. Um einen anderen Hintergrund für das Kopfzeilenmenü zu erhalten, fügen Sie das folgende Code-Snippet zum Bedienfeld „Zusätzliches CSS“ hinzu.

 .storefront-primäre-navigation,

.Hauptnavigation ul.Menü ul.Untermenü{

Hintergrundfarbe: grün;

}

Hier ist das Ergebnis: Ändern Sie die Farbe des Kopfzeilenmenüs

4. Blenden Sie die primäre Navigationsleiste aus

Storefront Theme zeigt standardmäßig alle Seiten als Menü an. Wenn Sie die primäre Navigationsleiste ausblenden möchten, reicht das Löschen des Menüs nicht aus. Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .storefront-primäre-navigation {

Anzeige: keine;

}

Hier ist das Ergebnis: Primäre Navigationsleiste ausblenden

5. Entfernen Sie das Leerzeichen aus der Kopfzeile

Navigieren Sie zu Anpassen, dann zum Abschnitt Zusätzliches CSS, und fügen Sie die folgenden Zeilen hinzu:

 .site-branding {

Rand unten: 0px;

}

Hier ist das Ergebnis: Leerzeichen aus der Kopfzeile entfernen

6. Erhöhen Sie die Breite der Suchleiste

Was würden Sie tun, wenn Sie die Breite der Suchleiste erweitern möchten? Fügen Sie im Abschnitt Zusätzliches CSS die folgenden Zeilen hinzu:

 .woocommerce-aktiv .site-header .site-suche {

Breite: 44,739 %;

}

#masthead .site-search .widget_product_search input[type="search"] {

Breite: 700px !Wichtig;

}

Hier ist das Ergebnis: Erhöhen Sie die Breite der Suchleiste

7. So ändern Sie die Größe des Logos, der sekundären Navigation und der Suchleiste

Um sie alle auf einmal zu ändern, fügen Sie den folgenden Code zu Ihrem zusätzlichen CSS-Abschnitt hinzu:

 @media screen und (Mindestbreite: 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { width: 30% !important; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }




/* SEKUNDÄRE NAVIGATION */

.site-header .secondary-navigation { width: 40% !important; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }




/* SUCHLEISTE */

.site-header .site-search { Breite: 30 % !wichtig; /* Verwenden Sie px-Werte, wenn Sie möchten, zB. 350px */ }

Hier ist das Ergebnis: So ändern Sie die Größe des Logos, der sekundären Navigation und der Suchleiste

8. Entfernen Sie den Einkaufswagen aus der Kopfzeile

In diesem Beispiel werde ich das Einkaufswagensymbol entfernen, indem ich eine neue Regel hinzufüge: ' display: none; '. Fügen Sie den folgenden CSS-Code im Abschnitt „Zusätzliches CSS“ hinzu:

 .site-header-cart .cart-contents {

Anzeige: keine;

}

Hier ist das Ergebnis: Entfernen Sie den Einkaufswagen aus der Kopfzeile

9. Blenden Sie die Kopfzeile aus

Um die Kopfzeile auszublenden, fügen Sie den folgenden CSS-Code im Abschnitt „Zusätzliches CSS“ hinzu:

 .site-header {

Anzeige: keine;

}

Hier ist das Ergebnis: Kopfzeile ausblenden

10. Erhöhen Sie die Größe des Menülinks im Storefront-Header

Erhöhen Sie die Größe des Menülinks im Storefront-Header Die Menüs sind entsprechend den Vorlieben vieler Benutzer etwas kleiner. Sie müssen jedoch die Schriftgröße der Menülinks im Storefront-Design aktualisieren. Fügen Sie im Abschnitt „Zusätzliches CSS“ den folgenden Code hinzu:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

Schriftgröße: 28px;

}

Hier ist das Ergebnis:

11. Ändern Sie die Größe des Einkaufswagensymbols in der Storefront-Kopfzeile

Sie können dies tun, indem Sie den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzufügen

 .site-header-cart .cart-contents {

Schriftgröße: 30px;

}

Hier ist das Ergebnis: Ändern Sie die Größe des Einkaufswagensymbols in der Storefront-Kopfzeile

12. Ändern Sie die Größe des Site-Header-Titels im Storefront-Design

Fügen Sie im Abschnitt „Zusätzliches CSS“ den folgenden Code hinzu:

 .site-header {

Schriftgröße: 20px;

}

Hier ist das Ergebnis: Ändern Sie die Größe des Site-Header-Titels im Storefront-Design

13. Ändern Sie die Größe der mobilen Menüschaltfläche

Es ist wichtig zu beachten, dass die Art und Weise, wie das Menü angezeigt wird, Teil der Reaktionsfähigkeit des Menüs ist. Wenn also Ihr primäres Navigationsmenü auf einem Desktop-Gerät in Form einer Liste vorliegt, kann dasselbe Menü auf einem mobilen Gerät als Hamburger-Menü angezeigt werden.

Um die Größe zu ändern, fügen Sie den folgenden CSS-Code im Abschnitt Zusätzliches CSS hinzu:

 .button.menu-toggle {

Schriftgröße: 19px;

}

Hier ist das Ergebnis: Ergebnis für Mobile-Menüschaltfläche

Fazit

In diesem Leitfaden habe ich einige CSS-Tipps für Kopfzeilen geteilt, mit denen Sie die Kopfzeile gestalten können. Ich empfehle dringend, dass Sie die CSS-Regeln im Abschnitt „Zusätzliches CSS“ hinzufügen, damit Sie eine Vorschau der Änderungen in Echtzeit sehen können. Durch die Vorschau Ihrer Änderungen können Sie die Regel gemäß Ihrer Spezifikation ändern.

Um die Regel hinzuzufügen, kopieren und fügen Sie sie in den Abschnitt „ Zusätzliches CSS “ Ihrer Storefront-Design-Anpassungsoberfläche ein. Um dies zu tun:

  • Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
  • Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Anpassen .
  • Navigieren Sie in der angezeigten linken Seitenleiste nach unten zu Zusätzliches CSS .
  • Fügen Sie die CSS-Regel hinzu.
  • Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf Veröffentlichen.

Es ist jedoch wichtig zu beachten, dass die hier geteilten CSS-Tipps nur für das Storefront-Theme funktionieren.

Ähnliche Artikel

  1. So erstellen Sie Schritt für Schritt einen benutzerdefinierten Widget-Bereich in WordPress
  2. So passen Sie das Storefront-Design an – Homepage-Anpassung [Ultimate Guide]
  3. So fügen Sie ein Hintergrundbild für die Kopfzeile des Storefront-Designs hinzu
  4. So bearbeiten Sie die Kopfzeile im Storefront WooCommerce-Thema
  5. So erstellen Sie eine scrollbare Quick-Fix-Lösung für das Menü von Divi Mobile
  6. So ändern Sie die Größe des Einkaufswagensymbols im WooCommerce Storefront-Design
  7. So ändern Sie die Größe des Mobile Menu Button Storefront Theme
  8. So passen Sie die Höhe der Kopfzeile in der WooCommerce-Schaufensterfront an
  9. So ändern Sie die Schriftgröße des Hauptmenüs Storefront Theme
  10. So ändern Sie die Fußzeilenhöhe von WooCommerce Storefront
  11. So ändern Sie die Menüfarbe WooCommerce Storefront
  12. So passen Sie das Storefront-WooCommerce-Thema an: Der ultimative Leitfaden zur Anpassung des Storefront-Themas
  13. So ändern Sie die Größe des Site-Titels WooCommerce Storefront Theme
  14. So entfernen Sie das Header WooCommerce Storefront Theme