DIY-Website-Upgrades mit Sydney
Wie Sie wissen, begann diese Website als Hobby und entwickelte sich schnell zu einem Vollzeitbetrieb. Auf meiner Website werden meine Originalkreationen, trendige Artikel , Kleidung und Dekorationen vorgestellt. Dabei habe ich jede Menge darüber gelernt, wie man Code im „Backend“ anpasst, um unseren sich ständig weiterentwickelnden Stil zu kreieren. Freestylen mit CSS, HTML und JS erfordert eine Lernkurve, kann aber mit der Zeit und viel Geduld erreicht werden. Deshalb habe ich es Ihnen leicht gemacht. Lassen Sie uns einen Schritt aus unserem regulären Programmplan heraustreten, ihn verkleinern und etwas, nun ja, programmieren.
Kostenloser benutzerdefinierter Shopify-Code?!
Einige haben nach Sonderanfertigungen gefragt und angeboten, meine Webdesign-Dienste zu bezahlen. Ich fühle mich geschmeichelt und werde dies als Gelegenheit nutzen, die Regeln von Sydney's Collection zu befolgen. Es ist nur angemessen, dass wir positive Stimmung verbreiten, indem wir Ihnen einen kostenlosen benutzerdefinierten Shopify-Bereich zur Verfügung stellen! Es ist sehr unkompliziert und ich freue mich darauf, meinen Blogs weitere Beiträge wie diesen hinzuzufügen.
Bildbanner mit Video
Der benutzerdefinierte Shopify-Abschnitt, den ich Ihnen gebe, ist fantastisch! Sie können damit ein sich wiederholendes Videobanner, einen Titel (H1), eine Beschreibung und Schaltflächen hinzufügen. Das Beste daran ist, dass sich der Code automatisch an die Ansichten auf Mobilgeräten, Desktops und Tablets anpasst. Dies ist ein vollständiger Abschnitt. Wir werden keine vorhandenen Abschnitte bearbeiten und riskieren, etwas zu beschädigen. Wenn Sie Probleme mit diesem Code haben, können Sie einfach später darauf zurückkommen. Der Abschnitt muss nicht hinzugefügt werden, aber er ist verfügbar, wenn Sie ihn verwenden möchten. Allerdings funktioniert dieser Abschnitt seit dem 1. Juni 2024 einwandfrei und ist seit Anfang 2023 implementiert.
Anpassungsoptionen
Nach der Implementierung sehen Sie, dass der Abschnitt Optionen für den Videolink, den Titel, die Beschreibung und das Titelbild enthält (ignorieren Sie dies, für das Video ist kein Titelbild erforderlich, da es automatisch gestartet wird). Wir können auch die Textfarbe und die Schaltflächenfarben anpassen. Wählen Sie den Bereich „Benutzerdefiniertes CSS“, um Ihre eigenen benutzerdefinierten Stile wie die Schriftartanpassung hinzuzufügen. z. B.
H1 {Schriftgröße: 40px}
Dadurch wird die Schriftgröße Ihres Titels geändert.
Benutzerdefinierter Code für Videobanner
Wählen Sie in Ihrem Shopify-Admin das Design aus, das Sie anpassen möchten, klicken Sie auf die drei Punkte und wählen Sie „ Code bearbeiten “. Wählen Sie im Menü auf der linken Seite „ Abschnitte “, um das Dropdown-Menü zu öffnen. Klicken Sie auf „ Neuen Abschnitt hinzufügen “. Ein Popup wird angezeigt, in dem Sie nach einem Titel gefragt werden. Nennen Sie den Abschnitt „ custom-video-banner “. Verwenden Sie keine Leerzeichen, sondern „-“. Behalten Sie den Abschnitt als „ .liquid “. Klicken Sie auf „Weiter“.
Im neuen Abschnitt wird es Standardcode geben. Sie können ihn einfach markieren und löschen. Der Code, den ich Ihnen gebe, ersetzt ihn. Hier ist der Code. Kopieren Sie ihn, fügen Sie ihn in den leeren Abschnitt ein und klicken Sie dann auf „Speichern“ :
| {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% if block.type == 'video' %} <div class="videoBox" style=" {%- if block.settings.video_link == blank -%} Hintergrundbild: URL(' {{ block.settings.video_image | img_url: 'master' }} '); {%- endif -%} "> {%- if block.settings.video_link != blank -%} <div Klasse="Vollbild-Video-Wrap"> <video class="video-js" loop automatische Wiedergabe preload="none" stummgeschaltet spielt inline poster="https: {{ block.settings.video_image | img_url: 'master' }} "> <source src=" {{ block.settings.video_link }} " Typ="video/mp4"> </video> </div> {% endif %} <div Klasse="videoBoxInfo"> {% if block.settings.title != blank %} <h1 Klasse = "videoBoxInfoTitle" Stil = "Farbe: {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { Farbe: {{ block.settings.color_text }} !wichtig; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="color: {{ block.settings.color_text }} "> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_link }} {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% else %} <div Klasse = "imageBox" Stil = "Hintergrundfarbe: {{ block.settings.color_bg }} ; {%- if block.settings.image_bg != blank -%} Hintergrundbild: URL (' {{ block.settings.image_bg | img_url: 'master' }} '); {%- endif -%} "> <div Klasse="imageBoxInfo"> {% if block.settings.title != blank %} <h1 Klasse = "imageBoxInfoTitle" Stil = "Farbe: {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { Farbe: {{ block.settings.color_text }} !wichtig; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="color: {{ block.settings.color_text }} "> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_link }} {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% endif %} {%- endfor -%} {% else %} <div Klasse="placeholderNoblocks"> Dieser Abschnitt enthält derzeit keinen Inhalt. Über die Seitenleiste können Sie diesem Abschnitt Inhalt hinzufügen. </div> {%- endif -%} <Stil> .Hauptinhalt .videoHintergrund { Rand oben: -55px; } .videoHintergrund { Position: relativ; } .videoHintergrund .fullscreen-video-wrap { Position: absolut; oben: 0; links: 0; Mindestbreite: 100 %; Breite: 100 %; Höhe: 100%; Überlauf versteckt; } .videoBackground .fullscreen-video-wrap .video-js { Position: absolut; oben: 0; links: 0; Mindesthöhe: 100 %; Mindestbreite: 100 %; Breite: 100 %; Höhe: 100%; Objekt-Fit: Abdeckung; } .videoBackground .fullscreen-video-wrap video { Mindesthöhe: 100 %; Mindestbreite: 100 %; Objekt-Fit: Abdeckung; } .videoHintergrund .videoBox { Anzeige: Flex; Elemente ausrichten: zentrieren; Inhalt ausrichten: Flex-Ende; Flex-Richtung: Spalte; Polsterung: 100px 20px 80px; Hintergrundgröße: Abdeckung; Hintergrundposition: Mitte; Hintergrundwiederholung: keine Wiederholung; Mindesthöhe: 500px; maximale Höhe: 800px; Höhe: berechnet (100vh – 165px); Position: relativ; } .videoHintergrund .imageBox { Anzeige: Flex; Elemente ausrichten: zentrieren; Inhalt ausrichten: Flex-Ende; Flex-Richtung: Spalte; Polsterung: 100px 20px 80px; Hintergrundgröße: Abdeckung; Hintergrundposition: Mitte; Hintergrundwiederholung: keine Wiederholung; Position: relativ; Mindesthöhe: berechnet (100vh – 165px); Höhe: automatisch; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { Z-Index: 2; Rand: automatisch; Textausrichtung: zentriert; } .videoHintergrund .overlay { Inhalt: ""; Position: absolut; oben: 0; rechts: 0; unten: 0; links: 0; Hintergrund: #000; Z-Index: 1; } .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn { -moz-Benutzerauswahl: keine; -ms-user-select: keine; -webkit-Benutzerauswahl: keine; Benutzerauswahl: keine; -webkit-auftritt: keines; -moz-Aussehen: keines; Aussehen: keines; Anzeige: Inline-Block; Breite: automatisch; Textdekoration: keine; Textausrichtung: zentriert; vertikale Ausrichtung: Mitte; Cursor: Zeiger; Rand: 1px durchgehend transparent; Rahmenradius: 2px; Polsterung: 10px 30px; Schriftstil: normal; Schriftstärke: normal; Buchstabenabstand: 0,06em; Leerzeichen: normal; Schriftgröße: 16px; Rand oben: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { Farbe: #FFF; Schriftgröße: 65px; Zeilenhöhe: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { maximale Breite: 500px; Rand: 0 automatisch; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { Schriftgröße: 17px; Zeilenhöhe: 28px; } .videoBackground .placeholderNoblocks { Textausrichtung: zentriert; maximale Breite: 500px; Rand: 0 automatisch; } @media screen und (max-width: 767px) { .Hauptinhalt .videoHintergrund { Rand oben: -35px; } .videoHintergrund .fullscreen-video-wrap { Z-Index: 3; } .videoHintergrund .videoBox { Mindesthöhe: 300px; Höhe: 100%; Position: relativ; Polsterung: 0; } .videoHintergrund .fullscreen-video-wrap { Position: relativ; Mindesthöhe: 300px; z-Index: -2; } .videoHintergrund .videoBoxInfo { Polsterung: 2px 20px; Breite: 100 %; } </Stil> {% schema %} { "Name": { "de": "Videohintergrund" }, "Klasse": "Videohintergrund", "max_blocks": 1, "Blöcke": [ { "Typ": "Video", "Name": "Video", "Einstellungen": [ { "Typ": "URL", "id": "Videolink", "Etikett": { "de": "Videolink" } }, { "Typ": "Bildauswahl", "id": "Videobild", "Etikett": { "de": "Titelbild" } }, { "Typ": "Header", "Inhalt": { "en": "Text" } }, { "Text eingeben", "id": "Titel", "Etikett": { "de": "Überschrift" }, "Standard": "Video-Folie" }, { "Typ": "Richtext", "id": "Text", "Etikett": { "de": "Beschreibung" }, "Standard": { "de": "<p>Verwenden Sie diesen Text, um Ihren Kunden Informationen über Ihre Marke mitzuteilen. Beschreiben Sie ein Produkt, teilen Sie Ankündigungen mit oder heißen Sie Kunden in Ihrem Geschäft willkommen.</p>" } }, { "Typ": "Farbe", "id": "Farbtext", "Etikett": { "de": "Textfarbe" }, "Standard": "#ffffff" }, { "Text eingeben", "id": "Schaltflächenbezeichnung", "Etikett": { "de": "Schaltflächenbeschriftung" } }, { "Typ": "URL", "id": "Schaltflächenlink", "Etikett": { "de": "Button-Link" } }, { "Typ": "Farbe", "id": "Farbe_btn_bg", "Etikett": { "de": "Hintergrundfarbe der Schaltfläche" }, "Standard": "#ffffff" }, { "Typ": "Farbe", "id": "Farbe_BTN_Text", "Etikett": { "de": "Schaltflächentextfarbe" }, "Standard": "#ffffff" } ] }, { "Typ": "Bild", "Name": "Bild", "Einstellungen": [ { "Typ": "Farbe", "id": "Farbe_Hintergrund", "Etikett": { "en": "Hintergrundfarbe (optional)" }, "Standard": "#16165b" }, { "Typ": "Bildauswahl", "id": "image_bg", "Etikett": { "en": "oder verwenden Sie ein Bild (erforderlich)" } }, { "Typ": "Bereich", "id": "Overlay_Deckkraft", "Etikett": { "de": "Overlay-Deckkraft" }, "min": 0, "max": 99, "Schritt 1, "Einheit": { "de": "%" }, "Standard": 0 }, { "Typ": "Header", "Inhalt": { "en": "Text" } }, { "Text eingeben", "id": "Titel", "default": "Bildfolie", "Etikett": { "de": "Überschrift" } }, { "Typ": "Richtext", "id": "Text", "Etikett": { "de": "Beschreibung" }, "Standard": { "de": "<p>Verwenden Sie diesen Text, um Ihren Kunden Informationen über Ihre Marke mitzuteilen. Beschreiben Sie ein Produkt, teilen Sie Ankündigungen mit oder heißen Sie Kunden in Ihrem Geschäft willkommen.</p>" } }, { "Typ": "Farbe", "id": "Farbtext", "Etikett": { "de": "Textfarbe" }, "Standard": "#ffffff" }, { "Text eingeben", "id": "Schaltflächenbezeichnung", "Etikett": { "de": "Schaltflächenbeschriftung" } }, { "Typ": "URL", "id": "Schaltflächenlink", "Etikett": { "de": "Button-Link" } }, { "Typ": "Farbe", "id": "Farbe_btn_bg", "Etikett": { "de": "Hintergrundfarbe der Schaltfläche" }, "Standard": "#ffffff" }, { "Typ": "Farbe", "id": "Farbe_BTN_Text", "Etikett": { "de": "Schaltflächentextfarbe" }, "Standard": "#ffffff" } ] } ], "Voreinstellungen": [ { "Name": { "de": "Videohintergrund" }, "Kategorie": { "de": "Haupt" }, "Blöcke": [ { "Typ": "Video" } ] } ] } {% endschema %} |
Abschnitt hinzugefügt!
Tolle Arbeit, Teil eins von zwei ist nun abgeschlossen. Die letzte Zeile sollte Zeile 854 sein. Sie können den Code testen, indem Sie Ihren Videolink hinzufügen. Am besten geht das, indem Sie Ihr Video in Ihren „Inhalt“ -> „Dateien“ im Shopify-Admin hochladen. Von dort aus können Sie einfach den Videolink kopieren und in diesen neuen Abschnitt einfügen.
Fügen Sie es Ihrem Design hinzu
Klicken Sie im Code-Editor auf die drei Punkte und wählen Sie „Design anpassen “. Klicken Sie im Menü auf der linken Seite auf „ Abschnitt hinzufügen “ und wählen Sie den Abschnitt „ Videohintergrund “ aus. Sie haben ihn zu Ihrem Design hinzugefügt und können ihn jetzt beliebig platzieren und auch anpassen. Das Video wird in einer Schleife abgespielt.
Anpassung für Mobilgeräte
Wir sind fast fertig, aber wie Sie sehen, wird das Video nur auf der Desktop-Größe richtig angezeigt und auf dem Handy nicht. Sie können dies überprüfen, indem Sie in Ihrem Theme-Customizer auf die Option „Mobile Ansicht“ klicken. Der Abschnitt ist fast fertig, aber der Titel und die Schaltflächen werden nicht angezeigt. Fügen wir sie hinzu!
Um diese Anpassung vorzunehmen, fügen wir einfach einen kleinen Codeabschnitt zu unserer „base.css“ hinzu. Wo ist „base.css“? Folgen Sie den gleichen Schritten, die wir verwendet haben, um die „Abschnitte“ zu finden. Wählen Sie in Ihrem Shopify-Admin das Design aus, das Sie anpassen möchten, klicken Sie auf die drei Punkte und wählen Sie „Code bearbeiten“ . Wählen Sie im Menü auf der linken Seite „Assets“ , um das Dropdown-Menü zu öffnen. Wählen Sie „base.css“ , um den Code zu öffnen. Scrollen Sie ganz nach unten in der Datei, fügen Sie Folgendes ein und klicken Sie dann auf „Speichern“:
| @media screen und (max-width: 767px) {
.videoHintergrund .videoBox { Polsterung: 100px 20px 80px !wichtig; } .videoHintergrund .fullscreen-video-wrap { Position: absolut !wichtig; z-index: 1 !wichtig; } .videoHintergrund .videoBoxInfo { Polsterung: 10px !wichtig; } } |
Code abgeschlossen
Gut gemacht. Jetzt können Sie auf „Vorschau“ klicken und Ihren neuen benutzerdefinierten Videobannerabschnitt überprüfen, die Schaltflächen testen, herumblättern und bestätigen, dass er wie versprochen funktioniert. Wenn Sie Google Chrome verwenden, klicken Sie mit der rechten Maustaste auf den Browser, wählen Sie „Überprüfen“, passen Sie die Bildschirmgröße an die mobile Version an und sehen Sie sich die Magie an. Der Abschnitt ändert die Abschnittsgröße automatisch für mobile Betrachter.
Warum gebe ich einen kostenlosen Code weiter?
Ich bin weder mit Shopify verbunden noch werde ich von Shopify bezahlt und habe in diesem Blog keine anderen Marken beworben als meine eigenen. Warum also verschenke ich einen kostenlosen Code? Warum nicht?! Ich habe es schon einmal gesagt und ich sage es noch einmal: Ich bin aus einem Grund hier, nämlich um meine Plattform zu nutzen, um positive Stimmung zu verbreiten. So einfach ist das wirklich. Sie haben die Schritte befolgt, den Abschnitt erstellt und schließlich auf „Veröffentlichen“ geklickt. Es hat funktioniert und Sie hatten dieses Gefühl. Sie haben ausgeatmet, aufgeschaut und „JAAAAA“ gesagt … Das, mein Freund, ist der Grund, warum ich es getan habe.
Irgendwelche Fragen?
Geben Sie gerne einen Kommentar ab oder senden Sie mir eine Nachricht an info@sydneyscolleciton.com.
Hinweis: Einige Telefone können das Video nicht abspielen, wenn sie sich im Energiesparmodus befinden, da dieser die Darstellung größerer Dateien blockiert.
Eine kurze Anmerkung zu CSS
Haben Sie sich schon einmal gefragt, warum wir Sie immer bitten, ganz nach unten in einem CSS-Abschnitt zu scrollen, um Code hinzuzufügen? CSS steht für „Cascading Style Sheet“ und ermöglicht, dass der neueste Code (ganz unten hinzugefügt) der primäre Code für die eingegebenen Informationen ist. Wenn Sie beispielsweise denselben Code zweimal hinzufügen und die Informationen im neuen Code anpassen, hat dieser Vorrang; der neueste Code wird immer implementiert, es sei denn, das Element wurde bereits mit „!important“ angesprochen. Seien Sie daher vorsichtig, wenn Sie Ihrem Code „!important“ hinzufügen. „!important“ zwingt den Code, der primäre Code für das ausgewählte Element zu bleiben, unabhängig davon, was als Nächstes hinzugefügt wird. Wir haben mit diesem Code einen bestimmten Abschnitt angesprochen, also machen wir uns keine Sorgen über unsere „!important“-Überschreibungen hier. Je mehr Sie wissen, desto mehr wissen Sie.
