Un site Webflow en 1 heure : Guide étape par étape (tuto webflow)
Вставка
- Опубліковано 25 сер 2024
- 🖥️ Bienvenue dans ce tutoriel où je vous montre comment créer une page Webflow à partir d'un design Figma. De la conception initiale à la mise en œuvre, je vous guide étape par étape à travers tout le processus ! 🚀
Nous allons explorer ensemble des éléments tels que le display flex, les choix de polices et bien d'autres astuces essentielles pour rendre votre site parfait. Que vous soyez nouveau dans le développement de sites web ou que vous cherchiez simplement à peaufiner vos compétences en Webflow, cette vidéo est faite pour vous.
En une heure, je vais essayer de vous enseigner un maximum, alors préparez-vous à plonger profondément dans le monde de Webflow et Figma. N'oubliez pas de vous abonner pour plus de tuto Webflow et conseils sur comment créer un site web ! 💡
Vous commencez avec webflow?
C'est par ici: webflow.partne...
(ceci est un lien affilié, cela m'aide à continuer à faire des vidéos de qualité sur webflow!)
Vous pouvez cloner la page ici:
webflow.grsm.i...
Lien Figma:
www.figma.com/...
👉 Lien vers la liste d'attente de ma formation:
rivia-academie...
Si vous appréciez le contenu que je crée et que vous trouvez mes tutoriels et conseils sur Webflow utiles, n'hésitez pas à me soutenir en m'offrant un café ou en faisant une petite donation. Merci à tous!
☕️ www.buymeacoff...
Merci à tous d'avoir regarder cette vidéo et à bientôt !
🚀 Vous avez un projet de site, une question ou une idée de collaboration ?
Contactez-moi ici: forms.fillout....
🎥 Outils:
Camera: amzn.to/3LrInqD
Micro: amzn.to/3qT2p62
RGB: amzn.to/45uMsSB
Softbox: amzn.to/3sB8BQM
Ordinateur: amzn.to/3Plz7GT
Salut, je suis Marc de la Côte d'Ivoire. très heureux de vous suivre! et merci encore pour ces cours très bien expliqué
Salut! Merci beaucoup pour ton commentaire! N'hésite pas si tu as la moindre question!
Ahh enfin un tuto de A a Z pour faire une page entière !
Cette vidéo est l'une des meilleures que j'ai trouvées en ligne - merci beaucoup ! j'hai hâte de voir la prochaine sur Figma to Webflow!
Merci beaucoup à toi!! Je la fais au plus vite 😁
Merci pour cette vidéo qui est très intéressante 🌞
J'ai quelques questions :
1. Style Tiles
- Tu dis que pour chaque projet tu crées un style tiles, est-ce que tu peux me montrer à quoi cela ressemble ?
- Côté méthodo, tu crées une page dans le projet sur Webflow sur laquelle tu crées tous les composants et les variants, puis tu les copies colles sur la page du site web, c'est ça ?
2. Form
- Comment rattaches tu le formulaire au CRM de ton client ?
Merci encore pour ce contenu de grande qualité ! 👏👏👏👏
Salut Sarah !
Je vais essayer de faire une vidéo sur ce sujet car c'est vraiment important. En attendant, si tu cherches 'Style Guide' sur la page 'Made in Webflow', tu trouveras quelques exemples.
Ça dépend du projet. Si je remarque qu'une section se répète plusieurs fois (ou qu'elle change légèrement), je le fais. Dans ce cas, je peux aussi créer des composants.
Tu peux assez facilement connecter Webflow avec n'importe quel CRM. Comme tu peux ajouter du code, tu peux aussi intégrer un 'flow' après la validation d'un formulaire !
Merci pour tes questions très pertinentes !
Super clair, merci pour ta réponse @@ritchrivia 😍 je vais continuer de suivre toute ton actualité de très près pour ne pas louper ça ! merci encore pour tes vidéos 👏👏
Super! N'hésite pas si tu as la moindre question 😁
Waaaa super format. je n'ai point vu le temps passé. Merci pour ce tuto😎
Merci à toi!
Salut, est-ce que pour toi, c'est important de savoir coder manuellement un site en plus de maîtriser Webflow ?
Salut !
Alors, ce n'est pas nécessaire, mais ça rend la chose plus facile d'avoir les bases de HTML et CSS !
Mon frère a appris Webflow et est maintenant super bon, alors qu'il n'avait que les bases de HTML, CSS et JavaScript
Je te conseille de faire deux ou trois petites introductions sur le sujet, ça va vraiment te faciliter la tâche !
@@ritchrivia ok merci pour le conseil
Et quand on commence à bien connaître webflow, on peut utiliser Figma to Webflow et hop on ajoute les animations 😊
En effet ! Une de mes prochaines vidéos, je ferais avec le plugin Figma à Webflow, c'est encore plus rapide !
Great content bro ❤
hehe thanks!
Salut ! merci pour ce tutoriel qui m'a beaucoup aidé. Petite question que je me pose à titre personnel; pourquoi est ce que tu n'utilises pas le quickstack à la place des divblock ? est ce que cela serait pas + intuitif. Ton avis m'interesse.
Salut ! Merci pour ton commentaire.
Figure-toi que je n'avais même jamais remarqué le Quickstack, haha 😅
Je vais tester ça dans un prochain projet !
De plus, comme de base je suis full dev (en code), je me repose souvent sur les concepts HTML pur et dur , et donc les div!
Super Vd ! ça m'a bcp aidé mais cependant tu as zappé le coté responssible ainsi que le Header. Franchement merci bcp pour la vd
Yes pour le header j'ai vu au montage que j'avais oublié 😅
Je vais faire une seconde vidéo pour le responsive!
@@ritchrivia merci ! Super vidéo !
Merci à toi!!
Super ta vidéo, mais petite question comment on fait pour mettre nos liens réseaux sociaux sur le site et aussi mettre notre adresse mail pour notre formulaire?
Salut! Tu peux ajouter des links Block, mettre des icônes pour les réseaux et tout simplement mettre le lien qui correspond 😁
Pour ton email, que veux tu dire?
Normalement les entrées du formulaire vous allez dans ta boîte mail!
Super intéressant ce tuto. On voit pas mal de choses ! J'ai une petite question : quand tu parles de mettre en position relative la section pour bien positionner les 2 dégradés "Circle Green", est ce qu'on pouvait mettre cette position relative dans le Flex Left et dans le Flex Right avec un Z-index de 3 par exemple au lieu de le mettre dans le Flex et dans la section ?
Salut ! Alors, si tu appliques position: relative sur le parent (que ce soit Flex Left ou Flex), ça devrait fonctionner.
L'enfant, dans ce cas Circle Green, se positionnera en absolute par rapport à son premier parent ayant la propriété relative. Donc, si tu as une structure Circle Green < Flex Left < Flex < Section et que Flex Left est en relative, la position que tu définiras pour Circle Green sera relative à Flex Left !
J'espère que c'est un peu plus clair !
@@ritchrivia oui c'est clair merci pour ta réponse rapide
mais pourquoi ne pas etre passer. par le plugin figma tro webflow ?
Enfaite-j'ai une vidéo prévue qui fait tout avec le plugin mais je voulais faire une vidéo plus en profondeur sur webflow! Pcq importer tout de figma c'est beau mais si on est perdu dans webflow ça n'a pas d'intérêt! (J'aurais dû le mentionner!)
Super tuto ! Est il possible de créer avec Webflow un tableau de bord pour des clients ? Avec l’option connexion pour eux ou nous devons utiliser d’autres outils ?
Salut Lucas ! Un tableau de bord pour que le client puisse ajouter/supprimer des données à la base de données ? Si c'est le cas, alors oui ! Webflow a une fonction éditeur qui va permettre au client de faire tout ça très facilement !
Salut, je n'arrive pas a modifier la landing page sur figma...
Salut Andrea! C'est parce que c'est sur mon compte figma.
N'hésite pas à copier/coller le frame directement dans un de tes projets, tu pourras modifier tout après!
Y’a pas la vignette de la vidéo 1 qui s’affiche (1:05)
Ah pour le cours d'introduction ? Elle apparaît chez moi!