Fait vous ÊTES nouveau à Webflow, hein? Débutons notre.

Guide de conception visuelle Web

guide Ce visuel vous Guidera A travers les concepts de conception de sites Web Important de respondent et commenter les Mettre en œuvre l'intérieur Webflow visuellement.

# 1 Le modèle de boîte

Structure du site Compréhension

Tous les éléments of this page are Tous les blocs à l'intérieur d'Autres blocs (aka "Box Model"). When vous Faites glisser les éléments web, vous les Faites glisser d'bloc non et de les deposer Dans Une Autre. Voilà un commentaire HTML Fonctionne!

super-PLAN

75 $ / Mon

Parfait pour Toute entreprise with 20 employees OÜ plus.

500 Go de stockage
1 Million Vues
20 Collaborateurs
50 Réseaux sociaux
Prime de Soutien

Ce que tu vois

Remarque: Vous de commentaire Concevoir le journey comme ça Avec Les concepts ci-Dessous.

Qu'est-ce que les blocs Il en est fait de

Div bloquer

H2 Intitulé super-PLAN

Bloc de texte $ 75 / Mon

Paragraphe Parfait pour Toute entreprise with 20 employees OÜ plus.

Liste

Liste article
500 Go de stockage
Liste article
1 Million Vues
Liste article
20 Collaborateurs
Liste article
50 Réseaux sociaux
Liste article
Prime de Soutien

essayer vous-même

Faites glisser CE ... paragraphés

ASTUCE: . Cliquez et Faites glisser l'Élément de paragraphe ci-dessus et de le deposer in the cadre du prix sur la droite You can also UTILISER des raccourcis Comme le copieur-coller (Ctrl + C, Ctrl + V), copieur tout en Faisant glisser (en alt Maintenant), et supprimer (supprimer).

Dans le bloc violette ...

Toutes les Fonctionnalités sans les limitations. Tout Ce que tu peux manger. (Céci is a Élément de paragraphe)

super PLAN

75 $ / Mon

INFO: Céci is the Façon Dont la structure de HTML et web Fonctionne - éléments empilent in the other ous à l'intérieur de l'Autre. Voilà la Meilleure Façon de Construire Un site web et fluide réactif.

# 2 éléments de présentation

Éléments de mise en page de la base

. Ajouter des éléments d' un site Web en Votre Cliquant sur l'icône [+] in the coin supérieur gauche VOICI Quelques-uns des éléments les plus les Fondamentaux de la structure de Dans la conception web - sections, des conteneurs et des colonnes.

Une section Prend 100% de la largeur de la fenêtre du Navigateur si vous ajoutez à l'Organe (la toile d'ONU le site web).
Il is idéal versez les grandes sections horizontales d'ONU le site web.

Section Élément

Un conteneur is bloc non 960px centré in the milieu du Navigateur. Habituellement, la Plupart du contenu du site is added à l'intérieur D'UN conteneur AFIN Qu'il Soit centré. Ous to a Élément de Les containers are généralement ajoutés au corps la Section.

conteneur Element

Ajout de colonnes are Le Moyen Le plus rapide versez Construire une mise en place la page d'en non web unique. Pour le modificateur Nombre de colonnes Que vous Voulez Dans les Différents Appareils, il Suffit de cliquer sur l'icône de vitesse Dans le coin en haut à droite versez Acceder aux paramêtres de l'élément.

Colonnes Responsive

# 3 Concevoir with CSS

Styling éléments de Vos

Selectionnez non Élément et ajouter juin classé dans le panneau de bon le style (Brush Icône). Dans this panneau, vous can ajouter du texte et des styles graphiques est comme la couleur de La police, la hauteur de la ligne, les dégrade, les frontières, les ombres, et plus encore. Web design visuel is bien plus de fun Que de codeur de droit?

bouton de conception exemple

Style de vous-même

Ajouter au panier ➜ Restaurant

CONSEIL: . Ce bouton a "Button" de déjà de juin de classe with CERTAINS styles de la base Tout en Utilisant le panneau de style - Selectionnez Le Bouton ET Essayez nos D'Ajouter Le gradient, frontière, les pièces, les ombres intérieur Les / EXTERIEUR, les styles de PlaceZ de l'Etat, et de transition verser les styles hover arrondi.

Qu'est-ce que VOUS AVEZ created

Texte du bouton ➜

appliquer la classe 'bouton'

Bouton de texte

CONSEIL: . Dans la conception web, vous can appliquer à juin classe de verser les éléments Nombreux faire paraître la same Appliquer la classe "Bouton" que vous versez le privilège dessiné ci-dessus en Cliquant sur le [+] au dessus du "Button" panneau de style et en Tapant versez Pressothérapie this classe.

Exemple Form Design

Merci!

Votre roches mes chaussettes!

