L’éditeur CmonSite vous permet d’organiser vos pages avec différents éléments.
Vous pouvez ainsi adapter vos pages en fonction de votre activité !
Général
Les blocs de texte
Pour commencer vous trouverez les habituels outils d’édition de texte :
- Type de texte : vous allez pouvoir définir si votre texte est un titre (de niveau 1, 2, 3, …) ou un paragraphe par exemple.
- Couleurs : pour choisir la couleur de votre texte et/ou sa couleur de fond, vous avez accès à une palette de couleurs. Vous pouvez aussi définir une couleur personnalisée en cliquant sur « Personnaliser » indiquant le code de la couleur.
- Police : choisissez la police de caractères de votre choix.
- Alignement : alignez à gauche, à droite, centrez ou justifiez votre texte.
- Listes à puces et numérotation
- Icônes : sélectionnez parmi une large gamme des icônes qui vous plaisent et qui vont dynamiser votre texte et le rendre plus visuel.
- Insérer un lien : au sein de votre texte vous pouvez créer des liens vers des sites externes, des pages/produits de votre site ou encore vers un fichier depuis votre gestionnaire en ligne.
Les images
Faites glisser cet élément dans votre page pour y insérer une image. Vous pouvez choisir d’importer une image depuis votre ordinateur ou via votre gestionnaire en ligne.
Lorsque vous avez ajouté votre image, ce panneau apparaît :
- Taille de l’image : réglez la taille de l’image (en pixels).
- Position de l’image : alignez à gauche, à droite ou centrez votre image.
- Action au clic : vous pouvez ajouter un effet de zoom lorsque le visiteur clique sur votre image, la rendant plus grande et plus visible. Il est aussi possible d’insérer un lien dans votre image (vers un site externe ou vers une page de votre site).
- Légende de l’image : ajoutez un titre à votre image. Celui-ci apparaîtra au-dessus, en dessous ou au survol de la souris. Vous pouvez aussi le cacher.
- Style de l’image : changez le style de l’image en jouant sur ses formes ou les ombres notamment.
- Effet de survol de l’image : vous pouvez ajouter un effet sur votre image lorsque le visiteur passe sa souris dessus (zoom, flou, reflet, …).
Il vous est possible d’éditer directement votre image avec ce module. En cliquant sur « Editer l’image » vous pouvez :
Rogner
Redimensionner
Modifier l’orientation
Luminosité
Les espacements
Les espacements sont très utiles pour créer des décalages et des espaces entre vos différents blocs de contenu.
Vous pouvez les insérer au-dessus et en dessous de vos éléments pour aérer votre page.
Les séparateurs
Ils vous permettent de créer une séparation entre vos blocs via des lignes, des pointillés et d’autres motifs.
Vous pouvez aussi en définir la couleur.
Les boutons
Les boutons permettent d’ajouter des liens internes et externes à votre site.
Créez des liens internes en sélectionnant :
- une page
- une catégorie boutique
- un produit
- un article de blog
- un fichier depuis votre gestionnaire en ligne (images, document PDF, …)
Vous allez aussi pouvoir définir :
- Texte du bouton : il s’agit du texte qui s’affichera directement sur le bouton.
- Position du bouton : alignez à gauche, à droite ou centrez votre bouton.
- Autres styles de bouton : choisissez parmi différents designs, l’animation de bouton qui vous convient.
- Couleur du bouton : changez la couleur du bouton grâce à une palette de couleurs.
- Taille du bouton : définissez la taille à laquelle s’affiche votre bouton (en pixels).
Les Templates
Les templates sont des blocs de mise en page prédéfinis destinés à vous faire gagner du temps lors de l’édition de vos pages.
Il vous suffit de faire glisser et déposer votre template à l’endroit souhaité.
Ils peuvent être utilisés sur 1 à 4 colonnes.
En cliquant sur les différents éléments, vous pouvez en modifier le contenu (texte, images, …) mais aussi les déplacer comme vous le souhaitez en utilisant le bouton de déplacement : 
.
Les modules
Vignettes de catégorie boutique
Ce module récupère les vignettes de vos catégories boutique et crée les boutons associés ou des images cliquables.
Vous pouvez choisir :
- Style d’affichage : choisissez le design de vos vignettes.
- Nombre de colonnes : vous pouvez en définir entre 2 et 6. Sélectionnez « Auto » et vos vignettes s’adapteront au nombre de catégories dont vous disposez.
- Taille du texte (en pixels)
- Couleur de fond
- Couleur de fond du texte
- Couleur de texte
- Position du texte : choisissez entre au-dessus, en dessous et au-dessus de l’image.
Formulaire
Le module de formulaire vous permet de placer dans votre page un formulaire afin que vos clients répondent à vos questions.
Cela peut être le cas pour un devis ou une enquête de satisfaction.
Pour en savoir plus sur la création de formulaires, cliquez ici.
Actualités
Ce module vous offre la possibilité de créer un flux d’actualités et de l’insérer dans une page.
Mettez en avant vos prochains événements ou les différents articles qui parlent de vous avec ce module !
Pour en savoir plus sur la création d’un flux d’actualités, cliquez ici.
Calendrier
Faites glisser ce module dans votre page pour afficher le calendrier de votre choix.
Cela peut être pertinent pour informer vos clients de vos futurs événements notamment.
Pour en savoir plus sur la création d’un calendrier, cliquez ici.
Diaporama
Ajouter un diaporama à sa page est un bon moyen de mettre en avant certaines images. Ainsi, vous pourrez présenter vos dernières créations ou réalisations de façon dynamique.
Pour en savoir plus sur le module diaporama, cliquez ici.
Foire aux questions
Ce module vous permet d’ajouter une FAQ que vous aurez auparavant créée.
Vous pouvez par exemple y recenser les questions qui vous sont fréquemment posées et leur apporter une réponse adéquate.
Pour en savoir plus sur la création d’une FAQ sur son site, cliquez ici.
Bouton de partage
Le bouton de partage permet à votre client de partager votre site sur ses réseaux sociaux (Facebook, Twitter ou Pinterest).
Blog
Le module de blog affiche vos articles de blog sur votre page. Vous pouvez en afficher jusqu’à 10.
Utilisez-le pour mettre en avant vos meilleurs articles ou les derniers sortis.
Pour en savoir plus sur le module de blog, cliquez ici.
Google Map
Ce module ajoute une carte sur laquelle vous pouvez par exemple renseigner l’adresse de votre entreprise, ou le lieu de votre prochain événement.
Vous allez pouvoir paramétrer plusieurs champs de ce module :
- L’adresse que vous souhaitez mettre en avant avec cette carte. Cela peut être l’adresse de votre magasin par exemple.
- Le type d’affichage : carte, satellite ou bien carte et satellite en même temps.
- Le zoom : réglez le zoom sur votre carte (de 4 000 km à 5 m de distance).
- Largeur et hauteur en pixels : choisissez les dimensions auxquelles votre carte s’affiche.
Instagram
Avec ce module, vous allez pouvoir relier votre compte Instagram à votre site. Ainsi, vous pourrez afficher les dernières photos que vous avez publiées sur votre site.
Ce module vous sera donc utile pour mettre en avant vos dernières créations mais aussi pour faire découvrir votre Instagram aux visiteurs.
Pour en savoir plus sur le module Instagram, cliquez ici.
Pour utiliser les modules de formulaire, actualités, calendrier, diaporama, foire aux questions, blog, il est nécessaire de les paramétrer avant de les insérer dans une page.
Rendez-vous dans votre administration puis dans l’onglet « Modules » à la section « Contenu ».
Les médias
Vidéo iframe
Insérez le média vidéo iframe dans la page de votre choix.
Celui-ci permet d’insérer une vidéo sur votre site qui pourra être lue depuis votre page.
Vous avez une chaîne YouTube sur laquelle vous mettez en avant votre activité ? Profitez de ce module !
Attention, ce module n’est compatible qu’avec les vidéos hébergées sur YouTube, Dailymotion, Vimeo, Canal + ou Twitch.
Les éléments de structure
Section
Les sections vous permettent d’organiser votre contenu de façon optimale.
Vous pouvez configurer la section selon vos envies :
- Nombre de colonnes : vous pouvez diviser votre section en colonnes (de 1 à 6).
Cela est utile pour placer une image à côté d’un texte notamment. - Largeur entière du site : activez cette option et le contenu de votre section prendra alors toute la largeur de votre site.
Par exemple, pour créer une bannière cette solution est très pertinente. - Marge entre les éléments : définissez la marge entre les colonnes de votre section.
- Marge intérieure : vous pouvez appliquer des marges autour de votre contenu.
Si vous mettez une image en fond de votre section et que vous rajoutez une zone de texte par-dessus, utilisez ces marges pour que ce texte ne soit pas trop collé en haut et en bas de votre image. - Fond sur toute la largeur du site : pour appliquer une couleur ou une image de fond à votre section. Si vous cliquez sur ce bouton, celle-ci appliquera le fond sur toute la largeur du site, mais pas le contenu de votre section comme son texte par exemple.
- Couleur de fond : choisissez une couleur de fond pour votre section grâce à une palette de couleurs.
- Image de fond : ajoutez une image de fond à votre section en l’important depuis votre ordinateur ou votre gestionnaire en ligne.
Après avoir ajouté une image, vous pouvez définir sa position, sa répétition ou sa taille.
Ajoutez un effet parallaxe pour ajouter du dynamisme à vos images et leur donner une illusion de profondeur.
Grille tarifaire
Il est possible d’insérer une grille tarifaire dans votre page.
Faites glisser ce module et cliquez sur « Ajouter une ligne » pour enrichir votre grille.
Retrouvez plus d’explications sur la mise en page avec l’Editeur CmonSite dans nos vidéos ci-dessous