Así que usted es nuevo en Webflow, ¿eh? ¡Entremos en.

Guía de Diseño Visual Web

Esta guía visual le guiará a través de importantes web sensible conceptos de diseño y cómo implementarlas visualmente el interior Webflow.

# 1 El modelo de caja

Estructura del sitio web Entendimiento

Todos los elementos de esta página están todos los bloques dentro de otros bloques (también conocido como "Box Model"). Al arrastrar elementos de la web, los arrastra de un bloque y colocar en otra. Así es como funciona HTML!

súper PLAN

$ 75 / mes

Perfecto para cualquier negocio con 20 empleados o más.

500 GB de almacenamiento
1 millón de páginas vistas
20 Colaboradores
50 Redes Sociales
Prima Soporte

Lo que se ve

Nota: Usted entenderá cómo diseñar algo como esto con los conceptos siguientes.

Lo Bloques Está hecho de

Div Bloquear

H2 Heading súper PLAN

Bloque de Texto $ 75 / mes

Párrafo perfecto para cualquier negocio con 20 empleados o más.

Lista

Lista de artículos
500 GB de almacenamiento
Lista de artículos
1 millón de páginas vistas
Lista de artículos
20 Colaboradores
Lista de artículos
50 Redes Sociales
Lista de artículos
Prima Soporte

hacerlo por uno mismo

Arrastre este párrafo ...

Todas las características sin las limitaciones. Todo lo que puedas comer. (Este es un elemento de párrafo)

CONSEJO: Haga clic y arrastre el elemento párrafo anterior y colocarlo por debajo del precio de la derecha. También puede utilizar los métodos abreviados como copiar y pegar (Ctrl + C, Ctrl + v), copiar al arrastrar (manteniendo alt) y eliminar (borrar tecla).

En el bloque morado ...

PLAN Súper

$ 75 / mes

INFO: Así es como funciona HTML y Web estructura - elementos de la pila bajo entre sí o en el interior de la otra. Esa es la mejor manera de construir un sitio web de fluido y sensible.

# 2 elementos de diseño

Elementos básicos de diseño

Añadir elementos a su sitio web haciendo clic en el icono [+] en la esquina superior izquierda. A continuación se presentan algunos de los elementos más básicos de la estructura en el diseño web - secciones, contenedores y columnas.

Una Sección ocupa el 100% de la anchura de la ventana del navegador si se agrega al cuerpo (el lienzo de un sitio web).
Es muy bueno para los grandes secciones horizontales de una página web.

Sección Elemento

Un contenedor es un bloque 960px centrado en el medio del navegador. Por lo general, la mayoría del contenido web se añade en el interior de un contenedor de modo que se centra. Los contenedores se suelen añadir al Cuerpo o un elemento de la sección.

Contenedor Elemento

Agregando columnas son la manera más rápida de construir un diseño de sitios web única. Para editar el número de columnas que desee en diferentes dispositivos, haga clic en el icono de engranaje en la esquina superior derecha para acceder a la configuración de los elementos.

Columnas Responsive

# 3 Proyectos con CSS

El estilo de sus elementos

Seleccione un elemento y añadir una clase en el panel de estilo correcto (Brush Icono). En este panel se puede añadir el texto y estilos gráficos como el color de la fuente, altura de línea, gradientes, bordes, sombras, y más. Diseño web visual es mucho más divertido que la codificación de la derecha?

botón de ejemplo de diseño

Añadir a la Cesta ➜

El estilo de usted mismo

Texto del botón ➜

SUGERENCIA: Este botón ya tiene un "botón" clase con algunos estilos básicos. Seleccione el botón y tratar de agregar el gradiente, frontera, esquinas redondeadas, sombras dentro / fuera, coloque estilos estatales, y la transición de los estilos libración - todo con el panel de estilo.

Lo que ha creado

Texto del botón ➜

aplicar la clase 'botón'

Texto del botón

SUGERENCIA: En el diseño web se puede aplicar una clase para muchos elementos para que se vean igual. Aplicar la clase "botón" que de estilo para el enlace anterior haciendo clic en el [+] en la parte superior del panel Estilo y escribiendo "botón" para encontrar esa clase.

Ejemplo Diseño de formulario

Gracias!

Su roca mis calcetines!

