Elementor gratuit réglez vos photos en un clic

Summary

Dans ce tutoriel, l'animateur présente une astuce pour paramétrer rapidement les images de son site web avec Elementor, la version gratuite. Il explique comment appliquer des styles généraux aux photos, tels que des bordures, des ombres et des filtres CSS, pour améliorer l'esthétique de son site. Les réglages sont effectués une fois et s'appliquent à toutes les images existantes et futures. L'animateur insiste sur la possibilité de personnaliser individuellement chaque photo si nécessaire. Le but est de gagner du temps tout en offrant une présentation professionnelle et attrayante pour les visiteurs du site.

Takeaways

• 😀 Le tutoriel présente une astuce pour paramétrer les images sur un site internet avec Elementor gratuitement.
• 🖼️ Les réglages effectués s'appliquent automatiquement à toutes les photos présentes et futures sur le site.
• 🛠️ Il est possible de modifier spécifiquement une photo par rapport aux autres malgré les paramètres généraux.
• 📝 L'auteur démontre comment améliorer l'aspect des images en utilisant les fonctionnalités de mise en forme d'Elementor.
• 🔲 Les images avec un fond blanc sur un site blanc peuvent être mélangées, rendant la distinction texte-image difficile.
• 🎨 L'ajout de bordures, de couleurs et d'effets d'ombre peut améliorer la visibilité et l'esthétique des images.
• 🖍️ Les réglages de bordure comprennent le type, la largeur, la couleur et le rayon de bordure qui peuvent être ajustés.
• 👁️ L'option d'ombre de boîte permet de donner une profondeur à l'image avec des réglages d'horizontal, de vertical et de flou.
• 🌞 Les filtres CSS permettent de modifier des aspects visuels tels que le flou, la luminosité, le contraste et la saturation.
• 🔄 La transition entre les états normaux et survol peut être ajustée pour une expérience utilisateur fluide.
• 💻 Une fois les réglages satisfaisants, cliquer sur 'Mettre à jour' pour appliquer les modifications sur le site.
• 👋 L'auteur mentionne ses futurs projets de création de sites d'affiliation et la simplicité d'utilisation de Dostinger pour les débutants.

Q & A

Quel est le sujet principal de ce tutoriel vidéo ?

Le sujet principal de ce tutoriel est de montrer comment paramétrer les images et les photos sur un site internet utilisant Elementor, la version gratuite, afin qu'elles soient automatiquement mises en forme selon les préférences de l'utilisateur.

Pourquoi est-il important de mettre en forme les images sur un site web ?

Mettre en forme les images est important pour assurer une meilleure esthétique, une meilleure distinction entre le texte et les images, et pour améliorer l'expérience utilisateur en termes de design et de lisibilité.

Quel est le logiciel mentionné dans le script pour la gestion des sites web ?

Le logiciel mentionné dans le script est Elementor, un éditeur de page visuel pour WordPress.

Comment les réglages de mise en forme des images sont-ils appliqués dans le tutoriel ?

Les réglages sont appliqués via l'interface d'Elementor, en modifiant les paramètres de bordure, d'ombre, d'opacité et d'autres effets CSS pour que tous les images du site soient automatiquement ajustées selon ces préférences.

Quels types de bordures peuvent être appliqués aux images selon le script ?

Selon le script, les types de bordures qui peuvent être appliqués aux images incluent 'aucune', 'solide', 'double', 'pointillé', 'tiret' et 'renuré'.

Comment la bordure d'une image peut-elle être ajustée en termes de couleur et d'épaisseur ?

La bordure d'une image peut être ajustée en choisissant la couleur souhaitée, par exemple le noir ou un gris moyen, et en définissant l'épaisseur de la bordure, comme 1 pixel ou plus, en utilisant les options fournies dans l'interface d'Elementor.

Quel est le rôle du rayon de bordure dans la mise en forme des images ?

Le rayon de bordure détermine le niveau d'arrondi des coins de la bordure de l'image. Plus le rayon est élevé, plus les coins sont arrondis, ce qui peut apporter une esthétique plus douce au design de l'image.

Quels effets d'ombre peuvent être ajoutés aux images dans le tutoriel ?

