Donc vous êtes nouveau à Webflow, hein? Débutons.

Guide de Visual Design Web

Ce guide visuel vous guidera à travers les concepts de conception de sites Web répondant importants et comment les mettre en œuvre visuellement l'intérieur Webflow.

# 1 Le modèle de boîte

Structure du site compréhension

Tous les éléments de cette page sont tous les blocs à l'intérieur d'autres blocs (aka "Box Model"). Lorsque vous faites glisser les éléments web, vous les faites glisser d'un bloc et de les déposer dans une autre. Voilà comment fonctionne HTML!

super-PLAN

$ 75 / mon

Parfait pour toute entreprise avec 20 employés ou plus.

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

Ce que tu vois

Note: Vous comprendrez comment concevoir quelque chose comme ça avec les concepts ci-dessous.

Que blocs Il est fait de

Div Bloquer

H2 Intitulé super-PLAN

Bloc de texte $ 75 / mon

Paragraphe Parfait pour toute entreprise avec 20 employés ou 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 paragraphe ...

Toutes les fonctionnalités sans les limitations. Tout ce que tu peux manger. (Ceci est un élément de paragraphe)

ASTUCE: Cliquez et faites glisser l'élément de paragraphe ci-dessus et de le déposer dans le cadre du prix sur la droite. Vous pouvez également utiliser des raccourcis comme le copier-coller (Ctrl + C, Ctrl + V), copier tout en faisant glisser (en maintenant alt), et supprimer (delete).

Dans le bloc violet ...

Super PLAN

$ 75 / mon

INFO: Ceci est la façon dont la structure HTML et web fonctionne - éléments pile dans l'autre ou à l'intérieur de l'autre. Voilà la meilleure façon de construire un site web fluide et réactif.

# 2 éléments de présentation

Les éléments de présentation de base

Ajouter des éléments à votre site Web en cliquant sur l'icône [+] dans le coin supérieur gauche. Voici quelques-uns des éléments les plus fondamentaux de la structure 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'un site web).
Il est idéal pour les grandes sections horizontales d'un site web.

Section Element

Un conteneur est un bloc 960px centré dans le milieu du navigateur. Habituellement, la plupart du contenu du site est ajouté à l'intérieur d'un conteneur afin qu'il soit centré. Les conteneurs sont généralement ajoutés à l'Organe ou un élément de la Section.

Conteneur Element

Ajout de colonnes sont le moyen le plus rapide pour construire une mise en page d'un site web unique. Pour modifier le 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 pour accéder aux paramètres de l'élément.

Colonnes Responsive

# 3 Concevoir avec CSS

Styling vos éléments

Sélectionnez un élément et ajouter une classe dans le panneau de bon style (Brush Icône). Dans ce panneau, vous pouvez ajouter du texte et des styles graphiques comme la couleur de la police, la hauteur de la ligne, les dégradés, les frontières, les ombres, et plus encore. Web design visuel est bien plus fun que de coder droit?

bouton exemple de conception

Ajouter au panier ➜

Coiffez-vous

Bouton texte ➜

CONSEIL: Ce bouton a déjà une "Button" de classe avec certains styles de base. Tout en utilisant le panneau de style - Sélectionnez le bouton et essayez d'ajouter le gradient, frontière, les coins, les ombres intérieur / extérieur, hover styles de l'Etat, et de la transition pour les styles hover arrondi.

Qu'est-ce que vous avez créé

Bouton texte ➜

appliquer la classe 'bouton'

Button Text

CONSEIL: Dans la conception web, vous pouvez appliquer une classe à de nombreux éléments pour les faire paraître la même. Appliquer la classe "Bouton" que vous dessiné pour le lien ci-dessus en cliquant sur le [+] au dessus du panneau de style et en tapant "Button" pour trouver cette classe.

Exemple Form Design

Merci!

Votre roches mes chaussettes!

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

Coiffez-vous

Merci! Votre demande a été reçue!

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

