Comment utiliser l’éditeur de Landing Pages de Sarbacane Sunrise (ancienne version) ?

L'éditeur de landing pages utilise l'éditeur Drag&Drop créé et édité par Sarbacane Software dans le but de simplifier la création et la publication d'une landing page. Sa simplicité permet une utilisation sans compétence technique en HTML ou en CSS afin de créer une page web responsive et efficace.

A partir d'une page blanche, vous pouvez composer facilement et rapidement une landing page en glissant et déposant des modules. Tout est paramétrable et personnalisable : le style graphique, les couleurs, les bordures, la typographie...

Il vous suffit de créer votre page web, Sarbacane l'héberge pour vous, et il ne vous reste plus qu'à communiquer par email !

Accéder à la création d'une landing page

Pour créer une landing, il vous suffit d'accéder au menu "Pages et formulaires", et de cliquer sur "Créer une landing page". Après l'avoir nommée et choisi le type "Page responsive", vous accédez à l'éditeur de landing page.

Vous pouvez créer votre landing page de trois manières différentes :

• à partir de zéro, et ainsi créer votre landing à partir d'une page vide en y glissant-déposant les blocs et contenus de votre choix
• à partir d'un modèle déjà existant à modifier pour partir d'une structure déjà existante, modifier les contenus et adapter la mise en page

 Depuis le haut de page, vous pouvez :

• visualiser la landing sur desktop ou sur mobile en cliquant sur cette icône

• avoir un aperçu de votre page en cliquant sur cette icône

• travailler sur la landing en plein écran supprimant ainsi les menus et gagner en terme d'espaces pour travailler au maximum sur la mise en page de votre page web en cliquant sur cette icône

Réglages et paramétrages

Avant de commencer à insérer le contenu de la page web, il faut paramétrer la mise en page, le thème, les couleurs et les réglages de la landing. Pour la paramétrer, accédez au menu "Styles" à droite de l'écran.

Mise en page

Pour la mise en page, vous avez le choix entre un arrière plan uni, un arrière plan coloré, des blocs de couleurs alternées, et des blocs de couleurs alternées en pleine largeur. En naviguant sur les différentes possibilités, choisissez le style qui correspond le mieux à votre landing.hèmes et répartition des couleurs

L'ensemble des couleurs de la landing sont personnalisables. Des thèmes vous sont proposés pour vous suggérer une base de couleurs. Faites votre choix :

Chaque couleur peut être ensuite modifiée par élément depuis la "Répartition des couleurs".  Ainsi vous pouvez modifier la couleurs de tous les éléments de votre email : body, arrière-plan, bordure, textes, boutons, titres, liens...

vous pouvez personnaliser la couleur en cliquant sur la couleur correspondante, choissir une couleur dans la palette ou renseigner directement la couleur.

Réglages

 Dans les réglages, vous paramétrez votre landing page :

• Activez ou désactivez la version mobile de votre page web
• Modifiez les couleurs du conteneur principal, des bords et indiquez la taille souhaitée des bordures
• Définissez la largeur de votre page sur version PC
• Indiquez les typographies que vous souhaitez utiliser pour les titres H1 et H2, les pragraphes et les boutons
• Paramétrez les espace entre les blocs de contenus
• Définissez les marges intérieures

Contenus

Une fois la structure de la page créée, vous pouvez intégrer les blocs et les contenus pour créer votre page.

Blocs

Pour intégrer le contenu de votre page, vous devez dans un premier temps choisir le blocs : 1 colonne, 2 colonnes, 3 colonnes... Il vous suffit de les glisser et déposer pour créer la structure de votre landing page.

Contenus

Les contenus sont des éléments que vous pouvez placer dans les colonnes de vos blocs. Pour cela, cliquez sur le contenu souhaité et glissez-déposez-le dans le contenant de votre choix.

L'image

Une fois le module "Image" intégré, vous pouvez :

• choisir votre image en cliquant sur la première icône
• dupliquer l'image pour la réutiliser dans votre page, en cliquant sur la deuxième icône
• déplacer l'image dans la structure de la page, en cliquant sur la troisième icône
• supprimer le module, en cliquant sur la quatrième icône