Dans le tutoriel, il est possible d'ajouter des effets d'ombre en ajustant la position horizontale et verticale de l'ombre, ainsi que son flou, pour créer un effet de profondeur et de style.

Quels sont les ajustements d'opacité possibles pour les images ?

L'opacité des images peut être ajustée de 0% (image entièrement transparente) à 100% (image entièrement opaque), et peut varier selon l'état de survol de la souris sur l'image.

Comment les modifications apportées aux images sont-elles finalisées et appliquées ?

Après avoir effectué les modifications souhaitées dans les paramètres d'Elementor, il faut cliquer sur 'Mettre à jour' pour enregistrer les modifications. Ensuite, on peut prévisualiser les modifications pour s'assurer que les images sont mises en forme comme prévu.

Le tutoriel mentionne-t-il un autre outil ou plateforme pour la création de sites web ?

Oui, le tutoriel mentionne 'Dostinger' comme un autre outil pour la création de sites d'affiliation, qui pourrait être plus simple d'utilisation pour les débutants.

Outlines

00:00

🛠️ Personnalisation des images sur un site WordPress avec Elementor

Ce paragraphe présente un tutoriel sur la façon de personnaliser les images sur un site internet utilisant Elementor, la version gratuite. L'auteur explique comment paramétrer rapidement toutes les photos présentes sur le site une fois pour toutes, en utilisant les réglages généraux qui s'appliqueront à l'ensemble des images existantes et futures. Il insiste sur la possibilité de modifier spécifiquement des images par la suite si nécessaire. L'exemple donné est basé sur un article de blog, où il montre comment ajouter des effets tels que des bordures arrondies et des ombres pour améliorer l'esthétique des images.

05:00

🖼️ Réglages avancés pour les images : bordures, ombres et filtres CSS

Dans ce paragraphe, l'auteur se concentre sur les réglages de bordure, d'ombre et de filtres CSS pour les images. Il explique comment ajouter et personnaliser des bordures solides, double, pointillées ou en tiret, ainsi que de changer leur largeur et leur couleur. Il illustre également comment ajuster l'opacité des images et la manière de créer des effets d'ombre en modifiant les paramètres horizontaux et verticaux, ainsi que le flou. L'auteur mentionne également l'utilisation de filtres CSS pour ajuster la luminosité, le contraste et la saturation, bien qu'il indique ne pas les utiliser lui-même.

10:02

✨ Amélioration de l'expérience utilisateur avec des transitions survolées

Le troisième paragraphe traite de l'amélioration de l'expérience utilisateur en ajoutant des transitions lors du survol des images. L'auteur montre comment modifier les paramètres pour créer un effet subtil lors du passage de la souris sur les images, en ajustant par exemple la couleur et l'opacité de la bordure, ainsi que l'ombre. Il insiste sur l'importance d'une transition douce pour éviter des changements abrupts et assure une meilleure harmonie visuelle. L'auteur conclut en soulignant que ces réglages sont appliqués à toutes les images du site, améliorant ainsi l'esthétique globale et l'expérience de navigation.

Keywords

💡Tuto

Un 'tuto' est un terme abrégé pour 'tutoriel', qui est un guide ou une vidéo explicative destinée à enseigner comment effectuer une certaine tâche ou utiliser un produit. Dans cette vidéo, le tutoriel a pour but de montrer comment paramétrer des images sur un site Internet avec Elementor, un éditeur de page Web. L'exemple est donné avec la personnalisation d'images dans un article.

💡Elementor

Elementor est un éditeur de page Web gratuit et populaire qui permet aux utilisateurs de concevoir des pages Web sans avoir besoin de connaissances en codage. Dans le script, l'auteur explique comment utiliser Elementor pour ajuster les images d'un site Web, y compris l'ajout de bordures et d'effets d'ombrage.

💡Paramétrer

Le terme 'paramétrer' fait référence au processus d'ajuster ou de configurer des options ou des paramètres dans un logiciel ou un système. Dans le contexte du script, cela signifie ajuster les réglages pour que toutes les images du site soient automatiquement mises en forme selon les préférences de l'utilisateur.

💡Images

