Votre site internet d’auteur ne vous convient pas. Nous allons vous apprendre à effectuer toutes les modifications désirées et la mise en page souhaitée pour l’ensemble de votre site internet d’auteur. Et tout ça gratuitement !

Exemples de site internet
Séparateur de chapitre relatif à l'autoédition

Introduction

Vous voulez être capable de reproduire un site internet qui vous plaît. Ce tutoriel est là pour ça et à la fin vous serez apte à créer ce que vous souhaitez.

Petite mise en garde, vous devez vous inspirer des autres, mais pas copier !

Pour pouvoir suivre ce tutoriel, il est essentiel d’avoir un site sous WordPress. Une prérogative (quoique) est de posséder un site avec déjà un peu de contenu. Ceci pour vous rendre compte plus aisément du rendu.

Si vous n’avez pas encore le bonheur d’avoir votre propre site internet d’auteur, vous pouvez suivre ce tutoriel pour avoir ce qu’il faut ou récupérer le livre que nous vous offrons 7 étapes pour créer son premier site internet d’auteur.

Ensuite, il est important de savoir quel site vous désirez, quel rendu vous voulez. Surfez un peu sur le net, et piochez dans quelques sites ce que vous souhaitez. Notez-le sur un papier. Vous pourrez alors créer votre site en parallèle de ce pas-à-pas.

Nous allons vous accompagner pour créer LE site internet d’auteur. VOTRE site internet d’auteur. Celui que vous avez tant espérez, sans être capable de le concevoir. Ensemble, nous allons réaliser votre rêve. Pour ce faire, nous allons reprendre le site internet d’auteur créé précédemment et avancer main dans la main.

À la fin vous serez :

  • capable de créer un site modulable à souhait, et qui vous ressemblera totalement,
  • capable de créer n’importe quelle page avec le rendu souhaité,
  • prêt pour récupérer des emails,
  • et apte à la création d’une boutique pour vendre vos livres.

Nous procéderons par étapes pour vous permettre de maîtriser totalement la gestion de votre site. Prenez le temps de digérer ce pas-à-pas et vous serez capable de créer un site internet d’auteur exceptionnel. La version PDF se trouve ici.

Séparateur de chapitre

Étape 1 : Installation d’OceanWP, le thème par excellence

OceanWP est le thème par excellence. Il est modulable à souhait et offre de nombreuses options à la mise en ligne d’un article ou d’une page.

Vous souhaitez faire disparaître la barre latérale, le menu, l’en-tête sur une page spécifique, c’est possible.

Il existe de nombreux thèmes qui permettent également de faire ce que nous allons vous présenter. Nous n’avons rien à gagner à vous présenter celui-ci, puisqu’il est gratuit. C’est simplement parce que c’est celui que j’ai toujours utilisé et qui me convient parfaitement.

Libre à vous ensuite de tester d’autre thème. Grâce à notre tutoriel, vous serez capable de prendre n’importe lequel entre vos mains. Sachez toutefois qu’ils ne seront pas tous modifiables comme OceanWP.

Point de départ

Nous repartons de notre site internet d’auteur que nous avons créé dans le précédent tutoriel. Vous pouvez partir de votre site également s’il existe déjà.

Rendez-vous depuis votre tableau de bord dans le menu Apparence, puis Thèmes.

Ensuite cliquez sur Ajouter un nouveau.

ajouter un nouveau theme

Puis recherchez le thème OceanWP.

Recherche d'Ocean WP
activation du theme OceanWP

Une fois trouvé, il suffit de l’Installer puis de l’Activer.

Installation des extensions d'OceanWP

Vous verrez une bannière en haut vous proposant d’installer des extensions. Allez-y et cliquez sur Commencez à installer les extensions.

Comment installer les extensions oceanwp

Sélectionnez les trois plug-ins, puis installer en utilisant le formulaire. Il se peut qu’un message d’erreur s’affiche, pas de panique et passez à l’étape suivante en retournant sur votre tableau de bord.

Selection de l'assistant d'OceanWP

Vous pouvez utiliser l’Assistant de configuration qui vous aidera à trouver une première mise en forme. Si vous désirez garder l’aspect basique du thème, rendez-vous à l’étape 2. Sinon, cet assistant apparaîtra en haut du tableau de bord. Cliquez sur Continuer.

Choix du thème Architect

Vous pourrez installer un modèle de Démo, qu’il faudra modifier ensuite. Choisissez-en un. Pour se rendre compte de l’aspect cliquez sur Prévisualisation en direct.

Nous allons choisir Architect. Cliquez sur Sélectionner. Libre à vous de choisir une autre Démo. Vous allez pouvoir tout modifier ensuite. Ce choix vous offre une première mise en page souhaitée.

