12 mai 2020

Retour sur la mise en page sous Elementor

TUTO # 13

TYPE : WordPress

résultat fini

Résumé du Tutoriel

Avec Elementor, la mise en page devient simple et intuitive. Le constructeur de thèmes aux millions d’installations actives dans le monde met à votre disposition un ensemble de Widgets (composants graphiques) simples et efficaces. Cependant il va vous falloir bien comprendre sa logique de fonctionnement afin de profiter au mieux de toutes ses fonctionnalités. Penchons-nous tout d’abord sur les réglages généraux, c’est-à-dire sur les réglages qui s’appliquent à toute la page ou à tout l’article. Ces réglages concernent principalement le modèle de page utilisé et les attributs globaux tels que couleur de fond, image de fond, …

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.
Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Mes derniers tutoriels

Dupliquer une page avec Elementor sur le même site est une opération simple. Pour l'effectuer entre deux installations wordPress, c'est plus compliqué. C'est ce que nous allons voir ici.
Animer un objet à l'écran permet de capter l'attention des visiteurs. En terme d'expérience utilisateur c'est un moyen très intéressant pour suggérer une action à effectuer et s'assurer qu'elle ne passera pas inaperçue.
Par défaut, Elementor limite la largeur d'affichage à la largeur de l'écran, ce qui interdit d'avoir des contenus qui scrollent horizontalement. C'est ce comportement que nous allons changer avec ce tutoriel.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce contenu est protégé

Il est réservé aux Membres de l'ACADEMIE. Connectez-vous pour y accéder.

Connectez-vous