Temps nécessaire : 15 minutes.
Cette boîte d’affiliation a été créée sur un site qui n’a pas de barre latérale et la disposition du conteneur de messages est définie sur 1200 pixels.
Si vous avez déjà une barre latérale, choisissez une mise en page large avec une barre latérale, à partir du personnalisateur de thème et réduisez la taille de la police du texte dans la zone d’affiliation. Ainsi, vous pouvez tout intégrer dans la bannière d’affiliation sous 800 pixels.
N’oubliez pas que nous allons créer une mise en page à 3 colonnes dans cette boîte d’affiliation, donc 800 pixels est la mise en page minimale dont vous aurez besoin. Je vais travailler sur une mise en page de 900 pixels.
Le premier bloc pour commencer est le bloc Kadence Row Layout. Insérez ce bloc et choisissez 1 colonne.
La boîte d’affiliation entière va s’asseoir dans ce bloc de disposition de rangée.
Par défaut, deux éléments sont fournis avec chaque bloc de disposition de rangée de blocs Kadence ;
1. Le rembourrage supérieur et inférieur est défini sur 25 pixels.
2. Chaque bloc de mise en page de ligne contient un bloc Section.
Sous Paramètres de structure du bloc Disposition des lignes, définissez la largeur maximale du contenu personnalisé sur 900 pixels.
Dans l’étape suivante, nous allons insérer un autre bloc de disposition de ligne et donner une bordure à ce bloc.
Pour l’instant, vous devez personnaliser la largeur maximale du contenu du bloc de mise en page de la ligne externe et ajouter une ombre de boîte à son bloc de section.
Pour appliquer une largeur maximale de contenu personnalisée à un bloc de disposition de ligne Kadence, accédez aux paramètres de structure et ajoutez une largeur maximale de contenu personnalisé de 900 pixels.
Pour donner l’ombre de la boîte à la section, cliquez sur le bloc de section (sous le bloc de mise en page de la rangée extérieure), allez dans Styles de bordure >> Ombre de la boîte >> ajoutez la couleur # CA2C68
Insérez un autre bloc de disposition de ligne Kadence sous le bloc de section du bloc de disposition de ligne externe.
Cela n’est pas nécessaire pour les sites Web qui fonctionnent avec des barres latérales.
En fait, ma mise en page est de 1200 pixels et je n’ai pas de barre latérale. Par conséquent, pour donner un aspect plus étroit à une mise en page normale, j’ai personnalisé la largeur maximale de ma mise en page extérieure à 900 pixels à l’étape précédente.
Ce bloc de mise en page de la rangée intérieure comprendra tous les éléments nécessaires à la création de la boîte du produit affilié.
La personnalisation effectuée sur ce bloc de disposition de ligne est la suivante ;
Largeur de bordure – 4 pixels au total
Couleur de bordure – CA2C68
Rembourrage supérieur – 25 pixels
Rembourrage inférieur – 5 pixels
Cliquez sur le bloc de section de notre bloc de disposition de ligne interne principal et ajoutez un autre bloc de disposition de ligne de 1 colonne, pour placer le titre du produit.
Personnalisez le bloc de disposition des lignes comme ci-dessous ;
Rembourrage droit – 20 pixels
Rembourrage inférieur – 25 pixels
Remplissage gauche – 20 pixels
Largeur de la bordure inférieure – 2 pixels
Couleur de bordure – CA2C68
Cliquez ensuite sur la section de ce bloc de disposition de ligne, ajoutez un bloc de texte avancé Kadence et changez la balise en paragraphe.
Vous ne voulez pas que des titres dans la boîte d’affiliation gâchent le référencement de votre page ou de votre publication.
En outre, alignez le texte au centre, mettez-le en gras, modifiez la taille et la couleur de la police.
Personnaliser le bloc Texte avancé de la section ;
Balise – Balise de paragraphe
Alignement du texte – Centre
Style de police – Gras
Taille de la police – 32 pixels
Couleur de police – CA2C68
Nous devons concevoir une section à deux colonnes contenant la description du produit.
Une colonne contiendra l’étiquette ‘Description’ et l’autre contiendra la description réelle.
Pour cela, vous devez cliquer sur le bloc Section du bloc de disposition de ligne interne et ajouter un autre bloc de disposition de ligne de 2 colonnes.
Nous avons besoin que la première section occupe 25% de la largeur de la mise en page et la deuxième section devrait être de 75%
Par défaut, vous n’obtenez pas cette option dans les paramètres de droite.
Par conséquent, cliquez sur le redimensionneur de section, changez-le en redimensionnement fluide et réglez-le manuellement sur 25/75.
Paramètres du bloc Disposition des lignes ;
Rembourrage supérieur – 25 pixels
Rembourrage droit – 20 pixels
Rembourrage inférieur – 25 pixels
Remplissage gauche – 20 pixels
Comme vous pouvez déjà le voir à l’étape précédente, il y a deux sections.
Commençons à travailler sur les deux sections une par une.
Pour différencier les deux sections, j’ai donné une bordure droite et une hauteur minimale.
Personnalisation de la section ;
Hauteur minimale – 110 pixels
Bordure droite – 2 pixels
Couleur de bordure – CA2C68
Pour donner l’étiquette ‘Description’, nous avons juste besoin d’un bloc de texte avancé. Ainsi, dans cette section, ajoutez le bloc de texte avancé du bloc Kadence.
Définissez la balise sur paragraphe, alignez le texte au centre, donnez un rembourrage supérieur, modifiez sa taille de police et sa couleur.
Personnalisation du bloc de texte avancé dans la section ;
Balise – Balise de paragraphe
Alignement du texte – Centre
Rembourrage supérieur – 40 pixels
Taille de la police – 22 pixels
Couleur de police – CA2C68
Dans la vue de liste, cliquez sur le bloc de section suivant et insérez un bloc de paragraphe Gutenberg normal.
Réduisez également la taille de la police à 18 pixels.
Dans la vue de liste, dupliquez le bloc de disposition de ligne ci-dessus et augmentez les colonnes de 2 à 3.
Puisque vous avez 3 colonnes, vous devrez ajuster le redimensionneur de colonne.
Ajustez-le de manière à ce que la bordure droite de la première section soit directement alignée avec la bordure droite de la section ci-dessus.
Modifiez également la hauteur minimale de la première section à 140 pixels.
Pour écrire les fonctionnalités du produit, utilisez le bloc Kadence Icon List.
Dans la vue de liste, cliquez sur la deuxième section et ajoutez un bloc de liste d’icônes. Écrivez 3 à 4 points dans chaque section.
Sous Liste des icônes, accédez à Modifier tous les styles d’icônes ensemble et modifiez la taille et la couleur des icônes. Faites cela pour les deux blocs de la liste d’icônes.
Aussi, alignez les icônes en haut, sous les contrôles de liste
Personnalisation de la liste des icônes ;
Taille de la liste d’icônes – 17 pixels
Couleur de la liste des icônes – CA2C68
Icône Aligner – Haut
Cliquez sur le bloc de disposition de ligne ci-dessus pour dupliquer un autre bloc de disposition de ligne Kadence.
Ce bloc contiendra également 3 colonnes (sections), la première section affichant l’étiquette “Galerie”, et les deux autres sections affichant des images de produits.
Changez le texte dans la première section de “Spécifications” à “Galerie”
Vous devrez également modifier le rembourrage de la disposition des lignes.
Rembourrage de la disposition des lignes ;
Rembourrage supérieur – 10 pixels
Rembourrage droit – 20 pixels
Rembourrage inférieur – 5 pixels
Remplissage gauche – 20 pixels
Très bien, dans les deux sections suivantes, vous devrez insérer des images de produits.
Cliquez sur la section suivante dans la vue de liste et sélectionnez le bloc Kadence Advanced Image. De plus, téléchargez l’image du produit concerné et répétez la même chose pour la section suivante.
Dupliquez le bloc de disposition des lignes ci-dessus, mais cette fois, accédez à la zone de disposition des colonnes et choisissez 3 colonnes égales.
Videz les blocs Section. Cela signifie supprimer le bloc de texte avancé de la section 1 et le bloc d’image avancé des sections 2 et 3.
Supprimez la hauteur minimale et la bordure droite de la section 1.
Effectuez la personnalisation suivante sur le bloc de disposition de ligne ;
Largeur de gouttière de colonne – 10 pixels
Rembourrage supérieur – 25 pixels
Rembourrage inférieur – 25 pixels
Bordure supérieure – 2 pixels
Couleur de bordure – CA2C68
Accédez à chaque section et ajoutez un rembourrage de 20 pixels pour les côtés droit et gauche.
Cliquez sur la 1ère section, insérez un bloc Kadence Advanced Button et tapez ‘Check on Amazon’. Appliquez également une icône.
Nous personnaliserons la taille de la police du bouton, les couleurs normales, les couleurs de survol, la bordure, etc.
Paramètres des boutons ;
Taille de la police – 19 pixels
Largeur du bouton – Complète
Paramètres de couleur normaux
Couleur du texte – FFFFFF
Couleur de fond – F33B19
Couleur de la bordure – F33B19
Paramètres de couleur de survol
Couleur du texte – F33B19
Couleur de fond – FFFFFF
Couleur de la bordure – F33B19
Ombre de la boîte de survol – F33B19 avec 0,75 alpha | X:2, Y:2, Flou:3, Spread:0
Largeur de bordure – 3 pixels
Rayon de bordure – 5 pixels
Cliquez sur la 2ème section, insérez un bloc Kadence Advanced Button et tapez ‘Check on Walmart’. Appliquez également la même icône Kadence.
Copiez les paramètres ci-dessous.
Paramètres des boutons ;
Taille de la police – 19 pixels
Largeur du bouton – Complète
Paramètres de couleur normaux
Couleur du texte – FFFFFF
Couleur de fond – 2B348E
Couleur de la bordure – 2B348E
Paramètres de couleur de survol
Couleur du texte – 2B348E
Couleur de fond – FFFFFF
Couleur de la bordure – 2B348E
Hover box shadow – 2B348E avec 0,75 alpha | X:2, Y:2, Flou:3, Spread:0
Largeur de bordure – 3 pixels
Rayon de bordure – 5 pixels
Il s’agit de la dernière étape de la création d’une belle boîte d’affiliation multi-réseaux à l’aide de blocs Kadence avec description, fonctionnalités et images de produits.
Cliquez sur la 3ème section, insérez de la même manière un bloc Kadence Advanced Button et tapez “Check on eBay”. De plus, donnez la bonne icône.
Copiez les paramètres ci-dessous.
Paramètres des boutons ;
Taille de la police – 19 pixels
Largeur du bouton – Complète
Paramètres de couleur normaux
Couleur du texte – FFFFFF
Couleur de fond – 419E21
Couleur de la bordure – 419E21
Paramètres de couleur de survol
Couleur du texte – 419E21
Couleur de fond – FFFFFF
Couleur de la bordure – 419E21
Hover box shadow – 419E21 avec 0,75 alpha | X:2, Y:2, Flou:3, Spread:0
Largeur de bordure – 3 pixels
Rayon de bordure – 5 pixels