Importation de la démo d'OceanWP

Si vous installez la démo, vous pouvez vous passer des articles et des images en décochant la case Importer des données XML, ou les garder pour les modifier en mettant vos images à la place. C’est un choix. Nous les enlevons car nous savons où allez. Puis vous pouvez cliquer sur Importer.

Voir votre site web OceanWP

L’Assistant vous propose de modifier votre Logo, les couleurs prédominantes de votre thème puis Continuer. Si vous ne souhaitez rien changer, Passer l’étape. Vous pouvez ensuite ajouter votre mail, si vous désirez recevoir de nouvelles extensions. Ce n’est pas une obligation de laisser votre adresse. Sinon cliquez directement sur Voir Votre Site Web.

Séparateur de chapitre

Étape 2 : Personnalisation à gogo

C’est maintenant que votre site internet d’auteur va prendre toute sa splendeur. Nous n’allons pas suivre le déroulement du menu personnaliser, mais plutôt fonctionner par partie de votre site pour le mettre en forme. Nous commencerons par l’en-tête (header), le bas de page (footer), puis la composition des pages et pour finir la mise en forme de votre blog.

Rendez-vous dans Apparence puis Personnaliser.

Le menu est beaucoup plus dense que dans notre tutoriel pour créer son premier site internet d’auteur, donc la méthode que nous avons choisie pour modifier l’apparence ensemble vous simplifiera la tâche pour ne pas s’engluer dans chaque partie.

Rien ne vous empêchera de tenter d’autres modifications, mais nous vous conseillons de suivre notre ordre pour l’instant…

Ne vous souciez pas de View paid features, c’est pour vous montrer ce que vous apportera la partie premium du thème. Aucun besoin de cela, nous resterons dans l’utilisation gratuite de celui-ci qui est déjà exceptionnelle.

L’en-tête

Cette partie correspond au Header. C’est le terme technique qui correspond à la partie haute d’un site, au-dessus du titre de la page ou de l’article, qui reste en permanence (sauf exceptions) pendant la navigation sur votre site. On aime qu’elle nous ressemble.

Le retour du menu

Faire revenir le menu OceanWP

Il se peut que le menu principal ait disparu. Pour le faire revenir, rendez-vous dans Menu-Nom de Votre menu principal puis scrollez vers le bas et sélectionnez Principal dans Emplacements de menus.

Apparence de l’en-tête

C’est parti.

Dans l’onglet En-tête-Général, vous trouverez la possibilité de modifier sa présentation. Vous avez 8 choix :

  • minimal : le menu par défaut, les éléments sont alignés si leur taille le permet. Sinon il faudra bien modifier la taille du logo, l’espace (marge interne) entre les parties du menu.
  • transparent : le menu sera dépourvu de couleur de fond, bien si vous mettez une image d’arrière-plan.
  • menu supérieur : le menu principal se place dans une barre supérieure,
  • plein écran : le menu est caché et il apparaît quand vous cliqué sur les trois barres,
  • centré : le logo ou le titre de votre site internet d’auteur sera centré
  • moyen : le logo passera au-dessus des éléments du menu.
  • vertical : le menu se place à gauche par défaut mais vous retrouverez l’option pour le placer à droite.
  • personnalisé : c’est un en-tête que vous pourriez importer de votre bibliothèque, avis aux experts.

En fonction du choix, des options seront possibles. N’oubliez pas de bien descendre après votre sélection pour faire vos modifications.

Pensez également à masquer le menu, pour voir le rendu sur un écran classique et non réduit par le menu.

Choix du style du header OcenaWP de son site d'auteur autoédité

Tout ne sera pas encore bien aligné en fonction de votre choix. Si le logo est trop gros, les items du menu trop espacés… Nous allons voir ensuite comment améliorer cela. Vous pourrez revenir en arrière pour modifier l’apparence en fonction des modifications que vous apporterez.

Insérer une image d’arrière-plan

Vous avez une image à positionner en arrière-plan. C’est dans En-tête-Média de l’en-tête. La résolution recommandée reste 2000*1000px.

Insertion image dans le header

C’est comme dans l’ancien thème. Mais là, l’apparence de votre header est hyper modifiable comme expliqué ci-dessus.

Pour l’image de fond de l’en-tête, vous avez aussi la possibilité de choisir la position. Souvent on choisira centrée-centrée mais vous avez du choix avec une position Recouvrir.

Modification du logo de votre thème de site d'auteur

Votre nom ou votre image sont déjà présents. Vous pouvez modifier l’image dans En-tête-Logo, sa taille (si plus petite, le menu pourra s’aligner comme dans notre exemple avec un style minimal) ou la typographie dans Typographie-Logo.

Le style du menu

Une fois que la forme est choisie, vous pouvez peaufiner le menu. Dans En-tête-Menu, vous pouvez ajouter des Effets de liens. Regardez et testez ce que cela donne c’est très sympathique. Faites votre choix.

Vous pouvez modifier les marges internes, c’est-à-dire l’espacement entre les parties du titre, ce qui peut modifier grandement l’apparence de votre site en fonction du style choisi.

Plus bas vous pourrez modifier les couleurs des liens actifs, au survol, des couleurs d’arrière-plan du menu et même pour les sous-éléments.

Pour la police, c’est retour dans Typographie-Menu principal et Typographie-listes déroulantes.

C’est bon, on ne vous a pas encore perdu ? Votre site prend forme, une belle forme j’en suis certain. Revenez en arrière pour modifier l’apparence de l’en-tête pour tester d’autres possibilités, ou continuez maintenant. Vous allez en fonction de ce que vous ajoutez ou enlevez, prendre quelques chemins biscornus.

Les icônes de réseaux sociaux dans l’en-tête

C’est une option intéressante.

Dans En-tête-Menu social, activez le menu social. Choisissez le style, la cible c’est-à-dire ouvrir une nouvelle fenêtre (recommandé) ou non.

Vous avez plein d’options de couleurs.

Ajout des icônes de réseaux sociaux
Ajout des icônes de réseaux sociaux

Pour qu’une icône apparaisse, il suffit de rentrer son adresse dans les lignes correspondantes.

Modification des marges internes du menu
Modification des marges internes du menu

En fonction du nombre, votre header peut être perturbé, vous pourrez modifier les marges internes comme expliqué dans la partie précédente pour améliorer l’équilibre.

Le menu mobile

L’option intéressante dans En-tête-Menu mobile est de choisir la taille d’écran pour passer en mode mobile. C’est la mode du responsive et vous avez de nombreuses options.

Passons pour l’instant car nous privilégions l’apparence sur ordinateur, mais sachez que votre site sera adapté aux écrans mobiles même sans réglages ici.

Si vous souhaitez modifier l’apparence du menu vu sur téléphone, amusez-vous.

La barre supérieure

Késako ?

Vous l’aviez vu, en haut de votre site est apparu une barre supérieure. C’est une zone qui restera tout en haut du site, au-dessus du header.

Nous ne la conseillons pas pour le moment mais sachez que vous pourrez y mettre à peu près ce que vous voulez, en mini. Un message, un bandeau rouge pour attirer l’œil…

Si vous l’activez, vous pourrez mettre un message dans Barre supérieur-Contenu, Insérer les Réseaux sociaux en notant les adresses, et modifier son aspect dans Barre supérieure-Général. Pour la typographie, retour dans le menu du même nom.

Si la case est décochée, les options disparaissent jusqu’à ce que vous choisissiez de la remettre. C’est notre conseil de la désactiver pour ne pas surcharger votre site.

Le footer ou pied de page

C’est la partie qui se trouve en bas de votre site.

Il est décomposé en deux parties :

  • la zone des Widgets de pied de page
  • bas du pied de page (la partie la plus basse de votre site)
Footer du site internet d'auteur

Les widgets de pied de page

Si vous n’en voulez pas, désactivez bien l’option. Sinon vous aurez le choix de personnaliser la zone. Ce sont bien les réglages de personnalisation que l’on retrouve ici et non pas le contenu qui se trouve dans Widgets.

Les réglages qui s’offrent à vous sont :

  • la visibilité ou la possibilité de choisir sur quels appareils il sera ou non présent.
  • un Pied de page fixe qui reste bas de l’écran.
  • un Effet parallaxe qui offre un certain mouvement par-dessus le pied de page avec le scroll.
  • le nombre de Colonnes
  • les Marges internes
  • et les choix des couleurs : arrière-plan, texte, bordure, liens, et liens au survol.

Pour modifier la police, vous le savez déjà, allez dans Typographie-Titrage de widget de pied de page.

Bas du pied de page

Vous pouvez choisir aussi la Visibilité ou non en fonction des appareils.

C’est ici que vous pouvez modifier le crédit ou Copyright du pied de page. Pour avoir la date il suffit d’utiliser le shortcode 2021 et l’année en cours s’affichera.

Vous pouvez ajouter d’autre shortcode dans cette partie. La liste se trouve ici, en anglais. Nous ne les détaillerons pas, mais pour information vous pouvez le consulter, voire les utiliser.

Libre à vous de modifier la Couleur d’arrière-plan, du texte, des liens et des liens au survol.

