Así Que Usted es nuevo en Webflow, ¿eh? ¡Entremos en.

Guía de Diseño Visual Web

Haga click en la W párrafo volver al cuadro de Instrumentos y Crear Una Nueva Página Web!

This Guia visual le Guiara un Través de Importantes web receptivo Conceptos de Diseño Y Como implementarlas visualmente el interior Webflow.

Bloquear Cita

Boton de texto

# 1 El modelo de caja

Estructura del Sitio Web Entendimiento

Todos Los Elementos de this page estan 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 colocar en otra. Así es Como Funciona HTML!

Super Plan

$ 75 / mes

Perfecto PARA CUALQUIER negocio m con 20 Empleados o más.

500 GB de Almacenamiento
1 Millon de Páginas vistas
20 Colaboradores
50 Redes Sociales
Prima Soporte

Lo que sé ve

Nota: Usted entenderá de Como Diseñar Algo Como ESTO Con Los Siguientes CONCEPTOS.

Lo Bloques this made de

Div Bloquear

Rubro H2 Super Plan

Bloque de Texto $ 75 / mes

Parrafo Perfecto CUALQUIER párrafo con negocio m 20 Empleados o más.

Lista

Elemento de la Lista
500 GB de Almacenamiento
Elemento de la Lista
1 Millon de Páginas vistas
Elemento de la Lista
20 Colaboradores
Elemento de la Lista
50 Redes Sociales
Elemento de la Lista
Prima Soporte

Inténtalo tú Mismo

Arrastre this parrafo ...

Todas las caracteristicas pecado las Limitaciones. Todo Lo Que Puedas esquina. (Este Es Un Elemento de parrafo)

CONSEJO: Haga Clic y arrastre el Elemento parrafo anterior y colocarlo Por debajo del precio de la Derecha. Also PUEDE utilizar los Métodos abreviados de Como Copiar y pegar (Ctrl + C, Ctrl + v), Copiar al Arrastrar (Manteniendo alt) y ELIMINAR ( Tecla borrar).

En el bloque morado ...

PLAN Súper

$ 75 / mes

INFO: Funciona Como HTML y Estructura Web Así es - Elementos de pila bajo Entre sí o en el interior de la otra. Esa es la mejor Manera de Construir sitio web de la ONU de fluido y sensible.

# 2 Elementos de diseño

Elementos Básicos de Diseño

Elementos: Añadir un su sitio web Haciendo click en el icono [+] en La Esquina Izquierda superior. A Continuación se Presentan ALGUNOS de los Elementos Básicos Más 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 de Agrega al Cuerpo (el lienzo de la ONU Web site).
Es muy bueno párr 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, la Mayoría del contenido web en general se ANADE en el interior de la ONU contenedor de Modo Que se centra. Los contenedores se Suelen: Añadir al Cuerpo o Elemento de la ONU de la section.

Contenedor Elemento

Agregando hijo Columnas La Manera Más Rápida de Construir Un diseño de este sitios web sueltas. Editar Para El Número de Columnas Que desee en Diferentes Dispositivos, haga clic en Haga En El Icono de engranaje con baño La Esquina superiores DERECHA párr acceder a este La Configuracion de Los Elementos.

Columnas Responsive

# 3 Proyectos con CSS

El Estilo de Sus Elementos

Seleccione la ONU Elemento y: Añadir Una clase en el panel de de Estilo correcto (Brush Icono). En Este panel de Se Puede: Añadir el texto y Estilos Gráficos Como el color de de la fuente, la altura de La Línea, gradientes, bordes, sombras, y Más . Diseño web visual es Mucho Más divertido del la del que 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 Aportes ya Tiene Un "Botón" clase con algunos adj Estilos Básicos Seleccione El Botón y Tratar de buscas? Busca otros el gradiente, frontera, Esquinas redondeadas, sombras Dentro / Fuera, coloque Estilos Estatales, y la Transición de los Estilos libración - Con Todo el Panel de Estilo.

Lo Que ha CREADO

Texto del Botón ➜

APLICAR la clase 'Botón'

Boton de texto

SUGERENCIA: Diseño en el web Se Puede APLICAR Una clase párr Muchos Elementos párr 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 de Estilo y Escribiendo "Botón" clase ESA Encontrar párr.

Example Diseño de Formulario

¡Gracias!

Su Roca calcetines mis!

