Comment utiliser l'éditeur de Landing Pages de Sarbacane Sunrise ?

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 HTLM 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 email

• à partir de zéro, et ainsi créer votre landing à partir d'une page vide et d'y glisser les modules
• à 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éduire le menu de droite une fois les modules intégrés, vous gagnez ainsi en espace pour intégrer vos textes et vos images 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.

Thè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

Une fois le ou les blocs intégrés, vous pouvez y glisser les contenus souhaités : image, textes, séparateur, titre, bouton...

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.

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.