Ceci est le guide le plus complet que vous puissiez trouver pour créer votre site internet Showit. J’ai mis en un seul endroit, toutes les étapes et tout ce dont vous avez besoin pour partir d’un template Showit à un site publié et prêt à accueillir vos premiers visiteurs.
Il existe plusieurs petits tutoriels qui vous montrent comment utiliser l’interface de Showit, ou comment réaliser telle ou telle petite action sur la plateforme. Mais pour vous organiser pour créer votre site, vous avez besoin d’une trame plus complète.
Vous voulez une trame ? La voilà ! Je vous prends par la main, de la création de votre compte Showit à la publication de votre site.
Ce guide est pour vous si vous souhaitez créer votre site web avec Showit mais que vous ne voulez pas parcourir tout le web pour récolter les informations nécessaires (et vous ne voulez certainement pas de surprises en cours de route).
C’est quoi Showit ?
Showit est une plateforme de création de sites web par glisser-déposer, conçue pour ceux qui veulent un design personnalisé sans avoir à coder. Contrairement à d’autres outils, Showit offre une liberté totale pour créer des pages visuellement uniques, tout en étant facile à prendre en main pour les non-techniques.
L’atout principal de Showit, selon moi, ce qui lui permet de se distinguer des plateformes concurrentes, c’est qu’elle intègre WordPress pour la partie blog (aka le CMS le plus utilisé au monde et un indétrônable). Vous bénéficiez d’une plateforme totalement sécurisée. Vous n’avez qu’à vous concentrer sur votre contenu.
Étapes clés pour créer un site internet Showit
- Créer un compte.
- Importer le template Showit choisi.
- Appliquer ton identité visuelle et personnaliser le design.
- Créer les pages nécessaires et ajuster la navigation.
- Ajouter et ajuster le contenu de chaque page.
- Ajouter un blog si nécessaire.
- Configurer les Call-to-Action (CTA) sur toutes les pages.
- Optimiser le site pour le SEO.
- Tester la navigation et lancer le site.
Étape 0 : Préparation des Fondations
Afin de créer votre site web de façon fluide, il est préférable de vous préparer avant de vous lancer dans ce projet.
Vous devez notamment planifier votre stratégie en amont. Cela inclut les fondamentaux de votre business, l’expérience utilisateur que vous souhaitez créer, définir votre identité visuelle et créer vos guides de marques, etc.
Assurez-vous de regrouper toutes les ressources que vous pourriez utiliser dans le projet de création de site web avec Showit, telles que :
- Vos typographies,
- Votre palette de couleur,
- Vos images,
- Les formulaires de newsletter à intégrer au site,
- Les vidéos à intégrer,
- Les audios de podcast,
- Les liens externes,
- Le plan du site,
- Une ébauche de vos textes,
- Votre nom de domaine,
- etc.
Lire aussi : Comment bien préparer la création de son site web (guide complet)
Étape 1 : Créer un Compte Showit
Comment créer un compte Showit gratuitement
La première chose à faire est de créer un compte Showit. Pour cela, vous devez vous rendre sur la page d’accueil du site de Showit, et choisir une des deux options suivantes :
- “Create Your site” pour créer directement le compte.
- “View templates” pour voir les templates, puis créer votre compte.
Note : Les deux options permettent simplement de créer un compte. À ce stade, vous n’avez pas encore de site web.
Vous pouvez utiliser Showit gratuitement pendant 14 jours. Pas besoin d’enregistrer une carte bancaire, tout ce dont vous avez besoin c’est une adresse email.
Vous pouvez profiter d’un mois gratuit en plus en utilisant le code kimpoba ou en créant votre compte à partir de mon lien d’affiliation.
Quand vous utilisez Showit durant le période d’essai, vous avez pleinement accès à l’interface de design. Cela vous permet de tester la plateforme sans vous engager. Par contre, pour connecter votre domaine ou ajouter un blog à votre site, vous allez devoir souscrire à un abonnement.
Création de compte Showit en image
- Choisir une option sur la page d’accueil
- Renseigner son adresse email et cliquer sur “Submit”.
- Remplir le formulaire avec les information de votre entreprise
- Fenêtre de confirmation et bouton d’accès à votre compte Showit.
- Après connexion, vous arrivez sur votre compte Showit.
Présentation de votre espace Showit
Sur votre espace Showit, vous avez la possibilité de :
- Gérer votre compte (paramètres de compte, abonnement, mots de passe, etc)
- Accéder à l’interface de design (où se trouvent TOUS vos sites).
- Accéder à la boutique de template Showit “Design market”.
- Accéder aux cours gratuites Showit, pour les utilisateurs simples et les designers.
- Accéder à l’espace d’administration WordPress, si vous avez un abonnement avec site WordPress.
- Contacter le support Showit.
- Vérifier l’état de votre site (En ligne, Sécurité, etc).
Étape 2 : Création de votre premier site internet Showit
Depuis votre espace compte, cliquez sur “Open design app” pour accéder à l’interface de design. Vous pouvez également y accéder depuis le lien direct app.showit.com.
Comment créer un site Showit à partir d’un template Showit
Lorsque vous accédez à votre espace de design pour la première fois, vous devez choisir un template pour commencer :
- Choisir un template Showit gratuit (mis à disposition par la plateforme).
- Choisir un template Showit de la boutique Showit (des designers partenaires).
- Importer un template acheté ailleurs (via le code fourni).
Choisissez un template en le sélectionnant. Cliquez sur le bouton “Start with this design” pour créer votre site à partir de ce template.
Comment importer un template votre site internet Showit
Dans vos design :
- cliquez sur le bouton “Add design to library”.
- Dans la fenêtre qui s’ouvre, renseignez la clé secrète qui vous a été fournie.
- Cliquez deux fois sur “Enter”.
- Un aperçu s’affiche.
- Cliquez sur “Add now” pour l’ajouter à vos design.
- Fermez la fenêtre de validation, le template appaît désormais dans votre bibliothèque.
Lire aussi : Tout savoir sur les templates Showit
L’interface de design de site internet Showit
L’interface de design de Showit met à disposition tout ce dont vous avez besoin pour créer votre site de façon intuitive.
Cela peut paraître de prime abord, c’est pour cela j’ai pris le temps de vous présenter chaque section de l’interface dans les paragraphes suivants.
En quelques mots, voici comment se présente l’interface de design Showit :
- Partie gauche – Le contenu du site.
- Partie centrale – Aperçu du site
- Partie droite – Propriétés des éléments
- Bas de l’interface – Gestion de l’affichage, accès au Support et à l’espace membre.
- La partie de gauche – Le contenu du site.
C’est là que se trouvent tous les éléments qui font partie du site. On y trouve les paramètres généraux du site (Site settings), les paramètres de design généraux pour le site (design settings), les médias du site (images, vidéos, polices, etc), les pages, les sites canvases (sections disponibles pour TOUT le site web), et Main Canvases (groupes de Sites Canvases.
- La partie centrale – L’aperçu du site.
Un des grands points de Showit c’est que tel votre site s’affiche ici, tel il sera affiché sur tous les appareils. Vous n’avez rien à faire de plus pour que votre site soit responsive (s’adapte à toutes les tailles d’écran).
Vous avez la possibilité de travaillé sur une seule version à la fois (bureau ou mobile), ou sur les deux en parallèle.
Ce sont les mêmes éléments qui sont présents aux deux endroits, mais vous personnalisez le design en fonction de la taille de l’écran. Toutes fois, vous pouvez aussi choisir de n’afficher un élément que dans une ou l’autre des versions du site.
- La partie de droite – Les propriétés des éléments du site.
C’est là qu’on va paramétrer les éléments d’une page ou des Sites Canvases. On pourra choisir les couleurs, les transitions, la taille, l’alignement des éléments de la page, etc.
- Le coin en bas à gauche – Accès à l’espace membre.
Vous pouvez accéder aux éléments en rapport avec votre compte. En cliquant sur votre nom, vous aurez accès à tous vos design, à votre espace compte. Vous pourrez créer de nouveaux sites, etc.
- Le coin en bas à droite – Le support Showit.
Là, vous pouvez trouver de l’aide pour votre site. Vous pouvez accéder à la documentation Showit, contacter le Support Showit par messagerie instantanée (ils sont disponibles les jours de semaine, mais attention au décalage horaire).
- Le bas de la partie centrale – Les paramètres d’affichage.
Là, on va paramétrer non pas le site, mais l’interface. On peut zoomer, dézoomer, ajouter des colonnes directrices, annuler une modification, rétablir une modification, etc.
Étape 3 : Structure du Site et Navigation
La première étape sera de créer la structure de votre site. Lorsque vous créez le site à partir d’un template, votre site est créé à l’identique du template. Toutes les pages du template sont donc créées dans le site.
S’il y a des pages qui ne vous servent pas, vous pouvez les supprimer. À l’inverse, si vous voulez créer de nouvelles pages, vous pouvez le faire à ce moment.
Quand vous aurez créé toutes les pages nécessaires, vous pouvez créer les éléments de navigation (menu principal, menu mobile, pieds de page, etc). Pour cela, vous allez utiliser des Sites Canva qui seront disponibles à travers tout le site, ainsi que les “Main canvases” pour créer des structures à réutiliser dans tout le site.
Créer et supprimer des pages de votre site internet Showit
Pour créer et supprimer des pages sur Showit, dans la partie de gauche de l’interface, sélectionner l’onglet “Site”.
Cliquez ensuite sur le petit plus à côté de “Pages”. Vous pouvez créer cette page en partant de zéro (un bloc vide), utiliser une autre page existante de votre site, ou utiliser une page d’un des templates de la librairie.
Créer les menus et pieds de page de site internet Showit
Votre template vient probablement déjà avec des menus et pieds de pages. Vous allez modifier leur contenu pour créer une navigation cohérente entre les différentes pages de votre site internet.
Choisissez les canvas à modifier et assurez-vous de modifier les deux versions, mobile et bureau.
Utilisation des Main Canvases dans Showit
Les Main Canvases sont utilisés pour organiser les pages de façon globales. Pour chaque Main Canvas, on va préciser sur quelles pages il s’applique, et comment il se compose.
On peut retrouver dans les “main canvases” des éléments tels que les menus, les freebie, les formulaires, etc.
Étape 4 : Appliquer son Identité Visuelle au site internet Showit
Maintenant que vous avez toutes les pages dont vous avez besoin, on peut commencer à appliquer les éléments de votre identité visuelle.
Pour appliquer votre identité visuelle sur l’ensemble de votre site Showit, pouvez aller dans les paramètres de design généraux (design Settings), et modifier la palette de couleur, changer le style des textes et la couleur d’arrière-plan globale du site.
Vous pourrez ensuite faire des ajustements sur le site directement sur certains textes ou en faisant des aller et retour entre le site et les design settings.
Lire aussi : Typographies : Le guide pour bien démarrer sur Showit (en 2023)
Étape 5 : Modifier le contenu des Pages
Pour chaque page de votre site, modifier les sections initiales du template, supprimez-en ou ajoutez-en pour que votre contenu corresponde à ce que vous souhaitez véhiculer et les actions que vous voulez que votre visiteur fasse sur le site.
Ajouter une section (Canvas) à un site Showit
Pour ajouter une section sur le page Showit, vous devez aller sur l’onglet “Page” de la section contenu du site à gauche de l’interface de design. Vous pouvez soit :
- Dupliquer un autre Canva de la page,
- Créer un canvas vide (Add Blank Canvas)
- Créer un canvas à partir de la bibliothèque (Add From Library). Cette option inclut le site actuel, un autre de vos sites, un de vos templates ou les templates de base de Showit.
Supprimer une section (Canvas) d’un site Showit
Pour supprimer une section, cliquez sur les trois petits points à côté du nom du Canvas dans l’onglet “Page” du contenu du site. Cliquez ensuite sur “Delete”, qui signifie supprimer.
Modifier les éléments d’une page de site internet Showit
Vous pouvez modifier tout ce que vous voyez sur une page Showit. Les textes, les images, les formes, etc. Vous n’avez pas besoin de code pour cela, mais si vous le souhaitez, pour des modifications avancées, vous pouvez également ajouter du code CSS à vos éléments.
Tous les attributs des éléments sont sur la droite de l’interface. Vous pouvez modifier la position des éléments directement dans l’aperçu, mais vous pouvez aussi appliquer des positions précises au pixel près.
Lorsque que vous travaillez sur un élément du site, il est toujours en bleu dans la partie gauche de l’interface (Contenu du site). Cela vous permet de savoir à quoi correspondent les paramètres affichés dans la partie droite de l’interface Showit.
Pour les éléments d’une pas, vous les voyez également encadrés de bleu dans l’aperçu du site.
Les images dans Showit
Pour utiliser des iamges dans SHowit, vous devez au préalable les ajouter à votre bibliothèque. Si vous avez plusieurs images, vous pouvez les organiser en sous dossier.
Votre bibliothèque est accessible depuis l’icone d’image en bas, au centre de votre interface de design, ou en cliquant sur “Media Library” dans l’onglet “Site” de la section “contenu du site”.
Vous pouvez remplacer les images d’un template en la sélectionnant et en cliquant sur le bouton “Swap Image” à droite de l’interface.
Maintenant que vous avez tous les éléments de votre site, vous pouvez vous concentrer sur les interactions de votre site, souvent associés aux appels à l’action (CTA).
Étape 6 : Gérer les interactions et CTAs de votre site internet Showit
Pour gérer les interactions sur le site, vous allez modifier les paramètres “Click actions” de vos objets. Vous pouvez faire cela sur tous les types de contenus (texte, formes, images, etc). Cela vous permet de dire ce qui se passe lorsque vous cliquez sur un objet.
Les interactions sur Showit
Il existe des interactions de type “Link”, pour aller quelque part (une page, un article, une URL, les mails, etc.) et des interactions de type “Action” qui vous permettent d’ouvrir ou fermer un canvas, vous déplacer d’une vue à une autre. On utilise ce type d’interactions par exemple pour les menus mobiles, les carrousels de commentaire, les sections avec plusieurs onglets, etc.
Code embarqué dans Showit
Vous pouvez intégrer plusieurs outils externes à Showit grâce à la fonctionnalité “Embed code”. Pour cela, ajouter simplement le code fourni par votre application dans l’attribut “Embed code” de votre page.
Quelques exemples d’intégrations que vous pouvez réaliser simplement sur Showit
- Un formulaire d’inscription à la newsletter.
- Votre calendrier TidyCal pour la prise de rendez-vous.
- Une vidéo YouTube avec une masterclass préenregistrée.
- Un bouton de paiement PayPal pour vendre vos produits ou services directement depuis le site.
- Un lecteur Spotify pour partager des épisodes de vos podcasts.
- Un widget de chat en direct pour répondre instantanément aux questions des visiteurs.
Étape 7 : Connexion du domaine et ajout du blog
Showit ne fournit pas de nom de domaine. Vous allez devoir vous en procurer chez un registraire. Ils existent plusieurs sites qui vous permettent d’acheter un nom de domaine parmi lesques Ionos, OVH, Gandi, etc.
Les étapes pour connecter un domaine au site Showit, et le sécuriser
- Connecter le domaine au site.
- Réclamer la création ou migration du blog (pour les abonnements avec blog).
- Configurer les paramètres DNS (de façon automatique sur le site de Showit, ou manuelle sur le site de votre registraire).
- Sécuriser le site avec le SSL.
Les chapitres ci-dessous vous décrient chacune de ces étapes en détail.
Connecter un nom de domaine à son site Showit
- Cliquez sur “Connect your domain”, ou “Site Settings” dans l’interface de design.
- Dans l’onglet “Site info”, cliquer sur “Custom domain ⇒ EDIT”
- Répondre aux questions des étapes 1 à 3 en fonction de votre situation.
- A l’étape 4, si vous n’avez pas de forfait avec blog, vous pouvez déjà procéder à la configuration du DNS en cliquant sur le bouton “Configure DNS Settings” qui apparait. Si vous voulez le faire plus tard, cliquez sur “Done”.
Ajouter un blog à son site internet Showit
- Cliquez sur “Connect your domain”, ou “Site Settings” dans l’interface de design.
- Dans l’onglet “Site info”, cliquer sur “Custom domain ⇒ EDIT”
- Répondre aux questions des étapes 1 à 3 en fonction de votre situation.
- À l’étape 4, si vous avez un forfait blog, vous aurez le bouton “Proceed to blog setup”. Cliquez dessus et répondez aux questions selon que vous voulez créer un nouveau blog ou que vous souhaitez migrer votre blog actuel vers votre hébergement Showit.
- L’équipe Showit s’occupera de la migration ou de la création du nouveau blog et reviendra vers vous une fois terminé.
Configurer automatiquement les paramètres DNS sur Showit
- Rendez-vous sur votre espace compte Showit.
- Dans l’onglet “Domains”, cliquez sur le bouton “Configure DNS”.
Si vous n’avez pas ce bouton alors votre registraire n’est pas compatible à la configuration automatique, vous allez devoir le faire manuellement.
- dans le pop-up qui s’ouvre (Showit – Staging uses Entri to configure easily your domain), cliquez sur continuer.
- Connectez-vous au registraire avec les identifiants de ce site, et non vos identifiants Showit.
- Vérifiez les données à modifier, puis cliquez sur “Okay, continue”.
Configurer manuellement les paramètres DNS sur Showit
- Rendez-vous sur votre espace compte Showit.
- Cliquez sur le lien “Your DNS records”.
Si vous n’avez pas ce lien et qu’au contraire vous avez le message “Your website doesn’t appear to be connected to Showit”, c’est que votre domaine n’est pas connecté. Réalisez cette étape avant d’aller plus loin.
Si vous avez déjà connecté votre domain à votre design mais vous ne voyez toujours pas les paramètres DNS, alors vous avez probablement un abonnement avec blog et vous n’avez pas encore réclammé votre blog.
- Configurez vos paramètres DNS à partir de ces informations sur le site de votre registraire.
- Attendez quelques minutes et revenez sur votre espace membre. Dans l’onglet “Domains”, cliquez sur “Check site”.
- Après la vérification, les lignes en vert sont ok. Les lignes en orange doivent être configurées ou ajoutées dans les enregistrements DNS sur le site du registraire. Les lignes en rouges doivent être supprimées.
Une fois que les modifications sont correctes, les changements peuvent être propagés à travers internet en quelques minutes, mais cela peut également durer jusqu’à 48h.
Sécuriser son site Showit avec le SSL
- Si vous avez un abonnement sans blog, rendez-vous simplement dans l’onglet “Domains” de votre espace compte, et cliquez sur “Check site”. Si les enregistrements DNS sont ok, le SSL sera appliqué directement.
- Si vous avez un blog (Basic ou Advanced) et que votre blog a été configuré par les équipes Showit, les paramètres DNS configuré, alors votre SSL est appliqué automatiquement.
Étape 8 : Optimisations SEO
Pour optimiser le site que vous venez de créer pour le SEO, vous allez optimiser les éléments suivants sur votre site Showit. Cela inclut
Renseigner les titre de méta-description SEO sur les pages Showit.
Pour chaque page, renseignez les paramètres SEO de base depuis l’interface Showit.
Vérifier les propriétés p, h1, h2, etc) des textes Showit
- Vérifier qu’il y a un texte avec la propriété H1 (le titre de la page).
- Parcourez tous les extes de la page pour vérifier leur attribut.
Vous pouvez également utiliser l’extension Chrome HeadingsMap sur la preview de vos pages.
Modifiez l’ordre des éléments dans un canvas Showit
Showit recommande d’ordonner les éléments de vos canvas dans l’ordre dans lequel ils s’affichent. Pour cela, il peut arriver que vos templates soient organisés comme cela. Mais le code HTML généré derrière est écrit dans l’autre sens.
Puisque Google lit le code HTML, il est préférable d’organiser vos éléments dans le sens où ils seront affichés sur Google.
Les paramètres SEO des images sur Showit
Étape 9 : Test et Lancement de votre site internet Showit
Testez la navigation complète
Naviguez sur chaque page de votre site, cliquez sur tous les liens et assurez-vous que chaque interaction fonctionne comme prévu. Testez aussi les formulaires pour vérifier qu’ils transmettent bien les informations.
Publiez votre site
Cliquez sur le bouton “Publish” tout en haut à droite de l’interface de design pour que votre site soit en ligne sur votre nom de domaine. Vérifiez bien sur votre espace compte que votre site est bien sécurisé.
Conclusion
En résumé, ce guide vous a permis de suivre chaque étape pour créer un site web professionnel avec Showit. De la préparation initiale à la mise en ligne, vous avez maintenant toutes les clés en main pour créer un site qui reflète parfaitement votre image de marque, tout en optimisant l’expérience utilisateur et la conversion. Grâce à Showit, vous bénéficiez de la liberté et de la flexibilité nécessaires pour personnaliser chaque détail de votre site, même sans connaissances techniques approfondies.
J’aimerais beaucoup connaître votre avis ! N’hésitez pas à laisser un commentaire pour me dire ce que vous avez pensé de ce guide. Y a-t-il des éléments qui vous semblent manquer ou des sujets que vous aimeriez voir plus développés ? Votre retour est précieux pour continuer à améliorer ce type de contenu.
Commentaires