Email optin

Augmenter votre liste de diffusion est facile en utilisant le module Email Optin. Le module d’inscription par e-mail prend en charge 20 fournisseurs de marketing par e-mail.

Augmenter votre liste de diffusion est facile en utilisant le module Email Optin. Le module d’inscription par e-mail prend en charge 20 fournisseurs de marketing par e-mail.

COMMENT AJOUTER UN MODULE Email optin À VOTRE PAGE​

Avant de pouvoir ajouter ce module à votre page, vous devrez d’abord ouvrir le constructeur visuel “Layer”. Vous remarquerez un bouton “Modifier avec le constructeur de page Layer” au centre de l’écran à chaque fois que vous créez une nouvelle page. Cliquer sur ce bouton activera le constructeur visuel, vous donnant accès à tous les modules de Layer. Vous pouvez également cliquer sur le bouton “Activer le constructeur visuel” lors de la navigation sur votre site sur le front-end si vous êtes connecté à votre administration.

Une fois que vous êtes sur l’interface du constructeur de page, vous pouvez cliquer sur le bouton gris “plus” pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu’à l’intérieur des lignes. Si vous commencez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Lisez l’article sur la structure des section et lignes.

Options de contenu du module Email optin

Dans l’onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes. Tout ce qui contrôle ce qui est affiché dans votre module sera toujours trouvé dans cet onglet.

Texte

Cet onglet vous permet de paramétrer le titre, le nom du bouton, une description.

Compte de messagerie

Paramétrez votre compte parmi les 20 fournisseurs disponibles

Champs

Sélectionnez les champs à afficher en plus de l’adresse mail: 

  • Que le nom
  • Le nom et le prénom

Section

Configurez l’action après l’envoi du formulaire :

  • Rediriger vers une URL
  • Afficher un message

Protection anti-spam

Utiliser une protection anti-spam, google recaptcha est disponible. pour la première fois, il vous faudra cliquer sur Ajouter. Ensuite entrez les informations demandées.

  • Nom de compte : ce nom est pour votre usage uniquement.
  • Comment obtenir mon Site Key (v3) et Secret key (v3) : Après vous être connecté à l’aide de votre compte Google sur le site : “recaptcha“, vous verrez la console d’administration reCAPTCHA. Les clés API sont attribuées par domaine de site Web. Cliquez sur l’icône “+” située dans la barre bleue en haut à droite de la page.
    Entrez les informations demandées, sélectionnez recaptcha V3. Une fois le formulaire envoyé vous êtes redirigé vers une page indiquant  vos clés, copiez et collez-les dans les champs appropriés dans les paramètres de votre module Layer. 

Lien

Ici, vous pouvez ajouter un lien à votre module. Si le visiteur clique sur le module il sera envoyé vers L’URL que vous avez entré.

Étiquette Admin

Cela changera l’étiquette du module dans le constructeur pour une identification facile. Lors de l’utilisation de l’affichage filaire dans Layer, ces étiquettes apparaîtront dans le bloc de module de l’interface.

Options de Style du module Email optin

Dans l’onglet Style, vous trouverez toutes les options de design du module, telles que les polices, les couleurs, le dimensionnement et l’espacement. C’est l’onglet que vous utiliserez pour changer l’apparence de votre module. Chaque module a une longue liste de paramètres de style que vous pouvez utiliser pour modifier à peu près tout.

Modèle

Choisissez l’emplacement où vous souhaitez que les champs apparaissent par rapport au texte de description et au texte du titre. Vous pourrez aussi choisir la taille de vos champs plein écran ou 50% de l’écran. 

Champs

En cochant la case de cet onglet vous aurez la possibilité de personnaliser le style de vos champs:

  • Taille du texte
  • Couleur du texte
  • Couleur de fond du bouton
  • Largeur de la bordure
  • Couleur de la bordure
  • Rayon de la bordure
  • Espacement des lettres
  • La police
  • Le poids de la police
  • Style de la police
  • Ajouter ou non une icône
  • Choisissez l’icône de votre choix dans le catalogue d’icônes
  • La couleur de l’icône
  • L’alignement de l’icône : à droite ou à gauche du texte
  • Quand afficher l’icône : Par défaut, les icônes de boutons sont affichées en survol. Si vous souhaitez que les icônes soient toujours affichées, vous pouvez activer cette option.
  • Ombre du texte

