Cliquez sur le W pour revenir au tableau de bord et de créer un nouveau site Web!

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

BIENVENU A TOUS..

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 / LUN.

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 vous voyez

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

Que blocs Il est fait de

Div Bloquer

H2 Rubrique super-PLAN

Bloc de texte $ 75 / LUN.

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

Liste

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

essayer vous-même

Faites glisser ce paragraphe ...

Toutes les fonctionnalités sans les limitations. Tout ce que vous pouvez manger. (Il se agit d'un élément de paragraphe)

CONSEIL: Cliquez et faites glisser l'élément de paragraphe ci-dessus et déposez-le sous le 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 / LUN.

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

# 2 éléments de présentation

Éléments de mise en page 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.

A 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 Élément

Un conteneur est un bloc 960px centré au 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, hauteur de la ligne, les gradients, 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, placez styles de l'Etat, et de transition pour les styles hover arrondi.

Qu'est-ce que vous avez créé

Bouton texte ➜

appliquer la classe 'bouton'

Bouton texte

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

Exemple Form Design

Merci!

Votre roches mes chaussettes!

Oops! Quelque chose se est mal passé tout en soumettant le formulaire :(

Coiffez-vous

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

Oops! Quelque chose se est mal passé tout en soumettant le formulaire :(

ASTUCE: créer des premières classes pour les champs et un bouton texte (appliquer la même classe à 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 oubliez pas 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 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, le gros glorieuse était née sur le cœur d'un homme de la montagne.

"Je ai 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, le gros glorieuse était née sur le cœur d'un homme de la montagne.

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

- Mountain Man

CONSEIL: Allez-y et ajoutez la typographie et styles personnalisés à l'arrière-plan. Pointe froide: Si vous ajoutez styles de typographie à un bloc parent, tous ses éléments de texte enfants hériteront les styles de texte. En CSS ce comportement est appelé "cascade".

# 4 Mise en page avec CSS

Layouts bâtiment 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 implication dans 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. Voilà une 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 ajoutera espace 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 implication dans 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. Voilà une 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 se appliquer à tous les côtés et ALT se appliquer aussi à la partie adverse.

'display: block' exemples

Cette rubrique est réglée sur 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 de réglage de éléments à Block rendre empilent 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

Ce 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 se empilent les uns sur les autres.

'Display: inline-block' exemple

Téléchargez Modifier Supprimer

Description: Réglage de l'affichage de réglage 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 se empiler les unes à côté des autres. Vous pouvez copier coller les boutons ci-dessus et 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 se empilent les uns à côté des autres. Vous verrez que les images se empilent à côté des boutons. Astuce: Suppression des boutons et des images en blocs distincts Div leur fera se empilent les uns sur les autres (parce Div blocs sont display: block par défaut).

Flotter exemple

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

Oops! Quelque chose se est mal passé tout en soumettant le 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 vous-même

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

Oops! Quelque chose se est mal passé tout en soumettant le 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 et ainsi définir une autre largeur de pourcentage (ex: 40%) pour que les deux se additionnent à 100%. Ce est une façon manuelle pour forcer ne importe quel élément à empiler côte à côte.

Absolute Position Exemple

My Cup of Joe

Ce est un texte de légende photo.

Sélection

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

Style de it Yourself

My Cup of Joe

Ce 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 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.

Partagée 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 l'appeler «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.

Rubrique 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 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

Bouton texte

Description: Ce bouton est destiné à être petite sur les écrans de bureau parce que ce 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

Bouton texte

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