Retour sur les bases de la mise en page en Web Design avec Elementor. Le Page builder que j’espère tout le monde utilise maintenant. Concernant le thème graphique, je vous conseille OceanWP si vous ne possédez pas Elementor Pro. Dans le cas contraire le thème minimaliste HELLO d’Elementor est parfait. Il est simple, léger et très rapide d’exécution.
Les réglages de la page
Accessible en bas à gauche de l’interface d’Elementor, la barre donne accès notamment aux réglages de la page ou de l’article courant. Cliquez sur la roue crantée.
Le panneau des attributs vous donne ainsi accès aux paramètre globaux de la page ou de l’article affiché.
Les réglages généraux reprennent quant à eux une partie des paramètres que l’on trouve sur la page de modification des pages ou des articles du tableau de bord.
- Par défaut
Ce modèle par défaut est celui utilisé impicitement par wordPress. Il comprend une zone d’entête, une zone de contenu et une zone de pied de page. Il intègre également une colonne réservée sur la droite de la zone de contenu. - Elementor Canvas
Ce modèle est défini et ajouté par Elementor aux modèles de wordPress. Il s’agit d’un modèle vierge sans entête ni pied de page. On l’utilisera par exemple pour créer un entête personnalisé. - Elementor Pleine Largeur
Privilégiez ce modèle lorsque vous souhaitez que votre page s’étende sur toute la largeur de l’écran.
Notez que ces modèles dépendent du thème graphique installé. Les trois modèles de pages ci-dessus sont ceux proposés par OceanWP.
IMPORTANT
Le paramètre Modèle de Page en bas du panneau vous permet de choisir le modèle (template) utilisé par wordPress pour afficher votre Page ou votre Article.
Les réglages de l’Article ont comme principale fonction d’appliquer un style, à la zone de contenu de la page ou de l’article courant. C’est ici par exemple que l’on choisira d’utiliser une image, un motif, une couleur de fond ou un dégradé en fond de page.
C’est dans l’onglet des paramètres Avancés qu vous pourrez insérer du code CSS personnalisé. Cette fonctionnalité nécessite cependant la version Pro d’Elementor.
Pour cibler l’élément lui-même, utilisez le sélector Selector.
C’est avec l’aide du CSS personnalisé que l’on va pouvoir ajouter ou modifier des attributs et des comportements aux éléments d’Elementor.