Widget « Shape »

Catégories de widgets : Media

Le widget Shape est un outil de design pour mettre en avant des messages importants : créez des boutons et des bannières, signalez une récompense ou attirez l'œil sur un prix promotionnel. Vous pouvez y ajouter une image, un fond de couleur et du texte, régler la taille et poser des ombres. Comme vous le placez où vous voulez, la liberté est totale.

Pour savoir comment ajouter des widgets, consultez « Add Widgets ».

Astuce : Pour en savoir plus sur les widgets et la bibliothèque de widgets, consultez « Widgets: Library and Overview ».

Éditeur de contenu

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de l'éditeur de contenu.

1. Sélectionnez une forme.

2. Pour ajouter un lien à la forme, cliquez sur Add Link (pour en savoir plus sur les liens, consultez « Link Picker »).

3. Saisissez un titre et une description pour la forme. Pour les masquer, cliquez sur l'icône en forme d'œil.

   Remarque : Le champ de texte long propose plusieurs options de mise en forme, comme mettre le texte en italique, en gras ou le souligner.

4. Saisissez un Alt text et un Tooltip pour la forme.

Éditeur de design

Cliquez sur l'élément pour ouvrir le menu flottant, puis sur l'option de modification du design.

1. Pour passer d'un fond de couleur à un fond d'image, cliquez sur Layout.

   • Pour changer l'image par défaut, allez dans l'onglet Style et sélectionnez l'onglet Image.

   Remarque : Si Keep Proportions est désactivé, les proportions de l'image s'adaptent au widget.

2. Ajustez la largeur, la hauteur et l'effet de survol (pour ordinateur) dans l'onglet Style.

3. Pour placer le widget au-dessus d'une image ou d'un autre widget, ou les faire se chevaucher, cliquez sur l'onglet Spacing et réglez les marges sur un nombre négatif (par exemple, -50px).

4. Pour en faire un widget flottant, activez l'option Floating et choisissez une position. Pour n'afficher le widget flottant que sur la page actuelle, activez l'option Show on this page only.

Veillez à ce que les réglages de design soient corrects pour chaque appareil. Des réglages comme l'espacement (du widget entier et de chaque élément), la largeur et d'autres se définissent par appareil.

Pour en savoir plus sur les options de design qui ne sont pas propres à ce widget (par exemple la disposition, le style ou l'espacement), consultez « Widget Design ».

Exemples

Créer une composition intéressante avec une forme amorphe

Pour créer une composition intéressante avec une forme amorphe :

1. Créez une ligne avec deux colonnes.
2. Choisissez une forme amorphe et ajoutez-la à la colonne de droite.
3. Donnez à la forme la taille de la colonne.
4. Dans l'éditeur de design, choisissez la disposition avec image de fond et remplacez l'image par celle que vous voulez.

Utiliser une forme comme bouton

Pour utiliser une forme comme bouton, en lui ajoutant un lien et un effet de survol :

1. Sélectionnez la forme de cercle et ajoutez un titre et une description.
2. Choisissez des couleurs pour la forme et les textes.
3. Pour placer la forme dans le coin d'une image, appliquez une marge négative sur son côté gauche (spacing > margin > marge gauche et supérieure de -50px).

Mettre en avant une offre ou un service précis

Pour mettre en avant une offre ou un service précis avec des formes :

1. Choisissez la forme de drapeau et ajoutez un titre et une courte description.
2. Désactivez Keep proportion pour ne régler que la largeur.
3. Choisissez des couleurs pour la forme et les textes.
4. Pour que la forme dépasse en haut d'une colonne, appliquez une marge supérieure négative (spacing > margin > marge supérieure de -30px).

Créer un bouton de défilement

Pour créer un bouton de défilement avec une forme :

1. Choisissez la forme de losange et ajoutez un titre.
2. Désactivez Keep proportion pour ne régler que la largeur.
3. Choisissez des couleurs pour la forme et les textes.
4. Pour placer la forme au-dessus d'une image, appliquez une marge supérieure négative (spacing > margin > marge supérieure de -50px).