Maintenant que vous avez un site web performant, l’étape suivante consiste à organiser et structurer vos pages pour un rendu impeccable. Pour vous aider, HostPapa propose des mises en page pour rendre votre contenu accessible et divertissant. Ces mises en page font partie du Créateur de site web et disposent d’un système de glisser-déposer facile à utiliser.
Pour savoir comment accéder à votre Créateur de site web pour commencer, veuillez consulter cet article.
Pour commencer à utiliser les Mises en page
- Déplacez votre curseur vers le menu à gauche de votre écran.
- Sélectionnez la première option, qui est l’onglet Construire.
- Choisissez l’option Mises en page dans le menu déroulant.
Se familiariser avec les Mises en page
Pour structurer votre contenu et attirer les visiteurs sur vos pages web, les Mises en page vous permet de créer plusieurs zones de contenu. Elles sont distinctes les unes des autres, mais s’affichent simultanément sur votre page web.
Les zones de contenu peuvent accueillir une grande quantité de détails dans un espace limité. Elles sont également appelées conteneurs.
Ces conteneurs sont créés à l’aide de :
- Lignes
- Lignes réductibles
- Colonnes
- Onglets
- Onglets verticaux
- Accordéons
Certaines sections de votre page web peuvent ne pas être visibles par le visiteur, sauf s’il sélectionne une option. Les Mises en page peuvent masquer des informations selon vos besoins.
Que sont les lignes ?
Les lignes contiennent des zones de contenu et peuvent être empilées les unes sur les autres verticalement.
Que sont les lignes pliables ?
L’utilisation de lignes pliables permet de développer ou de réduire vos lignes, grâce à un effet d’animation. Pour accéder à cette option, veuillez :
- Déplacez votre curseur vers le menu à gauche de votre écran.
- Sélectionnez la première option, qui est l’onglet Construire.
- Choisissez l’option Mises en page dans le menu déroulant.
- Cliquez sur la deuxième option du menu suivant, qui est Lignes pliables.
Vous pouvez maintenant choisir d’agrandir ou de réduire votre ligne
- Placez votre curseur dans le champ Légende pour donner un nom à votre ligne.
- Placez ensuite le curseur dans le champ « Sous-légende », dans la section « Options supplémentaires ». Dans ce champ, vous pouvez ajouter un sous-titre, également appelé H2.
- Décidez si vous souhaitez que la nouvelle ligne s’agrandisse ou se réduise en cochant la case d’option Développé ou Réduit.
- Ajoutez une image en cliquant sur le menu déroulant Source de l’image.
Faites ressortir certaines sections de vos pages web grâce aux colonnes
Les colonnes vous permettent de créer des zones de contenu horizontales et ouvertes. Elles sont idéales pour les sections d’introduction et peuvent remplir l’espace de votre page si le contenu est limité.
Les options dans les Colonnes incluent :
- Afficher les en-têtes de section : ici, vous pouvez décider s’il y aura une légende.
- Afficher les délimiteurs de section : cela vous permet de créer des limites entre les colonnes.
- Répartir la largeur de manière égale sur les colonnes : avec cette option, la largeur de la colonne sera cohérente, quel que soit le contenu que vous utilisez.
- Égaliser la hauteur des panneaux de contenu des colonnes : la hauteur des panneaux de contenu des colonnes dépend de la quantité de contenu qu’ils contiennent. Cette option permet d’égaliser la hauteur des colonnes.
Utiliser des onglets pour adapter votre contenu à l’espace
Si vous avez du mal à intégrer votre contenu dans un petit espace, les Onglets peuvent vous être très utiles.
Pour accéder au bouton Onglets :
- Déplacez votre curseur vers le menu à gauche de votre écran.
- Sélectionnez la première option, qui est l’onglet Construire.
- Choisissez l’option Mises en page dans le menu déroulant.
- Cliquez sur le bouton Onglets, qui est le deuxième bouton à partir du bas.
Le groupe « Onglets » comporte trois sections, mais une seule peut être affichée à la fois. Le premier onglet s’ouvre automatiquement au chargement d’une page web. Voici les préférences à respecter pour configurer vos onglets :
- Hauteur minimale en pixels : lorsque vous appliquez la hauteur minimale, vous constaterez que tous vos onglets auront cette hauteur.
- Animer les transitions de section : lorsqu’un visiteur passe d’un onglet à un autre, un effet de transition spécial s’affiche.
- Répartir la largeur de manière égale sur les onglets : quelle que soit la quantité de contenu que vous utilisez, cette option garantit que la largeur de votre onglet restera la même.
- Égaliser la hauteur des panneaux de contenu des onglets : la hauteur de chaque onglet est égale à celle de son contenu, mais il s’agit d’un paramètre par défaut. Cette option vous permet d’égaliser automatiquement la hauteur de vos onglets.
Onglets verticaux
Fonctionnant de manière similaire aux onglets, les Onglets verticaux peuvent aider les visiteurs à continuer à faire défiler votre page web plutôt que de se déplacer soudainement de gauche à droite.
Vous pouvez utiliser la plupart des mêmes options dans les Onglets verticaux que dans les onglets standard.
- Indiquez la hauteur minimale en pixels.
- Animer les transitions de section.
- Égaliser la hauteur des panneaux de contenu des onglets.
Utilisation des Accordéons
L’Accordéon n’affiche qu’une seule section à la fois. Lorsqu’une section est ouverte, une autre se ferme avec un effet d’animation.
Pour jeter un œil aux options d’Accordéon, veuillez :
- Déplacez votre curseur vers le menu à gauche de votre écran.
- Sélectionnez la première option, qui est l’onglet Construire.
- Choisissez l’option Mises en page dans le menu déroulant.
- Cliquez sur le bouton Accordéon, qui est le premier bouton en haut du menu suivant.
Si vous avez besoin d’aide avec votre compte HostPapa, veuillez ouvrir un billet de soutien depuis votre tableau de bord.
