Hola amigos buenas tardes.

Regresamos con otro tutorial de hero imagen básico, ahora lo que haremos es un Hero imagen para productos “Smart Watch” con una animación sencilla.
Les comparto el enlace de otro tutorial que hicimos que se llama ” El Brócoli “

Tutorial Hero image básico productos – Divi Theme “Smart Watch”

Empecemos con nuestro Hero Image Smart Watch

1.- Primero insertaremos una sección general


2.- Vamos a justes propiedades.
Configuramos el degradado que sera nuestro fondo para darle realce a nuestos Smart Watch
Escogeremos el color rojo (  Copia y pega Degradados )

Columna Smart Watch

Estavez empezaremos al revez, primero diseñaremos nuestro módulo del Smart Watch para despues solo duplicarlo y reemplazarlo por otro producto

1.- Añadiremos una columna con 3 secciones

2.- Insertamos el módulo de imagenes

3.- Vista previa del Smart Watch


4.- Ajustes del módulo de imagenes  centrar y escoger la animación de Bounce ” Rebotar “

Módulo texto ” Modelo Smart Watch”

Añadimos el módulo de texto, lo que haremos sera poner el modelo de nuestro producto y despues podemos duplicarlo
e insertar otro texto que tenga el precio y al final añadiremos el botón que nos lleva a la tienda / sección de nuestro producto.

1.- Inser texto  “Modelo Smart Watch”

2.- Ajustes de texto y configuramos con los siguientes valores.

3.- Añadimos animación

Módulo texto ” Precio Smart Watch”

Ahora es el turno de poner el precio.

1.- Insertamos módulo de texto de bajo del anterior

2.- Le damos un formato de H2 y despues configuramos


3.- Aquí mismo vamos a diseño para añadirle el formato a la tipografía, con los siguientes ajustes

4.- pasamos a la sección de animación y lo animamos con los siguientes ajustes

Módulo Botón ” Boton producto Smart Watch”

Añadimos el ultimo elemento para despues duplicarlo.

1.- Insertamos el botón

2.- Colocamos el nombrel botón “Comprar”

3.- Personalizamos el botón a nuestro gusto, esta vez hemos escogido el color blanco para hacer un buen contraste
con el fondo

4.- Para terminar con el botón añadimos la animación

Ajustes columna ” Smart Watch”

Como no queremos tan separados nuestros productos tenemos que juntarlos un poco
así que configuraremos la separación de estos elementos

1.- Click en el engrane para ir a justes de columna
Esta imagen nos sirve para ver el diseño completo.

2.- Nos dirigimos a: ancho personalizado

Duplicamos y reemplazamos

1.- Duplicamos todos nuestros elementos, imagenes, textos,botones.

2.- Reemplazamos los elementos que tengan que cambiarse obviamente xD

Insertar título de ” Smart Watch”

Como se han dado cuenta hoy empezamos diferente.
Primero configuramos nuestro smart watch, textos y botones con la animación que necesitabamos
esto era para ahorrar tiempo.

Hasta aquí podriamos terminar el tutorial, pero aún no.

1.- Insertamos una columna

2.- Insertamos módulo de texto

3.-  seleccionamos H1 por que es nuestro título es lo más importante

4.- Vamos a justes o diseño de tipografía y le damos el siguiente formato

5.- Una vez que terminemos de darle formato a nuestro texto. arrastramos hacia arriba si es necesario
si lo coloco desde el principio arriba, por favor de omitir este paso

6.- Insertamos texto de bajo del título, este texto nos servira para reforzar nuestro apartado.

Redimensionar

Este es el ultimo apartado.

1.- Seleccionamos el smart Watch negro / Black – producto que este a la izquierda.
para hacerlo pequeño

2.-Vamos a justes de imagen y escogemos dimensionamiento y centramos

3.- Copiamos las propiedades del dimensionamiento con click derecho y lo pegamos
a nuestro siguiente producto que es el smart watch de la derecha

FINAL

descargar-divi-json-wordpress

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

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares