FROM CACHE - de_header

Links in der Fußzeile nebeneinander anzeigen lassen (Motion Theme)

Gelöst

Links in der Fußzeile nebeneinander anzeigen lassen (Motion Theme)

mastahlb
Tourist
24 0 2

Guten Tag zusammen,

ich benutze das Theme Motion. Ich möchte, dass alle Links in der Fußleiste nebeneinander angezeigt werden. Themen wie z.B. diese: Thema 1 Thema 2  haben mir leider nicht weitergeholfen.

 

Mit freundlichen Grüßen

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18475 2895 4264

Erfolg.

@mastahlb 

 

Das wird also ein Programmierer  👀  müssen, wie oben bereits erwähnt. Das können wir ja hier in der Community nicht.

 

Stelle sicher, dass die CSS-Regeln für die horizontale Anzeige der Listenelemente (li) korrekt und spezifisch genug sind, um alle vorhandenen Stile zu überschreiben. Dein CSS für das horizontale Menü sollte etwa so aussehen:

 

.footer-menu-list {
   display: flex;
   justify-content: center;
   list-style: none;
   padding: 0;
}

.footer-menu-list li {
   margin: 0 15px; /* Adjust the spacing between menu items as needed */
}

 

Stelle ausserdem sicher, dass die Klassennamen, in der custom-footer.liquid Datei mit den Klassennamen übereinstimmen, auf die in deiner CSS-Datei verwiesen wird. Sollte in etwa so aussehen:

 

<footer class="footer-menu">
  <nav>
    <ul class="footer-menu-list">
      <li><a href="/impressum">IMPRESSUM</a></li>
      <li><a href="/versandkonditionen">VERSANDKONDITIONEN</a></li>
      <li><a href="/agb">AGB</a></li>
      <li><a href="/datenschutzerklaerung">DATENSCHUTZERKLÄRUNG</a></li>
    </ul>
  </nav>
</footer>

 

Außerdem sicherstellen, dass das {% section 'custom-footer' %} tag im theme.liquid im Body des HTML-Textes an der Stelle platziert, an der die Fußzeile erscheinen soll.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

12 ANTWORTEN 12

Finer
Shopify Partner
2126 462 764

@mastahlb das hängt damit zusammen, dass jedes Theme einen anderen Code verwendet. Daher können die CSS Klassen aus den anderen Beiträgen nicht angewandt werden.

Beim Motion Theme werden die Linklisten in einzelnen Spalten dargestellt, das kann dafür sorgen, dass andere Inhalte (in anderen Spalten) sich verschieben. Kannst du uns einen Screenshot von deinem aktuellen Footer zur Verfügung stellen? Damit können wir dann sehen, welche Optionen am besten wären, um das umzusetzen ohne die anderen Inhalte zu beeinflussen.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
mastahlb
Tourist
24 0 2

 

Vielen Dank für die Antwort. Hier ist ein Bild von meinem aktuellen Footer

 

Screenshot_424.png

mastahlb
Tourist
24 0 2

Ich habe den Footer mit Adobe XD bearbeitet. So soll die Anordnung später aussehen. Schön zentral über den ZahlungsmetodenWeb 1920 – 1.png

Finer
Shopify Partner
2126 462 764

@mastahlb um das in der Form darstellen zu können, wäre es einfacher den Code des Themes zu erweitern, statt mit CSS das Verhalten der bestehenden Blocks zu ändern. Zudem sollte man ja das mobile Verhalten berücksichtigen. Irgendwann kommen auch wieder neue Informationen im Footer hinzu, was dazu führt, dass die CSS Regeln komplett überdacht werden müssen.

 

Wie sind denn deine Code-Kenntnisse in Bezug auf HTML & CSS?

Hast du mit dem Code-Editor schon mal gearbeitet?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
mastahlb
Tourist
24 0 2

@Finer  schrieb:

@mastahlb um das in der Form darstellen zu können, wäre es einfacher den Code des Themes zu erweitern, statt mit CSS das Verhalten der bestehenden Blocks zu ändern. Zudem sollte man ja das mobile Verhalten berücksichtigen. Irgendwann kommen auch wieder neue Informationen im Footer hinzu, was dazu führt, dass die CSS Regeln komplett überdacht werden müssen.

 

Wie sind denn deine Code-Kenntnisse in Bezug auf HTML & CSS?


Eher milde. Ich habe mich zwar schon mit HTML & CSS auseinandergesetzt, habe aber nie wirklich damit gearbeitet. Ich arbeite stattdessen viel mit Java, Kotlin und MySQL. 

Gabe
Shopify Staff
18475 2895 4264

Hey @mastahlb 


EDIT:

Das hat jetzt in meinem Motion Test-Theme mit dem folgenden CSS geklappt, also zumindest ein Anfang da das Motion Theme Footer Menu ja in Raster eingeschlossen ist:

 

image.png

 

Hier der Code den ich im CSS Editor eingepflegt habe:

 

.footer__collapsible .site-footer__linklist {
 display: flex; /* Macht die Liste zu einem flexiblen Container */
 flex-direction: row; /* Platziert die Elemente in einer Reihe */
 justify-content: center; /* Zentriert die Elemente im Container */
 padding: 0; /* Entfernt den Standard-Abstand */
 list-style-type: none; /* Entfernt die Aufzählungszeichen */
}

.footer__collapsible .site-footer__linklist li {
 margin-right: 20px; /* Fügt rechts von jedem Link einen Abstand hinzu */
}

.footer__collapsible .site-footer__linklist li:last-child {
 margin-right: 0; /* Entfernt den rechten Abstand vom letzten Element */
}

 

Um das Footer-Menü so zu gestalten, wie es in deinem Bild zu sehen ist, musst du das HTML und CSS deines Themes entsprechend anpassen, um eine horizontale Liste zu erstellen, die in einem flexiblen Container zentriert ist. Hier ist ein Beispiel, wie du das machen könntest:


HTML:

Stelle sicher, dass dein HTML eine ul-Liste für das Menü enthält, etwa so:

 

<div class="site-footer__item footer-menu">
  <h4>Footer Menu</h4>
  <ul class="footer-menu-list">
    <li><a href="/impressum">IMPRESSUM</a></li>
    <li><a href="/versand">VERSANDKONDITIONEN</a></li>
    <li><a href="/agb">AGB</a></li>
    <li><a href="/datenschutz">DATENSCHUTZERKLÄRUNG</a></li>
  </ul>
</div>

 

Dann füge das entsprechende CSS hinzu, um die Menüpunkte horizontal und zentriert anzuzeigen:

 

.footer-menu {
  text-align: center; /* Zentriert den Inhalt */
}

.footer-menu-list {
  list-style: none; /* Entfernt die Aufzählungszeichen */
  padding: 0; /* Entfernt den Standard-Abstand */
  margin: 0; /* Entfernt den Standard-Abstand */
  display: flex; /* Erstellt einen flexiblen Container */
  justify-content: center; /* Zentriert die Listenelemente im flexiblen Container */
}

.footer-menu-list li {
  display: inline-block; /* Stellt die Listenelemente nebeneinander dar */
  margin: 0 10px; /* Fügt horizontalen Abstand zwischen den Elementen hinzu */
}

.footer-menu-list a {
  text-decoration: none; /* Entfernt die Unterstreichung von Links */
  color: white; /* Setzt die Textfarbe auf Weiß */
  font-weight: bold; /* Macht den Text fett */
}

 

Diese CSS-Regeln bewirken, dass die li-Elemente der Klasse .footer-menu-list horizontal angeordnet werden, indem sie als Blockelemente nebeneinander dargestellt werden und zwischen ihnen ein gleichmäßiger Abstand besteht. Die Liste wird auch zentriert, indem die Eigenschaft justify-content: center; auf den Flex-Container angewendet wird.

 

Nicht vergessen die Klassennamen entsprechend anzupassen, falls diese im Theme anders benannt sind. Du solltest auch sicherstellen, dass keine konfligierenden Styles von anderen CSS-Regeln deine Änderungen überschreiben.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

mastahlb
Tourist
24 0 2

Vielen Dank für deine sehr ausführliche Antwort. Ich habe dennoch ein paar Fragen.

 

Du hast scheinbar ein neuen Block namens Footer menu erstellt. Da es standardmäßig nur Logo and social, Menu, Newsletter & Custom text gibt. Konnte man zumindest deinen HTML Code entnehmen:

<h4>Footer Menu</h4>

 

In welcher Sektion muss ich die Dateien für CSS & HTML erstellen?

  1. Layout
  2. Vorlagen
  3. Abschnitte
  4. Snippets
  5. Konfig
  6. Assets
  7. Gebietsschema

Und wie muss ich die einzelnen Dateien benennen?

Gabe
Shopify Staff
18475 2895 4264

Hey @mastahlb 

 

Um den Footer deines Shopify-Themes anzupassen, kannst du das in den Abschnitte (Sections) und Assets machen. Hier ein paar generelle Schritte und bei weiteren Fragen werde ich dich an einen Experten (wie @Finer) verweisen der/die einen tieferen 👀 in dein Theme und Code werfen kann gegen eine kleine Belohnung. 

 

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.

 

Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

  1. Abschnitte (Sections):

    • Gehe zu dem Bereich Abschnitte in deinem Theme-Code.
    • Finde die Datei, die für den Footer zuständig ist, oft heißt sie footer.liquid oder ähnlich.
    • Wenn du eine neue Sektion für dein Footer-Menü erstellen möchtest, kannst du eine neue Datei anlegen. Klicke dazu auf "Neue Sektion erstellen" und nenne sie beispielsweise custom-footer.liquid.
  2. Assets:

    • Dein CSS fügst du in den Assets-Ordner ein. Normalerweise gibt es dort eine oder mehrere CSS-Dateien wie theme.scss.liquid oder theme.css.liquid.
    • Du kannst die CSS-Regeln am Ende der vorhandenen CSS-Datei hinzufügen oder eine neue CSS-Datei erstellen, z.B. custom-footer.css.liquid.
    • Wenn du eine neue CSS-Datei erstellst, stelle sicher, dass du sie in deiner theme.liquid-Datei einbindest, welche sich im Layout-Ordner befindet, mit einem Link-Tag wie folgt:

 