Dans le script, 'images' fait référence aux éléments visuels qui s'affichent sur un site Web. L'auteur du tutoriel montre comment les images peuvent être modifiées pour améliorer l'esthétique du site, notamment en changeant leurs bordures, leurs ombres et leur opacité.

💡Mise en forme

La 'mise en forme' est le processus de modification de l'apparence d'un élément, comme une image, pour qu'elle soit plus attrayante ou fonctionnelle. Dans le tutoriel, cela implique l'ajout de bordures, l'arrondi des coins et l'ajout d'ombres pour distinguer les images du fond blanc du site.

💡Bordure

Une 'bordure' est une ligne qui entoure un élément graphique, comme une image. Dans le script, l'auteur explique comment ajouter et personnaliser des bordures aux images, en choisissant leur style, leur épaisseur et leur couleur.

💡Ombre de boîte

L'expression 'ombre de boîte' fait référence à un effet visuel qui ajoute une ombre derrière un élément pour lui donner une sensation de profondeur. Dans le tutoriel, l'auteur montre comment ajuster l'ombre de boîte pour les images afin de les rendre plus distinctes et attrayantes.

💡Opacité

L''opacité' est un terme qui décrit le degré de transparence ou d'opaque d'un élément. Dans le contexte du tutoriel, l'auteur explique comment régler l'opacité des images pour qu'elles soient entièrement visibles ou légèrement transparentes, ajoutant ainsi une nuance à leur apparence.

💡Survol

Le 'survol' fait référence à l'action de déplacer le curseur de la souris sur un élément, comme une image, sur un site Web. Dans le script, l'auteur explique comment personnaliser l'apparence des images lorsqu'un utilisateur survole d'elles avec le curseur, par exemple en modifiant leur bordure ou leur opacité.

💡Transition

La 'transition' est un terme utilisé pour décrire le passage d'un état à un autre, souvent utilisé dans le design Web pour décrire comment un élément change d'apparence lorsqu'il est interagir par l'utilisateur. Dans le tutoriel, l'auteur montre comment ajuster la durée de la transition pour les modifications d'apparence des images lors du survol.

💡Mettre à jour

Le terme 'mettre à jour' signifie enregistrer les modifications apportées à un document ou un site Web. Dans le script, après avoir ajusté les paramètres des images, l'auteur mentionne cliquer sur 'Mettre à jour' pour sauvegarder les réglages et prévisualiser les modifications sur le site.

Highlights

Tutoriel pour configurer les photos sur un site internet avec Elementor gratuitement.

Paramétrer les photos une fois pour qu'elles soient automatiquement mises en forme.

Les réglages généraux s'appliquent à toutes les photos présentes et futures sur le site.

La possibilité de modifier spécifiquement une photo par rapport aux autres.

Accès aux réglages depuis le tableau de bord de Top Tuto Web.

Les articles et les images sont utilisés pour illustrer les étapes d'un tutoriel.

Problème de visibilité avec les images blanches sur fond blanc.

Astuce pour améliorer l'esthétique des images et les différencier du texte.

Modification des réglages de bordure pour les images dans Elementor.

Ajout d'une bordure noire pour améliorer la distinction des images.

Réglages de la largeur et du style de la bordure pour personnaliser les images.

Utilisation du rayon de bordure pour ajouter un effet arrondi aux images.

Réglages de l'ombre de boîte pour donner profondeur aux images.

Ajustement de l'opacité des images pour un meilleur contraste.

Application de filtres CSS pour modifier les propriétés visuelles des images.

Réglages spécifiques pour l'effet au survol des images.

Amélioration de la transition entre l'état normal et le survol de l'image.

Vérification des modifications sur le site pour s'assurer de l'application des réglages.

Présentation de la création d'un site d'affiliation avec un autre outil, Dostinger.

Comparaison de l'expérience utilisateur entre Elementor et Dostinger.

Transcripts

bonjour à tous aujourd'hui un tuto

astuce pour elémentor version gratuite

je vais vous montrer un endroit où vous

allez pouvoir paramétrer en quelques

clics toutes les photos qui sont

présentes sur votre site internet bref

vous faites les réglages une fois et

toutes les photos de votre site et