Texte

Personnalisez l’alignement du texte, aligné à droite, à gauche ou au centre. Vous pouvez également ajouter une ombre portée sur le texte.

Titre Texte

Sélectionnez la couleur du titre lorsque la bascule est ouverte avec l’option couleur du titre ouvert. Grace à l’option couleur du titre, vous pouvez personnaliser la couleur du titre quelque soit la position de la bascule. la première option prendra le dessus sur la seconde pour vous permettre de d’appliquer deux couleurs différentes pour le titre en position ouverte et en position fermée.
Personnalisez le tag HTML. H1 étant le titre le plus important et H6 le titre le moins important. Ce paramètre est très important pour votre SEO.
Vous pourrez ensuite modifier la police, son poids, le style (Italique majuscule, souligné, …) son alignement, sa taille, l’espacement des lettres, la hauteur de ligne et enfin l’ombre portée.

Corps texte

Dans cet onglet vous pouvez configurer le style du texte, des liens, des listes et des citations; pour chacune de ces options de texte les réglages suivants sont possibles:

Vous pourrez modifier la police, son poids, le style (Italique majuscule, souligné, …) son alignement, sa taille, l’espacement des lettres, la hauteur de ligne et enfin l’ombre portée.

Message de succès

Dans cet onglet vous pouvez configurer le style du texte, des liens, des listes et des citations; pour chacune de ces options de texte les réglages suivants sont possibles:

Vous pourrez modifier la police, son poids, le style (Italique majuscule, souligné, …) son alignement, sa taille, l’espacement des lettres, la hauteur de ligne et enfin l’ombre portée.

Bouton simple

En cochant la case de cet onglet vous aurez la possibilité de personnaliser le style de votre bouton. De nouvelles options apparaîtrons pour personnaliser votre bouton:

  • Taille du texte
  • Couleur du texte
  • Couleur de fond du bouton
  • Largeur de la bordure
  • Couleur de la bordure
  • Rayon de la bordure
  • Espacement des lettres
  • La police
  • Le poids de la police
  • Style de la police
  • Ajouter ou non une icône
  • Choisissez l’icône de votre choix dans le catalogue d’icônes
  • La couleur de l’icône
  • L’alignement de l’icône : à droite ou à gauche du texte
  • Quand afficher l’icône : Par défaut, les icônes de boutons sont affichées en survol. Si vous souhaitez que les icônes soient toujours affichées, vous pouvez activer cette option.
  • Ombre du texte

Dimensionnement

Paramétrez la largeur du module et sa largeur maximale, utile le responsive “design adaptatif en fonction de l’appareil du visiteur”. Configurez l’alignement du module.
Gérez la hauteur; peux utile pour ce module. Mais il a le mérite d’être là pour les cas spéciaux.

Espacement

La marge vous sera utile pour ajouter de l’espace entre le bord extérieur du module et le contenu de celui-ci.

La marge internet sera utile pour ajouter de l’espace entre les bord des bascules et le contenu de texte.

Bordure

L’activation de cette option placera une bordure autour de votre module. Cette bordure peut être personnalisée à l’aide des paramètres conditionnels suivants:

  • Coins arrondis, cette option vous permet de créer des coins arrondis à votre module.
  • La couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l’appliquer à votre bordure.
  • L’épaisseur de la bordure:Par défaut, les bordures ont une largeur de 1 pixel. Vous pouvez augmenter cette valeur en faisant glisser le curseur ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur. Unités de mesure personnalisées, ce qui signifie que vous pouvez changer l’unité par défaut de “px” à autre chose, comme em, vh, vw, etc.
  • Les bordures prennent en charge huit styles différents, notamment: plein, pointillé, tirets, double, rainure, crête, encart et aucun. Sélectionnez le style souhaité dans le menu déroulant pour l’appliquer à votre bordure.

Ombre

Ajoutez une ombre à votre module: 7 effets prédéfinis ou personnalisez votre propre style.