Pour importer une image, vous avez le choix entre une image enregistrée sur votre ordinateur, une image présente dans la banque d'images, ou utiliser une image déjà hébergée en renseignant une URL.

La banque d'images

Une banque d'images libres de droit est disponible dans la solution Sarbacane Sunrise. Elle compte plus de 1.000 photos professionnelles pour illustrer facilement vos pages web.

Attention : ces images ne sont utilisables que sur la solution Sarbacane pour illustrer vos campagnes emailings, vos formulaires et vos landing pages.Pour importer une photo, il vous suffit de la choisir et de cliquer directement sur l'image. L'éditeur d'images s'affichera et vous pourrez modifier l'image en la recadrant, en ajoutant un filtre, ou encore en y ajoutant du texte. Cliquez ici pour en savoir plus sur l'utilisation de l'éditeur d'images.

 Une fois intégrée, vous pouvez toujour retoucher votre image, personnaliser les dimensons, modifier l'alignement, ajouter un lien et une légende.

Le texte

Pour intégrer du texte, il suffit de glisser le module texte dans un bloc. Une fois intégré, vous pouvez modifier le texte présent et le mettre en page :

Paramétrez :

• la typographie, la taille et la couleur du texte
• la graisse, l'italique, le souligné, le barrer, l'indice
• l'interlignage
• l'alignement
• les listes à puces ou à numéros
• le type de texte : titre 1, titre 2 ou paragraphe
• la couleur de fond du texte
• une image
• un lien à ajouter ou à supprimer

L'espace

En ajoutant le module "Espace", vous ajoutez automatiquement un espace blanc de 20px de haut. Cet espace est ajustable en indiquant juste la taille de l'espace souhaitée :

Le séparateur

Vous pouvez ajouter dans votre mise en page un module "Séparateur" :

Paramétrable lorsque vous cliquez sur le stylo :

 Vous avez la possibilité de créer un séparateur en ligne continue, en ligne pointillée, ou en double ligne.

Le titre

Vous pouvez aussi ajouter une zone de texte juste pour le titre :

Le titre prend automatiquement la taille et la typographie des paramètres de "Titre" paramétrés dans les réglages. Cependant, vous avez toujours la possibilité de modifier sa mise en forme grâce à la palette de réglages :

Le bouton

Vous pouvez intégrer un bouton dans la mise en page de votre landing page, il est paramétrable juste en cliquant dessus :

Vous pouvez :

• modifier la typographie, sa taille, sa couleur, la graisse et l'italique
• ajouter un lien vers une page web ou un formulaire publié
• utiliser un thème pour modifier la couleur du fond et de la bordure, et sa taille
• indiquer la position

Les réseaux sociaux

Vous pouvez ajouter les liens vers vos réseaux sociaux :

 et les paramétrer :

En cliquant sur le bouton "Ajouter/Supprimer", vous avez la possibilité de sélectionner ou désélectionner des réseaux sociaux :

Il vous suffit ensuite de renseigner l'URL de votre page sur chaque réseau :Partager sur les réseaux sociaux

Un module vous permet d'ajouter le partage du contenu sur les réseaux sociaux. Vous avez la possibilité de paramétrer le partage pour LinkedIn, Google+, Twitter et Facebook.

Paramétrez le module "Partage" en cliquant dessus et modifier le lien à partager, le texte, la typographie, la couleur, les bordures et l'alignement :

Le flux RSS

Dans votre landing page, vous pouvez intégrer un flux RSS grâce au module prévu à cet effet. Une fois intégré, vous pouvez le paramétrer en cliquant dessus :

L'image flottante

Vous avez la possibilité d'intégrer directement un module texte intégrant une image flottante en haut à droite. Pour modifier l'image, il suffit de cliquer sur l'icône Image et de choisir la méthode d'imprt ou de supprimer l'insertion d'une image dans le bloc de texte.

Google Maps

Vous avez la possibilité d'intégrer sur votre landing page un plan Google Maps. pour cela, il vous suffit de glisser le contenu Google Maps et de renseigner l'adresse à afficher :

Et l'image s'affiche en cliquant sur "Générer le plan" :

Vous pouvez paramétrer l'affiche du plan : taille, alignement, et légende.

Code HTML

Vous pouvez insérer un contenu de code HTML directement dans votre landing page. Vous avez la possibilité de saisir ou copier-coller votre code dans le bloc. Vous aurez ainsi davantage de contrôle et de flexibilité sur la conception et la structure des blocs. Cependant il est nécessaire de maîtriser l'intégration HTML email pour utiliser ce type de contenu.

Video

Il est possible de générer automatiquement des Gifs animés à partir d'un contenu vidéo de votre choix.
Pour cela, glissez-déposez ce type de contenu dans un bloc.

Dans le champ "URL", copiez-collez l'URL de votre vidéo hébergée sur Youtube, Dailymotion, Vimeo, Twitter, Facebook, Instagram... Un lien vers cette URL sera automatiquement inséré sur votre contenu vidéo.

Dans le champ "Format", sélectionnez le format dans lequel vous souhaitez que l'image de votre vidéo soit générée. Seul le format "Gif animé" permet d'afficher une animation. Le format Jpeg correspond à une image fixe.

La rubrique "Bouton" vous permet de sélectionner le style du bouton "play" que vous souhaitez ajouter sur votre vidéo. Vous pouvez choisir de ne pas en mettre si vous le souhaitez. Toutefois les lecteurs comprendront mieux que l’image est cliquable et qu’elle renvoie vers une vidéo si vous y intégrez un bouton "play".

Le champ "Début" vous permet de déterminer à partir de quelle heure/minute/seconde de votre vidéo vous souhaitez que l'image (animée ou non) soit capturée.

Le champ "Durée" vous permet de déterminer la durée de votre Gif animé (entre 1 et 20 secondes). 

L'option "Boucle de répétition" vous permet de jouer votre animation en boucle si l’option est activée (coche verte) ou de la stopper à la fin de l'animation si l’option est désactivée (coche grise).

Une fois ces opérations terminées, cliquez sur "Générer la capture". La génération d'un Gif animé peut prendre plusieurs secondes.

Article

Ce contenu vous permet d'automatiser la construction de votre landing page à partir des articles de votre blog. Vous devez préalablement configurer le connecteur Wordpress.

Formulaire

Vous pouvez enrichir votre landing page en y intégrant un formulaire.

Lors de l’édition de votre landing, il vous suffit de glisser-déposer un contenu de type formulaire dans le bloc de votre choix.Vous pouvez alors visualiser sur votre landing page l’espace qui sera dédié à votre formulaire. L’espace est grisé, cela signifie qu’il est vide puisqu’aucun formulaire n’y est associé pour le moment.

Cliquez maintenant sur l’espace gris dédié à votre formulaire, une fenêtre s’ouvre avec une liste déroulante vous présentant tous les formulaires disponibles sur votre compte. Tous les formulaires publiés sur votre compte peuvent être intégrés à votre landing page quel que soit le mode de publication choisi (page dédiée, pop-up ou bloc à intégrer)
Sélectionnez le formulaire que vous souhaitez intégrer à votre landing page dans la liste déroulante.

Vous devez avoir publié votre formulaire pour qu’il s'affiche dans cette liste et que vous puissiez l’intégrer à votre landing page. Si vous n’avez pas encore créé de formulaire, aucune liste ne s’affichera mais vous pourrez cliquer sur le bouton orange “Créer un formulaire”.

Vous serez alors redirigé vers l’outil de création de formulaires et quitterez l’édition de votre landing. Vous pourrez bien entendu y revenir une fois votre formulaire créé et publié. Une fois votre formulaire créé, vous pourrez le sélectionner dans la liste déroulante des formulaires existants.

NB : Vous ne pouvez intégrer qu’un seul formulaire par landing page.

Votre landing page est prête ? Vous pouvez la publier en cliquant sur "Suivant" en haut à droite ou sur "Publication" dans le menu de gauche. Vous serez alors redirigé vers l’étape de publication de votre landing page.

Après avoir sélectionné le nom de domaine de votre choix, publiez votre landing page en cliquant sur le bouton vert “Publier la landing page”.

Une fois publiée, vous pourrez récupérer l’URL de votre page pour la partager sur les supports de communication de votre choix : campagne email, réseaux sociaux, etc...