Bonjour à toi jeune (ou moins jeune) internaute qui souhaite créer son site internet rapidement avec une solution pro et évolutive.

Début 2018, la firme Elegant Themes de San Francisco a sorti une nouveauté pour leur thème WordPress phare Divi : des pack de mises en page.

Ces packs sont composés de 7 ou 8 pages (au format JSON) intégrés au Divi Builder. Imaginez avoir une quinzaine de sites pré-construits par secteur d’activité directement inclus dans votre thème. Plutôt sympa. Imaginez maintenant que chaque semaine, un pack supplémentaire soit ajouté et que pour l’installer vous n’ayez que quelques clics à réaliser. Encore plus intéressant.

Dans ce tutoriel, nous verrons comment installer votre pack de mise en page de A à Z

1. Les préalables pour créer votre site
2. Ajouter votre pack de mise en page Divi
3. Les paramètres essentiels de WordPress et Divi
4. Personnalisez le contenu existant par le votre

Bonus 1 :  Les photos et images intégrées sont libres de droits, c’est à dire que vous pouvez les réutiliser comme bon vous semble.

Bonus 2 : Chaque semaine un nouveau pack d’un secteur est ajouté au Divi Builder !

“La seule chose pire que de commencer quelque chose et échouer… est de ne rien commencer du tout”

Seth Godin, marketeur à succès

1- Un hébergement web et WordPress

Avant de commencer, il est nécessaire d’avoir un hébergement et un nom de domaine. Si vous en avez déjà un, c’est parfait. Sinon je vous recommande l’hébergeur O2switch (lien affilié). Il vous permettra également d’installer WordPress en deux clics depuis votre CPanel.

Quelque soit l’hébergeur choisi, pensez à installer un certificat SSL qui indiquera à Google que vous avez une connexion chiffrée. Ceci sera également bon pour votre référencement.

2- Procurez vous le thème Divi

Pour ajouter votre mise en page Divi, il faut posséder le thème Divi (lien affilié). C’est un thème premium qui vous donne le droit au thème Divi mais aussi Extra et aux plugins Monarch et Bloom. Une fois acheté rendez-vous dans l’espace membre Elegant Themes pour télécharger le thème ou le plugin Divi Builder si vous possédez déjà un thème.

Pour installer votre thème : connectez vous à votre back office WordPress avec vos identifiants puis Onglet Apparence > Bouton Ajouter > Bouton “Téléverser un thème” > Ajouter votre fichier Zip > Cliquez sur Installer.

Il ne vous reste plus qu’à activer votre thème. Vous avez déjà réalisé la moitié du chemin

3- Une charte graphique prédéfini

Pas de panique, vous n’avez pas besoin d’avoir fait les beaux art pour cela. Votre charte graphique est une liste d’élément définissant le design de votre site. Evidemment les graphistes qui liront cet article seront horiffiés (Mea Culpa la famille). Cependant pour nos besoins ceci fera l’affaire. Il vous faut :

• Un logo que vous pouvez créer sur Logo Joy en moins de 30 minutes chrono
• Une palette de couleur que vous pouvez choisir sur colorhunt.co ou coolors.co
• Des images/photos qui représente votre business ! Vous pouvez utiliser vos propres photos, celles offertes avec les packs de mise en pages ou depuis des sites d’images gratuites tel que Unsplash ou Pixabay
• Et pour finir votre police de caractère. Une pour vos titres, l’autre pour le corps du texte. Vous pouvez retrouver des combinaisons de police sur Fontpair. Pour des polices plus design vous pouvez découvrir Dafont.

4- Une page de maintenance

En attendant que votre site soit prêt et que vous finissiez vos modifications, il est nécessaire que vous ajoutiez une page de maintenance via le Divi Builder. (tutoriel vidéo pour prendre en main le Visual Builder de Divi)

Prenez simplement une image correspondant à votre activité sur Unsplash, votre logo, vos liens réseaux sociaux et ajoutez une phrase de type “Notre nouveau site arrive prochainement, n’hésitez pas à nous contacter à l’adresse suivante pour en savoir plus : [votre email]”.

Ni menu, ni bas de page sont nécessaires. Cette page est uniquement informative.

L’intégration du pack de mise en page de votre site sera la première étape. Il sera nécessaire d’ajouter vos pages une par une depuis le back office de WordPress. Moins d’une minute par page ! Que demande le peuple…

