Comment créer un tableau de bord de jeu avec le pack de mise en page du club de football de Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur. Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer un tableau de bord de jeu sympa à l'aide du pack de mise en page Soccer Club de Divi. Nous allons créer ce dernier tableau de bord de jeu en utilisant uniquement les options intégrées de Divi, alors allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil au résultat final sur différentes tailles d'écran.

Téléchargez le pack de mise en page du pack de mise en page du club de football

Pour créer ce didacticiel, nous utiliserons la page de destination du Soccer Club Layout Pack, alors allez-y et ajoutez une nouvelle page à l'aide de cette mise en page.

Ajouter une nouvelle section

Ensuite, ajoutez une nouvelle section ici :

Couleur de l'arrière plan

Ouvrez les paramètres de la section et ajoutez ensuite une couleur d'arrière-plan.

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

Espacement

Jouez également avec les valeurs d'espacement.

• Rembourrage supérieur : 55 px
• Rembourrage inférieur : 140px

Cloner la ligne et la placer dans la section

Localiser la ligne et créer un clone

Pour gagner du temps, nous allons cloner la ligne de titre dans la section suivante.

Placer dans une nouvelle section

Modifier le texte

Modifiez la copie du module de texte dans la ligne pour qu'elle corresponde à la nouvelle section.

Ajouter la ligne n° 2

Structure des colonnes

Juste en dessous de la ligne précédente, continuez et ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

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

Colonne 1 Couleur d'arrière-plan

Ajoutez également une couleur d'arrière-plan de la colonne 1.

• Couleur d'arrière-plan de la colonne 1 : #fcfcfc

Colonne 3 Couleur d'arrière-plan

Répétez la même étape pour la colonne 3.

• Couleur d'arrière-plan de la colonne 3 : #fcfcfc

Dimensionnement

Modifiez également les paramètres de taille.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser la hauteur de la colonne : Oui

Espacement

Supprimez ensuite tous les rembourrages par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Frontière

Pour correspondre au pack de mise en page, ajoutez une bordure supérieure et inférieure à la ligne.

• Largeur de la bordure inférieure : 8px
• Couleur de la bordure inférieure : #00aaff

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile pour créer de la profondeur sur la page.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -20px
• Couleur de l'ombre : rgba(0,0,0,0.56)

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

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Commencez avec un module de texte dans la colonne 1 et ajoutez du contenu.

Couleur de l'arrière plan

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

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

Paramètres de texte

Continuez en jouant avec les paramètres de texte.

• Police du texte : Squada One
• Style de police de texte : majuscule
• Couleur du texte : #333333
• Taille du texte : 20 pixels
• Orientation du texte : Centre

Espacement

Ensuite, ajoutez des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 10px
• Rembourrage droit : 10px

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

Ajouter du contenu

Ajoutez un nouveau module de texte juste en dessous du module de texte précédent dans la colonne 1. Une fois que vous l'avez fait, ajoutez du contenu à la zone de contenu.

Paramètres de texte

Modifiez ensuite les paramètres de texte.

• Police de texte : Open Sans
• Poids de la police de texte : gras
• Couleur du texte : #333333
• Taille du texte : 18px
• Orientation du texte : Centre

Espacement

Jouez également avec les valeurs d'espacement.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Ajouter un module d'image à la colonne 1

Télécharger le logo du club

Le dernier module nécessaire dans la colonne 1 est un module image contenant le logo du club de l'une des équipes en compétition.

Dimensionnement

Une fois que vous avez téléchargé l'image du logo du club, accédez aux paramètres de dimensionnement et apportez quelques modifications.

• Largeur : 45 % (ordinateur de bureau), 16 % (tablette), 28 % (téléphone)
• Alignement du module : Centre

Espacement

Continuez en ajoutant des valeurs de marge personnalisées dans les paramètres d'espacement.

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

Cloner des modules et placer des doublons dans la colonne 3

Une fois que vous avez terminé avec les trois modules de la colonne 1, vous pouvez les cloner et placer les doublons dans la troisième colonne.

Modifier le contenu

Bien sûr, vous devrez modifier le contenu de chaque module cloné.

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

Ajouter du contenu

Dans la deuxième colonne, nous placerons la date et le score final. Commencez par ajouter un module de texte avec une date.

Couleur de l'arrière plan

Ajoutez ensuite une couleur d'arrière-plan qui correspond au pack de mise en page.

• Couleur d'arrière-plan : #00aaff

Paramètres de texte

Modifiez également les paramètres de texte.

• Police du texte : Squada One
• Style de police de texte : majuscule
• Couleur du texte : #FFFFFF
• Taille du texte : 42 px
• Orientation du texte : Centre

Espacement

Ensuite, allez dans les paramètres d'espacement et donnez un peu plus de remplissage au module.

• Rembourrage supérieur : 30px
• Rembourrage inférieur : 30px

Visibilité

Enfin, désactivez le module sur téléphone et tablette.

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

Ajouter du contenu

Le deuxième module de texte de la colonne 2 doit contenir le score du jeu.

Paramètres de texte

Après avoir ajouté le contenu, modifiez les paramètres de texte.

• Police du texte : Squada One
• Couleur du texte : #333333
• Taille du texte : 150px
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Espacement

