Introduction
Mettons à jour notre site Web en ajoutant une bordure personnalisée à nos images à l'aide du champ CSS personnalisé dans la section bannière d'image. Avec ce code gratuit, vous pouvez facilement afficher une bordure autour de vos images sur mobile. Nous pouvons ajuster le code pour créer une bordure avec votre propre couleur via un code hexadécimal ou un script, et ajuster la largeur de la bordure.
Cette méthode fonctionne pour le thème Shopify Dawn et devrait être compatible avec tout thème incluant des champs CSS personnalisés dans leurs sections Shopify prédéfinies. Naturellement, vous pouvez coller le code au bas de votre base.css sous actifs dans votre éditeur de code. À la toute fin, je vous montrerai comment ajuster notre code pour la couleur et le remplissage de votre choix.
Remarque : c'est ici que je vous dis de sauter le mur de texte suivant et de suivre les images, mais si vous êtes ici pour sortir, lisez la suite ! Il n'y a rien à vendre sur ce blog, c'est gratuit pour vous, nous utilisons des publicités sécurisées pour aider à la maintenance du site Web, donc votre temps ici est valorisé.
Accueillir!
Si vous avez parcouru la collection de Sydney et êtes tombé par hasard sur mes journaux de codes, bienvenue ! Vous vous demandez peut-être pourquoi une marque de commerce électronique et de style de vie propose du code. Eh bien, surprise, cela correspond à la marque ! Nous trouvons toujours des moyens uniques de répandre la positivité. Si vous suivez les réseaux sociaux de Sydney, vous savez que nous aimons offrir des cadeaux gratuits.
Alors non, il ne s'agit pas seulement d'une mini bibliothèque , de décoration intérieure et de bricolage ; c'est une question de style de vie . Considérez ceci comme un message de notre part : il existe des millions de façons de répandre la positivité sans aucun coût pour vous !
Pourquoi un code CSS personnalisé gratuit ?
J'ai reçu plusieurs demandes sur la manière dont j'ai obtenu ce look, j'ai donc décidé qu'il était temps de partager le code avec vous. Bien sûr, c'est gratuit, mais si vous recherchez une conception Web détaillée, envoyez-nous un message et nous pourrons donner vie à votre vision.
Cette tâche est simple : il s’agit d’un simple copier-coller. Je recommande de dupliquer votre thème avant d'apporter des modifications. Une fois que vous êtes satisfait de vos ajouts, vous pouvez les publier.
Comment ajouter une bordure à la section Bannière d'image dans Shopify :
Suivez les images que j'ai fournies pour faciliter le processus. Bien que vous puissiez apporter des ajustements au bureau cible, pour cette entrée de journal, je souhaite me concentrer uniquement sur les ajustements mobiles, car je me contente de la largeur actuelle du bureau.
Étape 1:
Depuis votre administrateur Shopify, sélectionnez le thème que vous souhaitez personnaliser et cliquez sur personnaliser. Comme vous pouvez le voir ci-dessous, nous ne personnalisons pas le thème live (bouton noir). Il est recommandé de cliquer sur ces trois points et de dupliquer le thème, afin que nous puissions travailler sur le back-end et ne pas interférer avec le site en direct. J'aime renommer mes thèmes au fur et à mesure, par exemple, mon thème en direct reçoit un « (ACT) » ajouté au nom « actif », et mon doublon reçoit « (DEV) » pour le développement.
Étape 2:
Dans le menu de votre éditeur de thème sous « Modèle », survolez et la croix bleue apparaîtra avec le texte « ajouter une section », cliquez dessus.
Étape 3:
Dans le menu déroulant, sélectionnez « bannière d'image ».
Les sections incluses avec les sites Web Shopify sont dynamiques dans la mesure où vous pouvez les déplacer sur votre page d'un simple clic et glisser, alors placez votre bannière d'image où vous le souhaitez dans votre modèle.
Étape 4:
Cliquez sur le texte de la bannière de l'image dans l'éditeur (celui illustré ci-dessus) pour accéder au personnalisateur de la section. Faites défiler vers le bas et voyez le menu déroulant pour « CSS personnalisé ».
Étape 5 :
Copiez et collez ce code dans le CSS personnalisé :
| Écran @media et (largeur maximale : 749 px) { .banner__content { box-shadow : 0 0 0 6px encart blanc ; } } |
Faites défiler vers le bas pour obtenir des informations détaillées sur la façon de personnaliser la couleur et la taille.
Étape 6 :
Confirmez vos modifications et cliquez sur ENREGISTRER. Vous verrez maintenant la bordure blanche autour de la section de votre bannière d’image !
Terminé
Vous pouvez maintenant publier votre thème et votre nouvelle bordure de bannière d'image blanche personnalisée sera mise en ligne. Gardez à l’esprit que lorsque vous utilisez le champ CSS personnalisé dans une section, le code n’affectera que les éléments de cette section.
Si vous souhaitez que le code s'applique à toutes les sections de bannière d'image, ajoutez-le aux ressources au bas de votre fichier base.css ou theme.css (par exemple, base.css pour le thème Dawn). Prévisualisez toujours votre thème et confirmez les modifications avant de publier.
Si vous souhaitez apporter des modifications à une bannière d'image spécifique sans utiliser le champ CSS personnalisé, vous pouvez cibler l'élément spécifique et appliquer le même code.
Comment ajuster le code
Séparons ce petit morceau de code, de cette façon, vous pourrez le consulter et apporter les ajustements que vous souhaitez....
|
Écran @media et (largeur maximale : 749 px) { .banner__content { box-shadow : 0 0 0 6px encart blanc ; } } |
@media screen et (max-width: 749px) -> Ceci cible les appareils mobiles, et tout appareil dont l'écran a une largeur inférieure à 749 pixels.
.banner__content -> c'est l'élément que nous ciblons.
box-shadow : 0 0 0 6px encart blanc ; -> 'box-shadow' est notre bordure et 6 pixels est notre largeur par défaut. Nous avons défini la couleur de l'encart sur le blanc. C'est ici que le plaisir commence. Vous pouvez remplacer le mot « blanc » par presque n'importe quel code de couleur hexadécimal pour correspondre au thème et à l'image de marque de votre site Web. Vous pouvez remplacer 6px par la largeur de bordure souhaitée.
Conclusion
Et voilà : votre propre CSS personnalisé pour une bordure autour de la section « Bannière d'image » dans Shopify. Consultez nos blogs DIY et Lifestyle, et n'oubliez pas que nous avons également de superbes cadeaux disponibles. Que vous codiez, créiez ou offriez, tant que vous apportez de la positivité, vous êtes le bienvenu ici chez Sydney.