Transformer

À l’aide des commandes de transformation, vous pouvez effectuer des ajustements visuels sur n’importe quel élément à l’aide d’une combinaison de paramètres d’échelle, de déplacement, de rotation et d’inclinaison. Cela vous permet de créer des effets de conception avancés sans avoir besoin d’un programme de conception graphique distinct.

Animation

Choisissez un style d’animation pour activer les animations pour cet élément. Une fois activé, vous pourrez personnaliser d’avantage votre style d’animation. Pour désactiver les animations, choisissez l’option Aucune.

Options avancées du module Email optin

Dans l’onglet avancé, vous trouverez des options que les concepteurs Web plus expérimentés pourraient trouver utiles, telles que les attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également appliquer des classes CSS et des ID personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le menu “ajouter du CSS personnalisé” disponible dans le menu apparence de votre administration.

ID et Classes CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes, séparées par un espace.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tout élément interne du module. Dans la section CSS personnalisé, vous trouverez un champ de texte dans lequel vous pouvez ajouter du CSS personnalisé directement à chaque élément. Les entrées CSS dans ces paramètres sont déjà enveloppées dans des balises de style, vous n’avez donc qu’à entrer des règles CSS séparées par des points-virgules.

Attributs

Spécifiez la valeur de l’attribut rel de vos liens. L’attribut rel spécifie la relation entre le document actuel et le document lié. Astuce : les moteurs de recherche peuvent utiliser cet attribut pour obtenir plus d’informations sur un lien.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module apparaît. Vous pouvez choisir de désactiver votre module individuellement sur les tablettes, les téléphones ou les ordinateurs de bureau. Ceci est utile si vous souhaitez utiliser différents modules sur différents appareils ou si vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.

Vous trouverez l’option de planification pour afficher ce module à certains moments (en savoir plus sur l’option planification)
L’option popup vous permettra d’ajouter une popup (en savoir plus sur l’extension popup).

Transitions

Les transitions vous permettent de modifier les options des animations.

Position

Ici, vous pouvez choisir le type de position de l’élément. Les éléments absolute flotteront à l’intérieur de leurs éléments parents. Les éléments fixed flotteront dans la fenêtre du navigateur. Les éléments positionnés de manière relative se trouvent statiquement dans leur conteneur parent, mais peuvent toujours être décalés sans perturber les éléments environnants.

Vous pouvez contrôler la position de l’élément sur l’axe z. Les éléments ayant des valeurs d’indice z plus élevées seront placés au sommet des éléments ayant des valeurs d’indice z plus faibles.

Scroll effects

L’option sticky vous offre la possibilité que cet élément reste à une distance fixe du bord supérieur ou inférieur de la fenêtre du navigateur lorsque l’utilisateur fait défiler la page.

À l’aide des effets de défilement, vous pouvez transformer les éléments de votre page au fur et à mesure que vous faites défiler. La transition de l’animation est basée sur le comportement de défilement de l’utilisateur. Une fois que l’élément entre dans la fenêtre du navigateur (en haut), l’animation commence, et une fois qu’il quitte la fenêtre (en bas), l’animation se termine. Comme toutes bonnes choses à utiliser avec modération.

Articles en relation

Jila est une plateforme vous permettant de créer votre propre site Internet sans connaissances techniques. Grâce à nos nombreux outils professionnels et simplifiés tout le monde peut créer un site professionnel à son image.

© Copyright 2020-2021 | jila.fr
Développé en Provence

FONCTIONNALITÉS

Une plateforme ultra complète accessible à tous. Notre constructeur de page “Layer” vous permettra de créer votre site/blog en toute simplicité et sans connaissances techniques. Grâce au constructeur visuel, effectuez vos modifications en temps réel.

RESSOURCES

Nous mettons à votre disposition une documentation détaillée pour vous permettre de créer votre site Internet professionnel en toute autonomie. Nous vous proposerons également dans notre blog des tutoriels.

SUPPORT TECHNIQUE

Vous pouvez nous contacter par:

MENTIONS LÉGALES
Jila.fr – La fierté de créer son site Internet