Stylisme de produits dérivés

Le contenu de la page d’accueil

Le contenu de la page d'accueil est construit à l'aide de l'éditeur de blocs WordPress 5, alias Gutenberg. Il n'utilise que des blocs de base et des codes courts Woocmmerce. Et comme on pouvait s'y attendre, un petit CSS a été mis en place.

Aside of the Header Element the entire home page content is built with the Block Editor ( a.k.a. Gutenberg). Combiné avec les styles d’édition de GeneratePress, nous avons maintenant une bien meilleure représentation frontale pendant que nous éditons. Permettre à chaque élément de se voir attribuer des styles spécifiques et des classes CSS supplémentaires signifie que nous n’avons pas besoin de nous plonger très souvent dans le HTML. En fait, sur ce site, nous ne le faisons jamais.

Structure de la page

Commençons par regarder la hiérarchie.

  • Élément d’en-tête – This is covered in this article
  • H2 Headings
  • Catégories de magasins
  • Derniers produits
  • Appel à l’action Row – forty / sixty split
  • Appel à l’action Row – sixty / forty split
  • Produits en vente
  • Sign Up
  • GP Footer – Les widgets du thème par défaut

H2 Headings

Pour notre page d’accueil, je voulais des en-têtes H2 en gros caractères. Plus grand que ce que nous avons spécifié dans notre Customizer. Mais aussi les rendre super réactifs. Pour ce faire, j’ai créé quelques CSS personnalisés en utilisant une Classe CSS supplémentaire de :

large-heading

Il suffit de sélectionner votre bloc d’en-tête, de vous assurer qu’il s’agit d’un H2, d’ouvrir la liste déroulante avancée dans la barre latérale des paramètres et d’ajouter la classe dans le champ Additional CSS Class. Remarque : Vous ne verrez pas le changement de style dans l’éditeur. Comme tout CSS, vous le trouverez dans le Customizer > Additional CSS. Il ressemble à ceci

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Cela semble donc compliqué, mais c’est ce qui fournit les contrôles réactifs. Si vous souhaitez plus d’informations sur ce que tout cela signifie, consultez Responsive And Fluid Typography With vh And vw Units

Catégories de magasins

Construit à l’aide d’un bloc de colonnes défini à deux colonnes. Chaque colonne contient un bloc d’image, de titre, de texte et de lien. Rien de fantaisiste et vraiment simple à éditer. L’ajout de colonnes supplémentaires peut se faire à partir des paramètres de colonne. La création de lignes supplémentaires est simplement un cas de duplication de la ligne existante.

Faire le lien de l’image vers la catégorie

Les paramètres d’image comportent un lien vers l’option. Il suffit de définir le lien à : Custom URL et ajouter votre lien de catégorie

Style de lien personnalisé

Hopefully you noticed the custom style link. Ceci est réalisé à l’aide de CSS personnalisées. Pour ajouter ce style à n’importe lequel de vos liens dans le contenu, il suffit de donner au bloc une Classe CSS supplémentaire de : loud-link

Derniers produits

Après notre bloc de titre, nous ajoutons simplement un shortcode Woocommerce : Recent Products.

Appel à l’action (CTA) Rows

Une fois de plus, le bloc de colonnes entre en jeu. Hors de la boîte, il n’y a aucun moyen d’ajuster les largeurs de colonne. Ainsi, au sein de l’éditeur, vous êtes bloqué avec des colonnes de taille identique. Pour remédier à cela et afficher des colonnes de taille inégale, nous avons ajouté quelques classes CSS simples.

Classe CSS supplémentaireStyle de résultat
forty-sixty-columns a 40% / 60% two column row
sixty-forty-columns a 60% / 40% deux colonnes en ligne
mobile-column-reverse Inverse l’ordre des deux colonnes sur mobile.
Ajoute cette classe à l’une des précédentes.

Attention : ces classes n’appliquent pas les styles au sein de l’éditeur.

Sign Up

Le formulaire d’inscription est fourni par le plugin Happy Forms. Le formulaire est ajouté à la deuxième colonne à l’aide d’un widget Short Code. Le code court de votre formulaire se trouve dans le tableau de bord > Happy Forms. Une conception commune consiste à utiliser ces types de CTA pour couper une page en deux. Pour ce faire, nous lui avons donné notre propre style spécial.

Tout d’abord, nous devons faire en sorte que cette ligne s’étende jusqu’au bord du conteneur (à l’extérieur de la zone de remplissage du contenu). Pour ce faire, il suffit de sélectionner l’option Align Wide dans la barre d’outils Block. Le reste nécessite quelques CSS familiers de nos CTA Rows et un peu d’extra. voici les classes qu’il utilise :

  • sixty-forty-columns
    a 60% / 40% deux colonnes en ligne
  • column-banner
    cela permet de faire des ajustements de rembourrage nécessaires
  • center-vertical
    centrer verticalement tout contenu placé dans l’une des colonnes CTA
  • bg-grey
    Applique la couleur de fond grise

Éditer la forme

Le formulaire peut être édité à partir du tableau de bord > Happy Forms. Si vous créez un nouveau formulaire, vous devrez mettre à jour le code court utilisé sur la page de garde.

Changer la couleur d’arrière-plan des lignes

Allez dans le Customizer > Additional CSS ( ou dans votre feuille de style du thème enfant si vous l’avez déplacée). Et modifie ce CSS :

.bg-grey {
    background-color: #f2f3f4;
}

Vous pouvez bien sûr simplement créer vos propres classes avec des noms plus pertinents pour les couleurs que vous choisissez.

Puis-je utiliser un autre formulaire ?

Of course. Si vous souhaitez utiliser un autre plugin de formulaire, il suffit de le mettre à jour et de remplacer le code court par votre nouveau plugin.

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00