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

inténtalo tú 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 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, la altura de la 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 de la misma. 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 y el botón de texto (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 forma, 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 grueso de ella. Así, el grueso 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 grueso de ella. Así, el grueso 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 personalizados a un segundo plano. Punta fría: Si añade estilos de tipografía a un bloque padre, todos sus elementos de texto hijos heredarán los 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 la armería fueron decenas de miles de pinturas obtenidas ilegalmente por un valor de al 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 en el interior 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 la armería fueron decenas de miles de pinturas obtenidas ilegalmente por un valor de al menos $ 10.000. Eso es un precio muy alto a pagar por estas pinturas mudas.

SUGERENCIA: Comience por la adición de 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 principal y se acumula en la parte superior de los otros bloques.

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

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 están 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: En primer lugar, seleccione el campo de texto, lo convierten en float: left y darle un ancho de porcentaje (ej: 60%). A continuación, establezca el botón para float: left, 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 establece Posición en Absolute 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, fijó la posición del elemento padre Relativo. Nota: Cuando los elementos son absolutos posicionado flotan por encima de otros elementos.

El estilo de usted mismo

Mi taza de Joe

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

Destacado

SUGERENCIA: En primer lugar seleccione el elemento de la envoltura de la imagen y ajustar su posición de relativa. A continuación, seleccione el título, arrastrarlo a establecer la imagen es Posición de Absoluto 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 del título 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 la altura de la línea más pequeña. Haga lo mismo con los dispositivos Paisaje teléfono y teléfono retrato. 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 tocar 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 que figuran en el escritorio y en cascada a todos los dispositivos a continuación de la tableta.

Columnas Responsive ejemplo