CSS #SystemeIO #Funnel #TunnelDeVente #FunnelBuilder #DesignFunnel #Technique #Design Systeme IO est un outil …
Salut a tous j’espère que vous allez bien bah écoutez je fais cette vidéo parce que du coup j’ai regardé sur groupe system foyot et y avait pas mal de demandes il ya pas mal de demandes en ce moment sur des effets de style sur les pages de vente sur les pêches de capture
Surtout j’ai repéré et des demandes sur les boutons comment faire des boutons un petit peu plus stylé un petit peu plus voilà avec des effets quand on passe la souris dessus qu’est ce qui se passe et c’est on ajoute des effets donc du coup je me suis dit voilà j’ai une heure je
Vais faire une formation gratuite pour tout le monde je vais la publier pour tout le monde et puis moi je vais me faire kiffer puisque déjà c’est mon métier et puis le css le css le front de tout ça j’adore donc donc voilà alors pour résumer j’ai j’ai relevé plusieurs demandes plusieurs
Plusieurs soucis entre guillemets par rapport à plusieurs besoins en fait entre guillemets par rapport à à des animations à des css avait style voulu sur les boutons donc là cette vidéo avait uniquement focus concentrer sur les boutons comment faire des jolis boutons avec système poyaud donc j’ai
Relevé 3 3 styles que je vais pouvoir démontrer aujourd’hui le premier qui m’a été demandé c’est quand on passe la souris sur un bouton que la couleur que ça change de couleur en fait que la couleur de vienne verte donc ça c’est ce qu’on va voir en
Premier ensuite il ya une autre personne qui a fait un post en demandant voilà elle voulait une animation sur son bouton et voulait que son bouton bouge et moi j’ai posé une question j’ai dit voilà est-ce que tu veux que ton bouton qui bouge quand tu passes la souris
Dessus ou est ce que tu veux que ton bouton il bouge de manière permanente ok et comme j’ai pas encore eu de réponse et ben du coup on va faire les deux on va faire donc pour récapituler le bouton qui changent de couleur quand on passe
La souris dessus le bouton qui bouge qui a des effets quand on passe la souris dessus et le bouton qui s’anime tout seul qui bouge tout seul ok de manière permanente on va faire ça et je vais vous expliquer comment est ce qu’avec système boyau vous pouvez faire quelque chose de
Propre quelque chose de joli voilà à savoir que moi je prends vraiment ça comme de l’art entre guillemets donc faut vraiment faire attention à ce que vous faites dans vos pages de vente et dans vos pages de capture donc ce que j’ai fait c’est que voilà je me suis
Connecté sur ce système pour you j’ai fait un tunnel de vente à part et j’ai créé une page de vente à part pour la démonstration ce que j’ai fait c’est que voilà vous comme vous pouvez le voir a ajouté deux sections une première section en eaux et une section qui sera
Dédiée entre guillemets au foot heures en général dans une poche du captur dans une pareille de ventre on a un fouteur donc là ça va être le footer vous savez c’est l’endroit où vous mettez cette page n’est pas facebook se crédite bail tous droits réservés et ses clients là
Ce que vous allez faire c’est que sous systèmes point you en fait vous ne pouvez pas mettre du code natif du code html du code css pardon natif il faut savoir coder en html il faut savoir utiliser les blocs html donc ce qu’on va faire
Là ce que dont on a besoin donc j’ai dit que j’avais commencé par le bouton qui changent de couleur quand on passe la souris dessus donc ce que je vais faire c’est que déjà je vais rajouter un bouton à plat et imaginons que ben voilà c’est un bouton pour je sais pas moi
Rejoindre la formation rejoindre votre fabuleuse formation oui je la buse formation par exemple donc voilà imaginons là vous avez votre bouton ne repêche de ventre de poche de capture peu importe et vous vous dites bah voila mon fabuleux bouton j’aimerais bien que il change de couleur bah quand je passe la souris dessus
Est ce que vous allez faire avec grâce au code html vous allez prendre un élément code html sur la droite et vous allez le glisser dans le foot heures pourquoi dans le footer parce que votre élément de code html il prend physiquement de la place quand vous
Affichez la page et donc pour éviter ce petit décalage vous allez mettre dans le footer et du coup ça se voit moins c’est plus esthétique hop là bon donc l’âge enregistre alors là il veut pas parce que je pense que voyager juste à faire ça normalement
Enregistré voir la très bien là je prie prévisualise la page pardon et vous voyez que je passe la souris dessus il se passe rien le bouton est normale comme tout ce qui se passe sous le système point you je veux dire de base donc là ce qu’on va faire c’est que on
Va commencer à customiser notre bouton donc là vous cliquez sur le code html ou alors vous avez la petite roue crantée ici vous cliquez dessus et le menu ici il va changer et vous avez à gauche code html ce qu’il faut faire c’est bien sûr modifier le code et la voilà vous allez
Avoir une petite fenêtre d’ouverture avec du code et c’est là où les choses deviennent un petit peu plus technique un petit peu plus compliqué mais vous allez voir que c’est en fait cesser le feu de faire ça c’est pour ceux qui s’intéressent vraiment au design de fumel où dizaines de tunnels de vente
C’est vraiment le feu alors là je vais juste laisser comme ça est ce qu’on va faire c’est que on va prendre l’aïe dit donc l’identifiant du bouton voilà donc là on à l’identifiant du bouton l’identifiant du bouton c’est quoi c’est imagine imaginer sur twitter ou sur facebook vous pouviez vous pouvez
Identifier les gens d’accord vous pouvez vous pouvez taguer les gens et bâle a en fait sur les pages web c’est la même chose sauf que vous taguer les éléments vous pouvez tagué un bouton vous pouvez tagués je sais pas moi vous pouvez tailler une vidéo vous pouvez tagué une image vous pouvez tagué
Du texte donc en fait c’est une référence c’est-à-dire que si j’appelle ça et bah j’appelle le bouton c comme moi par exemple sur facebook cjl gansel j’appelle jl gansel j’appelle le profil de jean louis dans cette voie là en fait c’est ça le bouton il s’appelle comme ça
Ils s’appellent bouton un machin donc ce que vous faites c’est que vous copier le nom du bouton en fait light du bouton l’identifiant du bouton vous retourner faire la manipulation que je vous ai montré tout à l’heure vous allez sous code html modifier le code est là est ce
Que vous allez faire c’est vous allez utiliser la balise style d’accord donc vous écrivez ça style pour ce soit propre on va la ligne et on copie le nom du bouton jusque là c’est pas trop compliqué on copie le nom du bouton ensuite ce qu’on fait c’est que tag le
Bouton donc sur facebook ou sur je sais pas moi sur twitter ou autre son affaire c’est que on va utiliser un @ pour lui dire voilà c’est lui que j’appelle est bien là en page web ce qui va être bien de faire c’est utiliser les hashtag là vous voyez que
Ça a changé de couleur c’est à dire que le le code html comprend que je tag le bouton d’accord donc là jusque là on est bon ensuite ce qu’on va faire c’est que code comme c’est du html comme c’est du css pardon on va voilà sélectionné ça les balises
Comme ça ça c’est pour dire à ce bouton là je lui a fait jurer lui affecte les attributs qui sont entre parenthèses séparément des parenthèses je sais pas comment s’appelle entre ses trucs et là pour faire propre on va aller à la ligne donc là du coup tout ce qu’on va écrire
Ici là j’écris n’importe quoi ça va être affecté au bouton ok donc ça c’est ce qui va être affecté au bouton maintenant comment faire pour je sais pas moi affectés donc là ce que je vais faire c’est j’ai enregistré voilà donc là j’ai rien affecté au
Bouton qui se passe rien et là ce qu’on veut en fait c’est affectés aux boutons des effets quand la souris passe sur ce bouton là et comment est ce qu’on fait pour affecter des attributs ou affecter des effets ou affecté les comportements au bouton quand on passe la souris
Dessus on lui ajoute ce qu’on appelle un événement donc evènement passer la souris dessus ça s’appelle over à plat donc on lui ajoute un élément au vert donc là je sais plus exactement si un espace ou pas ont de toute façon on verra bien et donc là pour changer de couleur vous allez
Copier ce que je vais mettre ça va être maintenant c’est çà et là on à divers oui on enregistre et on enregistre alors là il ya un souci c’est pas le bon la bonne chose qui se passe alors est-ce que j’ai pris le bonne identifiant toutes et tous pour 4 [Musique]
Ouais c’est le bagne identifiant alors du coup ce sera pas bhagwan color ça va être en colère c’est pour la couleur du texte alors ce qu’on va faire c’est qu’on va lâcher désolé je les fais vraiment au au feeling jeu là le problème c’est que le bouton il a une
Couleur ans confèrent ses couleurs d’arrière plan on va la rendre comme ça et du coup là si je reviens ici je vais vous expliquer après si ça fonctionne la g face au hockey la juge juste m oui ok a bien lâche pas enregistrée alors pourquoi y’a que le
Mini texte qui change de couleur j’aimerais bien comprendre pourquoi alors là je suis vraiment dans le l’enquète over ce qui se passe e alors pourquoi c’est pas affecté à ça mais je découvre des choses même temps que vous des cours des choses en même temps que vous voila voila c’est parce que j’ai
Fait une petite erreur voilà donc ça arrive à tout le monde voilà et donc là en fait donc non je vais vous expliquer ce que j’ai fait et on va revenir on va revenir vraiment en arrière donc là donc là on voit plus le bouton c’est un peu embêtant
Je vais remettre la couleur d’arrière-plan rester vraiment pour mon débogage donc voilà bon excusez moi de vous avoir peut-être un petit peu perdues voilà en fait ça on s’en fout ce que vous allez faire c’est bas la manipulation que j’ai fait au début mais vous l’écrivez vraiment avec 7
Ce code là d’accord donc l’identifiant du bouton le dièse avant deux points over hélas la background color donc la couleur de fond vous mettez la couleur que vous voulez la gemmi guînes mais après vous pouvez mettre ce que vous voulez donc là on enregistre et si on prévisualise ça
C’est vraiment l’effet des mots voilà le bouton change de couleur quand on passe la souris dessus voilà donc là on peut se dire bon c’est un peu violent ça fait un peu voilà ça fait un peu crise d’épilepsie si on fait ça j’ai une petite astuce pour vous en
Fait on peut changer la vitesse avec laquelle l’animation se déclenche est ce qu’on va faire c’est que on va aller dans on va revenir dans code html on va faire modifier le code est là on va mettre une position up celle que j’aime bien mettre ces on va mettre la transition on va
Dire que la transition de couleur on veut la faire en 0 05 seconde une demi seconde et on va la mettre à plat is easy money voilà on va rester comme ça donc ça c’est la transition que l’on a à l’intérieur du bouton quand ton passe la
Souris dessus et donc du coup quand on enlève la souris dessus enfin sur le bouton du bouton il faut aussi mettre la transition dans l’autre sens du coup ce qu’on va faire c’est que je vais mettre la transition dans l’autre sens donc la transition sur le bouton
Même quand on ne passe pas la souris dessus puisque tout quand on va relâcher la souris du bouton en fait il faut aussi que la transition se fasse de manière plus plus légère donc on va enregistrer alors on va enregistrer et à plat et là
Vous voyez que voilà on a un joli une jolie transformation de couleurs vraiment avec cinq lignes voilà donc ça c’était pour la transformation de couleurs donc c’était le premier cas je suis déjà l’heure je me suis un peu monsieur un peu écarté la fin j’ai un peu bafouillé mais c’est pas
Grave c’est du direct on se fait plaisir alors ensuite avoir un bouton avec une animation quand on passe la souris dessus mais ça c’est le deuxième cas donc ce que je vais faire c’est que je vais clonés ap la jeunesse un petit peu je vais pionner ce bouton
Système de liens ok donc là forcément elle fait la même chose on reprend l’identifiant du bouton donc le voilà vraiment c’est l’identifiant du bouton on retourne dans notre case de code et on lui dédie ses priorités ses propriétés parents à mieux se placer la même chose donc là ce qu’on veut c’est
Alors par exemple je sais pas moi par exemple un bouton qui grossit quand on passe sa souris dessus il naquit le fond j’ai vu que par exemple il ya sin il l’avait fait sur le groupe mais sur sa sur sa page de formation donc je vais vous montrer
Comment on fait donc j’ai pris l’identifiant de mon deuxième bouton est ce que je vais faire c’est que je vais lui définir le fait de grossir quand je passe la souris dessus comme vous vous en doutez l’événement s’appelle toujours over c’est l’événement de passer la souris dessus
Est ce qu’on va faire c’est qu’on va lui affecter une transformation donc on va rappeler une fonction transforme et on va appeler une fonction skype donc là vous posez pas de questions écrivez juste la même chose que moi là pour l’exemple pour le test on va mettre
Ça juste comme ça et on va voir ce que ça donne enregistrez enregistré la page voilà donc là on a toujours notre bouton avec la petite transition qui va bien le changement de couleur et la voilà le bouton qui grossit quand on passe la souris dessus voyez sauf que balla on
Pourrait se dire ouais c’est joli mais ça se fait en une seule fois et c’est un peu basique c’est un peu violent donc encore une fois les transitions ça c’est vraiment les transitions en fait c’est vraiment ce qui va vous permettre de donner un côté maîtriser un côté calme
Un côté pur à votre à votre bouton au changement de comportement que votre bouton il a donc ne négligez pas les transitions donc là ce que je veux faire c’est que pareil je vais lui affecter une transition et pour le retour également on veut un retour donc là
Ce qu’on va faire c’est que comme la transition est la même pour éviter de dupliquer du code on va juste prendre l’identifiant deux boutons là on va faire virgule va copier ça comme ça et au retour notre bouton aura la même transition que le bouton d’au-dessus gras vous posez pas trop de
Questions faites juste de la même chose que vous hopla claj enregistre et je regarde le résultat voilà déjà vous voyez que c’est beaucoup plus smooth en fait s’il ya un voilà il ya un côté qui est beaucoup plus c’est moins violent et quand tu repars c’est moins violent aussi donc encore une fois
Faut pas oublier de mettre la transition des deux côtés du côté de l’événement mais aussi du côté du bouton pour quand tu vois quand vous partez de l’événement la transition soit ceci correctement dans l’autre sens voilà donc ça c’était le deuxième exemple après bien sûr on peut faire quelque chose de plus propre
Si on veut je sais pas moi que ça se transforme de manière moins grosses un scale c’est votre c’est votre fonction mais là vous pouvez changer 1 c’est la même taille de ces deux fois plus gros 3 c’est trois fois plus gros donc après vous pouvez faire
Des combos du style 1.0.0 5 s’il est peut-être un point 2 par exemple voilà ja happ la voyez pas sa souris dessus le bouton celui-là il change de couleur suis là haut up i grossi ok donc faire des trucs comme ça ça ça si vous êtes passionnés de design si
Vous êtes passionné de et si vous avez envie de faire la différence par rapport à vos tunnel de ventes par rapport à votre concurrence et ben en fait c’est le feu de faire des trucs comme ça parce que ça ça prouve que vous faites vraiment attention à votre à votre
Vitrine et le tunnel de vente la page capture et c’est votre page de vente c’est vraiment la vitrine de votre business donc voilà c’est on a des effets plutôt sympa et ensuite ce qu’on va faire c’est l’animation donc là on rentre dans quelque chose d un petit peu plus compliqué l’animation qui est
Permanente donc là ce que je vais faire c’est que je vais encore une fois dupliquer le bouton et je vais aller chercher une animation permanente donc moi ce que je veux c’est par exemple que mon bouton y fasse en haut en bas et qui il n’arrête pas de bouger
Et que ce soit de manière infinie donc là c’est vraiment si vous commencez à maîtriser le css si vous commencez à maîtriser les bases que je vais je viens de vous apprendre que je viens de vous montrer vous pouvez aller chercher des effets sur internet vous pouvez aller chercher
Des trucs un petit peu plus stylé sur internet vous voyez enfin vous verrez qu’il ya énormément de choses et c’est vraiment passionnant de faire ça donc la semoy faire c’est que voilà on va prendre le temps encore une fois l’identifiant on ne change pas une équipe qui gagne on reprend
L’identifiant on peut tourner dans notre code html hockey et on lui prépare une petite place qui va attendre des attributs on enregistre pour l’instant luis mejia et là je vais aller chercher le je vais aller chercher la qualif rem donc là vous allez avoir besoin d’une caille ferons donc tout et tout
Geffray mme barnes voilà up et voilà ce que je veux c’est ce petit effet là donc là je me prends pas la tête un j’ai pas envie de passer des heures là dessus ce que je vais faire c’est que j’ai prendre celle qui me semble la plus correcte je vais prendre celle là
Et pardon excusez moi je vais la colle et donc la maca éphrem c’est quoi c’est une animation en fait vous prenez là qu’il freine vous la mettez comme ça donc là voilà je voulais skopje 7 7 qui freinent vous copier ce morceau de code là ok on enregistre et après ce qu’on
Fait ben voilà on prend ce que lui l’a fait l’animation hop là et vous mettez l’animation dans votre bouton voilà et là vous avez une petite amie nation bounce une borne c’est le côté voilà c’est c’est l’accueil fremm qu’on a copié ici à noter que si vous faites si vous copiez
Ce morceau de code là et que vous n’avez pas l’accueil frais m en dessous ça n’a pas fonctionné parce que là il fait référence à ce qui est en dessous ok avec la transition infinite c’est important il faut laisser infinite est en fait tous les mots sont importants
Donc vous copier ça comme ça vous pouvez changer les seconds ici donc ça c’est le temps d’animation et on enregistre voilà on enregistre la page on jette un coup d’oeil et voilà le bouton le bouton rebondi touché à la tête voilà tout simplement après on peut on
Peut combiner et on peut combiner les effets là on rentre dans quelque chose d’un petit peu plus particulier et donc où un petit peu plus compliqué bah je vais vous le faire juste pour le juste pour le kiff je vais faire je vais combiné ça avec sartre par exemple on va essayer de
Faire quelque chose quelque chose de style est allé au niveau alors ce que je vais faire c’est que donc là vous avez appris l’essentiel mais ce qui a envie d en apprendre plus vous pouvez rester donc là ce que je vais faire c’est que alors celui là c’est celui qui
Change de couleur quand quand je passe la souris dessus donc ce que je vais faire c’est que je vais prendre les propriétés du premier et je vais les affecter au deuxième ce qui fait que donc ça on en a plus besoin n’a pas besoin de la deuxième transition
Le changement de couleur on laisse le changement de couleur je vais dire qu’on va supprimer celui-là cela pour éviter des erreurs on va supprimer celui-là aussi voilà on va enregistrer ce bouton la dégage on enregistre l’on jette un coup d’oeil voyez que là on a un combo d2 il change
De couleur et yves rossy contrepoids sa souris dessus et encore mieux ce qu’on peut faire encore mieux on peut rajouter une petite ombre alors là c’est vraiment pour ce qu’ils sont vraiment vraiment avancer je vous dévoilais moi comment je travaille pour faire les pages et c’est à dire que ça
C’est la petite la petite astuce de développeurs dire que j’enregistre je regarde ma page donc là il me dit oui inutilisés passe actuelle ce que je fais c’est que je fais clic droit sur le bouton examiner l’élément il va vous sortir donc là c’est ça peut être un peu
Compliqué il va vous sortir l’inspecteur donc avec un menu en dessous vous placez sur l’inspecteur hélas ce que vous faites c’est que normalement quand vous passez la souris vous voyez qu’il ya des choses qui se mettent en bleu ça c’est votre page html est en fait vous allez vous descendez
Jusqu’à trouver votre votre but ont donc là le dicton il me semble que c’est ça voilà et là du coup ce que je vais faire c’est que en fait ici on a tout on a toutes les propriétés de la page comment elle se trouve vraiment à l’état
Brut en est donc on va essayer de jeter un coup d’oeil sur la page over donc là on n’a filtré les styles on peut cliquer sur over donc c’est la pseudo classe ça j’espère pas trop en perdre voilà elle a en fait ce que je vais faire c’est que
Moi ça c’est mon petit laboratoire je travaille ici pour déterminer bas par exemple qu’à l’ombre je veux m là vous mettez box shadow par exemple donc shadow alors c’est gm est juste dix pays n’est pas x p x black voilà là on a une botte shadow qui
Apparaît là ce qu’on fait c’est que on corrige donc là je mets 2 0 là on va mettre on va dire que s se décale un petit peu en bas doivent être cinq là c’est pas très joli alors qu’est ce qu’il fait c’est donc en fait là on va baisser
Ce truc là voilà on va mettre je sais pas moi c’est remettre à les 15 et là avec moins pour ce soit joli moins 5 voilà là on se rend compte que voilà quand on passe la souris sur le bouton en plus de grossir et en plus de s’afficher en vert on a
Une petite ombre une jolie petite ombre derrière qui fait un effet un petit peu de voix de profondeur et donc du coup ce que vous faites c’est que donc là vous cherchez pas la tête vous fait les mêmes manipulations que moi vous prenez ce que je viens de coder contrôle c on retourne
Dans l’éditeur est en fait va tout simplement on lui colle ça dans le code du coup c’était celui-là hop là la classe au vert on luc holtz a enregistré voilà on enregistre on jette un coup d’oeil up et là ce qui se passe c’est que quand vous partagez votre page
Ça ressemblerait à ça et là hop là voyez on à la petite alors dont lui il me saoule un peu désolé un g2 met la voile a enregistré on recommence voilà et là hop vous et montrez à vos potes et ben voila j’ai fait un bouton avec un
Changement de couleurs +1 une transition plus le fait qu’ils grossissent plus le fait que voilà il ya une il ya une une ombre qui se met derrière et qui fait très très stylée voilà bah écoute et j’espère que ça n’a pas été trop technique pour vous si c’est trop
Difficile à écouter vous m’envoyer un message – c’est avec plaisir que je discuterai avec vous si vous avez besoin que je refasse voilà certaines choses sur vos pages de vente où certaines choses sur aux pages de capture je fais aussi des audits de type de type
Marketing je fais pas connu que du code et voilà vous m’envoyer un message sur mon profil perso n’hésitez pas à partager la vidéo a partagé la formation gratuite n’hésitez pas à mettre un commentaire à mettre un like et à très bientôt salut