Comment concevoir une page avec Elementor ?

C'est le gros morceau, celui qui vous apprend à concevoir une page en utilisant Elementor. Avant cela, voici un petit rappel des concepts d'édition d'Elementor.

Logique de conception d'Elementor

Elementor est principalement divisé en Section block, Column column et Widget element, qui sont composés de ces 3 éléments.

Une page se compose généralement de plusieurs blocs de section.

Comme vous pouvez le voir ci-dessous, le bloc Section peut contenir plusieurs colonnes, et chaque colonne peut contenir plusieurs éléments widgets.

Bien entendu, il existe des pratiques de mise en page plus avancées, à savoir l'utilisation de l'élément Inner Section, dans la colonne et intégré dans un bloc de section interne, et la section interne contient plusieurs colonnes et widgets.

Mais par crainte de confusion, il est bon d'évoquer d'abord un concept ici.

Nouveau contenu du bloc

Ensuite, je montre comment commencer à concevoir un bloc avec Elementor en appuyant sur l'icône plus dans la zone d'édition.

Vous verrez beaucoup d'architectures qui utilisent Column avec l'option à deux colonnes.

Vous verrez alors l'écran afficher un bloc de deux colonnes, cliquez sur l'un des champs et faites-y glisser l'élément image (ou directement dans le champ).

Ensuite, la zone de réglage de gauche affiche automatiquement les éléments modifiables de l'image.

Vous pouvez télécharger des images, définir la taille de l'image, l'alignement, les liens de l'image, etc... Vous pouvez l'utiliser comme vous le souhaitez.

Répétez cette étape pour ajouter un nouvel élément Title & Text Editor à l'autre champ Column et effectuez les réglages nécessaires.

Cela crée un bloc de section complet, n'est-ce pas simple :)

Réglages de style et de bloc

Et si vous voulez changer la couleur du titre ? Il est également facile de le faire en cliquant sur l'élément de titre à droite de la désignation et en passant ensuite à l'option type Tagué, c'est tout !

Remarques :Tout élément Section / Colonne / Widget d'Elementor que vous souhaitez styliser peut également être basculé dans la section type Étiqueté pour effectuer les changements pertinents yo.

Paramètres avancés

Enfin, les paramètres avancés ! Tout contenu (bloc/champ/élément) d'Elementor peut être avancé.

Que contient donc le cadre de progression ?

• Ajustement des limites et des distances internes.
• Spécifier le CSS.
• Paramètres d'animation.
• Si différents dispositifs inversent les champs ou les affichent ou les cachent.
• Différents éléments avec plus de paramètres.

Prévisualisation et lancement de la page

Lorsqu'un bloc est terminé, vous pouvez dessiner un deuxième et un troisième bloc .... Il s'agit alors d'une page complète !

Une fois les pages conçues, vous pouvez appuyer sur Aperçu pour voir les résultats.

Nous pouvons soit réduire le panneau Elementor, soit appuyer sur le bouton de prévisualisation en bas.

Lorsque vous avez terminé, appuyez sur posteLa page est maintenant en ligne, vous pouvez donc vous référer au tutoriel sur le menu de WordPress pour placer la page dans le menu du site web afin que les visiteurs puissent cliquer dessus !