{{ 'custom-footer.css' | asset_url | stylesheet_tag }}

 

Hier nochmal das Beispiel für den Inhalt der custom-footer.liquid:

 

<div class="site-footer__item custom-footer">
  <h4>Footer Menu</h4>
  <ul class="footer-menu-list">
    <li><a href="/impressum">IMPRESSUM</a></li>
    <li><a href="/versand">VERSANDKONDITIONEN</a></li>
    <li><a href="/agb">AGB</a></li>
    <li><a href="/datenschutz">DATENSCHUTZERKLÄRUNG</a></li>
  </ul>
</div>

 

Beispiel für den Inhalt der custom-footer.css.liquid:

 

.custom-footer {
  text-align: center;
}

.footer-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.footer-menu-list li {
  display: inline-block;
  margin: 0 10px;
}

.footer-menu-list a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

 

  • Gehe zur theme.liquid-Datei im Layout-Verzeichnis.
  • Füge den Include-Tag für deine neue Sektion an der Stelle ein, an der der Footer erscheinen soll, z.B.:

 

{% section 'custom-footer' %}

 

  • Diese Änderung fügt die neue Sektion in das Layout deiner Webseite ein.

Das ganze speichern und, wie oben gesagt, es in einer Staging-Umgebung zuerst testen, bevor du es auf deiner Live-Website anwendest.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

mastahlb
Tourist
24 0 2

Ich habe nun folgendes gemacht. Zwei neue Dateien namens custom-footer.css.liquid & custom-footer.liquid erstellt.

 

In der Datei custom-footer.css.liquid habe ich deinen Beispielcode eingefügt. Das gleiche habe ich auch für die Datei  custom-footer.liquid gemacht.

 

In der Datei theme.liquid habe ich die zwei Include-Tags eingefügt:

 

<div id="PageContainer" class="page-container">
      <div class="transition-body">
        {%- section 'header' -%}

        <main class="main-content" id="MainContent">
          {{ content_for_layout }}
        </main>

        {%- section 'footer-promotions' -%}
        {%- section 'footer' -%}
        {% section 'custom-footer' %}
      </div>
    </div>

    {% section 'newsletter-popup' %}

    {%- liquid
      render 'video-modal'
      render 'photoswipe-template'
    -%}
    {{ 'custom-footer.css' | asset_url | stylesheet_tag }}
  </body>
</html>

 

Das Ergebnis sieht wie folgt aus:

 

Screenshot_426.png

Gabe
Shopify Staff
18475 2895 4264

Erfolg.

@mastahlb 

 

Das wird also ein Programmierer  👀  müssen, wie oben bereits erwähnt. Das können wir ja hier in der Community nicht.

 

Stelle sicher, dass die CSS-Regeln für die horizontale Anzeige der Listenelemente (li) korrekt und spezifisch genug sind, um alle vorhandenen Stile zu überschreiben. Dein CSS für das horizontale Menü sollte etwa so aussehen:

 

.footer-menu-list {
   display: flex;
   justify-content: center;
   list-style: none;
   padding: 0;
}

.footer-menu-list li {
   margin: 0 15px; /* Adjust the spacing between menu items as needed */
}

 

Stelle ausserdem sicher, dass die Klassennamen, in der custom-footer.liquid Datei mit den Klassennamen übereinstimmen, auf die in deiner CSS-Datei verwiesen wird. Sollte in etwa so aussehen:

 

<footer class="footer-menu">
  <nav>
    <ul class="footer-menu-list">
      <li><a href="/impressum">IMPRESSUM</a></li>
      <li><a href="/versandkonditionen">VERSANDKONDITIONEN</a></li>
      <li><a href="/agb">AGB</a></li>
      <li><a href="/datenschutzerklaerung">DATENSCHUTZERKLÄRUNG</a></li>
    </ul>
  </nav>
</footer>

 

Außerdem sicherstellen, dass das {% section 'custom-footer' %} tag im theme.liquid im Body des HTML-Textes an der Stelle platziert, an der die Fußzeile erscheinen soll.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

mastahlb
Tourist
24 0 2

Ich habe nun folgenden Code im CSS Editor eingepflegt

.footer__collapsible {
  text-align: center; /* Zentriert den Inhalt innerhalb des Containers */
}

.footer__collapsible .site-footer__linklist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  list-style-type: none;
}

.footer__collapsible .site-footer__linklist li {
  margin-right: 20px;
}

.footer__collapsible .site-footer__linklist li:last-child {
  margin-right: 0;
}

Nun werden die Links horizontal angezeigt. Nun müssen die Links nur noch zentriert werden, sodass sie zentral über den Zahlungsmethoden angezeigt werden. Mir wäre es am liebsten, wenn das in den bereits vorhandenen Dateien passiert.

mastahlb
Tourist
24 0 2

Komischerweise bewegen sich die Links etwas nach rechts, wenn ich bei .footer__collapsible display: flex; hinzufüge.