Créer votre compte
 
Connectez-vous
 
 
Whatsapp Envelope Facebook-f Twitter Linkedin-in

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

#25

Texte dans une pastille circulaire

Voyons comment faire pour afficher un Titre dans une pastille circulaire à l'aide de quelques instructions CSS et d'Elementor Pro.
#24

Dégradé appliqué sur une image

Ce tutoriel vous montre comment appliquer un dégradé CSS sur une image mise en place avec Elementor.
#23

Animer des éléments avec du CSS personnalisé

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.

PREMIUM

#23

Elementor et les Données Dynamiques

#22

Les Raccourcis Clavier d’Elementor

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.

PREMIUM

#21

Des colonnes vraiment responsive sur Ordinateur

Nous allons dans ce tutoriel ajouter la possibilité de gérer des colonnes de largeur supérieure à100% en mode Ordinateur.

PREMIUM

#20

Comment passer des paramètres dans une URL

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.

PREMIUM

#19

Éléments qui apparaissent au Scroll

Affichez des boutons en fonction du Scroll de la page. Un Tutoriel CARBONNEL MEDIA
#18

Dupliquer une page sur un autre site wordPress

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.
#17

Animer une icône sous Elementor

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.

PREMIUM

#16

Scrolling horizontal avec Elementor

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.
#15

Modèles personnalisés avec Elementor

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.

PREMIUM

#14

Elementor Pro : Menu dans une fenêtre modale

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.
#13

Retour sur la mise en page sous Elementor

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.
#12

Les Ancres et menus avec Elementor

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.
#11

Les Boutons personnalisés avec Elementor

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.
#10

Réaliser un Scrolling asynchrone 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.
#9

Elementor – Le Mode Responsive

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.

PREMIUM

#8

Image en fond de texte avec Elementor

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.
#7

wordPress et la gestion des menus

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.
#6

Etude de cas, Web design avec Elementor

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.
#5

Elementor, les positionnements personnalisés

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.
#4

Web Design sous Elementor : Les unités

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.
#3

Elementor et les widgets

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.
#2

Elementor : Découvrir la Colonne

La Colonne fait partie des éléments de mise en page d'Elementor. Découvrons-là avec ce tutoriel.
#1

La Section d’Elementor

Dans ce premier tutoriel consacré à Elementor, nous allons découvrir la Section, l'élément au sommet de la hiérarchie.
#0

Image masquée dans un cercle avec Elementor

Comment afficher une image dans un cercle avec WordPress et Elementor? Une méthode simple et efficace.

Boite Image en CSS3 avec Elementor

Réalisons ensemble une Boite Image avec un effet au survol. Vous allez voir c'est relativement simple.

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

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

Actif sur les réseaux sociaux, je conseille et j'aide les Web designers à trouver des solutions pertinentes et efficaces.

Les 30 sélecteurs CSS à connaître et à retenir pour vos Web design

Découvrez cet article en 3 parties pour découvrir les principaux sélecteurs CSS en Web Design
Découvrir
NOUVEAU

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

Faire connaissance

CGV

Mentions légales

Contact

Pas de compte ?

Créez votre 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.