Continuez en modifiant les valeurs d'espacement.

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

Visibilité

Cachez également ce module sur téléphone et tablette. Dans la prochaine partie, nous allons créer l'alternative pour les écrans plus petits.

Cloner les deux modules et placer dans la colonne 1

Clonez les deux modules que vous pouvez trouver dans la colonne 2 et placez les doublons dans la première colonne au-dessus des autres modules.

Changer de visibilité

Nous utilisons ces deux modules pour obtenir un meilleur résultat sur tablette et téléphone. Pour vous assurer que ces modules s'affichent uniquement sur des écrans plus petits, désactivez-les sur le bureau.

Ajouter la ligne n° 3

Structure des colonnes

Dans la rangée suivante, nous allons afficher les différents objectifs sur le bureau. Utilisez la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

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

Couleur d'arrière-plan de la colonne 2

Modifiez également la couleur de fond de la colonne 2.

• Couleur d'arrière-plan de la colonne 2 : #f7f7f7

Dimensionnement

Supprimez ensuite tout espace entre les colonnes dans les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 0
• Égaliser la hauteur de la colonne : Oui

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage inférieur de la colonne 1 : 100px
• Remplissage à droite de la colonne 1 : 10px
• Remplissage gauche de la colonne 3 : 10px

Frontière

Ensuite, ajoutez une bordure inférieure subtile à la ligne.

• Largeur de la bordure inférieure : 8px
• Couleur de la bordure inférieure : #00aaff

Boîte ombre

Pour créer de la profondeur à la page, ajoutez une ombre de zone de ligne.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -20px
• Couleur de l'ombre : rgba(0,0,0,0.56)

Visibilité

Comme mentionné précédemment, nous utilisons cette ligne pour afficher les objectifs sur le bureau uniquement, alors allez-y et désactivez la ligne sur le téléphone et la tablette. Plus tard dans la publication, nous créerons une alternative pour tablette et téléphone.

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

Ajouter du contenu

Ajoutez un nouveau module de texte à la première colonne contenant les détails du premier objectif.

Paramètres de texte

Modifiez ensuite les paramètres de texte.

• Police du texte : Squada One
• Style de police de texte : majuscule
• Couleur du texte : #333333
• Taille du texte : 27 pixels
• Orientation du texte : à droite

Espacement

Jouez également avec les valeurs d'espacement.

• Marge supérieure : 100 pixels
• Rembourrage inférieur : 20px

Frontière

Continuez en ajoutant une bordure inférieure subtile.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #333333

Cloner le module de texte deux fois

Modifier l'espacement des doublons

Clonez le module de texte que vous venez de créer deux fois et modifiez les valeurs d'espacement des deux doublons.

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

Cloner le module de texte n° 1 et placer le doublon dans la colonne 3

Modifier les paramètres de texte

Clonez à nouveau le premier module de texte dans la colonne 1 et placez le doublon dans la colonne 3. Continuez en modifiant l'orientation du texte.

• Orientation du texte : à gauche

Changer l'espacement

La marge supérieure doit également être augmentée.

• Marge supérieure : 200px

Cloner le module de texte dans la colonne 3

Vous pouvez maintenant cloner à nouveau ce module de texte.

Ajouter la ligne n° 4

Structure des colonnes

Il est temps d'ajouter la dernière ligne ! Choisissez la structure de colonnes suivante :

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan de la ligne.

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

Dimensionnement

Supprimez ensuite tout l'espace entre les colonnes.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ajoutez un rembourrage supplémentaire en haut et en bas.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Frontière

Nous aurons également besoin d'une bordure inférieure subtile pour cette rangée.

• Largeur de la bordure inférieure : 8px
• Couleur de la bordure inférieure : #00aaff

Boîte ombre

Ensuite, ajoutez une ombre de boîte à la ligne.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -20px
• Couleur de l'ombre : rgba(0,0,0,0.56)

Visibilité

Enfin, masquez la ligne sur le bureau.

Ajouter un module de texte n° 1

Ajouter du contenu

Ajoutez un nouveau module de texte à la colonne de la ligne et ajoutez les détails de l'objectif.

Paramètres de texte

Modifiez ensuite les paramètres de texte.

• Police du texte : Squada One
• Style de police de texte : majuscule
• Taille du texte : 27 pixels
• Orientation du texte : à droite

Espacement

Utilisez ensuite des valeurs d'espacement personnalisées.

• Marge droite : 150 px
• Rembourrage inférieur : 20px

Frontière

Nous ajoutons également une bordure inférieure subtile.

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #333333

Cloner le module de texte

Modifier les paramètres de texte

Clonez le module de texte que vous avez créé et modifiez l'orientation du texte du doublon.

• Orientation du texte : à gauche

Espacement

Modifiez également les valeurs d'espacement.

• Marge supérieure : 200 pixels
• Marge de gauche : 150px

Clonez les deux modules de texte autant de fois que nécessaire

Vous pouvez désormais cloner ces modules autant de fois que vous le souhaitez pour afficher tous les différents objectifs.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Dans cet article, nous vous avons montré comment créer un tableau de bord de jeu à l'aide du pack de mise en page Soccer Club de Divi. C'est un excellent moyen d'ajouter plus d'incitations à votre site Web et de vous connecter avec votre public. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!