¡Huy! Algo salió mal al enviar el formulario :(

El estilo de usted mismo

Gracias! Su propuesta ha sido recibida!

¡Huy! Algo salió mal al enviar el formulario :(

SUGERENCIA: En primer lugar crear clases para los campos de texto y el botón (aplicar la misma clase para ambos campos). A continuación, cambiar estilos de borde, color de fondo y añadir estilos para el vuelo estacionario y estados prensadas. No te olvides de estilo al Estado "éxito" para el elemento de formulario, que se encuentra en el panel de configuración (icono de engranaje en la parte superior derecha).

Ejemplo de la tipografía

Lakewood Stout

La cerveza oscura de Lakewood, Colorado

El corpulento legendaria nació de la hermosa matrimonio de un hombre de la montaña y su cosa más querida, la ciudad de Lakewood en Colorado. El hombre de la montaña también amaba su hacha y su disparo único Remington rifle, pero no tanto como amaba a su ciudad. Soñaba con sus ríos fluidas y majestuosas montañas. Así que llamó a su mayor stout tras ella. Así, el corpulento gloriosa fue dado a luz fuera del corazón de un hombre de la montaña.

"Construí esta cerveza gloriosa expresar mi eterno amor por mi hermosa ciudad".

- Mountain Man

El estilo de usted mismo

Lakewood Stout

La cerveza oscura de Lakewood, Colorado

El corpulento legendaria nació de la hermosa matrimonio de un hombre de la montaña y su cosa más querida, la ciudad de Lakewood en Colorado. El hombre de la montaña también amaba su hacha y su disparo único Remington rifle, pero no tanto como amaba a su ciudad. Soñaba con sus ríos fluidas y majestuosas montañas. Así que llamó a su mayor stout tras ella. Así, el corpulento gloriosa fue dado a luz fuera del corazón de un hombre de la montaña.

"Construí esta cerveza gloriosa expresar mi eterno amor por mi hermosa ciudad".

- Mountain Man

SUGERENCIA: Seguir adelante y añadir tipografía y estilos a medida para el fondo. Punta fría: Si añade estilos de tipografía a un bloque padre, todos sus elementos de texto hijos heredarán esos estilos de texto. En CSS este comportamiento se denomina "cascada".

# 4 diseño con CSS

Diseños web Edificio con CSS

Similar a la adición de estilo a un elemento, para cambiar la posición de un elemento añadir primero una clase y luego editar las propiedades de posición. Usted aprenderá acerca de Margen, Relleno, Display, Float, desbordamiento, y Posición.

Margen y Relleno ejemplo

Noticias De Última Hora

Agentes federales Raid Gunshop, Encuentra Armas

Dueño de la tienda Steve Witmere arrestado previamente a negociación bazooka mercado negro. Confiesa a su participación en la mafia rusa.

Entre los numerosos bazucas se encuentran en el armería fueron decenas de miles de pinturas obtenidas ilegalmente por un valor de por lo menos $ 10.000. Eso es un precio muy alto a pagar por estas pinturas mudas.

Descripción: Margen y el relleno se pueden encontrar en la Posición paleta del panel Estilo. Adición Margen agregará espacio fuera de un bloque, y la adición de relleno agregará espacio dentro de un bloque.

Añadir espaciamiento usted mismo

Noticias De Última Hora

Agentes federales Raid Gunshop, Encuentra Armas

Dueño de la tienda Steve Witmere arrestado previamente a negociación bazooka mercado negro. Confiesa a su participación en la mafia rusa.

Entre los numerosos bazucas se encuentran en el armería fueron decenas de miles de pinturas obtenidas ilegalmente por un valor de por lo menos $ 10.000. Eso es un precio muy alto a pagar por estas pinturas mudas.

CONSEJO: Comienza añadiendo relleno en todos los lados del principal bloque gris (elemento principal). A continuación, agregue margen inferior para agregar espacio entre los elementos de texto individuales (niños elementos). Sugerencia: Mantenga pulsado SHIFT mientras se usa el control de margen / relleno para aplicarse a todos los lados y ALT aplicar también a la parte contraria.

'display: block' ejemplos

En este epígrafe se establece en display: block

Este párrafo se establece en display: block. Así que llena el ancho de la ventana padre y apila encima de otros bloques.

Botón con display: block Botón con display: block Este enlace se establece en display: block Este enlace se establece en Pantalla: Bloquear

Descripción: Elementos de ajuste 'Configuración de visualización a Block hará que se apilan una encima de la otra y llenar el 100% de la anchura de su bloque padre. La mayoría de los elementos de hecho tienen esta configuración por defecto.

Hacerlos 'display: block' a ti mismo

Se trata de un botón Este es un botón Links son display: inline por defecto Enlaces se display: inline por defecto

SUGERENCIA: Seleccione estos elementos (algunos son Inline Block y algunos son en línea) y hacerlos display: block para que se apilan una encima de la otra.

'Pantalla: inline-block' ejemplo

Descargar Editar Borrar

Descripción: Elementos de ajuste 'Configuración de visualización para Inline-Block hará que la anchura del bloque se ajusta a la anchura de los contenidos en su interior. Esto significa que si su contenido es lo suficientemente pequeño que puede apilar uno junto al otro. Puede copiar y pegar los botones de arriba y editar el texto interior para ver cómo funciona.

hacen inline-bloquean a ti mismo

Descarga Editar

SUGERENCIA: Seleccione los elementos anteriores y hacerlos display: inline-block para que se apilan junto a la otra. Verás que las imágenes se apilan junto a los botones. Consejo: Dejar caer los botones y las imágenes en bloques separados Div hará apilan una encima de la otra (porque Bloques Div son Pantalla: Bloquear por defecto).

Flotador ejemplo

Gracias! Su propuesta ha sido recibida!

¡Huy! Algo salió mal al enviar el formulario :(

Descripción: Ajuste de display: inline-Block o flotante (este ejemplo) son las formas más comunes para apilar elementos lado a lado. En este ejemplo, te voy a mostrar cómo flotar algo.

Flotador usted mismo

Gracias! Su propuesta ha sido recibida!

¡Huy! Algo salió mal al enviar el formulario :(

SUGERENCIA: Primero seleccione el campo de texto, lo convierten en float: left y darle una anchura porcentaje (ej: 60%). A continuación, establezca el botón para Flotador: Izquierda, así y establecer otro ancho porcentaje (ej: 40%) por lo que ambos suman el 100%. Esa es una forma manual para forzar ningún elemento a la pila al lado del otro.

Posición absoluta Ejemplo

Mi taza de Joe

Este es un texto pie de foto.

Destacado

Descripción: Si ajusta la posición de absoluta sobre un elemento, podrás posicionar en cualquier lugar dentro de su bloque padre. Para elegir cuál de los padres a la posición dentro de, ajuste de posición del elemento padre de relativa. Nota: Cuando los elementos son absolutos posicionado que flotan por encima de otros elementos.

Style It Yourself

Mi taza de Joe

Se trata de un pie de foto para mi taza preferida de Joe.

Destacado

SUGERENCIA: Primero seleccione el elemento Envoltura Imagen y establecer su posición de relativa. A continuación, seleccione el título, arrastrarlo a establecer la imagen que es la posición de absoluta y elegir el séptimo preestablecido. Para colocar la insignia destacados en el lugar correcto elegir el segundo preestablecido y posicionar manualmente.

# 5 de estilo en cascada

Utilizando Estilos en cascada

Usted puede crear fácilmente variaciones de un elemento mediante la adición de clases adicionales en la parte superior de uno al otro y la adición de diferentes estilos en esas clases. Echa un vistazo a el siguiente ejemplo donde tenemos diferentes variaciones de un botón.

Compartido ejemplo estilos de botón

Diseñar los botones usted mismo

Botón VERDE

Botón ROJO

SUGERENCIA: Seleccione el segundo botón y haga clic en el [+] junto a la clase para agregar otra clase. Se le puede llamar "verde". Luego le dan diferentes estilos. Estos estilos tienen prioridad sobre los estilos de base de la primera clase. A continuación, cree el botón rojo.

# 6 preguntas de los medios

Diseñar para diferentes dispositivos

En Webflow primera vez el diseño de su sitio web para dispositivos de escritorio y luego haga cambios en los dispositivos móviles (acceder a los iconos del dispositivo en la barra superior). Adición de estilos en un dispositivo móvil anulará los estilos de escritorio.

Ejemplo Heading Responsive

Esto es un texto de título que se hace más pequeño en los dispositivos móviles.

Descripción: Este epígrafe es muy grande en el escritorio, pero queremos que sea menor en los dispositivos móviles. Haga clic en los dispositivos de la barra superior para ver que el tamaño del texto y la línea de altura se redujo.

Repararlo usted mismo

Convertir esta gran texto de la partida se hacen más pequeños en los dispositivos móviles.

SUGERENCIA: Seleccione esta partida en el dispositivo Tablet y hacer que el tamaño de la fuente y altura de la línea más pequeña. Haga lo mismo con los dispositivos de Paisaje y Retrato Teléfono Teléfono. Usted puede ver que el

Ejemplo Button Responsive

Texto del botón

Descripción: Este botón está destinado a ser pequeña en las pantallas de escritorio, ya que es fácil de hacer clic con el cursor del ratón. Lo hicimos más grandes en los dispositivos móviles de manera que es más fácil de aprovechar con el dedo

Texto del botón

Repararlo usted mismo

SUGERENCIA: Ir al dispositivo Tablet y aumentar el relleno del botón. Al hacer que anulará los estilos anteriores establecidos en el escritorio y en cascada a todos los dispositivos a continuación Tablet.

Columnas Responsive ejemplo