Comprendre
le fonctionnement du responsive.

Ce document a pour but de vous aider à comprendre ce qu’est le responsive design ainsi que de comprendre comment le modifier pour améliorer le rendu de votre site sur les différentes plateformes.

En quoi ça consiste

Le responsive design est l’approche de conception de sites web qui permet d’adapter automatiquement la mise en page et les dimensions des éléments d’une page web en fonction de la taille de l’écran de l’appareil utilisé pour y accéder (par exemple, un ordinateur de bureau, une tablette ou un smartphone).
L’utilité principale du responsive design est d’améliorer l’expérience utilisateur en garantissant que les visiteurs du site puissent accéder à tous les contenus et fonctionnalités de manière optimale, quel que soit l’appareil qu’ils utilisent.
En effet, un site web non responsive peut être difficile à naviguer sur un petit écran de smartphone ou une tablette car les visiteurs doivent souvent zoomer et dézoomer pour lire le contenu et cliquer sur les liens.

Comment ça fonctionne

Pour se faire :
  1. Rendez-vous sur l’une de vos pages de votre site web et cliquez sur « Modifier avec Elementor » si vous possédez Elementor pro sur votre site web.
  2. Vous avez la possibilité de modifier le responsive design de la section, de votre bloc ou bien de l’élément situé dans le bloc. Nous vous conseillons de toujours effectuer votre responsive en commençant dans la section et de descendre petit à petit (bloc et ensuite élément dans le bloc) si le résultat n’est pas celui que vous attendiez.
  3. Vous allez principalement modifier les marges et les marges internes de vos différents blocs pour pouvoir adapter le design du bloc à tous les appareils. Il se peut que parfois, vous deviez refaire un tout autre design pour votre bloc car celui-ci ne rend pas hyper bien sur l’une des plateformes. La solution, c’est de pouvoir cacher votre bloc sur la plateforme où le rendu ne rend pas forcément bien. Cela va permettre de cacher le bloc sur la plateforme sur laquelle vous l’enlevez. Concernant la modification du responsive, vous allez principalement toucher aux paramètres avancées que ce soit dans la mise en page ou dans responsive pour pouvoir cacher les blocs.
Attention : si vous créez un nouveau bloc pour une plateforme en particulier, n’oubliez pas de le cacher pour les autres plateformes.