Menu du pied de page

C’est une option avec le thème. Ce n’est pas comme dans le précédent tutoriel où vous mettez le menu en widget. Ce que vous pouvez toujours faire mais la possibilité d’intégrer le menu principal, ou un menu de pied de page créer pour l’occasion en petit dans la partie Menu.

Pour modifier les couleurs retournez dans Bas du pied de page.

Pour la typographie, taille, rendez-vous dans la section Typographie-Menu du pied de page.

Vous avez aussi la possibilité de rajouter des icônes de réseaux sociaux dans le pied de page. En bonus nous vous montrerons comment ajouter un bouton J’aime de Facebook qui affiche votre page.

L’apparence générale de votre site internet d’auteur

Maintenant, il faut définir les styles généraux. Ce sont les styles qui s’appliqueront à l’ensemble de votre site. Il sera possible de faire des exceptions. Nous vous expliquerons cela plus tard. Pensez donc en globalité pour votre site.

Les couleurs globales

Vous avez, si vous avez bien suivi la création de votre premier site internet d’auteur, déjà défini des couleurs en rapport avec votre identité visuelle. Si vous décidez de les changer, rendez-vous dans l’onglet Options générales -Style général.

Dans cette section vous définirez les couleurs dominantes de votre site. Des couleurs qui seront disséminées « ça et là ». Ce sont les couleurs prédominantes par défaut. La principale, celle au survol et celle des bordures si vous souhaitez qu’elles apparaissent.

Vous pourrez également modifier :

  • la couleur d’arrière-plan du site, même y insérer une image.
  • la couleur des liens, en général et au survol.

La mise en page de votre site internet d’auteur

Ici, vous allez pouvoir modifier l’apparence de votre site. Pensez bien en globalité. Les exceptions viendront plus tard. Pour vos pages, nous pourrons les modifier une par une pour leur donner un aspect spécifique.

Rendez-vous dans Options générales -Réglages généraux.

Mise en page séparée du site auteur
Mise en page séparée de son site d’auteur

Le style de mise en page vous propose trois choix :

  • large : c’est en plein écran,
  • encadré : le corps de votre site sera plus étroit,
  • séparé : chaque section sera séparée par une marge, c’est super joli encore plus si vous avez bien mis une image ou une couleur juste avant.

De plus, vous pouvez modifier l’arrière-plan extérieur ou intérieur dans cette partie.

Vous pouvez aussi modifier la marge interne du contenu (partie intérieure) ou des widgets.

S’offre maintenant à vous la possibilité de choisir la largeur du contenu en px, ou en pourcentage. La somme des pourcentages contenue et colonne latérale doit être égale à 100.

Modifier la disposition de la sidebar sur son site d'auteur

Le style de vos pages peut être modifié ainsi :

  • sidebar à droite,
  • ou sidebar à gauche,
  • ou sidebar à droite et gauche,
  • pas de sidebar.

On parle ici de la mise en page de vos pages, pas du blog (archive, catégorie et tous les articles) qui conservera quelle que soit la modification apportée ici sa sidebar.

Par défaut, la sidebar sera sur vos pages. C’est assez rare de les laisser. Nous l’enlevons pour notre nouveau site.

Vous pouvez ensuite modifier l’apparence de la page de résultat de recherche.

Vous pouvez activer l’opengraph de Facebook. Cela permet une meilleure intégration avec Facebook. Toutefois, nous ne le cochons pas pour le moment, puisque nous installerons un plug-in qui le contient et qui est beaucoup plus puissant, Yoast. Pour en savoir plus, lisez cet article assez technique puis faites votre choix. Le nôtre, ne pas cocher la case.

Le titre de la page : l’afficher, le masquer ou le customiser

Le thème ajoute par défaut un bandeau sous l’en-tête qui affiche le titre de vos pages. Vous avez le choix de le conserver ou de le désactiver sur l’ensemble de vos pages. Pensez bien globalité, il sera possible de le supprimer par page un peu plus tard.

Titre d'une page du site d'auteur
Titre d’une page du site d’auteur

Pour ce faire, rendez-vous dans Options générales -Titre de la page.

Modification de l'apparence de l'encart de titre d'une page

La partie Visibilité vous permettra de masquer le titre sur les tablettes ou les téléphones, c’est un choix.

La balise de titrage modifiera la taille. De préférence, laissez H1, c’est le premier niveau de titre. Pour modifier la typographie, il faut se rendre dans Typographie-Titrage 1 (h1).

Ensuite le Style vous offre plusieurs possibilités :

  • par défaut,
  • centré
  • centré minimaliste,
  • image d’arrière plan,
  • masqué.

