Cómo crear un catálogo de moda desplazable con Divi

En esta publicación, le mostraremos cómo puede crear un catálogo de moda desplazable. El uso de este método lo ayudará a conectarse con su audiencia como lo haría al entregarles un catálogo en papel. La creación de un catálogo de moda de desplazamiento en línea puede ayudar a aumentar los resultados que obtiene del catálogo. Al incluir enlaces directos a artículos de la tienda, por ejemplo, también se mejorará el proceso de compra.

Resultado

El resultado que le mostraremos cómo crear, paso a paso, se ve así en el escritorio:

Y así en el teléfono y la tableta:

Cómo crear un catálogo de moda desplazable con Divi

Suscríbete a nuestro canal de Youtube

Agregue formas transparentes a las imágenes con Photoshop

Lo primero que le mostraremos es cómo agregar una parte transparente a una imagen con Photoshop. Hay una alternativa gratuita para Photoshop llamada GimpShop, pero en esta parte del tutorial, solo usaremos Photoshop. Necesitaremos dos imágenes con dos formas diferentes cada una; uno para escritorio y otro para dispositivos móviles y tabletas. En esta parte, simplemente le mostraremos cómo agregar una forma transparente a la imagen. Posteriormente, puede realizar todas las imágenes que necesite usted mismo.

Abrir Photoshop

Comience abriendo Photoshop en su computadora.

Abrir imagen

A continuación, abra la primera imagen que desea editar. El método sigue siendo el mismo para las tres imágenes que utilizará a lo largo de este tutorial. Por eso solo lo explicaremos una vez.

Haga doble clic en la imagen y cree una capa

Una vez que haya abierto la imagen que desea editar, haga doble clic en la imagen y cree una nueva capa para ella.

Agregar otra capa

Continúe agregando otra capa vacía encima.

Seleccionar capa 1 y herramienta Lazo poligonal

Seleccione la Capa 1 y comience a usar la herramienta Lazo poligonal.

Hacer una forma

Mientras tiene activada la herramienta Lazo poligonal, siga adelante y cree la forma transparente dentro de su imagen.

Haga que la capa 1 sea invisible y presione Eliminar mientras ha seleccionado la capa 0

Una vez que haya seleccionado el área que desea que se vuelva transparente, haga invisible la Capa 1, seleccione la Capa 0 nuevamente y presione el botón Eliminar en su teclado.

Seleccione la herramienta Marco rectangular y haga clic en algún lugar de la imagen

Una vez que haya hecho eso, seleccione la herramienta Marco rectangular y haga clic en algún lugar de su imagen.

Guardar imagen como PNG

Por último, deberá guardar la imagen como PNG y repetir el mismo proceso para las cuatro imágenes que utilizará en todo el diseño.

Configuración de la barra de menú principal

La configuración de la barra de menú principal que necesitamos para el diseño que estamos creando es la siguiente:

• Ocultar imagen de logotipo: Activar
• Altura del menú: 30
• Tamaño del texto: 15
• Espaciado entre letras: -1
• Fuente: Lato
• Estilo de fuente: negrita y mayúscula
• Color del texto: #FFFFFF
• Color de enlace activo: #FFFFFF
• Color de fondo: rgba (255,255,255,0)
• Color de fondo del menú desplegable: rgba (255,255,255,0)

Introducción a la edición

Una vez que haya modificado la barra de menú principal, puede continuar y agregar una nueva página, usar Divi Builder y cambiar a Visual Builder.

Agregar nueva sección

Dentro de esa página, comience agregando una sección estándar.

Color de fondo de la sección

El fondo de ese color debe ser '# d6d6d6'.

Acolchado personalizado

Vaya a la pestaña Diseño de esa sección. Dentro de la subcategoría Espaciado, agregue '24px' al relleno superior y 0px al inferior.

Agregar fila de una columna

Una vez hecho esto, puede continuar y agregar una fila de una columna a la sección.

Dimensionamiento

Vaya a la pestaña Diseño y modifique la subcategoría Tamaño:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: 1

Acolchado personalizado

Desplácese hacia abajo y agregue '0px' al relleno superior de la fila.

Primer módulo de texto

Una vez hecho esto, puede agregar un módulo de texto a la fila. Después de haber ingresado el texto que desea que aparezca, vaya a la pestaña Diseño y asegúrese de que los siguientes cambios se apliquen a la subcategoría Texto:

• Fuente de texto: TT estándar antiguo
• Estilo de fuente: mayúsculas
• Tamaño de fuente de texto: 72 (escritorio), 41 (tableta), 29 (teléfono)
• Color del texto: # 000000
• Espaciado de letras de texto: 11px
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Abra la subcategoría Espaciado y agregue '30px' al relleno superior e inferior.

Módulo divisor

