OVERVIEW dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Customise ton article de blog
avec
Style
Exemple sur un article
published on
•
read time
Category
[.c-highlighted-number][.c-text-number]1[.c-text-number][.c-number][.c-number][.c-highlighted-number]
S’auto-retirer d’un [.c-text-bitter]workspace[.c-text-bitter]
On peut désormais de s’auto-retirer d’un workspace, tout seul comme un grand. Cela évite d’attendre qu’un admin le fasse pour vous (voire qu’il ne pense finalement jamais à le faire).
[.c-row-flex][.c-row-flex-vertical][.c-baloo-border]Et bim[.c-baloo-border][.c-nocode][.c-nocode][.c-row-flex-vertical][.c-column-brain][.c-column-brain][.c-row-flex]
Il faut aller dans [.c-highlighted][.c-big-word]dashboard[.c-big-word][.c-circle-pink][.c-circle-pink][.c-highlighted] > Workspace > “Manage Workspaces” > cliquez sur les 3 petits points > ”Leave Workspace”.
[.c-highlighted-number][.c-text-number]2[.c-text-number][.c-number][.c-number][.c-highlighted-number]
Preview en temps réel sur le canva
Quand la souris passe en hover dans le color panel, la couleur de l’élément sélectionné change en temps réel. Très pratique pour éviter de switcher de façon interminable entre la sélection et la preview.
Et tant qu’on parle des couleurs, Webflow a aussi simplifié la recherche et la sélection d’une couleur, qui se fait plus rapidement grâce à une liste déroulante qui apparaît dans le panneau de style.
[.c-highlighted-number][.c-text-number]3[.c-text-number][.c-number][.c-number][.c-highlighted-number]
Stylisation du stroke d’un texte
Il est possible d’aller encore plus loin dans la créativité et la flexibilité dans ses designs, en ajoutant un outline à ses textes. On peut même imaginer intégrer cette fonctionnalité dans les animations.
[.c-highlighted-number][.c-text-number]4[.c-text-number][.c-number][.c-number][.c-highlighted-number]
[.c-box-inline-pink]Affichage dynamique du CSS[.c-box-inline-pink]
En [.c-highlighted][.c-big-word]CSS[.c-big-word][.c-wave-pink][.c-wave-pink][.c-highlighted], la fenêtre d'affichage (viewport) est la zone de la fenêtre du navigateur qui est utilisée pour afficher une page. La taille de la fenêtre d'affichage peut être affectée par la taille de l'appareil utilisé et par le niveau de zoom.
[.c-row-flex-reverse-tablet][.c-box-wow_wrapper][.c-box-wow_copy-2][.c-box-wow_copy-2][.c-box-wow_copy][.c-box-wow_copy][.c-box-wow][.c-wow-heading]L'astuce du chef🤯[.c-wow-heading][.c-text-center]Copie colle les éléments que tu veux pour éviter d'oublier un bout de code ![.c-text-center][.c-box-wow][.c-box-wow_wrapper][.c-text-column][.c-text-22]Les unités viewport-height (VH) et viewport-width (VW) sont souvent utilisées car elles ajustent directement la mise en page en fonction de la taille du viewport.[.c-text-22][.c-text-column][.c-row-flex-reverse-tablet]
Les navigateurs mobiles ont introduit des barres d'outils dynamiques qui peuvent apparaître ou disparaître lorsque le visiteur d'un site fait défiler la page, ce qui peut entraîner la coupure d'éléments fixes et affecter la qualité globale de l'expérience du visiteur sur le site.
Aujourd'hui, Webflow intègre de nouvelles unités CSS de largeur et de hauteur [.c-text-disabled](petites, grandes et dynamique)[.c-text-disabled]. Ces nouvelles unités permettent de s'assurer que les les éléments fixes ne soient pas coupés par une barre d'outils sur les appareils mobiles.
[.c-ncf-tooltip][.c-however]Passe ta souris ici ![.c-however][.c-ncf-box][.c-arrow-blue][.c-arrow-blue][.c-ncf-logo][.c-ncf-logo][.c-text-white]Toi aussi tu veux connaître toutes les astuces Nocode ? EASY ![.c-text-white][.c-ncf-box][.c-ncf-tooltip]
Text sizes
Text size 16px
[.c-text-16]ici ton texte[.c-text-16]
Text size 18px
[.c-text-18]ici ton texte[.c-text-18]
Text size 20px
[.c-text-20]ici ton texte[.c-text-20]
Text size 22px
[.c-text-22]ici ton texte[.c-text-22]
Text size 24px
[.c-text-24]ici ton texte[.c-text-24]
Text size 26px
[.c-text-26]ici ton texte[.c-text-26]
Text size 28px
[.c-text-28]ici ton texte[.c-text-28]
Text size 30px
[.c-text-30]ici ton texte[.c-text-30]
Text size 32px
[.c-text-32]ici ton texte[.c-text-32]
Text styles
Text center
[.c-text-center]ici ton texte[.c-text-center]
however
[.c-however]ici ton texte[.c-however]
Bitter Font
[.c-text-bitter]ici ton texte[.c-text-bitter]
Dot Underline
[.c-text-dot-underline]ici ton texte[.c-text-dot-underline]
Text Disabled
[.c-text-disabled]ici ton texte[.c-text-disabled]
Text bg pink
[.c-text-bg-pink]ici ton texte[.c-text-bg-pink]
Rich Texts
[.c-highlighted]ici ton texte[.c-highlight-yellow][.c-highlight-yellow][.c-highlighted]
better
[.c-highlighted][.c-big-word]mot[.c-big-word][.c-circle-blue][.c-circle-blue][.c-highlighted]
better
[.c-highlighted][.c-big-word]mot[.c-big-word][.c-circle-yellow][.c-circle-yellow][.c-highlighted]
Dashboard
[.c-highlighted][.c-big-word]mot[.c-big-word][.c-circle-pink][.c-circle-pink][.c-highlighted]
better
[.c-highlighted][.c-text-pink]mot[.c-text-pink][.c-circle-black][.c-circle-black][.c-highlighted]
Style
[.c-box-inline-blue]Ton texte[.c-box-inline-blue]
Si tu veux aussi le style de texte :
[.c-box-inline-blue][.c-h1-blue]Ton texte[.c-h1-blue][.c-box-inline-blue]
Si tu veux aussi le style de texte :
[.c-box-inline-blue][.c-h1-blue]Ton texte[.c-h1-blue][.c-box-inline-blue]
Style
[.c-box-inline-yellow]Ton texte[.c-box-inline-yellow]
Si tu veux aussi le style de texte :
[.c-box-inline-yellow][.c-h1-black]Ton texte[.c-h1-black][.c-box-inline-yellow]
Si tu veux aussi le style de texte :
[.c-box-inline-yellow][.c-h1-black]Ton texte[.c-h1-black][.c-box-inline-yellow]
Style
[.c-box-inline-pink]Ton texte[.c-box-inline-pink]
Si tu veux aussi le style de texte :
[.c-box-inline-pink][.c-h1-pink]Ton texte[.c-h1-pink][.c-box-inline-pink]
Si tu veux aussi le style de texte :
[.c-box-inline-pink][.c-h1-pink]Ton texte[.c-h1-pink][.c-box-inline-pink]
Elements
[.c-baloo-border]ici ton texte[.c-baloo-border]
short
[.c-highlighted][.c-big-word]ici ton texte[.c-big-word][.c-wave-pink][.c-wave-pink][.c-highlighted]
short
[.c-highlighted][.c-big-word]ici ton texte[.c-big-word][.c-wave-yellow][.c-wave-yellow][.c-highlighted]
short
[.c-highlighted][.c-big-word]ici ton texte[.c-big-word][.c-wave-black][.c-wave-black][.c-highlighted]
1
[.c-highlighted-number][.c-text-number]ici ton chiffre[.c-text-number][.c-number][.c-number][.c-highlighted-number]
Components
Et bim
[.c-row-flex][.c-row-flex-vertical][.c-baloo-border]Et bim[.c-baloo-border][.c-nocode][.c-nocode][.c-row-flex-vertical][.c-column-brain][.c-column-brain][.c-row-flex]
Heading Wow Box
La petite phrase qui va bien
Ici le texte sur la colonne de droite, sans être trop long :)
[.c-row-flex-reverse-tablet][.c-box-wow_wrapper][.c-box-wow_copy-2][.c-box-wow_copy-2][.c-box-wow_copy][.c-box-wow_copy][.c-box-wow][.c-wow-heading]Ton titre[.c-wow-heading][.c-text-center]Ton texte[.c-text-center][.c-box-wow][.c-box-wow_wrapper][.c-text-column][.c-text-22]Et ici le texte qui va sur la colonne de droite (pas trop long)[.c-text-22][.c-text-column][.c-row-flex-reverse-tablet]
Un petit texte mis en avant dans la card !
Un petit texte mis en avant dans la card !
Un petit texte mis en avant dans la card !
Un petit texte mis en avant dans la card !
A voir si utile...
Passe ta souris ici !
Toi aussi tu veux connaître toutes les astuces Nocode ? EASY !
[.c-ncf-tooltip][.c-however]Passe ta souris ici ![.c-however][.c-ncf-box][.c-arrow-blue][.c-arrow-blue][.c-ncf-logo][.c-ncf-logo][.c-text-white]Toi aussi tu veux connaître toutes les astuces Nocode ? EASY ![.c-text-white][.c-ncf-box][.c-ncf-tooltip]
Banque d'images
[.c-hand-left]
[.c-hand-right]
[.c-nocode]
[.c-code]
[.c-bright]
[.c-spiral]
[.c-idea]
[.c-eye]