Dans cette partie on va voir ensemble comment ajouter et modifier du contenu avec Elementor.Comme je vous le disais dans la partie précédente, il est possible de créer de A à Z un site sur-mesure avec Elementor sans même savoir coder. Même s’il peut être tentant de créer un site unique et entièrement personnalisé, je vous recommande de passer par un bon thème pour éviter de perdre un temps précieux.Webdesigner est un métier qui ne s’apprend pas du jour au lendemain. Donc pour éviter de faire des erreurs qui donneraient à votre site une image peu professionnelle, on va voir ici comment se servir d’Elementor sans réinventer la roue.Dans cette partie je vous conseille de revenir sur votre page de test que vous avez créé précédemment. Le fait qu’il y ait peu d’éléments dessus vous permettra d’y voir plus clair et vous serez libre d’expérimenter un maximum de choses sans avoir peur de faire des erreurs.

Les blocs

Un peu plus tôt je vous disais que Elementor fonctionne comme un jeu de Lego. Si vous avez ajouté plusieurs modules à votre page, vous verrez que chaque module se superpose en se plaçant au-dessus ou en dessous d’un module déjà présent.Pour créer un site web avec une allure professionnelle, vous aurez besoin de créer des structures pour développées. Pour ça vous allez avoir besoin d’importer des blocs.Les blocs sont des ensembles de modules avec des structures plus ou moins perfectionnées.Sur chaque page que vous modifierez avec Elementor, vous verrez tout en bas un encart délimité par des pointillés et contenant trois icônes.

Cliquez sur la dernière icône en forme de S (si elle n’est pas présente, c’est que vous n’avez pas téléchargé et activé l’extension Starter Templates dont je vous parlé dans la partie sur l’installation du thème).Vous verrez alors apparaître une fenêtre où tout en haut deux onglets seront présents, dont «Blocks». En cliquant dessus vous verrez apparaître des dizaines de blocs prêt à être ajoutés à votre page.

Vous trouverez dans le coin supérieur gauche un menu déroulant qui vous permettra de filtrer par type de bloc. Une fois que vous aurez trouvé le bloc que vous voulez ajouter à votre page, cliquez simplement dessus et ensuite sur le bouton «Import Block».Les blocs sont volontairement épurés pour vous permettre de les personnaliser avec le style du reste de votre page.

Les sections et colonnes

En ajoutant votre premier bloc et donc en créant une structure plus complexe, vous mettez le doigt sur des concepts les plus compliqués d’Elementor : les sections et colonnes.Chaque nouveau bloc que vous allez créer avec Elementor sera composé de trois types d’éléments :

• • De sections

• • De colonnes

• • De modules (un titre, une image, un corps de texte, etc.)

Chaque module (texte, image, bouton, etc.) a besoin d’être organisé dans un conteneur, qu’on appelle ici section. Dans ces sections, on va pouvoir créer une ou plusieurs colonnes qui vont nous servir à organiser les éléments à l’intérieur de ces conteneurs.Donc si vous passez votre souris sur les différentes parties de votre page, vous verrez toutes les sections, colonnes et module délimités par des encarts :

• • Les sections seront délimitées par des encarts bleus avec tout en haut trois icônes (un plus, un rectangle avec six ronds et une croix)

• • Les colonnes seront délimitées par des encarts gris en pointillés et une icône dans le coin supérieur gauche (en forme de fenêtre)

• • Les modules seront délimités par des encarts bleus et une icône dans le coin supérieur droit (en forme de stylo)

Comme on l’a vu juste avant, vous trouverez un encart avec trois icônes à chaque fin de page.

Si vous cliquez cette fois-ci sur le bouton «+», Elementor vous permettra de créer une nouvelle section. Elementor vous demandera ensuite de choisir combien de colonnes doit comporter votre section.

Peu importe le choix que vous faites, vous aurez toujours la possibilité d’ajouter, de retirer et de modifier la taille d’une colonne.

• • Ajouter une colonne – Passez votre souris sur une des colonnes présentes dans votre section jusqu’à voir apparaître l’icône en forme de fenêtre dans le coin supérieur gauche. Faites un clic droit dessus et sélectionnez «Ajouter une nouvelle colonne» dans le menu déroulant.

• • Supprimer une colonne – Même procédé que pour ajouter une colonne sauf que cette fois-ci vous verrez apparaître tout en bas une option Effacer

• • Modifier la taille d’une colonne – Placez votre souris sur la limite entre deux colonnes pour voir le curseur de votre souris changer de forme. Cliquez tout en restant appuyé et déplacez la limite entre les colonnes pour changer leur taille.

Une fois que vous aurez créé votre section avec à l’intérieur vos colonnes, vous pourrez déplacer vos modules à l’intérieur d’une des colonnes que vous aurez choisies.

Utiliser les marges

Maintenant que vous comprenez comment fonctionnent les sections et colonnes, vous serez en mesure de créer des mises en page plus évoluées. Si vous voulez aller encore plus loin en créant des structures plus perfectionnées, vous allez devoir comprendre le système de marges.Le système de marges est un réglage que vous allez pouvoir retrouver dans l’onglet «Avancé» une fois que vous aurez sélectionné un module sur votre page.

Vous trouverez dans cette partie deux lignes : Marge et Marge interne.Comprendre la différence entre ces deux types de marges n’est pas évident. Comme vous êtes débutant, je vous conseille de vous concentrer seulement sur les marges classiques.Les marges sont donc ce qui va vous permettre de déplacer les modules, colonnes et sections sur votre page.Si vous placez votre souris sur une des cases de direction, vous verrez apparaître deux petites flèches qui vous permettront d’augmenter ou de diminuer la valeur. L’élément que vous avez sélectionné va donc ensuite se déplacer sur votre page.Si vous voulez modifier une seule direction, vous allez devoir cliquer sur l’icône en forme de trombone.Pour finir, je vous recommande de cliquer sur la valeur «%» présente juste au-dessus avant de modifier une valeur. C’est ce qui vous permettra d’avoir le fameux design responsive qu’on va voir juste après.

Déplacer des éléments

Comme vous l’avez remarqué, Elementor est une extension qui fonctionne en glisser-déposer. Chaque élément de votre page peut donc être déplacé : les sections, les colonnes et les modules.Si vous voulez déplacer un module, il vous suffit de passer votre souris sur l’élément jusqu’à voir apparaître l’icône en forme de stylo. Cliquez ensuite sur cette icône tout en gardant le clic appuyé et déplacez l’élément à un autre endroit de votre page.En déplaçant l’élément, vous verrez apparaître une barre bleue qui vous montrera où l’élément peut être déposé.Vous pouvez aussi faire cette même manipulation avec les colonnes et les sections. Pour les sections il faudra cliquer sur l’icône grise et pour les sections sur l’icône centrale avec les six points.Si vous n’arrivez pas à accéder à un élément ou à le déplacer, vous pouvez utiliser le navigateur Elementor. En cliquant dessus vous aurez une vue des différentes sections, colonnes et modules de votre page.Si vous cliquez sur un élément, Elementor vous le sélectionnera sur la page et vous pourrez ensuite le déplacer en utilisant le navigateur.

Rendre sa page responsive

Le responsive consiste à créer un design qui va automatiquement s’adapter à différentes tailles d’écran. De l’ordinateur, au smartphone, en passant par la tablette.Elementor propose une fonctionnalité qui vous permettra de créer une mise en page responsive.Pour ça, il faut que vous cliquiez sur l’icône tout en bas du bandeau Elementor qui vous permettra d’activer le mode responsive.

Une fois que vous aurez cliqué dessus, vous aurez un second bandeau qui apparaîtra tout en haut de votre page. En cliquant sur l’icône d’ordinateur, de tablette ou de smartphone, vous pourrez modifier la taille d’écran et voir comment votre page s’adapte.

Qu’importe le thème que vous utilisez, votre page demandera sûrement certains ajustements. Comme une taille de police trop grande ou plus d’espace entre certains éléments.Si vous regardez de plus près certains réglages dans le panneau Elementor, vous verrez une icône apparaître à côté de certains paramètres.

S’il y a une icône qui vous indique le type d’appareil que vous avez sélectionné (ordinateur, tablette ou smartphone), c’est que changer la valeur du paramètre s’appliquera uniquement à la taille d’écran que vous avez sélectionné.Par exemple, si je sélectionne la vue smartphone et que je change l’alignement pour qu’il soit centré et non plus à gauche, mon alignement s’appliquera uniquement au smartphone et non aux tablettes et ordinateurs.Si un réglage n’a pas cette icône, ça veut dire qu’en le changeant vous ferez une modification sur toutes les tailles d’écrans.

Installer un thème compatible avec Elementor

Maintenant que vous comprenez mieux comment fonctionne Elementor, vous pourrez commencer à modifier le thème que vous avez installé comme bon vous semble.Si ce n’est pas encore fait, retournez à l’étape de l’Installation du jour 1 et installez le thème Astra comme je vous l’ai expliqué.Si vous n’avez pas trouvez votre bonheur dans le thème Astra, vous pouvez en installer un autre à partir de la sélection que je vous ai faite des 10 meilleurs thèmes gratuits sur WordPress.