Menu Fermer

Introduction: Mes premiers pas avec WordPress Elementor

Date de la dernière modification: 8 mars 2021

J’ai commencé avec mon premier site Web au début des années 2000. J’ai passé ensuite à Joomla en 2011, où j’y suis toujours présent:  http://www.boichat.ch/joomla/.
En 2017, j’ai aussi débuté avec WordPress, https://www.boichat.ch/wordpress/ et pour poursuivre avec un second site, un peu plus tard, pour mon dernier livre dédié au Raspberry Pi, Java et Python:  http://www.boichat.ch/wpjrsp/.

Ces trois sites sont avant tout orientés pour une présentation texte, pour décrire mon travail, mes bouquins et mes articles, qui sont presque tous dédiés à la programmation et aux micros-contrôleurs. Même mes articles dédiés à la photo sont plus orientés aux techniques, à mes achats et à mes expériences.

C’est en 2020, lorsque j’ai préparé un site ultra simple pour ma fille, à présent architecte d’intérieur, qu’il m’a fallu travailler avec des présentations totalement différentes. Son hébergeur n’avait que 10 Moctets à disposition et j’ai alors développé une page tout simple, unique, en HTML et CSS, avec peu de texte dans des polices très particulières, quelques belles images et un gros travail SEO (qui marche bien). 

J’ai repris le site construit pour ma fille, dont j’ai modifié le contenu, et je l’ai déposé ici: http://boichat.ch/html_css_only/. On pourra s’amuser, sur PC, à minimiser au maximum la largeur de la fenêtre de notre navigateur Web préféré, pour une première visualisation type smartphone. Cette technique est évidemment valable lors du développement de page Web sous WordPress et Elementor!

L’idée est maintenant de me baser sur ce exemple et de faire l’équivalent sous WordPress et Elementor.

Auparavant, je ne connaissais pas Elementor. Comme on le dit volontiers, il me manquait une page. C’est en fait un peu normal, vu mon travail et mes autres présentations, sous une forme différente, comme mon article Python Flask et SQLite pour le Raspberry Pi 3 ou 4 ….

Je vais essayer de le décrire ici mon travail de telle manière qu’un débutant, disons même un débutant “zéro”, puisse s’en sortir.

 

Prérequis pour WordPress Elementor

Il faudra un hébergeur où WordPress pourra être utiliser voire installer. Il est évidemment possible de l’installer sur un PC (Windows ou Mac) lorsqu’on débute ou alors pour ne pas risquer d’endommager son propre site WordPress.

J’ai moi-même écris quelques articles pour conserver mes notes et les partager, comme par exemple:
WordPress avec le thème Customify
ou encore:
Installation d’un second site WordPress pour mon livre Programmer en Java pour le Raspberry Pi 3 et 4

Mes nombreux articles de Mon expérience Joomla sont aussi utilisables, avec des notes sur les sauvegardes, incluant WordPress.

Notes personnelles de migration à Elementor

Sans entrer dans les détails et les explications, j’ai déposé ici mes notes personnelles pour la création d’un site WordPress avec Elementor et sur un hébergeur qui a déjà une base de données et pareil pour mon PC avec Wampserver64. C’est donc la même procédure sur chaque site sauf que j’utilise un client FTP.

    • Télécharger le dernier WordPress sur le site https://wordpress.org/download/, c’est à dire le fichier FTP pour le transfert et quelques corrections de fichiers de configuration.
    • Déziper le répertoire wordpress de wordpress-5.5.1.zip dans un nouveau répertoire du serveur Web  (PC: D:\wamp64\www\wpnath).
    • Copier wp-config-sample.php en wp-config.php ou je corrige
      $table_prefix = ‘wp_’;
      en
      $table_prefix = ‘wpnath_’;
    • Il faut adapter les trois DB_NAME, DB_USER et DB_PASSWORD correspondant à notre base de données déjà installée!
    • Ensuite on lance l’installation: http://127.0.0.1/wpnath/.
      La langue sera le français. On mettra le titre Site de Nath et on donnera un nom d’utilisateur et son mot de passe! 
      Il faut aussi spécifier l’adresse de messagerie.
      On termine avec le bouton: Installer WordPress.
    • Plus tard les adaptations se feront avec http://127.0.0.1/wpnath/wp-admin/.
    • Lorsque c’est installé, j’ai transféré avec FTP le répertoire wpnath sur mon site OVH.
    • Il faut vérifier que le préfixe de table est bien correct, c’est à dire wpnath_.
      Les variables DB_NAME, DB_USER et DB_PASSWORD devront être correctes (consulter la configuration d’un site wordpress dans wp-config.php).
    • Pour un bon départ nous allons installer et activer aussi les extensions suivantes:
      – Custom Fonts de Brainstorm Force
      – Elementor Website Builder
      – Advanced Editor Tools (previously TinyMCE Advanced)
      Essentiel pour les programmeurs éditant des pages contenant du code et lors de variations de polices, de grandeurs et de couleurs!
      – Cf7 For Elementor; Contact Form 7 et Contact Form 7 Style
      – Duplicate Page
      – Style Kits for Elementor par AnalogWP (essentiel pour les espacements internes des sections)
      – Toolbar Extras (pas sûr)
      – Elementor – Header, Footer & Blocks 
      Cool pour un menu Hamburger pour smartphone
      – WP Mail SMTP pour Contact Form

      – Yoast SEO
      – Awesome Wp Image Gallery
      – HT Mega pour le fil Instagram

    • Pour me simplifier la tâche j’ai utilisé le dernier thème venant avec ma dernière installation: Twenty Twenty. J’y ai évidemment défini un thème enfant comme décrit dans mon article  pour un autre de mes sites Web: WordPress avec le thème Customify. Je l’ai nommé twentytwentychild.
    • Dans Apparence Personnaliser, j’ai ajouté le code CSS suivant permettant de désactiver les header et trailers (si un autre thème que TwentyTwenty est utilisé, il faudra chercher les bons attributs en inspectant le code HTML, ou alors utiliser les outils de réglage du thème si disponible pour cette partie (avec des thèmes payants en principe))  :

      #site-header {
      display:none
      }

      #site-footer {
      display:none
      }

    • Pour tous les articles qu’on crée sous Modification rapide: Modèle Elementor Canevas, pas de commentaires ni de ping.

    • Pour “essayer” de désactiver le “search engine” de Google durant développement avec une personne de l’extérieur, j’ai mis un mot de passe sur chaque page et sous Menu du tableau de bord / Réglages / Lecture coché Demander aux moteurs de recherche de ne pas indexer ce site

    • En même temps, il est possible pendant le développement de protéger les pages par mot de passe (sous Modification rapide)
    • Pour changer la couleur des textes ou des liens URL (Text) il faut aller sous Style Kits, Thème Style Kits et modifier avec Elementor Kit par défaut.
      Bien qu’on ait l’impression que le CSS n’est que disponible dans la version Pro d’Elementor, il est toujours possible d’intégrer du code CSS dans notre thème, comme par exemple:

      .elementor-text-editor a:hover {
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-color: gray;
      }
      Ceci permet de souligner un lien URL au passage de la souris sur le texte qui deviendra gris aussi. 

    • Pour les Image, sous Style et Au survol, on peut créer un effet.

    • Pour les Email form, j’ai installé Contact Form 7 et WP Mail SMTP configuré avec mon serveur OVH (paramètre repris de Thunderbird).

    • Lorsqu’on crée une page avec Elementor on aimerait rester un certain temps en mode brouillon: le petit curseur en bas à droite, à côté de PUBLIER, permet de rester en mode brouillon. Sinon, il est nécessaire de passer par WordPress et le mode « Modification rapide ».
    • Il est possible d’ajouter un mot de passe sous « Modification rapide » pour permettre au premiers utilisateurs de vérifier des pages avant publication.
    • Quand on débute avec Elementor, et qu’on désire y intégrer des images, ce serait bien de déposer quelques images dans la médiathèques.
    • Lors de l’édition de texte sous Elementor on oublie souvent qu’il est possible d’agrandir momentanément le panneau de gauche pour avoir plus de confort!
  • Si, avant de basculer en mode Elementor, en bas de la page:  Mise en page du contenu / Pleine largeur ne marche pas pour activer le menu à droite (Articles récents, etc), nous irons sous Elementor, dans l’article, la petite roue en bas, pour les Réglages et Modèle de page / Elementor pleine largeur.


Pour plus d’information sur l’utilisation de Contact Form 7 sur https://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/.
Moi-même j’ai utilisé les CSS:

div.wpcf7 {
background-color: #FFFFFF;
border: 0px solid #DDDDDD;
font-family:Chaparral-Pro-Regular;
font-style:italic;
padding:5px;
}
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea {
background:#EEEEEE;
color:#000000;
font-family:Chaparral-Pro-Regular;
font-style:normal;
}
.wpcf7 input[type=”submit”],
.wpcf7 input[type=”button”] {
background-color:#CCCCCC;
color:#0000FF;
font-family:Chaparral-Pro-Regular;
font-style:italic;
width:50%;
text-align:center;
text-transform:uppercase;
}

C’est parti avec WordPress Elementor

Nous trouverons la suite des ces premiers pas dans l’article Ma première page WordPress avec Elementor ainsi que dans WordPress Elementor – Créer une page modèle multi-sections pour ordinateur ou mobile

Cette page a été écrite à l’origine avec l’éditeur classique de WordPress et est maintenant sous Elementor. Cela m’a permis aussi de me familiariser avec ses outils, quoique j’ai un trop copier/coller des morceaux qui m’ont fait apparaître des styles de texte non traditionnels (donc du travail encore).

Devant remettre à niveau ma configuration de sauvegarde et de développement sur PC (pourquoi pas consulter mon Restauration complète d’un site Web sur PC), j’ai alors écris un article dédié à l’Installation de Xampp, Wampserver, WordPress et Elementor.