Justo debajo del Módulo de texto, agregue un Módulo divisor y habilite la opción 'Mostrar divisor'.

Vaya a la pestaña Diseño y elija '#FFFFFF' como color divisor.

A continuación, elija 'Sólido' como Estilo de divisor y 'Superior' como Posición de divisor dentro de la subcategoría Estilos.

Luego, abra la subcategoría Tamaño y aplique las siguientes configuraciones:

• Peso del divisor: 10px
• Alto: 23px
• Ancho: 100%
  

Segundo módulo de texto

Justo debajo del módulo divisor, agregue otro módulo de texto. Elija el icono que desee dentro de su Mapa de caracteres (Windows) o Paleta de caracteres (Mac) y colóquelo en la pestaña Contenido. Para este ejemplo, usamos el siguiente símbolo: '↓'. Luego, vaya a la pestaña Diseño y aplique la siguiente configuración:

• Tamaño de fuente de texto: 42px
• Color del texto: # 000000
• Orientación del texto: centro

Catálogo de moda de escritorio (nueva sección)

Ahora, agregue otra sección estándar. Esta sección contendrá dos filas que mostrarán una parte diferente del catálogo en el escritorio.

Configuración de la sección

Color de fondo

Utilice '#FFFFFF' como color de fondo de esta sección.

Acolchado personalizado

Luego, vaya a la pestaña Diseño y agregue '15px' al relleno superior.

Primera fila

Estructura de la columna

Una vez que haya realizado los cambios en la configuración, agregue una fila con la siguiente estructura de columnas:

Color de fondo

Abra la configuración de la fila y agregue 'rgba (255,255,255,0.14)' como color de fondo.

Imagen de fondo

Agregue una de las imágenes que ha creado en la parte de Photoshop de esta publicación y use 'Tono' como Mezcla de imágenes de fondo.

Dimensionamiento

Por último, realice los siguientes cambios en la subcategoría Tamaño:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Primer módulo de texto

Una vez que haya completado la configuración de la fila, agregue un módulo de texto a la segunda columna. Utilice la siguiente configuración para la subcategoría Texto:

• Fuente de texto: Amargo
• Tamaño de fuente de texto: 63px
• Color del texto: # 000000
• Orientación del texto: centro

Módulo divisor

Justo debajo del primer módulo de texto, agregue un módulo divisor y habilite la opción 'Mostrar divisor'.

Vaya a la pestaña Diseño y use '# 000000' como color divisor.

Dentro de la subcategoría Estilos, use 'Sólido' como Estilo de divisor y 'Superior' como Posición de divisor.

Desplácese hacia abajo en la misma pestaña y haga que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

• Peso del divisor: 3px
• Alto: 23px
• Ancho: 57%
• Alineación del módulo: izquierda

Por último, agregue un margen superior de '30px' y un margen inferior de '50px'.

Segundo módulo de texto

Una vez que el divisor esté en su lugar, continúe y agregue el segundo módulo de texto que contendrá un título. En primer lugar, utilice '# 000000' como color de fondo en la pestaña Contenido.

Luego, pase a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la subcategoría Texto:

• Fuente de texto: Amargo
• Tamaño de fuente de texto: 92px
• Color del texto: # 000000
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda

Abra la subcategoría Borde y use el siguiente borde:

• Usar borde: sí
• Color del borde: # 000000
• Ancho del borde: 3px
• Estilo de borde: sólido

Además, use un Ancho de '77% 'y una Alineación del Módulo a la izquierda.

Por último, agregue '15px' al relleno superior, derecho, inferior e izquierdo del Módulo de texto.

Tercer módulo de texto

Agregue otro módulo de texto justo debajo del anterior. Éste representará la descripción. Vaya a la pestaña Diseño y use la siguiente configuración para la Subcategoría de texto:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 16px
• Color del texto: # 000000
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda

Abra la subcategoría Tamaño, use '70% 'para el Ancho y seleccione la alineación del módulo izquierdo.

Por último, agregue un margen superior de '20px'.

Quinto módulo de texto

El quinto módulo de texto sirve como botón minimalista. Dentro de la pestaña Contenido, use el símbolo '→' + el texto y coloque un enlace detrás de él.

Luego, vaya a la pestaña Diseño. Utilice la siguiente configuración para la subcategoría Texto:

• Fuente de texto: Amargo
• Tamaño de fuente de texto: 23px
• Color del texto: # 000000
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda

Desplácese hacia abajo en la misma pestaña hasta que encuentre la subcategoría Tamaño. Dentro de esa subcategoría, use un Ancho de '49% 'y una Alineación de módulo correcta.

Por último, agregue un margen superior de '80px'.

Sexto módulo de texto

