Suivi de souris + 3D + supperposition d'image
Pour mettre l’image où on veut (image superposées) : position absolue et décalage en vw (dans les paramètres avancé)
Barre de progression
possible de mettre progression sur tout le site ou que une section
possible de mettre les %
Possible de mettre à l’horizontal ou vertical
suivi de tout le site :
suivi d’une section : pour faire ça il faut mettre progression relative à « sélecteur », puis sélectionner la section, aller dans les paramètres avancés et mettre un nom dans ID de CSS, copier ce nom, retourner dasn le traqueur et coller le nom avec un # devant dans « sélecteur »
version ordi
version mobile
arrière plan dégradé plusieurs couleur ronds
- mettre la section en pleine largeur (si on veut que la section prenne tout l’écran, mettre 100 vh en hauteur mini et centrer les éléments)
- ajouter le widget espaceur (permet d’avoir le controle sur les couleur plutôt que de mettre des png et que le site soit plus fluide) le mettre en 1000px
- avancé > arrière plan > dégradé
- première couleur en opacité réduite et la deuxième 0% d’opacité
- mettre emplacement à 70% ou moins et changer le type de linéaire à radial
- avancé > mise en page > largeur > personnalisé > 1000 px
- position absolue
- Pour mettre les éléments de la section au premier plan faire : cliquer sur l’élément > avancé > Index-Z = 2
- pour que les dégradé ne débordent pas : sélectionner la section > mise en page > option supplémentaire > débordement > masqué
Titre
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
ajouter de la texture
- avoir un arrière plan transparent et faire pareille qu’au dessus
- sélectionner la section et ajouter en arrière plan un image de texture
- j’ai ajouté un couleur de superposition pour que ce soit un peu plus lisse (je pense que j’ai pas trouvé la bonne image pour faire une belle texture)
Titre
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
arrière plan couleur + arrière plan image
Si on a une image en png qu’on veut mettre en arrière plan mais qu’on ne veut pas que le fond soit transparent, on peut mettre une couleur ET une image (png) en arrière plan)
test
table des prix
pour que les centimes du prix soit afficher en exposant, il faut ecrire le prix (ex: 400,00) > tarification > format de la devise > mettre le deuxième (1.234,56) OU ecrire 400.00 et mettre le premier (1,234.56)
possibilité de mettre une période de paiement (ex: mensuel), on peut mettre n’importe quoi de dans (« par personne » » par an » « offre à durée limitée »…)à
On peut marquer un mot à la place du prix comme « gratuit »
on peut aligner les fonctionnalité sur le centre, la droite ou la gauche
Si c’est sur la gauche ou droite, il faut ajuster la largeur pour que ça fasse beau
On peut mettre une ombre au ruban pour le faire ressortir et on peut gérer la distance avec le coin
Optimisation fiche GMB
Pour booster votre visibilité-
Optimisation du contenu de votre fiche
-
Maximisation de votre visibilité locale
-
Renforcer rotre réputation
Optimisation fiche GMB
Pour booster votre visibilité-
Optimisation du contenu de votre fiche
-
Maximisation de votre visibilité locale
-
Renforcer rotre réputation
Optimisation fiche GMB
Pour booster votre visibilité-
Optimisation du contenu de votre fiche
-
Maximisation de votre visibilité locale
-
Renforcer rotre réputation
scroll sur le côté
Mettre en élément sur le coté (le faire déborder) puis sélectionner la section, aller dans contenu > option suplémentaire > débordement puis sélectionner « auto »
Test →
effets de défilement
défilement horizontal : peut gérer la vitesse, vers la droite ou vers la gauche. Commence quand on aperçoit le haut de l’image te fini quand l’image arrive au centre de l’écran si on ne change pas le viewport
Si on le change ça donne par exemple l’imverse si on met de 50% à 100 %
Pareil pour le défilement vertical
0% à 100%
50% à 100%
défilement vertical
Transparence : même principe que les deux précédant, possibilité de choisir si il disparait totalement ou juste réduire l’opacité avec le « niveau », possibilité de choisir à partir de quand il disparait ou apparait et inversement avec le viewport, possibilité de choisir s’il apparait (de transparent à visible) ou disparait (de visible à transparent)
Fade Out In
au début et à la fin visible, au milieu transparent
attention mettre un viewport plutôt proche (ex: de 40% à 60%)
Fade In Out
au début et à la fin transparent, au milieu visible
attention mettre un viewport vraiment proche (ex: de 48% à 52%)
Flou : même princpe que la transparence
Rotation : même princpe
Mieux de mettre le viewport de 0% à 100%
Echelle : même princpe
combinaison de tout
on peut aussi le faire sur une image mise en arrière plan en sélectionnant la section puis en allant dans style > arrière plan > activer l’effet de défilement qu’on veut
effet au passage de la souris
mouvement de la souris
fuir la souris (opposé) ou suivre la souris (direct)
Inclinaison 3d
idem que mouvement de souris
on peut aussi le faire sur une image mise en arrière plan en sélectionnant la section puis en allant dans style > arrière plan > activer l’effet de défilement qu’on veut
Popup
tableau de bord > modèle > fenêtre modale > créer > réglage pour gérer la taille du popup et le bouton pour fermer et si on veut bordure, couleur de fond … > mettre des éléments dans notre popup > publier > ajouter une condition > sur tout le site > cliquer sur « déclencheur » à gauche et choisir à quel moment le popup apparait
Pour le mettre sur un bouton : créer le bouton > contenu > lien > balise dynamique > fenêtre modale > rentrer le nom du popup
attention ne pas mettre le fait qu’on peut cliquer que une fois
changer le format d'une image sans la déformer
mettre son image > style > modifier la hauteur et la largeur comme on veut > adaptation de l’objet > couvrir
Avant
Après
arrière plan diaporama
Sélectionner la section > style > diaporama > créer une galerie > mettre boucle infinie et une durée pour le temps de transition (ici 1500) (plus le chiffre est petit, plus ça va vite)
Si on veut que deux diapos se synchronisent, les mettre tous les deux en chargement différé
Possible de faire diapo de couleur en important des images d’aplat de couleur
Titre
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
lottie widget
- aller sur lottiefiles pour trouver une animation en .json et copier le lien de l’animation
- mettre le widget lottie et changer la source du lottie en mettant url externe puis coller le lien
pour que l’animation avance en même temps que le scrol
- mettre l’animation avec pour source ficher média dans le widget lottie
- aller dans réglage et choisir quelle action déclenche l’animation (ici défilement)
Autre exemple : au survol
effet néomorphisme
Utiliser les ombres et la lumière
Sert à faire comme si quelque chose ressortait de la page
(exemple sur un bouton) mettre deux ombres
- mettre le bouton
- mettre ombre de boite blanche et augmenter l’opacité au maximum
- paramètre de l’ombre : -10 pour décalage vertical et horizontal et 15 pour le flou, le reste pas toucher
- Pour mettre la deuxième ombre, aller dans avancer > bordure > ombre de boite > mettre une ombre sombre avec pour valeur 10/10/15
- bordure du widget > rayon (mettre le même que celui du bouton)
- avancé > largeur > en ligne (auto) > alignement automatique > mettre le même que le bouton
Point négatif, pour le faire avec des formes plus complexes comme des titres, ce n’est pas possible de le faire depuis elementor, il faut le faire avec des images déjà modifiées importées
possible de faire un effet de Claymorphism en mettant les ombres sur l’intérieur (si le bouton est clair, mettre des ombres foncés avec une faible opacité)
Ajoutez votre titre ici
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Ajoutez votre titre ici
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
