Passer au contenu principal

Création graphique des boutons / CTA

Tout savoir sur les différentes options de création, design des boutons CTAs

Mis à jour cette semaine

L'ajout des boutons se trouve dans la section "Boutons" de la barre latérale gauche dans l'éditeur. Tout savoir sur l'ajout et la configuration des boutons, ici.

Deux options de création s'offrent à vous :

  • La création de bouton directement dans la plateforme

  • L'ajout de vos boutons en format image dans la zone d'upload


Création des boutons dans l'éditeur

  • Vous pouvez utiliser l’outil de création de bouton intégré à la plateforme en ajoutant un ou plusieurs style de bouton et en modifiant son aspect via les paramètres de personnalisation. Voir les options possibles.

  • Vous pouvez avoir un aspect identique à vos boutons traditionnels.

  • Vous pouvez y appliquer l’un des effets d’animation intégrés dans la

    plateforme pour dynamiser votre bouton.

  • La qualité sera optimale, ils ne seront jamais pixelisés ou flous même avec une redimensionnement.

✍️ Note :

  • N’est pas compatible avec les boutons associés aux widgets de partage, ni le bouton optin (Newsletter).

  • Vous ne pouvez pas créer d’état survol et cliqué avec ce mode de création.


Création des boutons en image

  • Vous pouvez utiliser un logiciel de création vectorielle (ex : Illustrator, Figma) pour les créer et pouvoir les exporter au format .svg (recommandé)

  • Leur taille est libre - Taille recommandée : 350 x 60 px

  • Pour faciliter l’intégration, nous conseillons de produire des visuels avec

    une hauteur et/ou une largeur fixe (ex ci-contre)

  • Les boutons sont complètement personnalisables graphiquement.

  • Vous pouvez créer jusqu’à 3 états du même bouton : simple / survol / cliqué.

  • Vous pouvez y appliquer l’un des effets d’animation intégrés dans la plateforme pour dynamiser votre bouton.

Privilégiez le format .svg

Nous vous recommandons ce format afin de gagner en qualité d'apparence.

Cette fonctionnalité est uniquement disponible pour les boutons (classiques et widgets) ainsi que les médias images.

  • Les textes contenus dans les boutons doivent être vectorisés avant d’être exportés car la typo utilisée dans le .svg risque d’être remplacée si le joueur ne la possède pas sur le device utilisé pour jouer

  • Pour cela, nous vous conseillons de dupliquer tous vos boutons dans un second calque avant de vectoriser les textes afin de conserver des boutons dont les textes resteront éditables si besoin d’y apporter des modifications

  • Dans Illustrator, vous pouvez utiliser l’outil “Exportation de fichier” pour exporter facilement et rapidement vos boutons dans différents formats (.svg, .png, .jpg) en faisant glisser les boutons du calque “TXT Vecto” dans la fenêtre

  • Vous pouvez ensuite intégrer vos exports .svg dans votre maquette .psd

Voici une Notice ainsi qu'un Template Illustrator (.Ai) vous expliquant la création de boutons en format .SVG :

Le template comporte deux calques (textes modifiables et textes vectorisés) dans lesquels se trouvent les boutons qui sont groupés et renommés.

Vous pouvez également les créer sous Figma :

  • Pour cela, nous vous conseillons de dupliquer tous vos boutons avant de vectoriser les textes afin de conserver des boutons dont les textes resteront éditables si besoin d’y apporter des modifications

  • Dans Figma, vous pouvez utiliser l’option “Flatten” pour vectoriser vos textes

  • Pour ensuite les exporter au format .svg depuis l’interface.


Format d'exportation des boutons

Les boutons créés depuis un logiciel externe peuvent être intégrés aux formats .jpg / .gif / .png et .svg (.svg recommandé) dans la plateforme Adictiz Box.

Il doivent être exportés :

  • Séparément = un .png / .jpg / .gif / .svg par bouton

  • Rognés à la dimension du visuel

Avez-vous trouvé la réponse à votre question ?