Como crear una portada para una tienda utilizando Divi Elegant Themes

Introducción.

Esta vez dorzata, un personaje que conocemos desde nuestro segundo tutorial, nos ha pedido el diseño de la portada de su ecommerce o tienda virtual y nos ha entregado el diseño
que genero su equipo de diseño.

Ahora a nosotros nos toca hacer nuestra magia

Como diría  Jack el Destripador, vamos por partes
Estamos utilizando una imagen de anclaje para crear tensión en una zona especifica que es el centro de la página donde van nuestros
productos, en este caso creamos una colección especial, es por eso que tenemos los guantes principales por que es los que queremos vender.

Estamos utilizando una retícula de una columna donde va la imagen principal y otra columna de 4 modulos donde están los guantes.

Es esencial tener buen conocimiento de la teoría del color, pronto estaremos haciendo post sobre esto

DISEÑO A REALIZAR PROPUESTA 1

AQUI EMPIEZA EL TUTORIAL

Módulo Imagen

1.- Añadimos una sección

2.- insertamos una columna

3.- Seleccionar módulo de imagen

4.- Ejemplo de  imagen insertada

5.- Propiedades imágenes, alinear imagen al centro

6.-SIZING TAMAÑO DE IMAGEN

Desktop: 50%
Tablet: 60%
Smartphone: 80%
CENTRAR EN EL MEDIO (MODULE ALIGNMNT) CENTER

7.-Quitar el espacio debajo de la imagen

8.-Margen personalizado

Desktop:Abajo (Bottom) -240%
Tablet: Abajo (Bottom) 190px
Smartphone: Abajo (Bottom) 190px

Módulos textos

9.-Modulos 4 columnas

10.-Seleccionamos módulo texto

11.- añadimos nuestro texto y damos formato , recuerden que deben de añadir  H4 para que funcione el cambio de letra

12.-  añadimos un fondo blanco

Diseño módulo de texto

13.- Añadimos la imagen desde ADD MEDIA o AÑADIR ARCHIVOS MULTIMEDIA

14.- ahora vamos a opciones de texto avanzado css class y añadir blurb-1

/* ************************** */
/* ** CSS FOR DIVI BLURB 1 ** */
/* ************************** */

.blurb-1,
.blurb-1 h4,
.blurb-1 .et-pb-icon {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.blurb-1:hover {
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.78);
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.78);
box-shadow: 0px 0px 20px rgba(0,0,0,0.78);
background-color: #ffffff;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.blurb-1:hover h4,
.blurb-1:hover .et-pb-icon {
color: #FF8000!important;
}

15.- Para ingresar el codigo tenemos que ir a DIVI-OPCIONES- PERSONALIZADOR DE CSS

16.- ahora vamos a duplicar los módulos de texto

17.- propiedades de la columna de texto

18 .- Ajustes de columna, alinear al centro

19.- Ajustes de columna tamaño:
Ancho personalizado: Si
Ancho personalizado: 1000

20.- Ancho personalizado de canal
Ancho personalizado de canal: YES
Ancho del canal: 1

21.- Ajustes de columna.
Ajustes de relleno

Desktop:
Top / Arriba: 0px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 0px   Left / Izquierdo: 0 px

Tablet:
Top / Arriba: 0px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 0px   Left / Izquierdo: 0 px

Smartphone:
Top / Arriba: 0px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 0px   Left / Izquierdo: 0 px

COLUMNA 1 RELLENO PERSONALIZADO (Repetir en las 4 columnas)

Smartphone:
Top / Arriba: 15px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 15px   Left / Izquierdo: 0 px

22.- Selección ajustes fondo vamos a degrados y escogemos el color

23.- vamos a justes de columna (Esta columna es el contenedor de la imagen)

24- alineamos al centro

25.- Personalizador de margen

Desktop: TOP /ARRIBA : -50
Tablet: TOP /ARRIBA : -50
Smartphone: TOP /ARRIBA : -50

26.- Relleno personalizado

Desktop:
Top / Arriba: 0px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 0px   Left / Izquierdo: 0 px

27.- Ahora vamos a contenido – fondo – escogemos imagen

28.- Regresamos a selección general para ajustar el relleno personalizado


29.-  Configuramos relleno personalizado

Desktop:
Top / Arriba: 0px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 178px   Left / Izquierdo: 0 px

Tablet:
Top / Arriba: 50px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 178px   Left / Izquierdo: 0 px

Smartphone:
Top / Arriba: 50px  Right / Derecho: 0px  Bottom / Abajo/Inferior / 50px   Left / Izquierdo: 0 px

30.- Ahora vamos a sustituir las imagenes. en este caso yo solo reemplezare las imagenes.
Por que he nombrado guante-1. guante-2 guante -3  y guante-4 asi solo cambio el número

Para finalizar solo ledamos unos toques, a nuestro diseño como seleccionar el precio de oferta y cambiandole el color por otro.

Si quieres añadie un enlace al guante si se puede con laherramienta de enlace de texto, ya lo hemos visto en el tutorial de hover-menu-onepage.

Hemos terminado.

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