1. Onglet Pages > Ajouter
2. Cliquez sur le bouton violet “Utilisez le générateur Divi” , l’espace de mise en forme de votre page se modifie
3. Cliquez sur “Télécharger le modèle” et vous accédez à l’ensemble des packs. Choisissez votre pack selon votre secteur.
4. Une fois choisi, vous aurez une vue d’ensemble sur l’ensemble des pages du pack. Vous aurez la possibilité de voir une démo via le bouton bleu ou d’utiliser cette mise en page en cliquant “Use this Layout” en vert.
5. Votre page se charge. Cela peut prendre plusieurs secondes…
6. Donnez un titre à votre page et modifier le permalien.
7. Vous pouvez l’enregistrer en tant que Brouillon, nous reviendrons dessus plus tard pour modifier le contenu.
8. Réitérez l’opération pour l’ensemble des 7 ou 8 pages du pack que vous avez choisi

1- Configurez les réglages WordPress

Toutes vos pages sont chargées, il faut désormais faire les configurations de base de votre site WordPress. Ces configurations sont à retrouver dans les onglets Réglages et Apparences. Go ninja.

Page d’accueil

Nous allons définir quelle page sera considérée comme votre page d’accueil. Dans les options de Lecture de l’onglet Réglages, cocher Une page statique puis dans la liste déroulante, choisissez la page d’accueil.

Sans cette manipulation, votre site apparaîtra sous la forme d’un blog. Pour voir apparaitre l’ensemble de vos pages, celles-ci devront être publiées et non en mode brouillon.

Permaliens

Toujours dans l’onglet Réglages mais cette fois dans les options du permaliens, cochez nom de l’article afin d’optimiser le SEO.

Menu

Les pages de votre site doivent apparaîtres dans le menu pour être facilement accessible. Dans l’onglet Apparences, allez dans les options Menu. Cochez toutes les cases des pages que vous souhaitez faire apparaître dans le menu puis cliquez sur ajouter au menu.

Les pages sont basculées dans l’espace de droite et vous pouvez choisir leur ordre d’apparition en les bougeant par glisser/déposer.

N’oubliez pas de donner un nom à votre menu, de l’enregistrer et de l’assigner en tant que menu principal dans l’onglet “Gérer les téléchargement”. 

Pour voir apparaitre l’ensemble de vos pages, celles-ci devront être publiées et non en mode brouillon.

2- Configurez les options du thème Divi

Les options du thème Divi sont multiples comme vous pouvez le voir dans le gif ci-dessous. Mais nous allons nous concentrer sur l’essentiel.

Logo

Votre logo vous fera reconnaître entre 1000. Pour le moment c’est le logo Divi qui apparait. Pour changer cela cliquez sur “Mettre en ligne”.

Votre fenêtre de média apparaitra, ajouter votre logo par glisser-déposer depuis votre bureau. Ensuite sélectionnez votre logo et cliquez sur Définir comme Logo. Réitérez l’opération pour votre Favicon. Une favicon est l’image qui apparait à gauche du titre de votre page sur votre navigateur.

Palette de couleurs

La définition de la palette de couleurs est d’une importance capitale. Cela vous permettra tout au long des modifications de votre site de retrouver les différentes couleurs qui composent votre site.

Sans ça vous allez perdre un temps fou. Cliquez sur chaque couleur et choissisez votre couleur à l’aide du sélecteur ou du code hexadécimal de la couleur. Voir notre article sur les couleurs pour en savoir plus.

Les réseaux sociaux

J’imagine que vous allez utiliser les réseaux sociaux pour votre promotion.

Renseignez dans cette partie, les adresses de vos différents profils Facebook, Twitter et Google + pour les retrouver dans le site aux endroits stratégiques. Footer, barre supérieur, page contact…

3- Paramétrez le personnaliseur de thème Divi

Toujours dans l’onglet Divi de votre back-office, cliquez sur Personnaliseur de thème. Vous serez redirigé vers votre site avec une barre latérale gauche qui apparaîtra. De nombreuses options sont personnalisables mais nous allons nous concentrer sur les plus importantes pour votre site.

Paramètres généraux

Identité du site

Cette partie est la carte d’identité qui definira votre site. Son nom, son slogan ainsi que la favicon qui représente l’icone qui apparaitra à côté du nom de votre site dans votre navigateur.

🍴Nous avons choisi POP Restaurant avec pour slogan “Nos incroyables spécialités” et pour favicon le logo du restaurant – un poisson et un couteau.

Paramètre de mise en page

Ici vous pourrez définir une mise en page emboitée ainsi que la couleur d’accent de votre site. Cette couleur doit être la couleur principale de votre logo. La couleur d’accent de votre site agit entre autres sur la couleur de vos liens, vos icones, vos widgets,  divers éléments du menu, etc…

🍴 Dans notre exemple la couleur d’accent est le marron #c39d63

Typographie / Police de caractère 

Comme expliqué dans nos préalables, l’idéal est d’avoir 2 polices de caractères. L’une pour les titres qui peut reprendre celle de votre logo et l’autre pour le corps du texte permettant de faciliter la lecture.