¡Huy! Algo salio mal al enviar el Formulario :(

El Estilo de Usted Mismo

¡Gracias! ¡Su Propuesta ha Sido recibida!

¡Huy! Algo salio mal al enviar el Formulario :(

SUGERENCIA: En Lugar imprimación crear de Clases Para Los Campos y El Botón de texto (APLICAR La Misma clase párr Ambos Campos). A Continuación, change Estilos de borde, el color de fondo y: Añadir Estilos párr 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 configuration (icono de engranaje en la parte superior de Derecha).

Example 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 Amaba también montaña su hacha y su Disparo Único Remington rifle, Pero No Como Tanto Amaba un su ciudad. Sonaba con SUS ríos fluidas y majestuosas Montañas. Así Que llamo un su grueso alcalde de ella. Así, el grueso del gloriosa FUE dado una luz Fuera del Corazón de Un hombre de la montaña.

"Construí this 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 Amaba también montaña su hacha y su Disparo Único Remington rifle, Pero No Como Tanto Amaba un su ciudad. Sonaba con SUS ríos fluidas y majestuosas Montañas. Así Que llamo un su grueso alcalde de ella. Así, el grueso del gloriosa FUE dado una luz Fuera del Corazón de Un hombre de la montaña.

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

- Mountain Man

SUGERENCIA:. Seguir adelante y: Añadir tipografía y Estilos personalizados un plano Segundo ONU Punta fría:. Si Anade Estilos de tipografía un padre bloque ONU, Todos SUS Elementos de texto hijos heredarán los Estilos de texto En CSS this Comportamiento sí denominador "cascada".

# 4 diseño con CSS

Diseños Web Edificio con CSS

Similar a la Adicion de Estilo de un Elemento de la ONU, párr switch to la posicion de la ONU Elemento: Añadir Primero Una clase y LUEGO editar las propiedades de posicion. Usted aprenderá about Margen, Relleno, Pantalla, Float, desbordamiento, y posicion.

Margen y Relleno EJEMPLO

Noticias de última hora

Agentes federales Raid Gunshop, ENCUENTRA Armas

Dueño de la tienda Steve Witmere Arrestado previamente un bazooka Negociación Mercado Negro. Confiesa un su Participación en la rusa de la mafia.

Entre los numerosos bazucas se encuentran en la armería were Decenas de miles de pinturas obtenidas ilegalmente Por un valor de al Menos $ 10.000. Eso es muy alto precio de la ONU una Pagar Por Estas pinturas mudas.

Descripción:. Margen y el relleno se pueden Encontrar en la posicion paleta del panel de Estilo Adicion Margen agregará espacio Fuera de bloque de la ONU, y la Adicion de relleno agregará espacio en el interior de bloque de la ONU.

: Añadir espaciamiento Usted Mismo

Noticias de última hora

Agentes federales Raid Gunshop, ENCUENTRA Armas

Dueño de la tienda Steve Witmere Arrestado previamente un bazooka Negociación Mercado Negro. Confiesa un su Participación en la rusa de la mafia.

Entre los numerosos bazucas se encuentran en la armería were Decenas de miles de pinturas obtenidas ilegalmente Por un valor de al Menos $ 10.000. Eso es muy alto precio de la ONU una Pagar Por Estas pinturas mudas.

SUGERENCIA:. Comience por la Adicion de relleno en Todos Los Lados del gris bloque principales (Elemento director). A Continuación, margen agregue párrafo inferior buscas? Busca otros espacio Entre Los Elementos de texto Individuales (Niños Elementos) Sugerencia: SHIFT Mantenga pulsado MIENTRAS SE EE.UU. el el control de margen / relleno párrafo 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 parrafo se Establece en pantalla:. Bloque ASI Que Llena EL anchos de la Ventana principales Y Se acumula en La Parte Superior de Los Otros bloques.

Botón de visualización con: Bloque Botón pantalla con: Bloque Este enlace se Establece en display: block Este enlace se Establece en display: block

Descripción: Elementos de fit 'Configuracion de Visualizacion un Bloque Hará Que se apilan Una Encima de la otra y llenar el 100% de la anchura de su padre bloque. La Mayoría de los Elementos de Hecho Tienen this configuration por Defecto.

Hacerlos 'display: block' a ti Mismo

Se Trata de la ONU Botón Botón de la ONU Este es Enlaces pantalla hijo: inline por Defecto Enlaces sí display: inline por Defecto

SUGERENCIA: Seleccione Estós Elementos (ALGUNOS hijo Inline Block y ALGUNOS estan en línea) hacerlos Y display: block párr Que se apilan Una Encima de la otra.

'Pantalla: inline-block' EJEMPLO

Descargar Editar Borrar

Descripción:. Elementos de fit 'Configuracion de Visualizacion párrafo Inline-Block Hará Que la Anchura del bloque se ajusta a la anchura de los Contenidos en su interior. ESTO SIGNIFICA Que Si contenido Do es lo pequeño Suficientemente PUEDE Que apilar uno junto Al Otro Puede del Copiar y pegar los Botones de arriba y editar el texto interior to view Funciona Como.

Hacen inline-bloquean un Mismo ti

Descarga Editar

SUGERENCIA: Seleccione Los Elementos Anteriores y hacerlos display: inline-block párr 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 hijo Bloques Div Pantalla: Bloquear por Defecto).

Flotador EJEMPLO

¡Gracias! ¡Su Propuesta ha Sido recibida!

¡Huy! Algo salio mal al enviar el Formulario :(

Descripción: Ajuste de display: inline-Block o flotante (EJEMPLO Este) hijo las Formas Más Comunes párrafo 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 salio mal al enviar el Formulario :(

SUGERENCIA: En Lugar imprimación, Seleccione el campo de texto, lo convierten en float: izquierda y Darle ancho de la ONU de Porcentaje. (Ej: 60%) A Continuación, establezca El Botón párrafo float: left, Asi y establecer Otro ancho Porcentaje (ej : 40%) por Lo Que Ambos suman el 100%. Esa Es Una forma párr manual de Forzar ningún Elemento a la pila al Lado del Otro.

Posicion absoluta Example

Mi taza de Joe

Este Es Un pastel de texto de foto.

Destacado

Descripción: Si Establece posicion en absoluto Sobre ONU Elemento, podras posicionar en CUALQUIER Lugar Dentro de su padre bloque. Para Elegir rápido Cuál de los Padres a la posicion Dentro De, Fijo la posicion del Elemento padre Relativo. Nota: ha posicionado Cuando Los Elementos hijo absolutos flotan Por Encima de Otros Elementos.

El Estilo de Usted Mismo

Mi taza de Joe

Se Trata de pastel de la ONU de foto para mi taza Preferida de Joe.

Destacado

SUGERENCIA:. En Lugar imprimación Seleccione el Elemento de la Envoltura de la imagen y Ajustar su posicion de Relativa. A Continuación, Seleccione el título, arrastrarlo a establecer la imagen es posicion 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 facilmente Variaciones de la ONU Elemento Mediante la Adicion de clases ADICIONALES En La Parte Superior De Uno Al Otro y la Adicion de Diferentes Estilos en los AEE clases. Echa un Vistazo ONU el siguiente EJEMPLO Donde TENEMOS Diferentes Variaciones de Botón de la ONU.

Compartido EJEMPLO Estilos de Botón

Diseñar los BOTONES Usted Mismo

Botón VERDE

Boton rojo

SUGERENCIA: Seleccione El Segundo Botón click y de Haga en el [+] junto a la clase párr buscas? Busca otros otra clase. Se le PUEDE Llamar "verde". LUEGO le dan Diferentes Estilos. Estós Estilos Tienen priority Sobre los Estilos de la base de la primera clase . A Continuación, cree el Boton rojo.

# 6 Preguntas de los Medios

Diseñar párrafo Diferentes Dispositivos

En Webflow Primera Vez el diseño de su sitio web párrafo Dispositivos de Escritorio y LUEGO Haga Cambios en los Dispositivos Móviles (acceder a este los Iconos del Dispositivo en La Barra Superior). Adicion de Estilos en Dispositivo ONU MOVIL anulará los Estilos de Escritorio.

Example Heading Responsive

Esto Es ONU 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, but Queremos Que menor de mar en los Dispositivos Móviles. Haga click en los Dispositivos de la barra superior, párr ver Que El Tamaño del texto y La Línea de altura se redujo.

Repararlo Usted Mismo

Convertir this gran texto del título se Hacen Más pequeños en los Dispositivos Móviles.

SUGERENCIA:. Seleccione this 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

Example Botón Responsive

Boton de texto

Descripción:. Este botón Aportes this Destinado un Ser Pequeña en las Pantallas de Escritorio, ya Que Es Fácil de Hacer click con el cursor del ratón Mín HICIMOS Mas Grandes en los Dispositivos Móviles de Manera Que es mas Fácil de tocar con el dedo

Boton de texto

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 de Continuación de la tableta.

Columnas EJEMPLO Responsive