Etape 2 - Personnalisation - Les champs

S’abonner

Une fois la première étape validée, vous passez à la seconde étape de la création : La personnalisation.

Sur le panel de gauche, vous retrouvez deux catégories : Général et Champs.

Nous nous intéressons ici aux Champs.

 

mceclip0.png

 

Pour ajouter un champ, il suffit de glisser-déposer ce dernier de la zone de gauche vers la zone blanche de droite. Vous arrivez ensuite sur la personnalisation de votre champ. Lorsque vous êtes en édition d'un champ, vous pouvez revenir à la liste des champs en cliquant sur l'intitulé 'Champs'.

 

Vous pouvez modifier l'emplacement de votre champ à l'intérieur de la pop-in en le glissant et déposant à l'endroit où vous souhaitez.

 

Pour chaque champ il y a deux boutons : 

Le bouton mceclip22.png qui supprime le champ de votre pop-in et vous fera revenir à la liste des champs.

Le bouton mceclip23.png qui vous permet de dupliquer à l'identique un champ.

 

 

Il y a 12 champs différents pour la personnalisation de votre pop-in, répartis en 3 grandes catégories

- Les champs de mise en page : Label, Bouton et Image.

Les champs de saisieSaisie de texte, Mot de passe, Date, Nombre, Email et Zone de texte.

Les champs de listingCase à cocher, Bouton radio et Liste déroulante.

 

Les champs de mise en page :

 

- Le champ LABEL est un texte simple personnalisable.

mceclip3.png

Cette zone de saisie permet d'inscrire l'intitulé du texte qui sera écrit.

 

mceclip4.png

En actionnant le bouton de personnalisation de la police, vous pouvez définir la police, la taille ainsi que la couleur du label. Si vous décocher le bouton de personnalisation, le label prendra la police et la taille par défaut. Vous pouvez cependant toujours choisir la couleur.

 

mceclip5.png

Vous pouvez définir le style de la police : Gras, Italique et Souligné.

 

mceclip6.png

Vous pouvez spécifier l'alignement du texte : à droite, centré ou aligné à gauche.

 

mceclip4.png mceclip6.png

Le padding représente l'écart qui se trouve entre le bord de la pop-in et le label. Par défaut, les paddings sont de 10 pixels tout autour de la pop-in, mais il est possible de personnaliser chaque côté de la pop-in en actionnant mceclip5.png (cf. photo de droite). Vous pouvez voir un aperçu des paddings grâce au rectangle bleu.

 

_____________________________________________________________________________________

 

- Le champ BOUTON sera le bouton de validation de la pop-in (si présence d'un formulaire), il est limité à un bouton par pop-in.

 

La zone de saisie permettant d'inscrire l'intitulé du bouton, la personnalisation de la police, l'alignement, le style de la police ainsi que le padding présente les mêmes fonctionnalités que pour le champ Label.

 

mceclip7.png

Il est possible de définir la largeur en % et la hauteur en pixel que le bouton prendra au sein de la pop-in.

 

mceclip8.png

La couleur de fond sera la couleur du bouton.

 

mceclip9.pngmceclip10.png

L'arrondi définit les bords du bouton (cf. photo de droite).

 

mceclip11.png

 

Vous pouvez définir si votre bouton aura des bordures ou non, et ainsi les personnaliser en modifiant la couleur des bordures et ainsi que leur épaisseur.

 

_____________________________________________________________________________________

 

- Le champ IMAGE permet d'ajouter une image au sein de votre pop-in.

mceclip12.png

Vous pouvez ajouter une image uniquement grâce à une URL que vous pouvez saisir dans le champ URL.

La largeur, l'alignement ainsi que le padding présentent les mêmes fonctionnalités que dans les autres champs.

 

_____________________________________________________________________________________

 

Les champs de saisie :

 

Les champs de saisie sont tous quasiment identiques, seul le type de saisie change. Ils possèdent donc tous les mêmes paramètres de personnalisation.

 

mceclip13.png

La zone de saisie de label permet de définir le libellé de votre champ de saisie. Il sera inscrit au dessus de du champ de saisie sur votre pop-in.

 

mceclip14.png

Vous pouvez personnaliser la police du libellé qui accompagnera votre champ de saisie. Le choix de la police, la couleur ainsi que la taille sont personnalisables. Par défaut, ils prendront les paramètres que vous aurez défini dans la partie 'Général' du panel.

 

mceclip15.pngmceclip16.png

Le placeholder est le texte qui sera affiché en information à l'intérieur du champ de saisie, il disparaitra lorsque l'utilisateur rentrera sa saisie.

 

La largeur, l'arrondi, l'alignement ainsi que le padding présentent le même fonctionnement que dans les champs cités précédemment.

 

mceclip18.png

Le champ CRM360 permet de mapper une zone de saisie avec un champ de la base de données. Différents choix sont possibles : Nom, Prénom, Date de naissance, Email, Téléphone, Optin email et Optin SMS.

 

mceclip19.png

En actionnant le champ requis, cela permet de rendre votre champ de saisie obligatoire avant la validation avec un bouton.

 

Seulement une différence pour la zone de texte :

 

mceclip20.png

La zone de texte est similaire à la saisie de texte, il est cependant possible de modifier la hauteur de la zone de saisie.

 

_____________________________________________________________________________________

 

Les champs de listing :

Le label, la personnalisation de la police, le champ requis ainsi que le padding sont identiques aux autres champs.

- Les cases à cocher :

mceclip24.pngmceclip25.png

 

La première zone de saisie permet d'ajouter un choix de réponse. En pré-cochant la case à cocher, vous pouvez faire en sorte que la réponse soit déjà cochée. Vous pouvez également lier une réponse à un champ CRM360 (pour les optins par exemple). Plusieurs cases à cocher peuvent être cochées dans la pop-in.

 

- Les boutons radio

mceclip24.pngmceclip26.png

 

Les boutons radio sont identiques aux cases à cocher, cependant il est possible de ne cocher qu'une seule réponse.

 

- La liste déroulante

mceclip30.pngmceclip28.png

 

Les listes déroulantes permettent de faire un choix parmi une liste.

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0
Vous avez d’autres questions ? Envoyer une demande