Dans paramètres généraux, puis Typographie vous pourrez paramétrer la police défini par défaut pour vos titres, pour le corps du texte, leur taille, la couleur l’espacement des caractères… Toutes les polices Google Fonts sont disponibles. Bien évidemment vous pourrez régler par la suite vos polices dans chacun de vos modules.

🍴 Dans notre exemple nous avons une combinaison de Playfair Display pour les titres et Montserrat pour le corps du texte.

Style sur mobile / Responsive

Le responsive design (ou adaptabilité de votre site sur mobile) peut être paramétré en amont dans le personnaliseur de thème. Voici les options présentes.

• La hauteur de la section
• La hauteur de la ligne
• La taille du texte du corps
• la taille du texte de l’en tête

Ceci permettra d’avoir une base commune sur vos dispositifs mobiles et tablettes. Mais pour affiner ces paramètres rendez-vous dans le paragraphe 4.5 ci-dessous. Chacune des sections, lignes et colonnes de votre site pourront être optimisées.

En tête et navigation

L’entête de votre site qui comprend votre menu sera visible sur l’ensemble des pages de votre site. Pour vous différencier du pack classique, vous avez de multiples options.

Le style de l’entête défini le positionnement de votre logo et menu. Par défaut votre logo est à gauche et les liens du menu à droite. Mais il est possible d’avoir votre logo centré au dessus, centré au milieu du menu, le menu qui glisse depuis le côté droit ou qui s’affiche en plein écran.

D’autres éléments sont paramétrables tels que la hauteur de votre en-tête, sa couleur, la couleur du texte, l’affichage de vos réseaux sociaux, e-mail et numéro de téléphone dans une barre supérieure.

Pied de page

Pour modifier le pied de page automatiquement généré par WordPress “Proudly powered by WordPress”, rendez-vous dans Pied de Page puis Barre inférieure. Au choix vous pouvez redéfinir un nouveau pied de page ou cacher cette partie.

Vous aurez la possibilité de créer un élément global (paragraphe 4.4) sur l’ensemble de votre site. Bien plus pratique pour gérer votre pied de page.

Boutons / Appel à l’action

Les boutons sont des éléments que vous devez régulièrement utiliser pour renvoyer vos visiteurs vers les appels à l’action.

🍴Dans notre exemple de restaurant, nous en avons deux : Le menu et la réservation. Afin de rester cohérent dans votre charte graphique, définissez une forme de base (carré, arrondi…), un fond de couleur, une police de caractère, une taille… Sans oubliez de définir ces mêmes options lorsqu’on survol le bouton.

Désormais vous devez modifier le contenu pour qu’il corresponde à votre société. Gardez toujours en tête que chacune de vos pages doivent avoir un objectif précis pour informer vos potentiels clients.

1- Modifier les textes de remplissage

Pour le moment il n’y a que du texte de remplissage. Lorum Ipsum pour tous. Seuls les titres sont présents et définissent le texte que vous devrez intégrer.

Je vous recommande de suivre leur schéma éditorial dans un premier temps puis d’ajouter d’autres contenus par la suite quand vous serez plus à l’aise avec la gestion de votre site.

🍴 Par exemple pour notre site de restaurant :

Page d’accueil : Résumé du site avec présentation, extrait du menu, témoignage et un appel à l’action principal, ici la réservation !

A propos : Page la plus visitée d’un site internet, elle doit présenter l’âme du restaurant, qu’elle est son truc en plus. Ici nous retrouvons l’histoire, les récompenses obtenues, les services et les témoignages.

Nos chefs :  Présentation de l’équipe du restaurant qui s’occupera de vous régaler accompagné de témoignages pour valider le savoir faire des chefs.

Menu : Les différents plats présents dans le restaurant ainsi que leurs prix.

Blog : Montrez l’expertise du restaurant dans vos articles. Bien sur les articles sont à créer, je vous suggère de cacher cette section le temps d’avoir 2 ou 3 articles. N’hésitez pas à coupler cette section avec une newsletter.

Contact : Même si vos informations sont disponibles dans le footer, c’est important de recréer une page de Contact.  Vous pouvez l’accompagner d’une carte Google Map et incorporer vos réseaux sociaux pour vous suivre.

Landing page : Une page sans menu avec une seule action possible : Réserver. Pourquoi ? Afin de ne pas disperser votre visiteur. Cette page est à utiliser lors de vos campagnes promotionnelles (publicité Facebook, AdWords ou emailing).

Autre chose importante, les titres sont en anglais, de même pour les boutons. Faites simplement les traductions nécessaires. Et pour ceux qui se seraient réchauffés au fond de la classe pendant les cours d’anglais, Google Trad est votre ami 🙂

2- Recréez les liens de vos appels à l’action

