fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Créer un site WordPress parfaitement responsive

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

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.

Formation WordPress
Hostinger hébergement web

Vous serez peut-être également intéressé par ces articles …

Créer son premier Site Web Professionnel 

Créer son premier Site Web Professionnel 

Dans cette vidéo qui est qui est la retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday spécialisée dans la formation WordPress Divi, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel.

lire plus
Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Offrez-moi un café! Merci :)