Design de Page WordPress
Un Cours Pratique pour Sublimer Vos Pages en Quelques Étapes!
Apprenez à manipuler les blocs et à concevoir des pages saisissantes, en laissant de côté l'éditeur de base Gutenberg. Explorez le potentiel créatif d'Elementor pour des designs exceptionnels sur WordPress!
Chapitre 1: Explorez les Principaux Paramètres de Conception sur une Page Elementor
Les réglages
Cliquez simplement sur la roue dentée en bas à gauche pour accéder aux réglages d'Elementor
Dans les réglages d'Elementor, retrouvez les paramètres familiers de la création de pages WordPress tels que le statut de publication, le format, le titre, et l'extrait
Style de la page
L'onglet 'Style de la Page' dans Elementor offre une palette de possibilités de personnalisation. Vous pouvez ajouter un fond, qu'il s'agisse d'une couleur unie ou d'une image, pour donner du caractère à votre page.
De plus, ajustez les marges de la page pour définir l'espace autour du contenu. Les marges, dans ce contexte, se réfèrent à la distance entre le contenu de la page et les bords de la fenêtre du navigateur. Cela permet un contrôle précis de la mise en page, garantissant une présentation visuelle harmonieuse et professionnelle.
Avancé
Dans l'onglet 'Avancé' d'Elementor, vous pouvez ajuster le CSS de votre page pour une personnalisation fine. Le CSS, langage de style web, nécessite une compréhension de base pour éviter des erreurs. Cette fonction offre une flexibilité accrue dans le design.
L'accroche de défilement fige la fenêtre à une position spécifique d'une section une fois le défilement terminé. Cela crée un effet visuel saisissant, permettant aux visiteurs de concentrer leur attention sur des éléments clés de votre contenu lors de la navigation.
Autres paramètres de l'interface
Le navigateur facilite le repérage au sein de tous les blocs que vous avez ajoutés, offrant une vue d'ensemble pratique de votre mise en page.
L'historique vous permet de revenir sur les anciennes versions de votre page, cependant, notez que la possibilité de revenir en arrière est limitée après la mise à jour ou la sortie de l'éditeur.
Le mode responsive vous donne la possibilité d'ajuster les blocs pour une vue mobile, garantissant une expérience utilisateur optimale sur différents appareils.
L'icône de l'œil vous permet de visualiser la page telle qu'elle apparaîtra réellement, tandis que l'option 'Mise à jour' vous permet de mettre à jour instantanément les modifications apportées à la page, garantissant une expérience de conception fluide.
Chapitre 2 : Comprendre le Fonctionnement des Blocs
Dans cette section, plongeons directement dans le fonctionnement des blocs d'Elementor. Découvrez comment exploiter ces éléments clés pour créer des mises en page dynamiques et percutantes sur votre site WordPress.
Créer un conteneur
1. Cliquez sur le bouton « + » pour ajouter un nouveau bloc dans Elementor.
2. Sélectionnez l’option « Flexbox » parmi les choix disponibles.
3. Configurez la mise en forme selon vos préférences en utilisant les options fournies.
4. Observez instantanément le résultat, visualisant ainsi l’impact de la configuration Flexbox sur la disposition de votre contenu.
L'intérêt d'un conteneur Elementor est de pouvoir contrôler de manière précise la mise en page des éléments qu'il contient. Il permet de définir la largeur, la hauteur, l'alignement, la disposition et d'autres propriétés des éléments contenus dans le conteneur.
La mise en forme
La mise en forme offre un contrôle total sur la disposition des éléments internes. Vous pouvez les centrer, ajuster la hauteur et la largeur, définir la direction des éléments internes, et utiliser le wrap pour aligner les éléments côte à côte sur les appareils mobiles plutôt que de les empiler verticalement. Ces fonctionnalités vous donnent la flexibilité nécessaire pour créer des mises en page dynamiques et adaptatives.
Avancé
L'onglet 'Avancé' offre un contrôle précis sur les marges, les alignements, les effets, l'affichage, et bien d'autres paramètres. Il est important de noter que ces options peuvent varier en fonction des extensions activées, ajoutant des fonctionnalités supplémentaires pour une personnalisation encore plus poussée selon vos besoins spécifiques.
Le style
Utilisez l'onglet 'Style' pour personnaliser l'apparence de votre conteneur. Ajoutez un arrière-plan, modifiez les couleurs, créez des bordures, et arrondissez le contour du conteneur selon vos préférences. Ces options vous permettent d'apporter une touche unique et esthétique à votre design.
Chapitre 3 : Comprendre le Fonctionnement des éléments
Créer un élément
- Dirigez-vous vers la colonne de gauche sur Elementor.
- Choisissez l’élément souhaité parmi les options disponibles.
- Pour une précision maximale, faites-le glisser à l’emplacement désiré sur la page. ou Cliquez simplement sur l’élément choisi, il apparaîtra instantanément à l’emplacement actif sans nécessiter un contrôle excessif.
Une fois l'élément positionné, il apparaîtra instantanément, prêt à être personnalisé selon vos besoins. Cette méthode conviviale s'applique à tous les éléments, que ce soit des images, du texte, des carrousels, etc. Libérez votre créativité en ajustant facilement chaque détail pour obtenir une mise en page parfaitement adaptée à votre vision.
Le contenu des éléments
- Cliquez directement sur l’élément que vous souhaitez modifier, dans cet exemple, un bloc titre.
- Allez dans la section « Contenu » pour accéder aux options de personnalisation.
- Modifiez le titre en saisissant le nouveau texte.
- Ajustez la taille du titre selon vos préférences.
- Centrez le titre en utilisant les options de mise en page.
- Ajoutez un lien en insérant l’URL dans le champ prévu à cet effet.
Pour cet exemple, nous avons utilisé un élément titre, mais rappelez-vous que chaque type d'élément a ses propres paramètres spécifiques. N'hésitez pas à explorer les options de personnalisation pour chaque élément et à ajuster selon vos préférences. Si vous avez des questions ou si vous vous sentez perdu(e), n'hésitez pas à nous contacter. Gardez à l'esprit que chaque paramètre est facultatif, offrant une flexibilité totale dans la création de votre mise en page sans aucune contrainte.
Le style des éléments
L’onglet ‘Style’ vous donne le pouvoir de personnaliser divers aspects de votre élément, que ce soit la taille, la largeur, les bordures, les couleurs, l’arrière-plan, et bien plus encore. Explorez ces options pour affiner chaque détail de votre design selon vos goûts et besoins spécifiques.
Cette fois, illustrons les fonctionnalités de l'onglet 'Style' avec une image en exemple. Notez que ces possibilités s'appliquent également à d'autres éléments tels que texte, boutons, icônes, etc. Explorez et personnalisez pour façonner votre page selon vos préférences.
L'onglet avancé des éléments
L'onglet 'Avancé' pour les éléments partage des fonctionnalités similaires avec celui des conteneurs. Nous vous invitons donc à revoir les paramètres avancés des conteneurs si certains aspects vous semblent encore flous, car la compréhension de ces options renforce la maîtrise de la personnalisation des éléments.
Chapitre 3 : Détails de Fonctions Utiles
Affichage Selectif - Cacher un Élément sur Mobile tout en le Rendant Visible sur Ordinateur"
Pour réaliser cela, rendez-vous sur l'élément ou le conteneur, accédez aux paramètres avancés, faites défiler et sélectionnez 'Responsive'. Cochez l'option 'Masquer sur mobile' pour assurer que l'élément ne soit pas visible sur les appareils mobiles tout en restant affiché sur les ordinateurs
Adapter la Taille pour le Mobile
Si un élément est à la taille idéale sur ordinateur mais non adapté à la version mobile, activez le mode responsive comme expliqué précédemment. En mode responsive, ajustez la taille de l'élément selon les besoins spécifiques pour conserver sa dimension idéale sur ordinateur tout en le modifiant de manière optimale sur les appareils mobiles.
Faire Ressortir un Élément
Pour faire ressortir un élément, accédez à l'élément désiré, puis allez dans l'onglet 'Style' et choisissez 'Ombre de Boîte'. Réglez l'ombre selon vos préférences pour donner à l'élément un effet visuel accrocheur
Effet de survol
Pour créer un effet de survol, il vous suffit de sélectionner le bouton ou tout autre élément, puis cliquez sur 'Au Survol' dans les paramètres. Choisissez la couleur souhaitée. Notez que bien que cela fonctionne avec la plupart des éléments, certaines options peuvent ne pas proposer cette fonctionnalité spécifique