ASTUCE: créer d'abord des classes pour les champs et un bouton texte (appliquer la même classe pour les deux champs). Puis changer les styles de bordure, couleur de fond, et ajouter des styles pour le vol stationnaire et les Etats pressés. Ne pas oublier de coiffer l'état "Succès" pour l'élément de formulaire, trouvé dans le 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 est née de la belle le mariage d'un homme de la montagne et sa chose la plus aimée, la ville de Lakewood dans le Colorado. L'homme de la montagne aimait aussi sa hache et son unique tir carabine Remington, mais pas autant qu'il aimait sa ville. Il rêvait de ses rivières et de montagnes majestueuses flowy. Donc, il a nommé son plus gros après elle. Ainsi, la stout glorieuse était née sur le cœur d'un homme de la montagne.

«Je Fabriqué cette bière glorieuse pour exprimer mon amour éternel pour ma belle ville."

- Mountain Man

Coiffez-vous

Lakewood Stout

The Dark Beer de Lakewood, Colorado

La grosse légendaire est née de la belle le mariage d'un homme de la montagne et sa chose la plus aimée, la ville de Lakewood dans le Colorado. L'homme de la montagne aimait aussi sa hache et son unique tir carabine Remington, mais pas autant qu'il aimait sa ville. Il rêvait de ses rivières et de montagnes majestueuses flowy. Donc, il a nommé son plus gros après elle. Ainsi, la stout glorieuse était née sur le cœur d'un homme de la montagne.

«Je Fabriqué cette bière glorieuse pour 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. Pointe froide: Si vous ajoutez les styles de typographie à un bloc de parent, l'ensemble de ses éléments de texte enfants hériteront de ces styles de texte. En CSS ce comportement est appelé "cascade".

# 4 Disposition avec CSS

Layouts Building Web avec CSS

Similaire à ajouter du style à un élément, pour changer la position d'un élément d'abord ajouter une classe, puis modifier les propriétés de position. Vous apprendrez à connaître margin, padding, affichage, Float, débordement, et position.

Marge & Rembourrage exemple

Briser Nouvelles

Agents fédéraux Raid Gunshop, trouver des armes

propriétaire de magasin Steve Witmere déjà été arrêté pour le commerce blackmarket bazooka. Avoue à la participation à la mafia russe.

Parmi les nombreux bazookas trouvés dans le Gunshop avait des dizaines de milliers de peintures obtenus illégalement évalués à au moins $ 10,000. Thats un lourd prix à payer pour ces peintures idiotes.

Description: marge et le rembourrage peuvent être trouvés dans la palette de position du panneau Style. Marge Ajout va ajouter de l'espace à l'extérieur d'un bloc, et de rajouter du rembourrage va ajouter de l'espace à l'intérieur d'un bloc.

Ajouter espacement Yourself

Briser Nouvelles

Agents fédéraux Raid Gunshop, trouver des armes

propriétaire de magasin Steve Witmere déjà été arrêté pour le commerce blackmarket bazooka. Avoue à la participation à la mafia russe.

Parmi les nombreux bazookas trouvés dans le Gunshop avait des dizaines de milliers de peintures obtenus illégalement évalués à au moins $ 10,000. Thats un lourd prix à payer pour ces peintures idiotes.

