Les sections flexibles sont des lignes comportant deux colonnes flexibles par défaut qui créent une disposition de base. Une fois une section ajoutée, vous pouvez ajouter, supprimer ou réorganiser des colonnes supplémentaires, des zones flexibles ou des grilles avancées pour créer la disposition souhaitée. Vous pouvez ensuite y ajouter des widgets.
Ajouter une section
Pour ajouter une section :
- Connectez-vous à votre compte Guesty.
- Dans la barre de navigation supérieure, cliquez sur le sélecteur de mode et sélectionnez le mode Croissance.
- Cliquez sur Distribution.
- Cliquez sur la miniature des Sites Internet Guesty.
- À droite du site Web concerné, cliquez sur Modifier.
- Passez la souris entre les lignes et cliquez + Ajouter une section. Ou faites un clic droit pour ouvrir le menu contextuel, cliquez sur Ajouter, puis sélectionnez Section flexible.
- Dans le panneau latéral, cliquez sur Sections flexibles.
- Sélectionnez la section flexible souhaitée.
- Cliquez Sauvegarder.
Note :
Une seule image peut être définie pour l’arrière-plan d’une section (les curseurs d’images d’arrière-plan ne sont pas pris en charge pour les sections Flex).
Enregistrer la section
Pour enregistrer une section :
- Passez la souris sur la section souhaitée et cliquez Section flexible dans le coin supérieur gauche de la section.
- Cliquez Enregistrer en tant que section, puis cliquez sur Sélectionner uniquement cette ligne.
- Saisissez un nom de section, sélectionnez la catégorie sous laquelle la section sera enregistrée et sélectionnez les autorisations pour la section.
- Cliquez Commencer à créer.
- Cliquez Fait.
Supprimer la section
Pour supprimer une section, faites un clic droit pour ouvrir le menu contextuel et sélectionnez Supprimer. Ou cliquez sur l' icône Supprimer dans le menu flottant.
Ajouter une colonne
Une fois une section ajoutée à votre site, vous pouvez y ajouter des colonnes pour y placer des widgets. Toutes les sections contiennent des colonnes par défaut, mais vous pouvez toujours en ajouter.
Note :
Lorsque vous ajoutez un élément à une colonne, sa position est déterminée par les paramètres de mise en page automatique. Pour modifier le sens de la mise en page automatique, ouvrez le panneau de conception et, dans la section « Mise en page » , sélectionnez l'option horizontale ou verticale.
Pour ajouter une colonne :
Cliquez pour sélectionner une colonne existante.
Dans le menu flottant, cliquez sur l’icône à trois points horizontaux (
), puis sélectionnez Ajouter une colonne. Ou cliquez sur l'icône « + » à gauche ou à droite de la colonne.
Dupliquer une colonne
Vous pouvez dupliquer une colonne ; elle sera ajoutée à droite de la colonne d'origine. Vous ne pouvez pas ajouter de colonnes dépassant 100 % de la largeur, espacement compris.
Pour dupliquer une colonne :
Cliquez pour sélectionner une colonne.
Dans le menu flottant, cliquez sur l' icône Dupliquer . Ou, vous pouvez faire un clic droit sur la colonne pour ouvrir le menu contextuel et sélectionner Dupliquer.
Supprimer la colonne
Vous pouvez supprimer une colonne de la section. Cependant, chaque section doit contenir au moins une colonne ; vous ne pouvez donc pas supprimer la dernière colonne d'une section.
Pour supprimer une colonne :
Cliquez pour sélectionner la colonne.
Dans le menu flottant, cliquez sur l' icône Supprimer . Ou, vous pouvez faire un clic droit sur la colonne pour ouvrir le menu contextuel et sélectionner Supprimer.
Ajouter un widget
Vous pouvez ajouter des widgets aux colonnes, aux boîtes flexibles ou aux grilles avancées de plusieurs manières. Si vous êtes déjà en mode flexible, vous pouvez ajouter des widgets directement depuis le panneau latéral en cliquant sur « Widgets » , puis en sélectionnant le widget souhaité.
Note :
Dans l'éditeur classique, vous ne pouvez pas faire glisser et déposer un widget dans une colonne flexible à partir du panneau latéral.
Pour ajouter un widget :
- Cliquez sur une colonne, une flexbox ou une grille avancée pour la sélectionner.
- Cliquez sur l'icône « + » au milieu de la colonne, de la zone flexible ou de la grille avancée. Vous pouvez également cliquer sur l'icône « + » dans le menu flottant.
- Sélectionnez un widget.
Vous pouvez également ajouter des widgets à partir du panneau des calques.
Pour ajouter un widget à partir du panneau des calques :
- Cliquez pour sélectionner une colonne.
- Dans le panneau latéral, cliquez sur Calques.
- Dans le panneau des calques, passez la souris sur la colonne, la flexbox ou la grille avancée à laquelle vous souhaitez ajouter un widget et cliquez sur l'icône plus.
- Sélectionnez un widget.
Classes CSS pour les éléments Flex (mode Flex)
En mode flexible, vous pouvez ajouter des classes CSS aux éléments flexibles (section, colonne, colonne intérieure et grilles avancées). L'utilisation de classes CSS permet de gagner du temps lors de la mise en forme des éléments. Par exemple, au lieu d'utiliser le panneau de conception pour modifier le remplissage et la taille d'une seule colonne, vous pouvez créer une classe CSS et appliquer ces modifications de style à autant de colonnes que vous le souhaitez.
La même classe peut être appliquée à plusieurs éléments sur la même page, et plusieurs classes peuvent être appliquées au même élément.
Note :
Vous devez avoir accès au mode développeur pour utiliser cette fonctionnalité.
Pour ajouter ou modifier une classe CSS :
- Sélectionnez l'élément flexible souhaité (section, colonne, colonne intérieure ou grille avancée).
- Sélectionnez Ajouter un nom de classe CSS dans le menu flottant ou le menu contextuel.
- Saisissez un nouveau nom de classe CSS ou sélectionnez un nom de classe existant dans le menu déroulant (vous pouvez sélectionner plusieurs classes).
- (Facultatif) Si vous n’avez pas déjà ajouté la classe CSS au code, cliquez sur Ouvrir le mode Dev.
- Cliquez sur Terminé.