toutes les photos à venir sur votre site

seront automatiquement mises en forme

selon vos désirs attention il s'agit de

paramètres généraux rien ne vous empêche

par la suite de modifier une photo

spécifiquement par rapport aux autres

mais comme d'habitude un petit tuto vaut

mieux qu'un long discours de ce fait on

fonce directement sur mon ordinateur

nous voici sur le tableau de bord de top

tuto web nous allons maintenant aller

dans les articles onglet articles tous

les articles pour ce qui est de tous les

articles on va vite faire le tour parce

que pour l'instant je n'ai publier qu'un

seul article les autres vont suivre très

prochainement ce sera l'occasion d'un

autre tutoriel pour l'instant on va

passer sur l'astuce concernant les

photos et les images je vais donc sur le

titre de mon article et je vais dans

modifier avec ééur alors là on est sur

l'article que j'ai débuté dans l'autre

tutoriel mais depuis lors je l'ai

amélioré et paufiné on va d'ailleurs

regardez ça ici regardez on a le petit

symbole avec un œil prévisualiser les

modifications et l'article en question

comment créer un compte hostinger voyez

il y a du texte ensuite il y a des

images pour illustré chacune des étapes

pour la création d'un compte sur

hostinger donc du texte une image du

texte voilà à chaque texte correspond

une image qui illustre un petit peu les

propos c'est un peu le principe d'un

tuto vidéo mais avec des images figées

et du texte alors au niveau des images

ben regardez quand on a des images

blancs sur fond blanc c'est pas génial

elles sont un petit peu mélangé on voit

pas j'aime pas trop moi ce côté on voit

pas où se termine le texte et où débute

l'image mais ne vous en faites pas grâce

à l'astuce que vous allez découvrir

aujourd'hui vous allez pouvoir donner du

cachet à vos photos et à vos images je

suis donc de retour dans mon article et

dans mentor et nous montons ici en haut

sur la gauche voyez les trois traits

horizontaux je clique dessus et on a une

nouvelle fenêtre qui s'ouvrefin plutôt

un nouveau menu qui s'ouvre avec

plusieurs options c'est le fameux menu

qui nous permet de quitter les mentor et

revenir à la version WordPress mais en

haut on a différents réglages réglage du

site réglage constructeur de thème et

réglage préférence de compte ce qui nous

intéresse c'est réglage du site je

clique dessus et là nous avons plusieurs

possibilités on pour aller voir en

détail dans un autre tutoriel ce qui va

nous intéresser ici c'est l'option des

images je sélectionne donc imag et là on

a quelques réglages possibles ils sont

simples mais ils sont redoutablement

efficaces ce qu'il faut comprendre c'est

que toutes les modifications que je vais

apporter dans ces réglages ici vont

s'appliquer sur la totalité du site et

va également être appliqué sur toutes

les images que je vais importer et

placer sur mon site web rappelez-vous le

temps qui nous a fallu pour créer cette

bannière pour ajouter des effets des

arrondis vous imaginez s'il faut faire

ça à chacune des photos c'est une galère

monumentale donc on va donner un design

généraliste à toutes nos images et à

toutes nos photos sachant que si on veut

modifier le design d'une photo en

particulier on pourra bien sûr toujours

le faire alors je vais descendre un

petit peu au niveau de ma page pour

qu'on voit voilà ici on va regarder avec

cette imageci on a du texte ensuite on a

l'image et puis on a du texte et je vous

ai dit on voit pas tellement la

différence vraiment l'image fond blanc

avec le fond du site internet blanc t ce

mélange on voit pas très bien la

distinction entre le texte et les images

alors ici au niveau des images on a deux

positions normale au survol normal mais

c'est quand l'onglet le curseur est en

dehors de l'image et au survol c'est

lorsque le curseur passera sur l'image

alors au niveau des effets pour

l'instant on sélectionne la partie

normale donc on va s'occuper de tous les

effets qui peuvent être visibles lorsque

le curseur ne passe pas sur l'image ou

la photo donc on est en mode normal je

vais commencer par un type de bordure

par défaut il y en a aucune je

sélectionne aucune solide double

pointillé tiret rénuré moi

personnellement je préfère la bordure en