Oops! Quelque chose a mal tourné LORs de la soumission du formulaire :(

Style de vous-même

Merci! Votre request was recue!

Oops! Quelque chose a mal tourné LORs de la soumission du formulaire :(

ASTUCE: D'ABORD Créer des classes de verser les champs et non bouton texte (appliquer la same classe versez les Deux champs). Puis changer les styles de bordure, couleur de fond, et ajouter des styles Pour le vol stationnaire Et Les Pressés Etats. Ne pas Oublier de coiffer l'état "Succès" pour l'Élément de formulaire, found in the panneau de configuration (icône d'engrenage en haut à droite).

exemple de Typographie

Lakewood Stout

The Dark Beer de Lakewood, Colorado

La grosse Légendaire is née de la belle le mariage d'un homme de la montagne et sa a choisi la , plus aimée, la Ville de Lakewood in the Colorado. L'homme de la montagne aimait also sa hache et son carabine de tir unique , Remington, but pas Autant Qu'il aimait sa ville. Il rêvait de Ses rivières et de montagnes majestueuses flowy. Fait, il a Nommé fils , plus gros après Elle. aINSI, la grosse Glorieuse Était née sur le cœur d'un homme de la montagne.

«Je Fabriqué this beer Glorieuse verser Exprimer mon amour éternel pour ma belle ville".

- Mountain Man

Style de vous-même

Lakewood Stout

The Dark Beer de Lakewood, Colorado

La grosse Légendaire is née de la belle le mariage d'un homme de la montagne et sa a choisi la , plus aimée, la Ville de Lakewood in the Colorado. L'homme de la montagne aimait also sa hache et son carabine de tir unique , Remington, but pas Autant Qu'il aimait sa ville. Il rêvait de Ses rivières et de montagnes majestueuses flowy. Fait, il a Nommé fils , plus gros après Elle. aINSI, la grosse Glorieuse Était née sur le cœur d'un homme de la montagne.

«Je Fabriqué this beer Glorieuse verser Exprimer mon amour éternel pour ma belle ville".

- Mountain Man

ASTUCE: . Allez-y et ajoutez la typographie et styles Personnalisés à l'arrière-plan de Pointe froide: If you ajoutez les styles de typographie à l' ONU bloc de parent, l'ensemble de Ses éléments de texte enfants hériteront de styles CES de texte . En CSS this is comportement Appelé "cascade".

# 4 Disposition with CSS

Layouts Bâtiment web with CSS

Similaire à ajouter du style de un élément non, verser changeur la situation d'ONU Élément d'Abord Ajouter Une classe, Puis modificateur les proprietes de la position. Vous apprendrez à Connaître margin, padding, affichage, Float, débordement, et la position.

Marge & Rembourrage exemple

Nouvelles briser

Agents de Raid Gunshop, Pressothérapie des armes

owner de magasin Steve Witmere déjà Été arrêté pour le Commerce blackmarket bazooka. Confesse à la participation à la mafia russe.

Parmi les bazookas Nombreux trouvés in the Gunshop des Dizaines de Avait Milliers de peintures obtenus illégalement évalués à $ 10,000 at least. Thats ce non lourd prix à payer versez CES Peintures idiotes.

Description: . Et le remplissage marge PEUVENT Être trouvés Dans la palette de la position du panneau style Marge Ajout va ajouter de l'espace à l'extérieur d'bloc un, et de rajouter du rembourrage va ajouter de l'espace à l'intérieur d'bloc un.

Ajouter Yourself Espacement

Nouvelles briser

Agents de Raid Gunshop, Pressothérapie des armes

owner de magasin Steve Witmere déjà Été arrêté pour le Commerce blackmarket bazooka. Confesse à la participation à la mafia russe.

Parmi les bazookas Nombreux trouvés in the Gunshop des Dizaines de Avait Milliers de peintures obtenus illégalement évalués à $ 10,000 at least. Thats ce non lourd prix à payer versez CES Peintures idiotes.

CONSEIL: Commencez par ajouter Rembourrage sur Tous les Côtes du bloc gris principale (élément parent). Puis ajouter marge Inférieure à ajouter espacement Entre les éléments de texte iNDIVIDUELS (Enfants éléments). Astuce: Maintenez SHIFT tout en Utilisant le Contrôle de marge / padding à appliquer à tous les Côtes et ALT à appliquer also à la partie adverse.

«display: block 'exemples

This is reglee rubrique à display: block

Ce paragraphés is regle sur écran:. Bloc Fait, il remplit la largeur de la fenêtre Parent et empile - sur d'Autres blocs.

Bouton with display: block affichage Bouton de départ: bloc Ce lien est Couleur Mis à display: block mal Ce lien de Est à display: block

Description: reglage de l'affichage du Cadre de ELEMENTs Bloc féra les empiler les uns sur les Autres et de REMPLIR à 100% de la largeur de parent fils de bloc. La Plupart des éléments have fait this règlage par défaut.

Faites-les de display: block 'vous

Céci is a bouton Ce bouton affichage des privilèges d'are: inline par défaut les privilèges are display: inline par défaut

ASTUCE: Selectionnez CES éléments (Inline Block CERTAINS are et CERTAINS are en-ligne) et les affichage du Rendre: bloc AFIN Qu'ils les empilent uns des Autres.

'Affichage: inline-block' exemple

TELECHARGEZ Modificateur Supprimer

Description: . Reglage de l'affichage du Cadre de éléments d'inline-block féra la largeur du bloc conforme à la largeur du contenu à l'intérieur Cela signifié Que Si their contenu is Assez petit, ILS PEUVENT empiler les uns à côté des Autres. You can copieur coller les boutons ci-dessus et de modificateur le texte à l'intérieur verser voir commentaire ACDE Fonctionne.

Rendre inline-block-vous

Télécharger Modificateur

ASTUCE: Selectionnez les éléments ci-Dessus et de les Rendre display: inline-block AFIN Qu'ils empilent côté de l'Autre. Vous verrez Que les images pile à côté des boutons. Astuce: Suppression des boutons et des images en blocs concepts distincts Div féra les empiler les uns sur les Autres (Parcé Div affichage blocs de are: bloc par défaut).

Float exemple

Merci! Votre request was recue!

Oops! Quelque chose a mal tourné LORs de la soumission du formulaire :(

Description: reglage de l'affichage:. Inline-block ous flottant (this exemple) are les Façons les plus de d'empiler les courantes éléments Côte à Côte Dans this exemple, je vais vous montrer Comment faire flotter journey.

Float-même

Merci! Votre request was recue!

Oops! Quelque chose a mal tourné LORs de la soumission du formulaire :(

ASTUCE: Selectionnez D'ABORD le champ de texte, faire flotter: gauche et lui donner ou juin largeur de pourcentage , . (Ex: 60%) Réglez ensuite le bouton verser float: left et AINSI Mettre Une Autre largeur de pourcentage , (ex: 40% ) Pour Que les Deux ajouter JUSQU'A 100%. Voilà juin Façon manuelle versez tout forceur élément A empiler côte à côte.

Absolute Position Exemple

My Cup of Joe

This photo is a texte de légende.

Sélection

Description: Élément non de Si vous définissez Position absolue, vous Serez en mesure de le positionneur Dans importe où à l'intérieur de fils bloc parent. Verser parent Choisir le à positionneur à l'intérieur de, la position de definition de l ' élément par rapport parent sur. Remarque: when des éléments are absolue positionné au-ILS flottent dessus d'Autres éléments.

Coiffez It Yourself

My Cup of Joe

Céci is une légende de photo pour ma tasse Préférée de Joe.

Sélection

ASTUCE: . Selectionnez D'ABORD L'Element image Wrapper et définir sa position de sur Relative . Ensuite, Selectionnez la légende, Faites-le glisser Dans l'image Position Fixé de sa à Absolute et Choose 7e prédéfini Pour le positionneur insigne en vedette Dans le bon Endroit Choisir le 2ème et préréglage positionneur manuellement.

# 5 de type en cascade

Styles Utilisant cascade

You can Facilement Créer des variations d'ONU Élément Par l'ajout de cours supplementaires au-dessus de l'Autre et en ajoutant Différents des classes de CES styles. CONSULTEZ l'exemple ci-dessous Où nous Avons Différentes variations d'ONU Bouton.

Exemple Commune Bouton Styles

Concevoir les boutons vous-même

Bouton vert

Bouton ROUGE

ASTUCE: . Selectionnez le Deuxième bouton et click sur le [+] a côte de la Classe A Ajouter une Autre classe . You can APPELER ACDE «vert» . Puis de Lui Donner des styles différents styles CÉS remplacent les styles de la base de la première classe. Ensuite, le bouton rouge Créez.

# 6 des questions des Médias

Conception versez les Différents Appareils

Dans Webflow vous concevez your Site Web for the Périphériques de première sortie de bureau, des modifications Puis apportez sur les Appareils mobiles (Acceder aux Icônes du périphérique Dans la barre du haut). AJOUT de styles Dans apparatus non mobiles Remplace les styles de bureau.

Intitulé exemple Responsive

Céci is a texte de titre Qui DEVIENT ainsi Petit Dans Les Appareils mobiles.

Description: . This is rubrique Vraiment Grand bureau sur le, but Nous Voulons Qu'il Soit plus de Petit - sur les Appareils mobiles Cliquez Dans les Dispositifs Dans la barre du haut to see that la taille du texte et la ligne de hauteur d' un Réduite ETE.

Fix It Yourself

Faire CE Grand texte de cap deviennent, plus petits Dans Les Appareils mobiles.

ASTUCE: Selectionnez cette rubrique sur le dispositif de tablette et de faire la taille de la police de et de la hauteur de la ligne , plus petite. Faites de same verser les Appareils de téléphone Paysage et Portrait téléphone. You can see that the

Par exemple Bouton Responsive

Bouton de texte

Description: . This is bouton Destiné à Être petit sur les Écrans de voiture bureau il is facile de cliquer Avec le curseur de la souris Nous l'Avons fait , plus sur les Appareils les mobiles de Sorte Qu'il est ainsi facile de cône with le doigt

Bouton de texte

Fix It Yourself

ASTUCE: . Aller à la tablette et d'augmentateur le rembourrage de la touche Quand vous Faites ACDE il ignorera les styles Précédents Correctifs sur le bureau et en cascade vers le bas pour tous les Dispositifs ci-dessous Tablet.

COLONNES exemple Responsive