L'une des pages de destination exclusives que nous vous proposons en tant que membres à vie et nouveaux clients du Black Friday cette année est la superbe page de destination du kit d'interface utilisateur. Cette mise en page contient certaines des meilleures combinaisons de conception intégrées de Divi et des maquettes de haute qualité qui feront passer votre site Web au niveau supérieur. Dans cet article, nous allons vous montrer comment mettre la main dessus et l'utiliser efficacement.

Si vous êtes un client à vie actuel ou si vous avez acheté un nouveau compte ou mis à niveau lors de notre vente Black Friday, vous pouvez télécharger cette mise en page dès maintenant.

Obtenez la page de destination exclusive du kit d'interface utilisateur Black Friday

Avant d'entrer dans ce cas d'utilisation, vous devrez mettre la main sur la page de destination exclusive du kit d'interface utilisateur Black Friday que vous pouvez obtenir en devenant un nouveau membre Elegant Themes, en mettant à niveau votre compte existant ou en étant déjà membre à vie avec nous. Si vous êtes effectivement déjà membre à vie, vous pouvez vous connecter à notre espace membre et télécharger toutes nos pages de destination exclusives ici. Tout le monde devra utiliser le bouton ci-dessous pour acheter ou mettre à niveau avant de pouvoir suivre le reste de notre didacticiel.

Réclamez l'accord avant qu'il ne disparaisse !

Utiliser les structures de colonnes de Divi pour répertorier magnifiquement les produits et les fonctionnalités

Pour le reste de cet article, nous supposerons que vous avez profité de notre offre Black Friday ou que vous êtes déjà membre à vie et que vous avez accès à la page de destination du kit d'interface utilisateur Black Friday.

Une fois que vous avez téléchargé la nouvelle page de destination du kit d'interface utilisateur à partir de notre espace membres, vous pouvez regarder la vidéo ci-dessous pour voir à quel point il est facile à configurer. Nous vous encourageons également à suivre ce didacticiel pour préparer votre site à une personnalisation plus poussée.

Dans cet article de cas d'utilisation, nous allons vous montrer comment répertorier de manière époustouflante vos fonctionnalités et/ou produits à l'aide des nouvelles structures de colonnes de Divi. La conception que nous allons gérer est superbe avec la page de destination du kit d'interface utilisateur et vous permet d'utiliser l'espace sur votre page de manière efficace et esthétique.

Aperçu

Jetons un coup d'œil au résultat sur différentes tailles d'écran.

Survol et animation

Nous ajouterons également des paramètres subtils de survol et d'animation aux divers éléments de conception. Cela donnera l'interaction suivante :

Commençons!

Ajouter une nouvelle page à l'aide de la page de destination du kit d'interface utilisateur

La première chose que vous devrez faire est de créer une nouvelle page à l'aide de la page de destination du kit d'interface utilisateur que vous avez téléchargée et chargée. Si vous ne savez pas comment procéder, assurez-vous de regarder la vidéo dans la partie précédente de cet article qui vous guidera étape par étape.

Localiser la section Fonctionnalités sur la page

Une fois que vous avez téléchargé la mise en page, faites défiler vers le bas jusqu'à ce que vous trouviez la section des fonctionnalités sur la page.

Supprimer les lignes existantes

Supprimez les deux dernières lignes que vous pouvez trouver dans cette section. Nous remplacerons le contenu de ces lignes par notre liste de fonctionnalités/produits.

Ajouter une nouvelle ligne sous la ligne contenant la ligne

Structure des colonnes

Ajoutez une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l'onglet de conception.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : Oui
• Égaliser les hauteurs de colonne : Oui

Espacement

Pour nous assurer que cette conception a fière allure sur toutes les tailles d'écran, nous allons utiliser différentes valeurs de marge et de remplissage personnalisées :

• Marge supérieure : 100 pixels
• Marge inférieure : 100px
• Rembourrage supérieur : 87 px
• Remplissage supérieur de la colonne 1 : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage supérieur de la colonne 2 : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage supérieur de la colonne 3 : 100 pixels (bureau). 0px (tablette et téléphone)
• Remplissage inférieur de la colonne 3 : 50px (tablette et téléphone)
• Remplissage gauche de la colonne 4 : 10px (téléphone uniquement)
• Remplissage droit de la colonne 4 : 10px
• Remplissage gauche de la colonne 5 : 5 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)
• Remplissage de la colonne 5 à droite : 5 pixels (ordinateur de bureau et tablette), 10 pixels (téléphone)
• Remplissage gauche de la colonne 6 : 10px
• Remplissage gauche de la colonne 6 : 10 pixels (téléphone uniquement)

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module de texte à la première colonne avec un nombre.