mode solide je clique solide et regardez

automatiquement on a une bordure qui

s'est rajoutée alors au niveau de la

bordure moi je suis en gris très clair

vous serez peut-être en noir d'ailleurs

je vais le mettre en noir tout de suite

voilà couleur noire je pense que c'est

la couleur par défaut mais j'avais déjà

travaillé un petit peu sur le site avant

alors la largeur de la bordure pour

l'instant on a un pixel 2 3 4 5 voyez on

peut agrandir la bordure sans aucun

problème et c'est à ce momentl qu'on

voit un petit peu plus la différence

quand on met par exemple du double ou

par exemple du pointiller ou encore du

tiret mais comme je l'ai dit moi je

reste sur du solide et au niveau de la

dimension

je vais mettre du 1 alors on a du 1

partout en haut à droite en bas à gauche

c'est un partout pourquoi parce qu'on a

ici le symbole d'un maillon et ça veut

dire que si je modifie en bas une

dimension automatiquement les autres

sont impacté et se change

proportionnellement maintenant je

pourrais très bien décider de cliquer

sur le maillon et de dire par exemple à

droite et à gauche on mettre à droite je

vais mettre une épaisseur de 6 et à

gauche une épaisseur de 6 et là

automatiquement regardez le design a

changé on a une plus grosse épaisseur à

droite et à gauche voilà à quoi sert ce

maillon ici maillon qu'on retrouvera

également dans le rayon de bordure donc

je vais réactiver le maillon et je vais

mettre ma bordure à 1 là la bordure est

noire niveau de couleur de la bordure je

vais mettre un gris voilà gris moyen

comme ça ni trop sombre ni trop clair le

rayon de la bordure on l'a déjà vu je

pourrais dire voilà je veux un rayon de

bordure de 15 on a bien le maillon qui

est enclenché donc si je mets 15 dans

une des cases automatiquement ça va se

répercuter sur les autres cases

j'inscris 15 et regardez automatiquement

ici on a bien un arrondi de 15 arrondi

qu'on retrouve ici qu'on retrouve ici et

qu'on retrouve ici je vais remettre à

z0ro donc les arrondis sont redevenus

carrés je vais décocher le maillon et en

haut par exemple je vais marquer euh 200

on a juste une bordure en haut mais on a

pas de bordure ailleurs en même temps

regardez ça donne un petit design au

niveau de votre cadre donc vous pouvez

jongler avec ça pour le design il y a

aucun problème moi je réenclenche le

maillon je ne veux pas une bordure à 200

partout je vais mettre parle une bordure

de 15 pour l'ensemble de mon image pour

l'ensemble de toutes mes images je

pourrais même monter à 20 alors

l'opacité par défaut elle est à 100 % si

vous la bougez un petit peu ben là on n

plus qu'à zéro donc l'image disparaît on

est à 50 % de visibilité voilà l'opacité

peut se régler ici mais pour mon image

je veux que l'opacité soit au maximum

soit au début elle est par défaut donc

elle est au maximum ou si jamais vous y

avez touché n'oubliez pas de pousser le

curseur sur la droite de mettre à 1 pour

que votre image soit pleinement visible

alors un outil que j'aime beaucoup c'est

l'ombre de boîte je clique sur le petit

stylet par défaut regardez vous AZ

automa

une ombre 0 et 0 ça veut dire que

l'ombre est répartie partout sur la

photo on a bien une ombre en haut à

gauche à droite et en bas maintenant si

je mets un vertical par exemple à 5

automatiquement mon nombre c'est déplacé

maintenant elle est visible ici à gauche

en bas et elle a disparu sur la droite

et sur le haut voilà en fait vous pouvez

déplacer sans aucun problème la position

de votre ombre en jouant sur

l'horizontal et le vertical bon moi je

vais laisser horizontale 5 vertical 5 et

au niveau du flou je vais mettre

également à 5 voilà j'ai fini avec

l'ombre de la boîte et on a également

possibilité de jouer avec des filtres

CSS c'est pas trop mon trip je vous

montre juste voilà on clique on peut

jouer sur le

flou on peut jouer sur la luminosité on

peut jouer sur le contraste on peut

