widget: Forme

widget Catégories : Médias

Les widgets Forme sont pratiques pour mettre en valeur vos messages importants. Créez des boutons et des bannières, faites apparaître des récompenses et mettez en évidence les prix de vente. Vous avez également la possibilité d'ajouter une image, une couleur d'arrière-plan, une ombre et du texte dont vous pouvez régler la taille. Le widget peut être placé n'importe où pour une flexibilité totale.

Éditeur de contenu

  1. Sélectionnez une forme.

  2. Pour ajouter un lien à la forme, cliquez sur Ajouter un lien (pour plus d'informations sur les liens, voir Sélecteur de liens).

  3. Saisissez un titre et une description pour la forme. Pour masquer le titre et la description, cliquez sur l'icône de l'œil (24517315481495-eye_icon.png).

    Note

    Le champ de texte long offre diverses options de mise en forme du texte, telles que la mise en italique, en gras ou le soulignement.

  4. Saisissez le texte alternatif et de l'infobulle associé à la forme.

Rédacteur en chef de la conception

  1. Pour passer d'un arrière-plan en couleur à un arrière-plan en image, cliquez sur Mise en page .

    • Pour modifier l'image par défaut, accédez à l'onglet Style et sélectionnez l'onglet Image.

      Remarque

      Si l'option Conserver les proportions est désactivée, les proportions de l'image seront ajustées à celles du widget.

  2. Ajustez la largeur, la hauteur et l'effet hover (pour desktop) dans l'onglet Style.

  3. Pour placer le widget au-dessus d'une image ou d'un autre widget, cliquez sur l'onglet Espacement et configurez les marges de manière à ce qu'elles soient négatives (par exemple, -50px).

  4. Pour faire de l'icône un widget flottant, activez la case à cocher Flottant et sélectionnez une position pour le widget. Pour afficher le widget flottant sur la page actuelle uniquement, activez la case à cocher Afficher sur cette page uniquement.

Veillez à ce que vos paramètres de conception correspondent au bon appareil. Les paramètres comme l'espacement (du widget entier et de chaque élément) et la largeur, entre autres, sont définis pour chaque appareil.

Exemples

Créez une mise en page intéressante avec une forme amorphe

Créer une mise en page intéressante avec une forme amorphe :

  1. Créez une ligne avec deux colonnes.

  2. Choisissez une forme amorphe et ajoutez-la dans la colonne de droite.

  3. Faites en sorte que la forme soit aussi large que la colonne.

  4. Dans l'éditeur de design, sélectionnez la disposition avec l'image d'arrière-plan et remplacez l'image par celle de votre choix.

22384747496983-shapewidget2_en-us.jpg
Utiliser une forme comme bouton

Pour utiliser une forme comme bouton et y ajouter un lien et un effet de survol :

  1. Sélectionnez le cercle et ajoutez un titre et une description.

  2. Choisissez les couleurs de la forme et du texte.

  3. Pour placer la forme dans le coin d'une image, utilisez une marge de valeur négative du côté gauche de la forme (espacement > marge > marges gauche et supérieure de - 50 px).

22384799701783-shapewidget3_en-us.jpg
Mettre en valeur un plan ou un service spécifique

Pour mettre en évidence un forfait ou service particulier à l'aide de formes :

  1. Choisissez le pavillon à deux pointes et ajoutez un titre et une brève description.

  2. Désactivez la fonction Garder les proportions pour ne régler que la largeur.

  3. Choisissez les couleurs de la forme et du texte.

  4. Pour placer la forme de sorte qu'elle chevauche la partie supérieure d'une colonne, utilisez une marge supérieure de valeur négative (espacement > marge > marge supérieur de - 30 px).

22384747643031-shapewidget4_en-us.jpg
Créer un bouton de défilement

Pour créer un bouton de défilement à l'aide d'une forme :

  1. Choisissez le losange et ajoutez un titre.

  2. Désactivez la fonction Garder les proportions pour ne régler que la largeur.

  3. Choisissez les couleurs de la forme et du texte.

  4. Pour superposer la forme à une image, utilisez une marge supérieure de valeur négative (espacement > marge > marge supérieure de - 50 px).

22384816667031-shapewidget5_en-us.jpg