El sexto y último módulo que necesitaremos es casi el mismo que el anterior. Use el texto '→' + y coloque un enlace detrás de él.

La configuración de la subcategoría de texto es la siguiente:

• Fuente de texto: Amargo
• Tamaño de fuente de texto: 23px
• Color del texto: # e02b20
• Altura de la línea de texto: 1em
• Orientación del texto: izquierda

Cambie el ancho a '39% 'y use también la alineación de módulo correcta.

Segunda fila

Color de fondo

Abra la configuración de la fila y agregue 'rgba (255,255,255,0.14)' como color de fondo.

Imagen de fondo

Agregue una de las imágenes que ha creado en la parte de Photoshop de esta publicación y use 'Tono' como Mezcla de imágenes de fondo.

Estructura de la columna

La segunda fila que debe agregar a la sección estándar es exactamente la opuesta a la anterior.

Módulos de clonación

Los módulos que hemos usado en la fila anterior son los mismos que necesitamos para esta fila, así que adelante, clónalos y colócalos en la primera columna en lugar de en la segunda. Tendremos que hacer algunos cambios de alineación en la siguiente parte de esta publicación.

Primeras modificaciones del módulo de texto

Abra el primer módulo de texto y agregue un margen superior de '20px'.

Modificaciones del módulo divisor

Luego, abra el Módulo divisor y cambie la Alineación del módulo dentro de la subcategoría Tamaño a la derecha.

Modificaciones del segundo módulo de texto

Establezca la Orientación del texto del segundo módulo de texto a la derecha.

Y elija también una alineación de módulo correcta en la subcategoría de tamaño.

Modificaciones del tercer módulo de texto

El tercer módulo de texto también necesitará una orientación de texto correcta.

Y también una alineación de módulo adecuada.

Modificaciones del quinto módulo de texto

Lo único que tendrá que hacer para el quinto módulo de texto es cambiar el ancho a '82% '.

Modificaciones del sexto módulo de texto

Lo mismo cuenta para el sexto módulo de texto, pero use '87% 'en su lugar.

Ocultar sección para tableta y teléfono

Una vez que haya terminado las dos filas, puede continuar y deshabilitar toda la sección en el teléfono y la tableta.

Catálogo de tabletas y teléfonos (nueva sección)

Para que todo se vea genial también en tabletas y teléfonos, vamos a crear una nueva sección estándar.

Configuración de la sección

Color de fondo

Agregue '#FFFFFF' como el color de fondo de esa sección.

Acolchado personalizado

Vaya a la pestaña Diseño y agregue un relleno superior de '15px'.

Primera fila

Estructura de la columna

Luego, agregue una fila de dos columnas a la sección.

Dimensionamiento

Vaya a la subcategoría Tamaño de esa fila y realice los siguientes cambios:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Módulo de imagen

En lugar de usar una imagen de fondo, usaremos un módulo de imagen. De esa forma, nos aseguraremos de que el texto y la imagen no se superpongan. Continúe y agregue un módulo de imagen a la primera columna de la fila y cargue una imagen.

Clonar módulos de la primera fila en la versión de escritorio

Luego, clone todos los módulos que ha usado en la primera fila de la versión de escritorio y colóquelos dentro de la segunda columna.

Cambiar el tamaño de fuente del segundo módulo de texto

Solo hay una cosa que debe cambiarse; el tamaño de fuente del segundo módulo de texto. Cámbielo a 65px.

Segunda fila

Estructura de la columna

Luego, continúe y agregue otra fila de dos columnas a la sección.

Dimensionamiento

Esta fila también necesitará una subcategoría de tamaño modificada:

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Módulo de imagen

Agregue el Módulo de imagen también a la primera columna y cargue una imagen.

Clonar módulos de la segunda fila en la versión de escritorio

Luego, continúe y clone los módulos que se encuentran dentro de la segunda fila de la versión de escritorio. Una vez que los haya clonado, colóquelos en la segunda columna de esta fila.

Cambiar el tamaño de fuente del segundo módulo de texto

También es necesario cambiar el tamaño del texto del segundo módulo de texto. Adelante, asígnele un tamaño de fuente de '65px'.

Ocultar sección para escritorio

Una vez que haya terminado ambas filas, puede continuar y deshabilitar toda la sección en el escritorio.

Resultado

Et voila, después de seguir todos los pasos en esta publicación, debería lograr el siguiente resultado en el escritorio:

Y lo siguiente en teléfono y tableta:

Pensamientos finales

En esta publicación, le mostramos cómo puede crear un buen catálogo de moda con desplazamiento. Para que nuestro diseño funcione, primero le mostramos cómo hacer una forma transparente dentro de su imagen con Photoshop. Posteriormente, usamos estas imágenes dentro de nuestro tutorial Divi para crear el diseño. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Rvector / shutterstock.com