Welcome
L'objectif de ce Style Guide est de vous aider à comprendre comment créer des pages sur le site de manière autonome et cohérente. Il affiche tous les éléments, symbols, outils et ressources utilisées pour créer le site? Chaque section débute avec un tutoriel pour vous aider à comprendre la suite.
Global Styles
Ce site est composé d'éléments dis "globaux" avec des symbols. Ces éléments intégrés sont présents dans chaque page et utilisent des styles CSS qui sont utilisés sur chaque page. Les styles sont ajoutés à une intégration afin que nous puissions voir le CSS à l'intérieur du Webflow Designer. N'hésitez pas à le mettre à jour et à le compléter.
Raccourcis
L'outil Designer de Webflow a beaucoup de raccourcis claviers qui peuvent aider à aller plus vite dans la conception des blocks. La manière la plus rapide pour utiliser ces raccourcis est d'utiliser Shift + K.
Supprimer les class inutiles
Une fois que vous avez terminé de créer des éléments / pages, ouvrez le Style Manager et cliquez sur Clean Up pour supprimer les classes inutiles. Faites de même pour les animations. Enfin, dans le panneau Assets, ouvrez-le en grand, sélectionnez tout et supprimez. Webflow éliminera automatiquement tous les visuels que vous n'avez pas utilisés.
Couleurs
Toutes les couleurs utilisées dans ce site sont sauvegardées comme globales comme échantillons dans le sélectionneur de couleur. Si vous devez utiliser une nouvelle couleur, sauvegardez-la comme échantillon. Les couleurs de textes sont sauvegardées comme suivant "text-color-grey".
Échantillons
Backgrounds
Texts
Gradients
HTML Tags
Utilisez les bases du HTML pour contrôler le style par défaut pour un élément en particulier. Paramétrez les styles de typographies dans les réglages globaux Body (All Pages) , cela permettra de régler toutes les typographies d'un seul coup. C'est une bonne pratique pour gérer toutes les fonts par défaut comme la famille, la taille etc... du H1 au H6. En savoir plus
H1 • Titre
H2 • Soustitre
H3 • Third Title
H4 • Fourth Title
H5 • Fifth Title
H6 • Sixth Title
Lorem ipsum 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.
Text LinksAll Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Heading Class
Les Heading (titres) aident les utilisateurs et le SEO à lire et comprendre le texte. Par exemple, For example, ils agissent comme des panneaux de signalisation pour les lecteurs et leur permettent de comprendre plus facilement de quoi parle un article ou une page. Les titres définissent également quelles parties de votre contenu sont importantes et montrent comment elles sont interconnectées. N'oubliez pas d'utiliser un seul H1 par page.
H1 • Heading-XLarge
H2 • Heading-Large
H3 • Heading-Medium
H4 • Heading-Small
H5 • Heading-XSmall
H6 • Heading-Tiny
Text Class
L'organisation de la typographie maintient votre marque professionnelle. Utilisez le préfixe de class text- sur un morceau de texte pour modifier la taille du texte.
text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-strikethrough
text-style-italic
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.
Text Weights
Style CSS de graisse de police pour rendre le texte plus ou moins gras.
Alignements de Text
Style text-align css pour que le texte ou d'autres éléments soient alignés à gauche, au centre ou à droite.
Rich Text
Un élément de texte enrichi (RTE) est parfait pour créer du contenu long pour les articles de blog, sur les pages, les biographies, etc. Au lieu d'ajouter des éléments individuels d'en-tête, de paragraphe, de liste ou d'image, vous pouvez double-cliquer dans un texte enrichi pour créer directement ces différents éléments de contenu. RTE permet également aux collaborateurs (par exemple, les membres de l'équipe ou les clients) d'éditer facilement du contenu riche dans l' Editor.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
-
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Buttons
Un button sert d'appel à l'action (CTA) et de liens vers des pages, des formulaires, des ressources, etc. Ils doivent être aussi universels et globaux que possible.
Icones
Utilisez des classes globales pour vos icônes afin de les gérer facilement tout au long du projet. Elles sont parfaites pour les logos d'entreprise, les éléments de pied de page, etc. Évitez de les utiliser sur des éléments qui nécessitent probablement une personnalisation unique sur tablette ou mobile. Veuillez importer des icônes au format SVG pour éviter la pixellisation. Si vous souhaitez les intégrer comme les icônes de médias sociaux ci-dessous, vous pouvez trouver plus d'icônes
ici et ajouter une propriété fill='currentColor' à l'intérieur du tag <svg> pour contrôler la couleur de l'icône via le style de couleur de police.
Tailles d'icones
Tailles icones 1x1
Social Media
Elements
En plus des éléments principaux présentés dans ce guide de style, Webflow propose de nombreux autres blocs de construction. Ce cours passe en revue tous les éléments disponibles, en indiquant des exemples courants et en faisant des suggestions pour vous aider à tirer le meilleur parti de chaque élément.
List
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Form
Custom Code
Les extraits suivants ont été utilisés dans ce projet. Il existe trois façons d'ajouter du code personnalisé à ce projet. Vous pouvez embed directement dans la page, insérer du code dans les réglages de page, ou l'héberger sur un autre serveur, puis l'intégrer en tant que fichier de script. Vous pouvez également télécharger le fichier de script dans votre projet en tant que document et l'intégrer.
Dynamic Copyright (footer)
<script>
const year = new Date().getFullYear();
$('.year').text(year);
</script>
Tracking
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src=“https://www.googletagmanager.com/ns.html?id=GTM-NT5MGGX” height="0" width="0" style="display: none; visibility: hidden;"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Resources
Faites passer votre niveau Webflow à l'étape supérieur avec ces outils et services.
Finsweet Attributes
Donnez à votre site Web Webflow des super pouvoirs, tels que le filtrage avancé, la recherche et bien plus encore.
Flowbase
Flowbase est le plus grand site de ressources Webflow, avec des composants, des modèles et des guides premium.
Webflow University
Apprenez la conception Web, le développement et les tenants et les aboutissants de Webflow grâce à des didacticiels complets.
Default Easings
Structure
Voici la structure globale du site Youneat.