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 dentro 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 "modelo de caja"). Al arrastrar elementos de la web, los arrastra de un bloque y soltarlos en otro. 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.

¿Qué Bloques Está hecho de

Div Bloquear

H2 rúbrica 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 de color púrpura ...

PLAN Súper

$ 75 / mes

INFO: Esta es como funciona la web HTML y estructura - elementos de la pila debajo de los otros o en el interior de la otra. Esa es la mejor manera de construir un sitio web fluida 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 una página 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 de 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.

Container 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 ejemplo de diseño

Añadir a la Cesta ➜

Diseñarlo 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, pase 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 "Button" que labra para el foro haciendo clic en el [+] en la parte superior del panel Estilo y escribiendo "Botón" para encontrar esa clase.

Ejemplo de diseño de formulario

Gracias!

Su roca mis calcetines!

¡Huy! Hubo un inconveniente durante la presentación de la forma :(

Diseñarlo usted mismo

Gracias! Su propuesta ha sido recibida!

¡Huy! Hubo un inconveniente durante la presentación de la forma :(

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 pulsadas. No te olvides de darle 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 legendario 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

Diseñarlo usted mismo

Lakewood Stout

La cerveza oscura de Lakewood, Colorado

El corpulento legendario 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

TIP: 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 la participación en la mafia rusa.

Entre los numerosos bazucas se encuentran en el gunshop eran 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 Paleta de Posición 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 la participación en la mafia rusa.

Entre los numerosos bazucas se encuentran en el gunshop eran 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.

TIP: Comience agregando relleno en todos los lados del principal bloque gris (elemento principal). A continuación, añadir el margen inferior para añadir espacio entre los elementos de texto individuales (niños elementos). Sugerencia: Mantenga pulsado SHIFT mientras se usa el control de los márgenes / relleno para aplicar 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 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 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 la pila junto a la otra. Verás que las imágenes se apilan junto a los botones. Consejo: Dejar caer los botones e 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! Hubo un inconveniente durante la presentación de la forma :(

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! Hubo un inconveniente durante la presentación de la forma :(

TIP: Primero 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 de 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 para colocar dentro de, fijó la posición del elemento padre para Relativo. Nota: Cuando los elementos son absolutos posicionado que 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

TIP: Primero seleccione el elemento Envoltura de imagen y establecer su posición de relativa. A continuación, seleccione el título, arrastrarlo a establecer la imagen es Posición en Absolute y elige el séptimo preestablecido. Para colocar la insignia destacados en el lugar correcto elegir el segundo preset 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 la otra 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 rúbrica 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. Se puede ver que la

Ejemplo Button Responsive

Texto del botón

Descripción: Este botón está destinado a ser pequeña en las pantallas de escritorio, porque es fácil de hacer clic con el cursor del ratón. Lo hicimos más grande 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

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

Columnas Responsive ejemplo