Vous pouvez également modifier les marges internes (attention à ne pas trop en faire, le thème est déjà bien fait).

Choisir la couleur d’arrière-plan et celle du texte.

Ensuite s’offre à vous la possibilité d’afficher le fil d’Ariane. Nous y reviendrons dans la partie blog. Pour nous, ce n’est pas important pour les pages car nous ne mettrons pas ou peu le titre.

Vos polices

Ne levez pas les mains, continuez de travailler sur votre site.

Ici dans Typographie, vous allez gérer les polices en général.

Du cops de la page, en passant par tous les titres, les menus, le fil d’Ariane, les titres d’entrée de blog, ceux des widgets.

Tout est possible. Essayez, tentez, retentez et vous arriverez à un résultat.

Autres réglages généraux

Modifier flèche de retour en haut de l'écran

Vous pouvez modifier le bouton pour revenir en haut dans Options générales -Thème des boutons.

Il est aussi possible de modifier la pagination dans Options générales -Pagination.

Voilà, nous avons fait le tour des réglages généraux de votre site internet d’auteur. Maintenant passons à la partie blog.

La partie blog

Si vous tenez un blog, sinon pas besoin de réglages, passez votre chemin.

Rendez-vous dans la partie du menu Blog.

Entrées du blog

C’est la page d’accueil de votre section blog, de vos catégories, des archives. Ce thème vous permet quelques adaptations ce qui est bien venu. C’est la page de présentation des différents articles pour faire simple.

Présentation de la page d'un blog

Vous pouvez choisir la Mise en page des archives et entrées en déterminant où se trouve la sidebar, et si vous souhaitez l’enlever. Sachez qu’il est bien venu de la laisser dans un blog.

Vous pouvez choisir dans Ordre de colonne latérale mobile, l’ordre d’apparition. Soit le contenu en premier, soit la colonne latérale puis le contenu.

La Balise de titrage, comme pour les pages permet de définir la taille. De préférence H2.

Position des éléments et métas

Puis le Style du blog en grande image, grille ou miniature. Suivant votre choix vous aurez la possibilité de modifier la taille des images, le nombre de colonnes et le style de la grille pour ajuster ou non les rangées.

Vous pouvez aussi déterminer une largeur et hauteur personnalisées pour l’image, adapter la longueur de l’extrait, modifier la pagination du blog.

Ce qui est top ensuite, c’est la possibilité de modifier l’ordre et la position des éléments, les masquer en cliquant sur l’œil.

Vous pouvez ensuite choisir et modifier l’ordre des Métas, ce qui correspond au petit texte avec la date de publication, les catégories, le nom de l’auteur…

Article unique

C’est le design de la page d’un article.

La richesse de ce thème c’est l’énorme choix de modification.

Mise en page d'un article de blog

On retrouve le choix de la mise en page comme l’entrée du blog, de la balise de titrage et la possibilité de choisir de mettre le titre de l’article en tire de l’en-tête de page.

Vous pouvez déterminer la largeur du contenu si vous avez choisi la mise en page pleine largeur.

Ensuite, on retrouve la possibilité de masquer ou non et de choisir la position des éléments. De même pour les Métas.

Pour finir, vous avez la possibilité de choisir le nombre d’articles similaires et le nombre de colonnes. Vous pouvez modifier manuellement la taille des articles similaires.

Nous avons fait le tour de l’ensemble des possibilités qui nous semble important. Il en existe encore d’autres que vous pourrez découvrir.

Maintenant, nous allons voir comment créer la page d’accueil, avec de multiples mises en forme possibles.

Séparateur de chapitre

Étape 3 : La création de la page d’accueil

Pour réaliser cette étape nous allons introduire des extensions que l’on a installées, Ocean Extra et Elementor.

Cette extension ajoute un menu en bas des articles ou des pages que vous créez. Elle permet de les personnaliser individuellement. Vous allez voir, c’est exceptionnel et cela vous permettra de vous ouvrir de multiples possibilités de personnification.

Ocean Extra ou la personnification individuelle

Cette extension apporte donc une boîte à la fin de la création d’un article ou d’une page. En fonction, vous aurez 9 ou 8 onglets. Nous allons les énumérer dans l’ordre et expliquer succinctement les possibilités.

