HERO IMAGE EL BRÓCOLI

HERO IMAGEN (Se conoce como hero image a la imagen de gran tamaño que aparece como el elemento visualmente más destacado de una página web.)

Empecemos con el tutorial por eso estamos aquí

Creamos una sección Hero image con el tema de brócoli, hay que salir un poco de lo cotidiano.
nunca sabes como diseñador cual es el siguiente proyecto, asi que tenemos que conocer de todo o investigar.

 

COLUMNA DEL TÍTULO

Añadimos primero la columna donde colocaremos nuestro modulo de texto

Una vez que hemos colocado nuestro modulo de texto añadimos nuestra información
Debe de quedar de esta manera

Propiedades de texto

Hacemos un poco de configuración en el texto

Heading / Encabezado : H1
Heading font weight / Tipo de encabezado :Bold
Heading font Style / Estilo de fuente de encabezado: Mayúsculas
Heading text size / Tamaño del texto del encabezado: 50px

AJUSTE COLUMNAS

Bueno esta vez lo haremos modo gráfico pero tenemos que dejar el padding /Relleno en cero
Top /parte superior : 0px
bottom / Fondo / inferior: 0px

como en la imagen muestra acontinuación

Configuración animación

Animation / Animación

Animation StyleEstilo animación: Slide
Animation Direction/Dirección de la animación: Down / abajo
Animation Delay/Retraso de animación: 950ms

Ya tenemos nuestro título Hero image.

Es hora de añadir nuestra información

AÑADIENDO INFORMACIÓN

lo mismo que en el paso anterior, se añade columna, un módulo de text

AJUSTES DE TEXTO

Desing / Diseño

SizingDimensionamiento: 50px
Module Alignment /Alineación del módulo: Left / Izquierda

Spacing / Espaciado

Custom MarginMargen personalizado Top:0px Superior: 0px
Custom Padding /Relleno personalizado: Left / Izquierda: 8px Right/ Derecha: 43px

Border Styles / Estilos de borde
Solo borde izquierdo

Left border widthAncho del borde izquierdo 4px
Left border colorColor del borde izquierdo #f05c27

AJUSTES DE COLUMNA

Igual eliminamos margenes superior e inferior

ANIMACIÓN

Configuramos la animación de nuestra columna (Recuerden que pueden cambiar los valores de la animación)

Configuración animación

Animation / Animación

Animation StyleEstilo animación: Slide
Animation Direction/Dirección de la animación: Down / abajo
Animation Delay/Retraso de animación: 1050ms

Ya estamos a la mitad de nuestro tutorial HERO IMAGE, así que no desesperen.

BOTÓN

Bueno el clásico uno dos, eso quire decir, añadir una columna, despues insertamos el módulo del botón

Propiedades del botón

Button / Botón
Use custom styles for buttonUse estilos personalizados para el botón Yes/ Si
Button hover text colorBotón de color de texto emergente #ffffff

Only show icon on hover for button / Mostrar solo el icono al pasar el mouse sobre el botón Yes/ Si

Button hover background colorBotón de color de fondo de desplazamiento #a5c688

Configuración animación

Animation / Animación

Animation StyleEstilo animación: Slide
Animation Direction/Dirección de la animación: Up / arriba
Animation Delay/Retraso de animación: 1100ms

FONDO

Ahora vamos aconfigurar el fondo, solo son 4 pasos es rápido.

Fondo imagen

Seleccionamos la opción de añadir imagen.

Background image size/Tamaño de la imagen de fondo Tamaño Actual
Background image position/Posición imagen de fondo Bottom right /Abajo a la derecha
Background image blend/Mezcla de imagen de fondo screen / pantalla

Fondo gradiente

Gradient type /Tipo de gradiente Lineal
Gradient direction /Dirección de gradiente 135deg
Star position / Posición inicial 61%
End position / Posición Final 45%

Ajustes de margenes

Ajustamos margenes a 128 tanto arriba como abajo

RESPONSIVE HERO IMAGE

Bueno ya estamos acabando, si ya tengo sueño van hacer la 1:00 am, aun debo de terminar un proyecto
que tengo presentación temprano, bueno continuemos.

RESPONSIVE HERO IMAGE

Duplicamos nuestra primera sección y le ponemos de nombre (Desktop) lo dejamos visible solo para ordenadores
de escritorio y a la copia le ponemos movil y tablet y lo dejamos solo visible para esos dispositivos

Configuramos para tablet usaremos el mismo valor para smartphone

Modo tablet

Fondo imagen

Seleccionamos la opción de añadir imagen.

Background image size/Tamaño de la imagen de fondo cover /
Background image position/Posición imagen de fondo Center / Centro /cubrir / cubierta
Background image blend/Mezcla de imagen de fondo screen / pantalla

Fondo gradiente

Gradient type /Tipo de gradiente Lineal
Gradient direction /Dirección de gradiente 135deg
Star position / Posición inicial 78%
End position / Posición Final 45%

Modo Smartphone

Propiedades de texto

Heading text size / Tamaño del texto del encabezado: 23px

Margenes de sección

Arriba y abajo lo dejamos como 80px así cuando entren desde el smartphone verán información (Eso lo piden mucho los clientes)

Botón

Eliminamos el relleno para que no quede mucho separado del texto
.

Hemos terminado nuestro Hero image básico, espero que les haya gustado.

descargar-divi-json-wordpress

¿Te parece interesante este artículo?
Puntaje
[Total: 1 Average: 5]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares