En dehors de l’élément d’en-tête, tout le contenu de la page d’accueil est construit avec l’éditeur de blocs (Gutenberg). Combiné avec les styles de l’éditeur GeneratePress, nous avons maintenant une bien meilleure représentation de l’avant 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 dans le HTML très souvent. 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 de gros en-têtes H2 en gras. Plus larges que ce que nous avons spécifié dans notre Customizer. Mais aussi les rendre super réactifs. Pour ce faire, j’ai créé un CSS personnalisé 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 le menu déroulant Avancé dans la barre latérale des paramètres et d’ajouter la classe au champ Additional CSS Class. Notez que 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 responsive. Si vous voulez plus d’informations sur ce que tout cela signifie, consultez Responsive And Fluid Typography With vh And vw Units
Catégories de magasins
Construit en utilisant un bloc de colonnes défini à deux colonnes. Chaque colonne contient un bloc d’image, d’en-tête, 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 la colonne. Créer des 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 ont un lien vers l’option. Il suffit de définir le lien vers : URL personnalisée et ajoutez le lien de votre catégorie.
Style de lien personnalisé
Vous avez peut-être remarqué le lien de style personnalisé. Ceci est réalisé en utilisant des CSS personnalisés. 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 Colonnes entre en jeu. Hors de la boîte, il n’y a aucun moyen d’ajuster la largeur des colonnes. Ainsi, dans l’éditeur, vous êtes bloqué avec des colonnes de taille égale. Pour remédier à cela et afficher des colonnes de taille inégale, nous avons ajouté quelques classes CSS simples.
| Classe CSS supplémentaire | Style de résultat |
| forty-sixty-columns | a 40% / 60% deux colonnes en ligne |
| sixty-forty-columns | a 60% / 40% deux colonnes en ligne |
| mobile-column-reverse | Inverser l’ordre des deux colonnes sur mobile. Ajoutez cette classe avec l’une de celles qui précèdent. |
Veuillez noter : 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 de code court. Le code court pour votre formulaire se trouve dans le tableau de bord > Happy Forms. Une conception commune est d’utiliser ces types de CTA pour casser une page. 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 cela, 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 plus. Voici les classes qu’il utilise :
- sixty-forty-columns
a 60% / 40% two column row - column-banner
ce qui rend les ajustements de padding nécessaires - center-vertical
centre verticalement tout contenu placé dans l’une des colonnes du CTA - bg-grey
Apporte la couleur de fond grise
Édition de 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.
Modifier 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 modifiez 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 ?
Bien entendu. Si vous souhaitez utiliser un autre plugin de formulaire, il vous suffit de le mettre à jour et de remplacer le code court par votre nouveau plugin.
