Mes tutoriels sont organisés par degrés.

Premier degré

Les tutoriels de Premier Degré concernent les concepts de base du Web Design sous wordPress. Ils sont accessibles à tous ceux qui découvrent l'extension Elementor.

Deuxième degré

Les tutoriels de niveau 2 sont accessibles lorsque l'on utilise Elementor régulièrement. Ils concernent l'ajout de fonctionnalités ou l'utilisation avancée de wordPress avec Elementor.

Troisième degré

Le troisième Degré traite de l'intégration de code CSS personnalisé dans Elementor. Il est accessible aux utilisateurs PREMIUM qui connaissent bien WordPress et d'Elementor.

Les tutoriels de PIERRE CARBONNEL

Réalisons ensemble une Boite Image avec un effet au survol. Vous allez voir c'est relativement simple.
Voyons comment faire pour afficher un Titre dans une pastille circulaire à l'aide de quelques instructions CSS et d'Elementor Pro.
Ce tutoriel vous montre comment appliquer un dégradé CSS sur une image mise en place avec Elementor.
L'utilisation des pseudo-éléments combinée à Elementor nous offre des possibilités intéressantes en matière d'animation et de manipulation. C'est ce que nous allons découvrir dans ce tutoriel.
En travaillant avec Elementor on rajoute une surcouche à WordPress. Pour éviter de multiplier les allers-retours entre les pages et le tableau de bord, apprenez à utiliser les raccourcis Clavier.
Nous allons dans ce tutoriel ajouter la possibilité de gérer des colonnes de largeur supérieure à100% en mode Ordinateur.
Avec l'aide d'un formulaire WordPress et d'Elementor Pro, nous allons transmettre des données entre deux pages différentes. Une méthode qui ouvre un grand champs d'applications.
Affichez des boutons en fonction du Scroll de la page. Un Tutoriel CARBONNEL MEDIA
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.
Créer un site internet consiste à créer d'une part du contenu et d'autre part des modèles qui seront utilisés pour les afficher. C'est le schéma de fonctionnement de wordPress notamment.
Dans ce tutoriel de troisième degré, nous allons créer une Popup window qui va nous servir pour notre menu principal. C'est une façon originale de personnaliser la navigation d'un site internet.
Retour sur quelques réglages basiques d'Elementor. On va voir comment régler la couleur de fond d'un article ou d'une page et quelques notions de modèles de pages.
Ajoutez des ancres à vos boutons, vos liens ou vos éléments de menu pour pouvoir naviguer à un endroit précis sur la même page ou sur n'importe quelle autre page de votre Site Internet.
L'utilisation des boutons en Web Design est très fréquentes. Cependant on ne personnalise pas assez ces composants indispensables. et bien apprenez-à le faire avec Elementor.
Il est parfois intéressant de pouvoir dé-synchroniser le contenu de ses colonnes. C'est le scrolling asynchrone. Il permet de visualiser simultanément des contenus de longeurs différentes. Il vous faudra Elementor Pro pour réaliser ce tutoriel.
Travailler en mode Responsive avec Elementor implique une organisation et une méthodologie claire et structurée. Soit en commençant par le Web design en mode Smartphone (Mobile First), soit en s'accordant plus de possibilités et en commençant par le mode Desktop.
Ce tutoriel vous guide pas à pas vers la réalisation d'une image masquée par un texte. La couleur de fond du texte sera donc l'image elle-même. Un effet bluffant qui mettra vos titres en valeur.
Pour pouvoir naviguer sur votre Site internet il faut créer au minimum un menu de navigation. Ce menu sera automatiquement affiché quelque soit la page ou l'article dans lequel vous vous trouverez.
Pour illustrer les tutos précédents relatifs aux unités du Web design et à l’utilisation des Widgets ainsi qu’aux paramètres de positionnements personnalisés, je vais vous expliquer pas à pas la création d’un nouveau Widget que nous appellerons Widget Portfolio.
Chaque élément sous Elementor possède son propre conteneur. Une image est insérée dans un conteneur, un texte aussi, … Par défaut lorsque l’on insère un élément dans une colonne, il occupe 100% de la largeur de la colonne.
Utiliser les outils du Web design, c’est aussi connaître les unités qui serviront à placer, positionner et à dimensionner les différents éléments de votre Web design. Sur Internet deux types d’unités existent. Les unités absolues et les unités relatives.
Les Widgets sont les briques de base du Web Design. Ils couvrent une grande partie des besoins en terme d'éléments visuels et fonctionnels.
La Colonne fait partie des éléments de mise en page d'Elementor. Découvrons-là avec ce tutoriel.
Dans ce premier tutoriel consacré à Elementor, nous allons découvrir la Section, l'élément au sommet de la hiérarchie.
Comment afficher une image dans un cercle avec WordPress et Elementor? Une méthode simple et efficace.

Vous recherchez un tutoriel sur un sujet bien précis ?

Contactez-moi en cliquant sur le bouton ci-dessous.

Professeur en Web Design et en inbound Marketing dans l’Enseignement Supérieur, je forme mes étudiants aux techniques du Web Design et leur apprend à utiliser wordPress comme outil de Communication digitale. Fondateur de l’agence digitale CARBONNEL MEDIA CONSULTANT, je suis également COACH EN WEB DESIGN. Je propose des formations One to One et en groupes, en présentiel et en ligne.

Partagez cette page sans modération !

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Pas de compte ?

Vous avec une question à propos de wordPress ?

Le service est gratuit, vos informations resteront privées et vous pourrez vous désinscrire à tout moment.