Tous les réglages supplémentaires avec OceanExtra
Tous les réglages supplémentaires avec OceanExtra
  • Principal. Ici, vous pourrez modifier la mise en page de la page ou de l’article en cours de création. Le réglage par défaut sera celui défini plus haut.
  • Codes courts : Vous pouvez ajouter des codes courts, comme vu dans le copyright du footer.
  • En-tête : Vous aurez la possibilité de modifier le design de l’en-tête pour cette page.
  • Logo : Ici, vous pourrez afficher un logo différent sur la page ou l’article.
  • Menu : Pour modifier votre menu, couleurs, polices, taille…
  • Titre : L’afficher ou non. Modifier le texte, ajouter un sous-titre.
  • Fil d’Ariane : Il pourra être modifié pour la page ou l’article.
  • Pied de page : on peut laisser ou supprimer les zones de widgets ou copyright.
  • Article : N’existe pas lors de la création d’une page. Ici vous pourrez ajouter un contenu spécifique pour chaque article.

Vous l’aurez compris, vous allez pouvoir tout faire.

Pour notre page d’accueil, nous allons choisir une mise en page avec 100 % pleine largeur et nous allons enlever le Titre. À vous de jouer.

Elementor

Cette extension est géniale. C’est un page builder comme l’on dit pour se la raconter. Elle permet de créer une page, de mettre différents éléments, un peu comme l’éditeur de WordPress sans connaître le codage internet.

Vous allez pouvoir vous éclater. Sachez que la version gratuite à quelques limitations, mais sont largement suffisantes pour créer quasiment toutes les pages que vous voulez. Si vous le désirez toutefois, la version payante (pro) vous permettra de tout modifier totalement, d’avoir de nombreux templates pour une cinquantaine d’euros.

Création de la page d’accueil

Nous reprenons la page d’accueil de notre site. Elle va être totalement remaniée.

Modifier avec Elementor

Pour ce faire, nous cliquons sur Modifier avec Elementor.

Elementor se charge. C’est une nouvelle interface. Vous retrouverez sur la gauche le menu et sur la droite l’apparence de votre site. Ce n’est pas sans rappeler le menu Personnaliser.

Accueil Elementor
Accueil Elementor

Toutefois, ici, vous allez pouvoir ajouter autant de parties que vous le désirer dans vos pages. C’est à peu près le même fonctionnement que la création d’une page directement avec l’éditeur de WordPress, mais là vous n’avez plus aucune limitation de création, de mise en page…

En bas de la partie du menu à gauche, plusieurs icônes sont présentes. De gauche à droite, les réglages généraux, un raccourci vers le navigateur de section, l’historique qui permet d’annuler et de revenir en arrière après différents réglages loupés, le mode responsive pour voir le rendu sur différents supports, la prévisualisation et enfin la mise à jour (publication).

Pour revenir à l’éditeur classique, cliquez sur les trois traits en haut à gauche, puis Revenir à l’éditeur wordpress.

Maintenant vous allez pouvoir choisir quelle partie insérer, en cliquant sur les 9 petits carrés à droite du titre elementor. Une multitude de choix que vous pouvez glisser directement sur votre page après avoir créé une section s’offre à vous.

Vous pouvez aussi ajouter des modèles en cliquant sur le dossier au-dessus de Glissez un widget ici. Vous aurez plusieurs choix que vous pourrez modifier à votre guise.

Nous vous laissons tester, essayer les différents ajouts possibles. Du texte, à la boîte de notation, aux chiffres avec animation, aux galeries…

Onglet de modification de section

Vous pourrez modifier la mise en page, le style de chaque section en cliquant sur les 6 ronds entre le + et la croix. Le + ajoutera une section et la croix la supprimera.

Vous pouvez aussi modifier de la même manière les sous-sections, les colonnes, le contenu en un clic droit sur l’icône de modification de celles-ci.

Les menus se présenteront approximativement pareil.

Mise en page des sections

Mise en page de la section
Mise en page de la section

Centrée, forme si plusieurs colonnes, écart entre les colonnes, hauteur…

Style des sections

Modifier le style dans Elementor

Ici vous pourrez ajouter une image d’arrière-plan à la section et choisir de la laisser centrer, qu’elle prenne toute la place, l’aligner sur les côtés…

Il est également possible de superposer des arrière-plans pour par exemple foncer une image en jouant sur l’opacité de la couleur superposée.

Vous pouvez modifier les bordures, pour qu’elles apparaissent, il suffit de choisir le type de bordure, puis d’augmenter la largeur. Vous pouvez choisir les 4 bords ou un seul en cliquant sur le lien, puis en augmentant la bordure souhaitée. Le rayon de bordure ajoute un arrondi à celle-ci.

Vous pouvez créer une ombre de boîte, la déplacer à l’horizontale et la verticale, augmenter le flou et le diffuser, en interne ou en externe

Vous pouvez ajouter une forme de séparation entre les sections et en modifier la taille.

Et enfin modifiez la typographie.

Il faut faire de même pour les sous-sections en cliquant sur les 6 points entre le + et la croix de la sous-section à modifier.

