Date de la dernière modification: 24 septembre 2020
Introduction
Le lecteur devra sans doute consulter mon premier article sur le sujet: Mes premiers pas avec WordPress Elementor où j’y ai déposé quelques prérequis pour WordPress Elementor.
Le point de départ, c’est http://boichat.ch/html_css_only/, une page Web traditionnelle, que nous allons essayer de convertir au mieux sous WordPress avec Elementor. L’origine et la mise en place de cette page est expliquer dans l’article Sans Joomla ni WordPress (HTML/CSS).
Transfert des images
La première chose est de déposer toutes les images de cette page dans la médiathèque de WordPress. Ces images se trouvent en fait dans le répertoire http://boichat.ch/html_css_only/photos/; la location de ces pages peut être facilement retrouvées d’ailleurs, avec l’inspecteur de Chrome (Ctrl+Maj+I) ou de Firefox (Ctrl+Maj+C). Les 6 images importées dans la Médiathèques ont été préparées avec Paint.net, avec une largeur fixe de 1000 pixels (pour faciliter la mise en place, dans le cas d’une page écrite directement en HTML) et une compression de 80 sous Paint.net pour permettre une vitesse d’affichage (SEO oblige) et une qualité raisonnable.
Il n’est évidemment pas nécessaire d’utiliser cette page pour faire cet exercice. Il suffit de préparer des images et quelques lignes de texte. Le but pour moi a été de vérifier qu’une telle page pouvait être développée, telle quel, avec la même présentation, mais sous Elementor.
Première configuration
Nous considérons ici que l’extension Elementor Page Builder a été installé et activé, avec les cases Désactiver les couleurs par défaut et Désactiver les polices par défaut cochées. J’ai aussi décoché “Autoriser les commentaires” et “Autoriser les notifications par ping” avec Sous Articles / Modifications rapides.
Pour cet exercice j’ai gardé mon thème customify-child comme expliquer dans mon article WordPress avec le thème Customify. Mais il est tout à fait possible d’utiliser le dernier thème de base de WordPress, Twenty Twenty, de ma récente mise à jour de WordPress (version 5.5).
J’ai donc créé une nouvelle page nommée Mon premier exercice sous Elementor et WordPress où j’ai retiré les titres et autres gadgets.
Pour les header et trailer, il faudra repasser au menu classique de WordPress, sans Elementor, sous Attribut de Page (tout en bas à droite) et mettre Elementor Canevas comme Modèle.
Lorsqu’on accède le document depuis le tableau de bord de WordPress sous Articles et Modifier, et avant de cliquer sur le bouton MODIFIER AVEC ELEMENTOR, nous ouvrirons la boîte tout en bas pour le Réglage de Customify (notre thème) où nous indiquerons Pleine largeur pour la mise en page et où nous cocherons toutes les cases comme désactiver l’en-tête et le titre et Barre: Colonne aucune barre.
Installer nos propres polices
Pour mettre les textes avec les polices désirées, nous devrons les installer. Nous allons commencer par installer dans WordPress le Plugin Custom Fonts par Brainstorm Force (Extensions, Ajouter, Rechercher). Dès qu’il est installé nous l’activerons.
Insertion des images
Toutes les images que nous avons ajouté précédemment à la Médiathèque peuvent être ajouté avec l’éditeur d’Elementor et le bouton + de Glissez un widget ici avec l’élément BASIQUE Image. Nous le ferons dans l’ordre comme dans la page http://boichat.ch/html_css_only/. et avec la fenêtre Choisissez une image en haut à gauche.
J’ai mis ensuite toutes les images en pleine largeur (bouton en haut avec les 6 points) et option largeur de contenu, ainsi que l’image à gauche: cliquer sur l’image et dans l’éditeur d’image, mettre à gauche.
J’ai aussi indiqué Taille de l’image entière car mes images avaient déjà une largeur fixe et identique.
Insertion des textes
Le premier souci que j’ai eu, c’est avec l’espacement dans une boîte de section text. Pour en modifier les caractéristiques, j’ai installé le plugin (sous extensions) Style Kits – Advanced Theme Styles for Elementor. Noud trouverons la documentation sous https://docs.analogwp.com/category/577-working-with-style-kits.
On se positionnera sous les images, l’une après l’autre, avec le curseur de la souris, pour sélectionner avec le petit bouton + pour ajouter une nouvelle section, en y déplaçant le widget Editeur de texte. Un texte par défaut sera présenté que nous pourrons remplacer par le texte de chaque partie présenté dans la page http://boichat.ch/html_css_only/. Nous copierons / collerons chaque fois les deux lignes dans une section séparée:
Text avec American Typewriter Regular
Text avec American Typewriter Light
et ceci sans formatage, donc avec un Shift+Ctrl+V. Dans notre page originale, nous avons plusieurs fois le même texte et les même polices: il est possible de créer une nouvelle section et d’utiliser le menu coller dans la section texte avec le bouton droite de la souris: le copier aura été fait précédemment dans la section déjà créée et formatée. avec les bonne police.
Indiquer la bonne police
Nous commencerons par cliquer sur la ligne terminant avec Regular, pour commencer, et adapter la police avec l’Editeur de text (bouton éditeur en haut à gauche dans la section), le bouton menu Style, le bouton Typographie et Edition (crayon), la Famille American Typewriter Regular dans la partie Custom et la grandeur de la police. En utilisant l’inspecteur de notre navigateur sur la page http://boichat.ch/html_css_only/ nous trouverons que la police est de 40 (définie en CSS dans la balise <font1>) et j’y ai préféré un 33.
C’est une police installée avec le Plugin Custom Fonts par Brainstorm Force, comme indiqué ci-dessus, qui n’est disponible que pour le texte de la section. En continuant d’entrer du texte directement dans la section, la même police sera utilisée.
Si nous voulions mettre une partie du texte dans une autre police, par exemple le mot avec, uniquement les polices standard de l’éditeur de texte sont utilisables (Exemple Helvetica ou Tahoma) et le travail doit se faire dans la boîte de texte à gauche et non pas dans la section (même chose si on met en gras).
Avec l’outil de réglage (roue dentée en bas à gauche, Réglages), je suis allé sur Style Kits, EDIT THEME STYLE KIT, Style Kits, Column Gaps et mis 5 PX (pixels) pour le Default Padding à gauche et à droite.
Le navigateur est pratique pour voir les sections (menu Navigateur avec le bouton droite de la souris sur le bouton edit de la section).
Pour les alignements ou espacements, il faut utiliser le bouton à 6 points en haut de la section pour modifier, soit l’image ou le texte des sections, et avec le menu Mise en page.
Pour les images, juste la largeur du contenu a été mis en pleine largeur.
Pour les textes c’est plus compliqué:
Pleine largeur, Écart de colonne étroit, Hauteur minimum 0 px (pixel), Position de la colonne haut,
Le plus compliqué ce fera avec l’espacement dans le menu avancé. Il faudra corriger les marges HAUT, BAS et GAUCHE, et ceci sur chacun des appareils: PC, Tablette et Smartphone. Je laisserai le lecteur s’amuser.
Le résultat: https://www.boichat.ch/wordpress/2020/08/27/mon-premier-exercice-sous-elementor-et-wordpress/
Le texte Affichage “nombre de pages” vient de l’extension Post Views Counter. S’il est présent et qu’on ne le désire pas, il suffirait de le désactiver.