CONSEIL: Commencez par ajouter rembourrage sur tous les côtés du bloc gris principal (é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ôtés et ALT à appliquer également à la partie adverse.

'display: block' exemples

Cette rubrique est réglée à display: block

Ce paragraphe est réglé sur display: block. Donc, il remplit la largeur de la fenêtre parent et empile sur d'autres blocs.

Bouton avec display: block Bouton avec display: block Ce lien est mis à display: block Ce lien est mis à display: block

Description: Réglage de l'affichage du Cadre de éléments Block fera les empiler les uns sur les autres et de remplir à 100% de la largeur de son bloc parent. La plupart des éléments ont fait ce réglage par défaut.

Faites-les 'display: block' vous

Ceci est un bouton Ce est un bouton liens sont display: inline par défaut Liens sont display: inline par défaut

ASTUCE: Sélectionnez ces éléments (certains sont Inline Block et certains sont en-ligne) et les rendre display: block afin qu'ils empilent les uns des autres.

'Display: inline-block' exemple

Téléchargez Modifier Supprimer

Description: Réglage de l'affichage du Cadre de éléments d'inline-block fera la largeur du bloc conforme à la largeur du contenu à l'intérieur. Cela signifie que si leur contenu est assez petit, ils peuvent empiler les uns à côté des autres. Vous pouvez copier coller les boutons ci-dessus et de modifier le texte à l'intérieur pour voir comment cela fonctionne.

rendre inline-block-vous

Télécharger Modifier

ASTUCE: Sélectionnez 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 distincts Div fera les empiler les uns sur les autres (parce Div blocs sont display: block par défaut).

Float exemple

Merci! Votre demande a été reçue!

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

Description: Réglage de l'affichage: inline-block ou flottant (cet exemple) sont les façons les plus courantes d'empiler les éléments côte à côte. Dans cet exemple, je vais vous montrer comment faire flotter quelque chose.

Float-même

Merci! Votre demande a été reçue!

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

ASTUCE: Sélectionnez d'abord le champ de texte, faire flotter: gauche et lui donner une largeur de pourcentage (ex: 60%). Réglez ensuite le bouton pour float: left ainsi et mettre une autre largeur de pourcentage (ex: 40%) pour que les deux ajouter jusqu'à 100%. Voilà une façon manuelle pour forcer tout élément à empiler côte à côte.

Absolute Position Exemple

My Cup of Joe

Cette photo est un texte de légende.

Sélection

Description: Si vous définissez Position Absolute sur un élément, vous serez en mesure de le positionner dans n'importe où à l'intérieur de son bloc parent. Pour choisir le parent à positionner à l'intérieur de, défini la position de l'élément parent pour Relative. Remarque: Lorsque des éléments sont absolue positionné ils flottent au-dessus d'autres éléments.

Coiffez It Yourself

My Cup of Joe

Ceci est une légende de photo pour ma tasse préférée de Joe.

Sélection

ASTUCE: sélectionnez d'abord l'élément Image Wrapper et définir sa position sur Relative. Ensuite, sélectionnez la légende, faites-le glisser dans l'image fixé sa position à Absolute et choisissez la 7e prédéfini. Pour positionner le badge en vedette dans le bon endroit choisir le 2ème préréglage et positionner manuellement.

# 5 de style en cascade

Utilisant Styles cascade

Vous pouvez facilement créer des variations d'un élément par l'ajout de classes supplémentaires au-dessus de l'autre et en ajoutant différents styles sur ces classes. Consultez l'exemple ci-dessous où nous avons différentes variations d'un bouton.

Commune exemple bouton Styles

Concevoir les boutons vous-même

Bouton VERT

Bouton ROUGE

ASTUCE: Sélectionnez le deuxième bouton et cliquez sur le [+] à côté de la classe à ajouter une autre classe. Vous pouvez appeler cela «vert». Puis de lui donner des styles différents. Ces styles remplacent les styles de base de la première classe. Ensuite, créez le bouton rouge.

# 6 questions des médias

Conception pour les différents appareils

Dans Webflow vous concevez votre site Web pour la première périphériques de bureau, puis apportez des modifications sur les appareils mobiles (accéder aux icônes du périphérique dans la barre du haut). Ajout de styles dans un appareil mobile remplace les styles de bureau.

Intitulé exemple Responsive

Ceci est un texte de titre qui devient plus petit dans les appareils mobiles.

Description: Cette rubrique est vraiment grand sur le bureau, mais nous voulons qu'il soit plus petit sur les appareils mobiles. Cliquez dans les dispositifs dans la barre du haut pour voir ce que la taille du texte et la ligne de hauteur a été réduite.

Fix It Yourself

Faire ce grand texte de cap deviennent plus petits dans les appareils mobiles.

ASTUCE: Sélectionnez cette rubrique sur le dispositif de tablette et de faire la taille de la police et de la hauteur de la ligne plus petite. Faites de même pour les appareils de téléphone Paysage et Portrait téléphone. Vous pouvez voir que le

Exemple Button Responsive

Button Text

Description: Ce bouton est destiné à être petit sur les écrans de bureau car il est facile de cliquer avec le curseur de la souris. Nous l'avons fait plus sur les appareils mobiles de sorte qu'il est plus facile de taper avec le doigt

Button Text

Fix It Yourself

ASTUCE: Aller à la tablette et d'augmenter le rembourrage du bouton. Quand vous faites cela il ignorera les styles précédents fixés sur le bureau et en cascade vers le bas pour tous les dispositifs ci-dessous Tablet.

Colonnes Responsive exemple