Avancé

Modifications avancées avec Elementor

Ici vous pourrez modifier les marges interne et externe de la section.

Ajouter des effets de mouvement, comme par exemple l’apparition d’une section. N’en abusez pas, cela pourrait ne pas plaire à tous les visiteurs. Mais certaines animations sont très belles.

Vous aurez la possibilité de choisir de masquer ou non une partie en mode responsive (sur tablette ou téléphone).

Nous avons fait le tour des possibilités. C’est à vous de jouer et de laisser votre créativité parler. N’hésitez pas à vous inspirer d’autres sites pour savoir ce que vous souhaitez faire.

Une fois finie, cliquez bien sur Mettre à jour.

Insérer une ancre

Qu’est-ce que cela peut bien être ? Il nous a plombé avec toutes ses explications et maintenant il veut nous couler. Non, nous ne sommes pas comme ça.

Vous pouvez créer une ancre dans vos pages, surtout si elles sont très longues comme une page d’accueil. Une ancre correspond à un point dans votre page accessible par un simple lien. Elles se nomment <a name= » nom de l’ancre »></a> Pour s’y rendre, il suffit d’un lien à l’intérieur (ou l’extérieur) de votre page. Pour se rendre à cette position il suffit de créer un lien #nom de l’ancre si c’est sur la même page, sinon http://votresite.fr/nom de la page où est l’ancre si besoin#nom de l’ancre.

Création d'une ancre Elementor

Par exemple sur le site de Sébastien LENCROZ, j’ai positionné une section avis en bas de sa page d’accueil.

Vous pouvez faire la même chose. J’ai également créé une ancre pour le formulaire de contact qui se trouve sur la page d’accueil du site de Sébastien LENCROZ. Regardez et scrollez la page.

Tiens, c’est une bonne transition pour créer un formulaire de contact

Séparateur de chapitre

Étape 4 : La page de contact avec un formulaire

Si vous le désirez, vous pouvez ajouter le formulaire à votre page d’accueil avec un lien, une ancre. Vous connaissez déjà la méthode.

Pour l’exemple nous allons créer un formulaire dans un premier temps puis l’intégrer dans une page dédiée : Contact.

WPForms

C’est le plug-in qui vous permettra de créer le formulaire.

Création des champs

Il se trouve dans le menu à gauche de WordPress. Cliquez sur Ajouter et il s’ouvrira. C’est très simple d’utilisation.

Nom et choix du formulaire WPForm

Dans un premier temps, nommez le formulaire, puis sélectionnez le type choisi. Nous prendrons formulaire de contact simple.

Création du formulaire WPform

Ensuite le formulaire basique apparaît. C’est l’onglet à gauche Champs. Il est déjà très bien. Vous pouvez rajouter des parties par glisser-déposer avec ce qui est proposé à votre gauche.

Création d'un champ WPform

Vous pouvez modifier le nom, ajouter une description. La taille peut aussi être modifiée. Si l’entrée est nécessaire, vous pouvez le déterminer. Si vous souhaitez qu’il soit pré rempli, vous pouvez mettre un texte dans Texte d’espace réservé…

Tout en haut de la case de modification, vous avez le nom du champ, nous y reviendrons mais regardez comment ils se nomment. Le premier (Nom) souvent s’appelle ID #0. Cela nous servira pour le message automatique envoyé. Ici notre Objet créé porte l’ID #3.

Message de confirmation

Message de confirmation envoi message

Dans l’onglet Réglages puis Confirmations, vous pouvez choisir le message qui apparaîtra à l’écran après l’appui sur le bouton Envoyer.

Réception du message

Rendez-vous dans l’onglet Réglages.

Les réglages généraux vous permettent de modifier le texte du bouton, et d’activer le pot de miel (c’est une protection contre les envois de hackers).

Réponse automatique reception message

Puis la partie notification nous intéresse. Elle permet de vous envoyer une copie du message. Vous pouvez faire comme vous le souhaitez. Si vous souhaitez insérer un champ reçu par le formulaire, il suffit de mettre {fiel_id= »chiffre »} comme par exemple dans Répondre à qui récupère le mail de votre visiteur. {all_fields} envoie tout. Votre message sera donc composé de l’ensemble des champs.

Réponse automatique

Ce qui est génial, c’est que vous allez pouvoir répondre automatiquement sans prendre à chaque fois votre plume pour faire patienter votre visiteur.

Toujours dans Notifications, vous pouvez ajouter une nouvelle notification. Il suffit de mettre le nom du champ de votre visiteur dans destinataire et créer votre message. Nous vous laissons le créer par vous-même. Si vous n’y arrivez pas, demandez-nous, on a la solution.