jouer sur la saturation et jouer

également sur les teintes je n'utilise

jamais ça

donc vous savez que ça existe vous

pouvez jouer sur les contrastes par

exemple entre le moment où vous êtes à

côté de la photo et au moment où le

curseur passe sur la photo justement

maintenant on va passer au mode en

survol donc on a fini avec la version

normale on va passer maintenant la

version survol je clique pour l'instant

niveau survol on a rien du tout donc il

se passe absolument rien pour l'instant

on est au mode par défaut il garde la

même configuration qu'on soit en mode

normal ou en survol

mais on va modifier tout ça type de

bordure solide largeur de la bordure une

je vais reprendre les mêmes les mêmes

configurations couleur de la bordure là

par contre je pourrais l'assombrir un

tout petit peu va déjà regarder ce que

ça donne je suis en dehors je passe

oui la différence est vraiment minime je

vais encore assombrir ah oui là on voit

tout de suite la différence entre le

moment où je suis en dehors et le moment

où je passe ok super le rayon de bordure

toujours le même j'y touche pas

d'ailleurs comme ça ça restera toujours

à 20 l'opacité lorsque le curseur est en

dehors l'opacité est normale l'image est

visible à 100 %. lorsqu'il y a un survol

je pourrais réduire l'opacité par

exemple à 0,85 on va regarder ce que ça

donne je suis en dehors je

survole voilà ça fait un petit

effet c'est léger c'est discret moi ça

ça me convient comme ça mais j'aime pas

le côté assez abrupte vous avez vu on

est en dehors et puis boum ça change ne

vous en faites pas on va améliorer ça

dans un instant on va dans l'ombre de la

boîte l'ombre de la boîte j'étais à 5 5

5 partout je vais par ici mettre du 3 en

horizontale TR en vertical et je vais

laisser 5 au niveau du flou on regarde

ce que ça donne je suis en dehors je

survole je regarde au niveau de l'ombre

ici ici en bas et sur la

droite voilà mais comme je vous dis

c'est un peu brutal comme transition

entre le moment où je suis en dehors et

le moment où je passe alors pour se

faire on va aller dans durée transition

ici et je vais monter à 0,5 une

demiseonde on va voir ce que ça donne

voilà là on a une petite transition tout

en douceur

ouais c'est quand même beaucoup plus

sympa de cette manière alors bien sûr on

a regardé pour cette photo mais regardez

ici n'importe quelle photo ça y est ça a

été appliqué systématiquement sur la

totalité de mon site sur l'ensemble de

mes photos je remonte et je revérifie

regardez même la photo ici

d'illustration pour mon site internet ça

c'est également appliqué dessus une fois

que vous êtes satisfait du résultat vous

cliquez sur Mettre à jour je peux aller

dans la partie prévisualiser les

modifications et comme ça je peux

maintenant apprécier complètement le

travail que été fait on voit bien

automatiquement les petits effets on

voit mieux les images he qui se

dessinent c'est quand même beaucoup plus

esthétique on voit mieux la différence

entre le texte et les images et puis

quand on passe dessus il y a un petit

effet sympa discret mais sympa il faut

pas non plus tomber sur des trucs qui

bougent dans tous les sens moi je suis

vraiment pour la simplicité la

discrétion vraiment quelque chose de

subtile je remonte en

haut voilà super alors là je vais partir

sur la création d'articles j'ai j'ai

beaucoup d'articles à créer on va

pouvoir évoluer sur le site

d'affiliation via WordPress et elementor

mais surtout j'espère être prêt pour

vendredi vendredi je voudrais bien vous

présenter la création d'un site

d'affiliation mais avec le créateur de

site

dostinger et vous allez voir les choses

sont beaucoup plus simples d'utilisation

certes il manque quelques petites

fonctionnalités mais au niveau débutant

vraiment vous voulez vous lancer

simplement dans l'affiliation sans vous

prendre la tête avec un système très

simple d'utilisation vous allez voir

avec le constructeur de site doinger je

pense que je vais faire des heureux

d'ici là je vous souhaite un excellent

début de semaine on se retrouve très

bientôt et bien sûr d'ici là je vous dis

bye bye