Une étape simple mais essentielle car tout le maillage de liens internes est absent de votre pack. Mais heureusement les équipes d’Elegant Themes ont judicieusement ajouté des appels à l’action un peu partout sous forme de bouton.

Rendez-vous sur chacune de vos pages et attribuez le lien correspondant en accédant aux paramètres du bouton et intégrez le lien.

🍴Pour notre restaurant, les boutons d’appel à l’action sont :

• Découvrir le menu
• Faire une réservation
• Nous contacter

Vous n’avez pas besoin d’avoir de multiples actions. Seul l’essentiel compte en fonction de votre activité.

3- Modifiez les arrières plans

Les arrières plans de votre site donnent le ton et l’ambiance de votre site internet. Vous pouvez utiliser les couleurs de votre palette ainsi que des dégradés. La combinaison image et couleur est également possible simplement avec la puissance de Divi.

🍴Pour notre mise en page restaurant, ce sont des produits ou plats qui ont été choisis. 

Pour cela rendez-vous dans les paramètres de votre section (en bleu), dans l’onglet Contenu sélectionnez Fond. Vous avez alors accès à l’ensemble des possibilités comme vous pouvez le voir dans le GIF ci-dessous.

4- Créez vos éléments globaux (globals items)

Un élément global est un module, ligne ou section de votre site qui apparait de la même manière sur l’ensemble de votre site. Si vous modifiez un élément, l’ensemble est mis à jour instantanément sur toutes les autres pages auquelles vous avez ajouté l’élément.

J’éclaircis votre lanterne car je vois que j’en ai perdu certain.

🍴 Pour notre restaurant par exemple, nous avons un footer en élément global. Le footer est sur toutes les pages et les horaires sont susceptibles d’être changés. Afin d’éviter de modifier chacune des pages à la main, il faudra indiquer à Divi que votre section est global et elle sera transformée en couleur vert pomme comme ci-dessous.

Dédicace aux designers Divi pour cette couleur incroyable.

Pour transformer un élément en global, enregistrez votre élément (section, ligne ou module) dans la librairie Divi en cliquant sur le bouton  , donnez lui un nom et cochez “En faire un élément global”.

Identifiez donc les éléments présents sur plusieurs pages qui seront régulièrement modifiés et transformez les en éléments globaux. Vos témoignages ou bouton d’appel à l’action sont susceptibles d’être des éléments globaux.

5- Optimisez votre responsive (mobile)

Aujourd’hui l’importance du responsive est primordiale. Votre site doit pouvoir s’adapter à tous types d’écrans.

Plus 60% des français utilisent internet via leur mobile (source Credoc).

Rentrez dans les paramètres de votre section, module, ligne, texte, image… puis cliquez sur l’icone  et vous verrez apparaitre 3 options : Ordinateur de Bureau, tablette ou smartphone.

Le Visual Builder transformera automatiquement votre page pour que vous ayez un aperçu du rendu selon l’appareil sélectionné.

6- Ajoutez le plugin lié à votre activité et configurer votre Appel à l’action

Votre appel à l’action est l’objectif que vous souhaitez que le visiteur de votre site réalise en naviguant. Un appel à l’action est généralement matérialisé par un bouton qui redirige vers une page spécifique et disséminé judicieusement un peu partout sur votre site.

🍴Dans le cadre de notre restaurant, l’objectif du site est d’obtenir des réservations. C’est pourquoi j’ai téléchargé le plugin Restaurant Reservations.

Le plugin a un bon nombre d’utilisateurs satisfaits, a été mis à jour récemment et est compatible avec le service d’emailing Mailchimp.

Le plugin permet de recevoir des réservations et les visualiser dans votre back office mais aussi de définir vos horaires d’ouvertures, le nombre de personnes max que vous pouvez accueillir, la date de réservation maximum, paramétrer les e-mails que recevront vos clients et bien d’autres options…

Pour chaque pack réalisé par l’équipe d’Elegant themes, un plugin spécifique/appel à l’action est suggéré.

• Un agence SEO : Un ebook à télécharger.
• Un architecte d’intérieur : Partage réseaux sociaux
• Agence SAAS : Ticket de support
• Cours de yoga : Espace membre
• Agence web : Estimation devis
• …

Votre site est prêt à être mis en ligne.

Évidemment d’autres paramètres peuvent être optimisés tels que le référencement naturel, la rapidité de votre site, les sauvegardes, l’emailing et autres techniques marketing.

Mais avec les mises en pages Divi, vous aurez une base saine pour commencer à promouvoir votre activité en seulement quelques heures et ainsi obtenir des retours de vos prospects.

En combien de temps avez-vous paramétré votre nouveau site ? Avez-vous eu quelques embuches ? Dites-moi tout en commentaire…