Couleur d'arrière-plan par défaut

Ajoutez une couleur de fond à ce module.

• Couleur d'arrière-plan : #0f0f0f

Couleur d'arrière-plan du survol

Et changez la couleur d'arrière-plan en survol.

• Couleur d'arrière-plan : #ff5400

Image de fond

Vous pouvez également ajouter l'une des images d'icônes, que vous pouvez trouver dans votre médiathèque, à l'arrière-plan :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition

Paramètres de texte par défaut

Continuez en modifiant les paramètres du texte.

• Police du texte : Muli
• Poids de la police de texte : léger
• Couleur du texte : #ffffff
• Taille du texte : 80 px (ordinateur de bureau et téléphone), 40 px (téléphone)
• Hauteur de la ligne de texte : 1 em

• Couleur de l'ombre du texte : ##ffffff
• Orientation du texte : à gauche

Espacement par défaut

Ajoutez un rembourrage personnalisé pour créer un carré.

• Rembourrage supérieur : 200 px
• Rembourrage gauche : 50 px (téléphone uniquement)
• Rembourrage droit : 50 px (téléphone uniquement)

Espacement de survol

Modifiez les paramètres d'espacement au survol.

• Remplissage gauche : 100 px

Frontière

Pour correspondre à la page de destination du kit d'interface utilisateur, nous ajoutons également des coins arrondis subtils. Ajoutez « 20px » à chacun des coins.

Boîte ombre

Utilisez également l'ombre de boîte suivante pour ajouter de la couleur au module :

• Position horizontale de l'ombre de la boîte : 20px
• Position verticale de l'ombre de la boîte : -50px
• Force de propagation de l'ombre de la boîte: 17px
• Couleur de l'ombre : #593aff

Animation

Enfin, ajoutez une animation de diapositive très subtile au module de texte.

• Style d'animation : diapositive
• Direction de l'animation : à droite
• Intensité de l'animation : 3%

Ajouter le module diviseur à la colonne 2

Visibilité

Le prochain module dont nous aurons besoin est un module diviseur. Allez-y et ajoutez-en un à la deuxième colonne. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Changez ensuite la couleur du séparateur.

• Couleur : #ffffff

Espacement

Pour chevaucher le module de texte dans la première colonne, nous allons utiliser des valeurs de marge personnalisées que nous ajusterons en fonction des différentes tailles d'écran.

• Marge supérieure : 30px
• Marge de gauche : -200px (ordinateur de bureau et tablette), 0px (téléphone)
• Marge de droite : 200 px (ordinateur de bureau et tablette), 0 px (téléphone)

Ajouter le module de texte n° 1 à la colonne 3

Ajouter du contenu

Passons à la colonne suivante ! Ici, le premier module dont nous aurons besoin est un module de texte de titre. Allez-y et ajoutez le titre de votre première fonctionnalité ou produit.

Paramètres de texte d'en-tête

Ensuite, accédez aux paramètres de texte d'en-tête et apportez quelques modifications pour correspondre au pack de mise en page du kit d'interface utilisateur.

• Police du titre 3 : Muli
• Titre 3 Poids de la police : Léger
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 30 px (ordinateur de bureau et tablette), 18 px (téléphone)

Espacement

Pour pousser ce module vers la gauche, nous allons utiliser des valeurs d'espacement personnalisées.

• Marge supérieure : 20px
• Marge inférieure : 20px
• Marge de gauche : -180px (ordinateur de bureau et tablette), 0px (téléphone)
• Rembourrage gauche : 20 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)
• Rembourrage droit : 20 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)

Ajouter le module de texte n° 2 à la colonne 3

Ajouter du contenu

Le prochain module dont nous aurons besoin est un module de texte de description. Allez-y et entrez la description de votre fonctionnalité ou de votre produit.

Paramètres de texte

Modifiez ensuite les paramètres de texte.

• Couleur du texte : rgba(255,255,255,0,5)
• Hauteur de la ligne de texte : 2,2 em

Espacement

Poussez également ce module vers la gauche en utilisant des valeurs d'espacement personnalisées.

• Marge de gauche : -180px (ordinateur de bureau et tablette), 0px (téléphone)
• Rembourrage gauche : 20 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)
• Rembourrage droit : 20 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)

Cloner et placer le module de boutons dans la colonne 3

Le dernier module dont nous aurons besoin dans la colonne 3 est un module de bouton. Pour gagner du temps, nous allons cloner un bouton existant sur la page et placer le doublon juste en dessous des deux autres modules que nous avons ajoutés.

Modifier le contenu

Modifiez le contenu du module de boutons.

Changer l'espacement

