BONS PLANS BLACK FRIDAY 2024

Créer un site WordPress parfaitement responsive

Alpa14 les tutoriels faciles !

Catégories

Créer un site web réactif, c’est facile avec Divi !

Dans cette vidéo, je vous montre comment créer un site web WordPress responsive en utilisant le thème Divi et son Visual Builder. Je vous explique comment utiliser les puissantes fonctionnalités intégrées à Divi pour créer un site Web professionnel qui aura fière allure sur n’importe quel appareil en s’adaptant parfaitement à son écran.
Quand vous créez un site web vous le faites sur un ordinateur de bureau. Mais savez-vous qu’aujourd’hui plus de 80% des pages du web sont vues sur appareils mobiles avec leurs écrans au format particulier. Il est donc essentiel lorsque vous créez un site de vérifier cette parfaite compatibilité en termes d’affichage.

Licence Divi
Code Promo Divi Supreme
.

Qu’est-ce qu’un site WordPress Divi responsive ?

Un site responsive est un site réactif c’est à dire qu’il va s’adapter automatiquement aux contraintes de l’écran sur lequel il est vu afin d’être parfaitement lisible et conserver un joli design.

Par défaut et sans que vous n’ayez besoin à faire quoique ce soit un site WordPress Divi est automatiquement responsive même si des ajustements sont parfois nécessaires.

MailerLite free-trial
rangée responsive

En effet, lorsque vous créez une rangée à  3 colonnes  avec 2 modules dans chaque colonne par exemple, eh bien lorsque vous passez en vue mobile,  les modules de chaque colonne de la rangée vont passer automatiquement les uns en dessous des autres de la gauche vers la droite et cela pour conserver une lisibilité acceptable. C’est vraiment très important dans la conception de vos pages que vous ayez bien cela à l’esprit.

Cependant, cette réactivité du site n’est pas toujours parfaite et nécessite parfois quelques ajustements et c’est ce nous allons voir maintenant.

Passer de la vue d’un périphérique à l’autre

Pour passer de la vue bureau à la vue tablette puis à la vue smartphone, activer le Visual Builder puis cliquer sur le petit disque violet (avec les 3 petits points blancs). En bas à gauche vous avez 3 petites icônes (bureau, tablette, et smartphone) qui vous permettent de passer d’une vue à l’autre.

 

icônes des vues

Personnaliser la vue de chaque périphérique

Vous pouvez commencer à vérifier la vue mobile smartphone. Cliquer sur l’icône du smartphone, l’écran se réduit.
Commencer par le haut de la page. Le plus souvent vous devrez ajuster la taille des polices qui par défaut est la même que la vue bureau (donc peut-être trop grosse en vue mobile).

Cliquer pour cela sur les paramètres de votre module, puis cliquer sur le petit pinceau qui apparaît à côté de l’élément à modifier. Vous serez ainsi conduit directement au style applicable de l’élément.
Dans l’exemple de l’image c’est la taille du sous-titre « Bienvenue » que nous allons modifier uniquement pour la vue smartphone.
Dans « Sous-titre Taille du texte » cliquer tout d’abord sur l’icône mobile. Ensuite un menu apparait avec les 3 icônes (bureau, tablette, smartphone). Cliquer sur l’icône du Smartphone et modifier la taille. Cette modification de taille s’appliquera uniquement pour cette vue et non pour les autres.

 

Modifier le style d'une vue
Modifier le style d'une vue
Formation WordPress

Il vous suffit ensuite de répéter l’opération si nécessaire pour chaque élément de chaque module. Via ce menu d’icônes, vous pouvez passer facilement d’une vue à l’autre.

Vous serez peut-être intéressé par les articles suivants :

Créer un en-tête plein écran avec Divi

Créer un en-tête plein écran avec Divi

Dans ce tutoriel, je  vous montre étape par étape comment créer un en-tête plein écran époustouflant en utilisant le puissant Divi Visual Builder. Nous commencerons par trouver une image de qualité professionnelle sur Pixabay, puis nous l’optimiserons pour le web avec Photopea avant de plonger dans la conception de notre en-tête.

lire plus
Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus