{"id":2032,"date":"2020-10-11T08:54:43","date_gmt":"2020-10-11T06:54:43","guid":{"rendered":"http:\/\/www.boichat.ch\/wordpress\/?p=2032"},"modified":"2020-12-10T09:59:59","modified_gmt":"2020-12-10T08:59:59","slug":"wordpress-elementor-page-modele-exercice","status":"publish","type":"post","link":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/","title":{"rendered":"WordPress Elementor – Page mod\u00e8le – Exercice"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

WordPress Elementor - Page mod\u00e8le - Exercice<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

** En travail **
Date de la derni\u00e8re modification: 10 d\u00e9cembre 2020<\/em><\/strong>
<\/span><\/em><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

C’est un mini exercice pour montrer quelques aspects discut\u00e9s en d\u00e9tails dans l’article:
WordPress Elementor – Cr\u00e9er une page mod\u00e8le multi-sections pour ordinateur ou mobile<\/strong><\/a><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

La largeur de la section qui pr\u00e9c\u00e8de peut \u00eatre modifi\u00e9 avec le bouton Modifier colonne<\/strong>, on reste en Encadr\u00e9<\/strong> et on met par exemple une largeur de 700 (le lien URL sera mieux align\u00e9).<\/p>\n

L’effet d’animation de cette derni\u00e8re section est assur\u00e9e avec Avanc\u00e9<\/strong>, Effets de mouvement<\/strong>, Animation d’entr\u00e9e<\/strong>, Zoom in<\/strong>, dur\u00e9e normale<\/strong> et un d\u00e9lai de 300ms<\/strong>. Il y a d’ailleurs une pl\u00e9thore d’options … par forc\u00e9ment bienvenues!!<\/p>\n

On pourra augmenter ou diminuer les espaces en haut et en bas des sections avec\u00a0Modifier Section<\/strong> Marge Avanc\u00e9 et -35 ici, pour la section qui pr\u00e9c\u00e8de m\u00eame si les sections se chevauchent!
C’est en fait le cas de la section qui suit, qu’on pourrait corriger: deux couleurs diff\u00e9rentes nous aident\u00a0 pour montrer si c’est la section ou la colonne qui pourrait \u00eatre corrig\u00e9e.<\/p>\n

J’ai ajout\u00e9 ci-dessous, juste pour montrer,<\/b> en rose, une section avec un espaceur.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Les images utilis\u00e9es ici sont prises de mes diff\u00e9rents articles sur mon site WordPress Programmer en Java pour le Raspberry Pi<\/strong><\/a> et Joomla Cartes de d\u00e9veloppement ESP8266 et ESP32<\/strong><\/a>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Le paragraphe qui pr\u00e9c\u00e8de est une section avec le widget “\u00c9diteur de texte”.<\/em><\/p>\n

Pour d\u00e9finir la couleur de l’arri\u00e8re plan de la section <\/strong>(plus fonc\u00e9e), nous irons avec le bouton “Modifier Section” (les 6 petits points au-dessus), “Style”, Arri\u00e8re-plan, Normal et le pinceau classique, d\u00e9finir la couleur\u00a0<\/em>#BCD4F3.<\/i>\u00a0

<\/strong>Pour la couleur de l’arri\u00e8re plan de la colonne de texte<\/strong> (plus clair ici) ce sera avec “Modifier \u00c9diteur de texte”, Avanc\u00e9, menu Arri\u00e8re-plan,\u00a0 Normal, pinceau classique et ici la valeur <\/em>#D8F2F6.<\/i><\/p>\n

Pour modifier la couleur de l’arri\u00e8re-plan de la page enti\u00e8re<\/strong>, donc \u00e0 l’ext\u00e9rieur des zones de section, nous irons sur la roue dent\u00e9e<\/strong> en bas \u00e0 gauche, c’est \u00e0 dire R\u00e9glages de l’article, Style, Type d’arri\u00e8re plan, pinceau classique et une valeur de #000000 pour un blanc pur.<\/em><\/p>\n

Le texte d\u00e9pos\u00e9 ici dans cette bo\u00eete a \u00e9t\u00e9 align\u00e9 au centre (Style) et r\u00e9duit avec Style, Typographie, et taille 15. Utiliser des couleurs d’arri\u00e8re-plan est aussi pratique pendant le d\u00e9veloppement: on les corrigera quand l’article sera termin\u00e9.\u00a0\u00a0<\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Pour visualiser les images ci-dessous en mode smartphone sur PC, il suffit de redimensionner\u00a0 la fen\u00eatre du navigateur avec une largeur minimum.<\/p>\n

Pour afficher le menu \u00e0 droite ici, dans modification rapide de l’article, j’ai indiqu\u00e9 pour Mod\u00e8le<\/strong>: Elementor pleine largeur<\/strong>. Par contre, en y mettant Elementor\u00a0canevas<\/strong>, le menu, ici juste \u00e0 droite, va dispara\u00eetre. On utiliserait plut\u00f4t ce dernier pour une pr\u00e9sentation d’un site d\u00e9di\u00e9 marketing.<\/p>\n

Pour rendre bien visible les sections d’images ci-dessous j’ai ajout\u00e9 une bordure avec Edit section, Style, Bordure, Continue.\u00a0 \u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Trois sections avec des images d\u00e9finies en arri\u00e8re plan (la petite barre \u00e0 droite de la premi\u00e8re image a \u00e9t\u00e9 laiss\u00e9e volontairement pour montrer comment elle peut dispara\u00eetre):<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Trois sections avec des images d\u00e9finies normalement avec le widget (les images apparaissent toujours enti\u00e8res au redimensionnement):<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

La section suivante a \u00e9t\u00e9 dupliqu\u00e9e en utilisant le bouton droite de la souris sur le bouton\u00a0 “Modifier Section” et le second choix du menu d\u00e9roulant: Dupliquer.<\/em><\/p>\n

Modifier la largeur de la troisi\u00e8me colonne\u00a0 peut se faire avec Modifier Colonne (largeur en %) mais ce n’est pas forc\u00e9ment une bonne id\u00e9e. Les deux autres colonnes \u00e0 gauche seront aussi redimensionn\u00e9es.
Cependant, c’est beaucoup plus facile d’utiliser la souris et de se positionner entre deux sections. Un petit ic\u00f4ne de d\u00e9placement appara\u00eetra, et on pourra glisser les section \u00e0 gauche ou \u00e0 droite<\/strong>. Une pr\u00e9visualisation nous aidera aussi.\u00a0<\/em><\/p>\n

Les deux photos \u00e0 gauche ci-dessous ont \u00e9t\u00e9 configur\u00e9es pour un acc\u00e8s URL<\/strong> (petit main au passage) avec un clic de souris: site du NodeMCU pour le premier et aggrandissement pour le seconde.\u00a0<\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Si l’apparence ne nous convient pas sur un smartphone, nous pourrons alors dupliquer cette section, attribu\u00e9e la premi\u00e8re pour le PC et la seconde pour tablette et smartphone. Ceci ce fait avec\u00a0 Modifier Section, Avanc\u00e9, Responsive, et sous Visibilit\u00e9, nous masquerons ou afficherons nos choix avec le selecteur AFFICHER\/MASQUER. En masquant une section elle deviendra grises sur l’\u00e9cran du PC en Mode responsive (menu en bas \u00e0 gauche et \u00e0 gauche aussi du bouton de pr\u00e9visualisation).\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Pour un design correct de pages, le “team” Elementor recommande qu\u2019on pr\u00e9pare la page, par exemple avec Photoshop, AFIN D\u2019AVOIR DES IMAGES avant importation PROPORTIONNELLEMENT CORRECTES LES UNES PAR RAPPORT AUX AUTRES<\/strong>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Jouer avec les textes, les polices, les grandeurs ou encore les couleurs.
Introduction de l’\u00e9dition de texte avec l’extension Advanced Editor Tools (previously TinyMCE Advanced).<\/span>
<\/strong><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Cette extension n’est pas n\u00e9cessaire pour des sites avec beaucoup d’images et peu de texte, mais elle est essentielle pour les programmeurs, par exemple, d\u00e9sirant documenter<\/span> leur travail et sch\u00e9ma<\/span><\/span> et \u00e9videmment leur code en langage C, C++, Java, Python, HTML,CSS ou autres<\/span><\/strong>.<\/p>\n

Cette partie ne contient qu’une seule colonne! Magnifique!<\/p>\n

La hauteur de ligne a \u00e9t\u00e9 diminu\u00e9e (\u00c9diteur de texte, Style, Typographie, Hauteur de ligne). Ici \u00e0 1.2 mais il faudra jouer suivant la programmation.\u00a0<\/p>\n

Pour des morceaux de code important, nous pourrons cr\u00e9er une section ind\u00e9pendante, voire ensuite l’enregistrer comme mod\u00e8le pour r\u00e9utilisation dans d’autres pages du site.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Voici donc un exemple: le code qui suit a \u00e9t\u00e9 d\u00e9pos\u00e9 dans une nouvelle section incluant le gadget Editeur de texte (l’extension Advanced Editor Tools \u00e9tant active). Nous travaillerons \u00e9videmment avec l’\u00e9diteur \u00e0 gauche de l’\u00e9cran et agrandie horizontalement.\u00a0<\/strong><\/p>\n

Le fichier original, esp32testdallas.ino<\/strong>, vient d’un copier dans l’\u00e9diteur de l’IDE de l’Arduino (voir mon article Un tutoriel pour d\u00e9butant pour l’ESP32: un thermom\u00e8tre digital<\/strong><\/a>).\u00a0<\/p>\n

Le premier job est de s\u00e9lectionner tout le code, de le mettre en Courier New avec 16px et en gras (Bold). J’ai diminu\u00e9 la hauteur de ligne a 0.9 (\u00c9diteur de texte, Style, Typographie, Hauteur de ligne) pour cette pr\u00e9sentation. J’ai modifi\u00e9 l’arri\u00e8re plan de la section avec #EEEEEE, rajout\u00e9 un bord\u00a0 (Colonne, Style, Bordure). J’ai aussi mis une marge interne de 11 pixels dans toutes les directions pour la colonne ET la section. C’est un choix: la bordure, par exemple, peut \u00eatre pour la section, la colonne ou la bo\u00eete de texte.\u00a0<\/p>\n

C’est beaucoup de travail, et si on est content, il est possible de l’enregistrer comme mod\u00e8le (bouton droit de la souris sur Modifier section et choisir Enregistrer comme mod\u00e8le (je l’ai nomm\u00e9 ici\u00a0Code_C_Arduino<\/b>).\u00a0<\/p>\n

Pour reprendre cette section, nous irons dans la cr\u00e9ation d’une nouvelle section, au milieu sous Ajouter un mod\u00e8le<\/b>, Code_C_Arduino<\/b>, et ins\u00e9rer sans r\u00e9glage (choix Non<\/strong>).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

#include <OneWire.h><\/span><\/strong>
#include <DallasTemperature.h><\/span><\/strong>
#include “SSD1306Wire.h”<\/span><\/strong><\/p>\n

\/\/Le fil data sur la broche P15<\/span><\/strong>
#define ONE_WIRE_BUS 15<\/span><\/strong>
\/\/oneWire instance pour la communication<\/span><\/strong>
OneWire oneWire(ONE_WIRE_BUS);<\/span><\/strong>
\/\/La r\u00e9ference du capteur de temp\u00e9rature Dallas <\/span><\/strong>
DallasTemperature sensors(&oneWire);<\/span><\/strong><\/p>\n

void setup() {<\/span><\/strong>
\u00a0 Serial.begin(9600); \/\/Communication s\u00e9rie<\/span><\/strong>
\u00a0 sensors.begin();<\/span><\/strong>
}<\/span><\/strong><\/p>\n

void loop() {<\/span><\/strong>
\u00a0 delay(2000);<\/span><\/strong>

\u00a0 \/\/Avec sensors.requestTemperatures() pour obtenir\u00a0 \u00a0<\/span><\/strong>
\u00a0 \/\/des valeurs sur tous les capteurs du bus oneWire.<\/span><\/strong>
\u00a0 Serial.println(“Demande de temp\u00e9rature…”);<\/span><\/strong>
\u00a0 sensors.requestTemperatures();<\/span><\/strong>

\u00a0 Serial.print(“Temp\u00e9rature pour l’index (0): “);<\/span><\/strong>
\u00a0 int res = (int)(sensors.getTempCByIndex(0) * 10);<\/span><\/strong>
\u00a0 \/\/Calcul avec une d\u00e9cimale<\/span><\/strong>
\u00a0 float resf = (float(res))\/10;<\/span><\/strong>
\u00a0 Serial.println(resf, 1);<\/span><\/strong>
}<\/span><\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Voici encore un exemple de texte, pour un titre de page, utilisant l’Editeur de texte avec l’extension Advanced Editor Tools active. C’est vraiment tr\u00e8s particulier!

<\/b>La police utilis\u00e9e ici est Chaparral Pro Regular install\u00e9e avec l’extension <\/span>Custom Fonts de Brainstorm Force (r\u00e9f\u00e9rence Notes personnelles de migration \u00e0 Elementor<\/b> dans ma page Mes premiers pas avec WordPress Elementor<\/a>). Il faut en premier t\u00e9l\u00e9charger les fichiers .ttf<\/b> ou .otf,<\/b> par exemple, dans la m\u00e9diath\u00e8que avant de lancer l’extension sous WordPress \/ Apparence.  <\/p>\n

J’ai commenc\u00e9 par cr\u00e9er une section avec une structure \u00e0 trois sous-sections o\u00f9 mon texte viendra au milieu.
L’id\u00e9e ensuite sera de mettre un logo \u00e0 gauche!  
J’utilise l’\u00e9diteur de texte \u00e0 gauche avec une colonne \u00e9largie ci-n\u00e9cessaire. Le texte ORNA\u00cf interior design<\/strong> est entr\u00e9 sur deux lignes.
Avec Style, Typographie,  je d\u00e9finis la police comme Chaparral Pro Regular, une taille de 80 et une hauteur de ligne de 0.7 pour commencer (je le mettrai \u00e0 0.4 tout \u00e0 la fin).
Avec l’\u00e9diteur de texte, je marque interior design et lui donne une grandeur de police de 36px.
Je reviens \u00e0 Style pour mettre un alignement centr\u00e9!
Je reviens \u00e0 l’\u00e9diteur, menu Outil, et j’\u00e9dite le code html pour y mettre un 38px.
A tout moment, il faut pr\u00e9visualiser et corriger.
Tout \u00e0 la fin je mets un Espaceur d’Elementor de 32 px en dessus de mon bloc de texte.
Magnifique ce titre avec ce “petit” interior design<\/strong> coll\u00e9 dessous, centr\u00e9 et de m\u00eame largeur! <\/span><\/p>\n

<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

ORNA\u00cf
interior design<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t
\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Et ce n’est pas forc\u00e9ment \u00e9vident.
Ce texte ici est d’abord entr\u00e9 dans la fen\u00eatre de gauche de l’\u00c9diteur de texte<\/strong>, ensuite on adapte la police avec Style<\/strong>, Typographie<\/strong>, Famille<\/strong>: Chaparal Pro Regular, Taille 35<\/span><\/strong>, Grasse 400<\/strong>, Hauteur de ligne 1.1<\/strong>, Couleur de texte #777777<\/strong> (un gris) et finalement retour \u00e0 l’\u00e9diteur, marquer Taille 35, et faire passer la police dans le menu en dessus de 16px \u00e0 12px<\/strong>. pour ce petit morceau incongru!
La couleur de fond #F0D2D2<\/strong> est corrig\u00e9e avec l’outil de couleur dans Avanc\u00e9<\/strong>, Arri\u00e8re plan<\/strong>.
La couleur de fond de la colonne viendra avec Style<\/strong>, Arri\u00e8re plan<\/strong>, #ABCCE1<\/strong>, dans Modifier colonne<\/strong>. C’est pratique lors de l’alignement et des espacements de la page qu’on ferra tout \u00e0 la fin apr\u00e8s d’\u00e9ventuelles autres adaptations.<\/p>\n

Finalement on revient \u00e0 l’\u00e9diteur pour mettre en gras, bouton B (ou Ctl-B<\/strong>), quelques-uns des mots. Cette derni\u00e8re ligne-ci<\/strong> est entr\u00e9e avec Ctrl-return<\/strong>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

<\/p>\n

Notes suppl\u00e9mentaires:<\/b><\/em><\/span><\/p>\n

Beaucoup de documentation sur Documentation for Elementor Website Builder<\/a> … mais pas vraiment dans le m\u00eame style que celui-ci.<\/span><\/p>\n

A faire et corriger:
– attention aux m\u00e9langes de polices, pas recommand\u00e9s en typographie!
– custom font: expliquer (plugin <\/span><\/strong>Custom Fonts par Brainstorm
\nForce<\/b><\/i>)! <\/span><\/strong><\/p>\n

<\/b>Certains lecteurs se demanderont comment d\u00e9poser une couleur dans le menu, ici \u00e0 droite.
<\/span>Il faudra rajouter le code css<\/strong> suivant (WordPress dashboard, Apparence, Personnaliser, CSS additionnel:<\/span>
.sidebar-primary-inner { background: #cceeee; }
<\/b>J’utilise le th\u00e8me ici Customify<\/strong> (child).<\/span>
En cas de soucis il faudrait inspecter le code et chercher la div class<\/strong> correspondante.  <\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

WordPress Elementor – Page mod\u00e8le – Exercice ** En travail ** C’est un mini exercice pour montrer quelques aspects discut\u00e9s en d\u00e9tails dans l’article:WordPress Elementor…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"om_disable_all_campaigns":false,"ngg_post_thumbnail":0,"footnotes":""},"categories":[16,3],"tags":[],"acf":[],"yoast_head":"\nWordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat<\/title>\n<meta name=\"description\" content=\"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat\" \/>\n<meta property=\"og:description\" content=\"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\" \/>\n<meta property=\"og:site_name\" content=\"Jean-Bernard Boichat\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-11T06:54:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-10T08:59:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.boichat.ch\/wordpress\/wp-content\/uploads\/2019\/12\/ESP8266_ds18B20_bb.jpg\" \/>\n<meta name=\"author\" content=\"Jean-Bernard Boichat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jean-Bernard Boichat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\"},\"author\":{\"name\":\"Jean-Bernard Boichat\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751\"},\"headline\":\"WordPress Elementor – Page mod\u00e8le – Exercice\",\"datePublished\":\"2020-10-11T06:54:43+00:00\",\"dateModified\":\"2020-12-10T08:59:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\"},\"wordCount\":1874,\"publisher\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751\"},\"articleSection\":[\"Elementor\",\"Wordpress\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\",\"url\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\",\"name\":\"Wordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat\",\"isPartOf\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#website\"},\"datePublished\":\"2020-10-11T06:54:43+00:00\",\"dateModified\":\"2020-12-10T08:59:59+00:00\",\"description\":\"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor\",\"breadcrumb\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.boichat.ch\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Elementor – Page mod\u00e8le – Exercice\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#website\",\"url\":\"https:\/\/www.boichat.ch\/wordpress\/\",\"name\":\"Jean-Bernard Boichat\",\"description\":\"Mon site WordPress\",\"publisher\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.boichat.ch\/wordpress\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751\",\"name\":\"Jean-Bernard Boichat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/862886ce35a52b9d13595e18ac3c3ea5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/862886ce35a52b9d13595e18ac3c3ea5?s=96&d=mm&r=g\",\"caption\":\"Jean-Bernard Boichat\"},\"logo\":{\"@id\":\"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat","description":"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/","og_locale":"fr_FR","og_type":"article","og_title":"Wordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat","og_description":"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor","og_url":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/","og_site_name":"Jean-Bernard Boichat","article_published_time":"2020-10-11T06:54:43+00:00","article_modified_time":"2020-12-10T08:59:59+00:00","og_image":[{"url":"http:\/\/www.boichat.ch\/wordpress\/wp-content\/uploads\/2019\/12\/ESP8266_ds18B20_bb.jpg"}],"author":"Jean-Bernard Boichat","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Jean-Bernard Boichat","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#article","isPartOf":{"@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/"},"author":{"name":"Jean-Bernard Boichat","@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751"},"headline":"WordPress Elementor – Page mod\u00e8le – Exercice","datePublished":"2020-10-11T06:54:43+00:00","dateModified":"2020-12-10T08:59:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/"},"wordCount":1874,"publisher":{"@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751"},"articleSection":["Elementor","Wordpress"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/","url":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/","name":"Wordpress Elementor - Page mod\u00e8le - Exercice - Jean-Bernard Boichat","isPartOf":{"@id":"https:\/\/www.boichat.ch\/wordpress\/#website"},"datePublished":"2020-10-11T06:54:43+00:00","dateModified":"2020-12-10T08:59:59+00:00","description":"Un exercice pour la cr\u00e9ation de mod\u00e8les de page et de sections avec Wordpress Elementor","breadcrumb":{"@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.boichat.ch\/wordpress\/2020\/10\/11\/wordpress-elementor-page-modele-exercice\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.boichat.ch\/wordpress\/"},{"@type":"ListItem","position":2,"name":"WordPress Elementor – Page mod\u00e8le – Exercice"}]},{"@type":"WebSite","@id":"https:\/\/www.boichat.ch\/wordpress\/#website","url":"https:\/\/www.boichat.ch\/wordpress\/","name":"Jean-Bernard Boichat","description":"Mon site WordPress","publisher":{"@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.boichat.ch\/wordpress\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/fe6328cc5b74b8a6e8d841285a928751","name":"Jean-Bernard Boichat","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/862886ce35a52b9d13595e18ac3c3ea5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/862886ce35a52b9d13595e18ac3c3ea5?s=96&d=mm&r=g","caption":"Jean-Bernard Boichat"},"logo":{"@id":"https:\/\/www.boichat.ch\/wordpress\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/posts\/2032"}],"collection":[{"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/comments?post=2032"}],"version-history":[{"count":0,"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/posts\/2032\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/media?parent=2032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/categories?post=2032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boichat.ch\/wordpress\/wp-json\/wp\/v2\/tags?post=2032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}