Nous poussons également ce module vers la gauche. Comme vous pouvez le constater, tous les modules de la colonne 3 occupent l'espace de deux colonnes. Ce type d'approche nous permet de créer une autre structure de colonnes qui correspond au résultat souhaité.

• Marge supérieure : 50px
• Marge de gauche : -160px (ordinateur de bureau et tablette), 50px (téléphone)
• Marge droite : 50px (téléphone uniquement)

Ajouter un module d'image à la colonne 4

Télécharger une image

Passons à la colonne suivante ! Ajoutez un module d'image à la colonne 4 et téléchargez une image de votre choix. Pour cet exemple, nous avons utilisé des dimensions d'image de 500 × 500, mais n'hésitez pas à jouer avec d'autres tailles d'image également.

Boîte ombre

Ajoutez une ombre de boîte subtile à ce module.

• Couleur de l'ombre : #ffffff

Animation

Et pour couronner le tout, ajoutez également une animation de diapositive à l'image.

• Style d'animation : diapositive
• Direction de l'animation : Gauche
• Délai d'animation : 100 ms
• Intensité de l'animation : 3%

Ajouter le module de texte n° 1 à la colonne 4

Ajouter du contenu

Juste en dessous du module d'image, allez-y et ajoutez un titre de module de texte avec un contenu de votre choix.

Couleur d'arrière-plan par défaut

Changez la couleur de fond de ce module.

• Couleur d'arrière-plan : #0f0f0f

Couleur d'arrière-plan du survol

Et utilisez une autre couleur d'arrière-plan en survol.

• Couleur de fond : #593aff

Paramètres de texte d'en-tête

Continuez en modifiant les paramètres du texte de l'en-tête pour qu'ils correspondent à la page de destination du kit d'interface utilisateur.

• Police de la rubrique 4 : Muli
• Titre 4 Poids de la police : Léger
• Titre 4 Couleur du texte : #ffffff
• Titre 4 Taille du texte : 23 px (ordinateur de bureau et tablette), 18 px (téléphone)

Espacement par défaut

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 50px
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Espacement de survol

Et modifiez ces valeurs au survol pour créer une transition agréable.

• Marge inférieure : 50px
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Ajouter le module de texte #2 à la colonne 4

Ajouter du contenu

Le deuxième et dernier module dont nous aurons besoin dans la colonne 4 est un module de texte de description. Entrez un contenu de votre choix.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan.

• Couleur d'arrière-plan : #0f0f0f

Paramètres de texte

Et modifiez les paramètres du texte.

• Couleur du texte : rgba(255,255,255,0,5)
• Hauteur de la ligne de texte : 2,2 em

Espacement

Pour créer une apparence et une sensation propres, ajoutez un rembourrage personnalisé à ce module.

• Rembourrage inférieur : 50px
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Frontière

Enfin, ajoutez « 20px » aux deux coins inférieurs du module.

Cloner tous les modules de la colonne 4 deux fois et les placer dans les colonnes restantes

Modifier l'image et le contenu

Maintenant que vous avez tous les modules dont vous avez besoin dans la colonne 4, vous pouvez aller de l'avant et cloner tous ces modules deux fois et placer les doublons dans les deux colonnes restantes. Modifiez le contenu et les images pour créer de la variété.

Cloner la ligne autant de fois que souhaité (selon le nombre d'éléments de la liste)

Nous avons terminé notre premier élément de liste ! Vous pouvez désormais cloner cette ligne autant de fois que vous le souhaitez, en fonction du nombre de fonctionnalités et/ou de produits que vous souhaitez présenter.

Modifier le contenu du clone

Pour chacun des doublons, vous devrez modifier le contenu.

Rechercher et remplacer la couleur

Vous pouvez également utiliser la fonction Rechercher et remplacer de Divi pour changer rapidement la palette de couleurs d'un élément de liste.

Changer la couleur d'arrière-plan du survol

Assurez-vous qu'une fois que vous avez modifié la palette de couleurs, vous modifiez également la couleur d'arrière-plan du survol du module de texte numérique.

• Couleur de fond : #593aff

Changer l'image d'arrière-plan

Enfin, vous pouvez également choisir une autre icône dans la liste en fonction de la fonctionnalité et/ou du produit que vous autorisez à apparaître.

Dernières pensées

Ce cas d'utilisation fait partie de notre offre Black Friday où nous partageons 6 pages de destination GRATUITES en édition limitée avec les clients et les membres à vie du Black Friday. En rejoignant notre communauté habilitée pendant ces jours et en devenant membre, vous obtiendrez :

• 25% DE RABAIS SUR TOUT
• Les 6 pages de destination gratuitement
• Accès à nos superbes thèmes et plugins
• Prix ​​bonus

Saisissez l'opportunité et devenez membre dès aujourd'hui !