Einführung
Aktualisieren wir unsere Website, indem wir unseren Bildern mithilfe des benutzerdefinierten CSS-Felds im Bildbannerbereich einen benutzerdefinierten Rahmen hinzufügen. Mit diesem kostenlosen Code können Sie auf Mobilgeräten ganz einfach einen Rahmen um Ihre Bilder anzeigen. Wir können den Code anpassen, um per Hex-Code oder Skript einen Rahmen mit Ihrer eigenen Farbe zu erstellen, und können die Rahmenbreite anpassen.
Diese Methode funktioniert für das Shopify Dawn-Theme und sollte mit jedem Theme kompatibel sein, das benutzerdefinierte CSS-Felder in seinen vorgefertigten Shopify-Abschnitten enthält. Natürlich können Sie den Code in Ihrem Code-Editor unter „Assets“ unten in Ihre base.css einfügen. Ganz am Ende zeige ich Ihnen, wie Sie unseren Code nach Wunsch an Farbe und Polsterung anpassen können.
Hinweis: Hier rate ich Ihnen, die folgende Textwand einfach zu überspringen und den Bildern zu folgen. Wenn Sie aber hier sind, um abzuhängen, lesen Sie weiter! In diesem Blog gibt es nichts zu verkaufen, er ist für Sie kostenlos. Wir verwenden einige sichere Anzeigen, um die Website-Pflege zu unterstützen. Ihre Zeit hier ist also wertvoll.
Willkommen!
Wenn Sie in Sydneys Sammlung gestöbert und dabei über meine Code-Tagebücher gestolpert sind, herzlich willkommen! Sie fragen sich vielleicht, warum eine E-Commerce- und Lifestyle-Marke Code anbietet. Nun, Überraschung – es passt zur Marke! Wir finden immer einzigartige Wege, um Positivität zu verbreiten. Wenn Sie Sydneys Socials verfolgen, wissen Sie, dass wir gerne kostenlose Geschenke verschenken.
Also nein, es geht nicht nur um ein Mini-Bücherregal , Heimdekoration und Heimwerken; es geht um den Lebensstil . Betrachten Sie dies als eine Botschaft von uns: Es gibt Millionen von Möglichkeiten, positive Stimmung zu verbreiten, ohne dass es Sie etwas kostet!
Warum kostenloser benutzerdefinierter CSS-Code?
Ich habe mehrere Anfragen erhalten, wie ich diesen Look erreicht habe, also habe ich beschlossen, dass es an der Zeit ist, den Code mit Ihnen zu teilen. Natürlich ist das kostenlos, aber wenn Sie ein detailliertes Webdesign suchen, senden Sie uns eine Nachricht und wir können Ihre Vision zum Leben erwecken.
Diese Aufgabe ist unkompliziert: Sie müssen nur kopieren und einfügen. Ich empfehle, Ihr Design zu duplizieren, bevor Sie Änderungen vornehmen. Sobald Sie mit Ihren Ergänzungen zufrieden sind, können Sie sie veröffentlichen.
So fügen Sie dem Bildbannerbereich in Shopify einen Rahmen hinzu:
Folgen Sie den Bildern, die ich bereitgestellt habe, um den Vorgang zu vereinfachen. Obwohl Sie Anpassungen am Zieldesktop vornehmen können, möchte ich mich für diesen Tagebucheintrag nur auf mobile Anpassungen konzentrieren, da ich mit der aktuellen Desktopbreite zufrieden bin.
Schritt 1:
Wählen Sie in Ihrem Shopify-Admin das Design aus, das Sie anpassen möchten, und klicken Sie auf „Anpassen“. Wie Sie unten sehen können, passen wir das Live-Design (schwarzer Button) nicht an. Am besten klicken Sie auf diese drei Punkte und duplizieren das Design, damit wir am Backend arbeiten können und die Live-Site nicht beeinträchtigen. Ich benenne meine Designs gerne nach und nach um. Beispielsweise wird meinem Live-Design ein „(ACT)“ für „aktiv“ hinzugefügt, und mein Duplikat erhält „(DEV)“ für Entwicklung.
Schritt 2:
Bewegen Sie den Mauszeiger in Ihrem Theme-Editor-Menü unter „Vorlage“ und das blaue Kreuz mit dem Text „Abschnitt hinzufügen“ wird angezeigt. Klicken Sie darauf.
Schritt 3:
Wählen Sie aus dem Dropdown-Menü „Bildbanner“ aus.
Die in den Shopify-Websites enthaltenen Abschnitte sind dynamisch, d. h. Sie können sie durch einfaches Klicken und Ziehen auf Ihrer Seite verschieben. Platzieren Sie Ihr Bildbanner also an einer beliebigen Stelle in Ihrer Vorlage.
Schritt 4:
Klicken Sie im Editor auf den Bildbannertext (siehe Abbildung oben), um den Customizer des Abschnitts aufzurufen. Scrollen Sie nach unten und sehen Sie sich das Dropdown-Menü für „Benutzerdefiniertes CSS“ an.
Schritt 5:
Kopieren Sie diesen Code und fügen Sie ihn in das benutzerdefinierte CSS ein:
| @media screen und (max-width: 749px) { .banner__inhalt { Box-Shadow: 0 0 0 6px weißer Einschub; } } |
Scrollen Sie nach unten, um detaillierte Informationen zum Anpassen von Farbe und Größe zu erhalten.
Schritt 6:
Bestätigen Sie Ihre Änderungen und klicken Sie auf SPEICHERN. Sie sehen jetzt den weißen Rahmen um Ihren Bildbannerbereich!
Alles erledigt
Sie können jetzt Ihr Design veröffentlichen und Ihr neuer benutzerdefinierter weißer Bildbannerrahmen wird live geschaltet. Beachten Sie, dass sich der Code bei Verwendung des benutzerdefinierten CSS-Felds innerhalb eines Abschnitts nur auf Elemente innerhalb dieses Abschnitts auswirkt.
Wenn der Code auf alle Bildbannerabschnitte angewendet werden soll, fügen Sie ihn den Assets am Ende Ihrer base.css- oder theme.css-Datei hinzu (z. B. base.css für das Dawn-Design). Zeigen Sie Ihr Design immer in der Vorschau an und bestätigen Sie die Änderungen, bevor Sie es veröffentlichen.
Wenn Sie Änderungen an einem bestimmten Bildbanner vornehmen möchten, ohne das Feld „Benutzerdefiniertes CSS“ zu verwenden, können Sie das bestimmte Element ansprechen und denselben Code anwenden.
So passen Sie den Code an
Lassen Sie uns diesen kleinen Codeausschnitt auseinandernehmen, damit Sie ihn überprüfen und alle gewünschten Anpassungen vornehmen können …
|
@media screen und (max-width: 749px) { .banner__inhalt { Box-Shadow: 0 0 0 6px weißer Einschub; } } |
@media screen und (max. Breite: 749px) -> Dies zielt auf Mobilgeräte und alle Geräte ab, deren Bildschirmbreite weniger als 749 Pixel beträgt.
.banner__content -> dies ist das Element, auf das wir abzielen.
box-shadow: 0 0 0 6px weißer Einschub; -> „box-shadow“ ist unser Rahmen und 6 Pixel ist unsere Standardbreite. Wir haben die Einschubfarbe auf Weiß eingestellt. Hier beginnt der Spaß. Sie können das Wort „weiß“ durch fast jeden Hex-Farbcode ersetzen, der zum Design und Branding Ihrer Website passt. Sie können 6px durch die gewünschte Rahmenbreite ersetzen.
Abschluss
Da haben Sie es – Ihr ganz eigenes benutzerdefiniertes CSS für einen Rahmen um den Abschnitt „Bildbanner“ in Shopify. Sehen Sie sich unsere DIY- und Lifestyle-Blogs an und vergessen Sie nicht, dass wir auch tolle Geschenke im Angebot haben. Egal, ob Sie programmieren, kreieren oder verschenken, solange Sie positive Stimmung verbreiten, sind Sie bei Sydney's willkommen.