Vous pouvez maintenant créer autant de formulaires que vous le souhaiter. Soit pour une inscription à une newsletter, soit pour un sondage, soit pour ce que vous désirez…

Intégration dans une page

Selection widget WPForms
Choix du formulaire WPForms

C’est hyper simple. Il suffit d’ajouter un bloc WPform et de choisir le formulaire souhaité.

Vous pouvez aussi le faire dans Elementor… Le formulaire ne changera pas, mais vous pourrez modifier les couleurs, le fond…

Séparateur de chapitre

Étape 5 — Intégrer sa page Facebook dans le footer ou la sidebar

Sachez que vous pouvez intégrer votre page Facebook sur votre site Web. Par contre, nous parlons bien de la page, et non pas votre profil. Si ce n’est pas encore fait, créer votre page auteur sur Facebook.

Puis pour intégrer un encart appelant à l’action sur votre page rendez-vous dans Apparence-Widgets.

Sélectionner l’endroit où vous souhaitez le mettre en cliquant sur la flèche bas à côté du titre de l’endroit désiré (Colonne latérale par défaut, pied de page…).

Ajout d'une boite Facebook

Puis dans les choix possibles faites glisser Boîte Facebook. Vous pouvez aussi cliquer sur la flèche bas puis sélectionner l’endroit où elle doit apparaître.

Informations à remplir dans la boîte Facebook

Retour dans la zone souhaitée, toujours dans widget, une nouvelle boîte est apparut. Indiquez le titre que vous souhaitez, l’adresse de la page, puis quelques options à définir.

Et voilà le tour est joué !

Vous pouvez aussi intégrer un encart dans une de vos pages ou articles comme à côté. N’oubliez pas d’aimer !

Ah par contre ce n’est pas un widget. C’est une ligne de code.

Allez, s’il te plaît, dis-nous comment tu as fait.

Pour réussir cette superbe performance, dans votre éditeur WordPress, ajoutez un bloc HTML personnalisé et collez ceci :

<div class="content.html><div class="fb-page" 
  data-href="https://www.facebook.com/JMAutoedite.fr/"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>

N’oubliez pas de modifier l’adresse Facebook, bien que… Cela nous réjouirait de nous retrouver sur votre site internet d’auteur.

Séparateur de chapitre

Bonus — Yoast SEO

C’est un plug-in incontournable. Le bonheur c’est qu’il est gratuit. Il existe une partie premium, mais aucun besoin de l’utiliser.

Ce plug-in vous permettra de travailler votre référencement, c’est-à-dire votre placement dans la toile. Soyons clairs, vous n’allez pas être en première ligne des résultats Google, mais Yoast vous permettra de gagner en visibilité.

Pour l’installer, vous connaissez le chemin. Nous ferons un article prochainement sur ce qu’il peut faire, principalement pour votre contenu.

  • Prévisualisation d’une recherche Google,
  • Analyse SEO
  • Analyse de lisibilité
  • Vérification de la hiérarchie des titres

Vous retrouverez une boîte à la fin de chaque page ou article que vous créerez avec de multiples aides pour améliorer votre référencement.

Si le sujet vous intéresse, nous vous conseillons l’excellent livre de Dimitri Carlet : 7 Techniques pour Développer votre Référencement Naturel : Recettes SEO express pour faire grimper votre site dans les moteurs de recherche.

Séparateur de chapitre

Conclusion

Votre site a beaucoup évolué depuis notre première rencontre.

Oui, il manque encore la boutique. Que vous êtes impatient ! Mais vous avez raison. Vous aimeriez que le site soit déjà totalement opérationnel.

Digérez un peu tout ce que vous venez d’ingurgiter. Votre site doit permettre de vous représenter auprès de vos lecteurs. Vous pouvez publier des articles et les partager sur les réseaux sociaux. Montrez au monde que vous existez.

Si c’est article vous a aidé, partagez-le sur votre site pourquoi pas, sur Facebook. Taguez vos amis. Abonnez-vous si vous pensez que nous sommes assez bien pour vous.

Profitez bien de votre site internet d’auteur. N’oubliez pas de mettre votre adresse en commentaire pour que nous puissions nous rendre compte du travail accompli.

Séparateur de chapitre
Lu 269 fois

Sébastien LENCROZ

Sébastien est le rédacteur en chef du site jemautoedite.fr. Écrivain, blogueur, passionné de dessin, d’Internet, il met à disposition toute son expérience pour jemautoedite.fr. La nécessité de balayer la mauvaise image de l’autoédition le pousse à accompagner les nouveaux auteurs autoédités dans leur quête de réussite, avec une nécessité accrue de qualité.

Laisser un commentaire