Éditeur Studio : Utiliser les conteneurs
Temps de lecture : 3 min
Les conteneurs sont des outils de mise en page responsive qui vous aident à rationaliser et à structurer le contenu du site. Vous pouvez les personnaliser pour compléter le design du site et joindre des éléments tels que du texte, des médias et des boutons.
Dans cet article, découvrez comment :
Ajouter des conteneurs à un site
Commencez par ajouter un conteneur adapté aux besoins de design et de contenu du client. Vous pouvez choisir parmi une gamme de conteneurs prédéfinis et de survol, ou partir de zéro avec un design vierge.
Pour ajouter un conteneur :
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Sélectionnez Conteneurs.
- Choisissez un style de conteneur (vide, design ou survol).
- Cliquez et faites glisser le conteneur de votre choix pour l'ajouter à la page.
Concevoir le design des conteneurs
Personnalisez le design du conteneur pour compléter l'esthétique du site. Vous pouvez modifier la couleur d'arrière-plan, paramétrer le rayon et plus encore.
Pour concevoir un conteneur :
- Sélectionnez le conteneur concerné.
- Cliquez sur l'icône Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- Choisissez la façon dont vous souhaitez personnaliser le conteneur sous Design :
- Arrière-plan : Paramétrez la couleur de remplissage de l'arrière-plan et rendez-la plus ou moins visible.
- Effet du verre : Appliquez un effet du verre délavé au conteneur et définissez l'intensité du flou.
- Bordure : Ajoutez une bordure au conteneur et utilisez les options pour paramétrer sa taille, sa couleur et son opacité.
- Angles : Ajustez le rayon des angles du conteneur (en px) pour les rendre plus arrondis ou plus carrés.
- Ombre : Ajoutez et personnalisez un effet d'ombre sur le conteneur.
Joindre des éléments aux conteneurs
Lorsque vous placez des éléments dans un conteneur, ils sont automatiquement connectés. Cela signifie que vous pouvez faire glisser le conteneur et ses éléments attachés dans leur ensemble, et les visualiser ensemble dans le panneau Calques.
Pour joindre un élément à un conteneur :
- Cliquez sur l'élément concerné.
- Faites-le glisser à l'emplacement souhaité dans le conteneur.
- Déposez l'élément lorsque vous voyez le message Joindre.
Appliquer une grille à un conteneur
Appliquez une grille CSS avancée au conteneur pour structurer sa mise en page. Vous pouvez choisir le nombre de rangées et de colonnes que vous souhaitez, et paramétrer leur taille en utilisant des mesures responsive (ex. fr, min./max., %)
Pour appliquer une grille à un conteneur :
- Sélectionnez le conteneur concerné.
- Cliquez sur l'icône Plus d'actions
. - Cliquez sur Appliquer la grille CSS avancée.
- Sélectionnez une mise en page dans la liste déroulante 1x1.
Suggestion : Sélectionnez Autre si vous souhaitez paramétrer votre propre nombre de rangées et de colonnes.
Cela vous a-t-il aidé ?
|