Elementor gratuit réglez vos photos en un clic
Summary
TLDRDans 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
🛠️ 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.
🖼️ 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.
✨ 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.
Mindmap
Keywords
💡Tuto
💡Elementor
💡Paramétrer
💡Images
💡Mise en forme
💡Bordure
💡Ombre de boîte
💡Opacité
💡Survol
💡Transition
💡Mettre à jour
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
Ver más vídeos relacionados
![](https://i.ytimg.com/vi/sdBC9tvhcGY/hq720.jpg)
Cette technique de Prompt va te faire gagner beaucoup de temps (ChatGPT, Mistral, Claude, Llama...)
![](https://i.ytimg.com/vi/7V9Y5uE3nAg/hq720.jpg)
How I went from zero to $50k a month [Step-by-step]
![](https://i.ytimg.com/vi/5JIljuobsJI/hq720.jpg)
Comment Gagner De l'Argent Avec Preply En 2024 ? (Pour Debutants)
![](https://i.ytimg.com/vi/J2SGVecqxEU/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGGUgZShlMA8=&rs=AOn4CLABHUFlUuUNrTo5r3K6d3rzPZ4Rdg)
Technologies Web
![](https://i.ytimg.com/vi/ZLzAUGmkfDI/hq720.jpg)
ربح عن طريق بيع الصور 2000 دولار شهريا
![](https://i.ytimg.com/vi/FKes0hfKKuY/hq720.jpg)
Mesurer à l'aide de fractions CM1 - CM2 - 6e - Cycle 3 - Maths - Mathématiques
5.0 / 5 (0 votes)