Los sitios web de productos para niños tienen un estilo único. Tienden a ser divertidos, coloridos e inspirar una sonrisa. Ahora es más fácil crear su tienda WooCommerce para productos para niños con el creador de temas Divi y los módulos woo personalizables. ¿Por qué no hacerlo un poco más especial con un diseño único y divertido? En esta publicación, le mostraremos cómo crear una plantilla de página de productos para niños en el generador de temas que se aplicará a todos sus productos. Funcionará mejor con imágenes de productos que tengan un fondo transparente. ¡También podrás descargar el archivo JSON gratis!

Empecemos.

Avance

Antes de comenzar a recrear el diseño, echemos un vistazo al resultado en diferentes tamaños de pantalla.

Escritorio

producto para niños

Móvil

producto para niños

 

1. Preparación de diseño para la plantilla de producto para niños

Eliminar fondo de la foto del producto

Lo primero que haremos antes de comenzar con el diseño del producto para niños es preparar las imágenes. Eliminar el fondo de las imágenes del producto. Puede lograr esto con Adobe Photoshop, Adobe Illustrator o remove.bg. Deje un poco de espacio alrededor del producto para que quede bien en el diseño. El mejor tamaño para la imagen final es 600X400 píxeles.

Crear diseño de fondo

El segundo paso es crear un diseño de fondo para colocar detrás de la imagen. Este diseño con formas superpuestas se crea fácilmente dentro de Adobe Illustrator. Alternativamente, puede encontrar esta imagen de fondo en la carpeta descargable que se encuentra arriba. Estos son los pasos a seguir si desea crear el fondo:

  • Crear (o fuente) una forma.
  • Dale a la forma el color que deseas.
  • Duplicar la forma.
  • Coloréalo en un tono similar al original.
  • Gire la segunda forma para crear una bonita composición.
  • Agregue un poco de transparencia a ambas formas.
  • Agregue un fondo del mismo color que el fondo en el diseño final.
  • Guardar como JPG en alrededor de 1750X1650 px.

2. Crear / Agregar nuevo producto Woocommerce

Datos del producto

Una vez que tengamos la imagen del producto y los diseños de fondo listos, es hora de crear un producto para niños. Para crear un diseño exactamente como el nuestro, inserte la siguiente información.

  • Título: Bloques de letras de madera
  • Descripción larga: estos bloques de madera natural son excelentes para que los niños aprendan sus letras y números de una manera divertida y creativa. Los bordes son redondeados para dedos pequeños y la pintura no es tóxica.
  • Precio de venta anterior: 12,99
  • Nuevo Precio de venta: 7,99
  • Imagen destacada: Recorte la imagen de bloques de madera. Tamaño preferido: 600 x 400 px
  • Atributos: ver abajo

En la pestaña de atributos, ingrese los valores para el módulo de información adicional.

  • Material: madera de pino natural
  • Pintura: pintura blanca no tóxica
  • Colores de pintura: blanco, azul, verde, fucsia

3. Crear nueva plantilla en Theme Builder

Abra Divi Theme Builder y agregue una nueva plantilla

Ahora es el momento de dirigirse al creador de temas Divi. Construiremos el diseño allí. A dd una nueva plantilla.

Comience a construir un cuerpo personalizado para todos los productos

Use esta plantilla en todos los productos y comience a construir el cuerpo.

Sugerencia de Theme Builder Pro:

Al crear un diseño de producto dentro del generador de temas, mantenga siempre abierta una página de producto en otra ventana para verificar los cambios.

4. Recrea el diseño de productos para niños

Agregar nueva sección

Antecedentes

Dentro del generador de plantillas de cuerpo, verás una sección. Abra esa sección y cambie el color de fondo.

  • Color de fondo: Rosa pálido # f9f2f2

Agregar nueva fila

Estructura de columna

Ahora, agregue una nueva fila con 2 columnas.

Dimensionamiento

Luego, ajuste el tamaño de la fila.

  • Ancho de canal personalizado: 2
  • Ancho: 90%
  • Ancho Máx .: 90%

Configuración de columna 1

Antecedentes

En la configuración de la columna 1, agregue el diseño de la imagen de fondo que creó con las formas superpuestas.

  • Imagen de fondo

Espaciado

Luego, ajuste el espacio en consecuencia.

  • Acolchado superior e inferior: 5vw
  • Acolchado Izquierdo y Derecho
    • Tableta: 2vw
    • Teléfono: 0vw

Configuración de columna 2

Espaciado

Pase a la columna 2 y ajuste los valores de espaciado de la siguiente manera.

  • Relleno superior: 1vw
  • Acolchado inferior:
    • Tableta + Teléfono: 1vw
  • Relleno izquierdo y derecho:
    • Escritorio: 2vw
    • Tableta y teléfono: 7vw

Añadir Woo Image Module a la Columna 1

Contenido

Ahora es el momento de agregar los módulos. Primero, en la columna 1, agregue un módulo de imagen woo y seleccione este producto bajo contenido.

  • Producto: Este producto

Elementos

Luego, seleccione los elementos que se mostrarán en el diseño.

  • Imagen destacada: sí
  • Galería: no
  • Insignia de ventas: sí

Texto de insignia de venta

En la pestaña de diseño, ajuste los valores para la insignia de venta de la siguiente manera.

  • Color de la insignia: transparente
  • Fuente: Nunito
  • Peso de fuente: negrita
  • Color del texto: rosa # f24881
  • Tamano del texto:
    • Escritorio: 5vw
    • Tableta: 12vw
    • Teléfono: 10vw

Dimensionamiento

Luego, ajuste el espacio para que las cosas encajen mejor.

  • Relleno superior:
    • Escritorio y tableta: 1vw
    • Teléfono: 2vw
  • Relleno inferior: 0vw
  • Relleno izquierdo y derecho: 0vw

Añadir Woo Title Module a la Columna 2

Contenido

En la segunda columna, agregue un módulo de título woo y seleccione este producto en la pestaña de contenido.

  • Producto: Este producto

Antecedentes

Dale al módulo un fondo blanco.

  • Color de fondo: blanco #ffffff

Texto del título

Luego, diseñe el texto del título en un nivel H1.

  • Nivel de rumbo: H1
  • Fuente: Nunito
  • Peso de fuente: Ultra Bold
  • Alineación de texto: centro
  • Color del texto: gris oscuro verdoso # 314942
  • Tamano del texto:
    • Escritorio: 2.6vw
    • Tableta y teléfono: 6.4vw

Espaciado

Continúe ajustando el espacio en el módulo.

  • Acolchado superior e inferior:
    • Escritorio: 1.5vw
    • Tableta y teléfono: 2.5vw
  • Relleno izquierdo y derecho: 2vw

Frontera

Finalmente, ajuste el borde para los tamaños de escritorio y receptivo.

  • Esquinas redondeadas:
    • Escritorio: 1vw las cuatro esquinas
    • Tableta y teléfono: 3vw las cuatro esquinas

Agregue el módulo de descripción de Woo a la columna 2

Contenido

Debajo del título del producto, agregue un módulo de descripción woo. Elija el tipo de descripción y este producto en la pestaña de contenido.

  • Producto: Este producto
  • Tipo de descripción: Descripción

Antecedentes

Luego, dele al módulo un color de fondo.

  • Color de fondo: blanco #ffffff

Texto

Avanza a la pestaña de diseño y dale estilo al texto.

  • Fuente: Nunito
  • Color: gris oscuro verdoso # 314942
  • Talla:
    • Escritorio: 1vw
    • Tableta: 2.5vw
    • Teléfono: 3vw

Espaciado

Luego, ajuste el espacio para el módulo.

  • Margen superior:
    • Escritorio y tableta: -0.5vw
    • Teléfono: -3vw
  • Acolchado superior e inferior:
    • Escritorio: 1.5vw
    • Tableta y teléfono: 4vw
  • Relleno izquierdo y derecho:
    • Escritorio: 2vw
    • Tableta y teléfono: 6vw

Frontera

Finalmente, agregue las esquinas redondeadas.

  • Esquinas redondeadas:
    • Escritorio: 1vw las cuatro esquinas
    • Tableta y teléfono: 3vw las cuatro esquinas

Agregue el módulo de información adicional Woo a la columna 2

Contenido

Debajo del módulo de descripción, agregue el módulo de información adicional woo. Elija este producto en la pestaña de contenido.

  • Producto: Este producto

Antecedentes

Luego, agregue un fondo blanco.

  • Color de fondo: blanco #ffffff

Texto

En la pestaña de diseño, comience a diseñar los diferentes tipos de texto. Primero, el texto que se aplica a los valores de los atributos.

  • Fuente: Nunito
  • Estilo: cursiva
  • Color: gris oscuro verdoso # 314942
  • Talla:
    • Escritorio: 0.8vw
    • Tableta: 1.5vw
    • Teléfono: 2vw

Texto del título

Segundo, peina el texto del título.

  • Fuente: Nunito
  • Peso: Ultra Bold
  • Color: Rosa # f24881
  • Talla:
    • Escritorio: 1.7vw
    • Tableta: 3vw
    • Teléfono: 3.5vw
  • Altura de línea: 1 em

Texto de atributo

Tercero, estilice el texto del atributo.

  • Fuente: Nunito
  • Peso: negrita
  • Color: gris oscuro verdoso # 314942
  • Talla:
    • Escritorio: 0.9vw
    • Tableta: 2vw
    • Teléfono: 3vw

Espaciado

Luego, ajuste el espacio de la siguiente manera.

  • Margen superior:
    • Escritorio y tableta: -0.5vw
    • Teléfono: -3vw
  • Relleno superior:
    • Escritorio: 1.5vw
    • Tableta: 3vw
    • Teléfono: 5vw
  • Relleno izquierdo: 1vw
  • Relleno derecho:
    • Escritorio: 2vw
    • Tableta y teléfono: 5vw

Frontera

Finalmente, agregue las esquinas redondeadas.

  • Esquinas redondeadas:
    • Escritorio: 1vw las cuatro esquinas
    • Tableta y teléfono: 3vw las cuatro esquinas

Agregue el módulo de precios Woo a la columna 2

Contenido

Agregue un módulo de precios woo y elija este producto en la pestaña de contenido.

  • Producto: Este producto

Antecedentes

Además, agregue un fondo rosa al módulo para que se destaque.

  • Color de fondo: Rosa # f24881

Texto de precio antiguo de venta

Pasa a la pestaña de diseño y dale estilo al precio de venta anterior.

* Cuando agrega un precio de venta nuevo y antiguo a un producto, el módulo de precios woo no mostrará ambos en el generador de temas. Consulte la página del producto real para ver cómo se ve el diseño final.

  • Fuente: Nunito
  • Color: blanco #ffffff
  • Talla:
    • Escritorio: 1.5vw
    • Tableta: 2.5vw
    • Teléfono: 3vvw

Venta Nuevo Precio Texto

Continúa diseñando el nuevo precio.

  • Fuente: Nunito
  • Peso: negrita
  • Color: blanco #ffffff
  • Talla:
    • Escritorio: 2vw
    • Tableta: 2vw
    • Teléfono: 4vw
  • Espaciado de letras: 1px

Espaciado

Luego, ajuste el espacio del módulo.

  • Margen superior:
    • Escritorio y tableta: -0.5vw
    • Teléfono: -3vw
  • Acolchado superior e inferior:
    • Escritorio: 1.5vw
    • Tableta y teléfono:
  • Relleno izquierdo y derecho:
    • Escritorio: 2vw
    • Tableta y teléfono: 5vw

Frontera

Finalmente, agregue las esquinas redondeadas.

  • Esquinas redondeadas:
    • Escritorio: 1vw las cuatro esquinas
    • Tableta y teléfono: 3vw las cuatro esquinas

Diseño final

Así es como se ve el diseño en el producto real frente a cómo se ve en el generador de temas.

Añadir Woo Añadir al carrito Módulo a la columna 2

Contenido

Debajo del módulo de precios, coloque un módulo para agregar al carrito. Seleccione este producto en la pestaña de contenido.

* Cuando agregue un módulo de agregar al carrito, notará que en la parte superior tiene un menú desplegable para una opción de color. Si no especificó esto en la página de su producto, no aparecerá en su diseño final. Puede asegurarse comprobando el producto en vivo a medida que construye dentro del generador de temas.

  • Producto: Este producto

Elementos

Continuando, seleccione los elementos que se mostrarán en el módulo.

  • Campo de cantidad: desactivado
  • Stock: apagado

Antecedentes

Luego, agregue un color de fondo blanco.

  • Color de fondo: blanco #ffffff

Botón

Ahora es el momento de diseñar el botón. Agregue los valores de la siguiente manera.

  • Tamano del texto:
    • Escritorio: 2vw
    • Tableta: 3vw
    • Teléfono: 5vw
  • Color del texto: rosa # f24881
  • Color de fondo: blanco #ffffff
  • Espaciado de letras: 1px
  • Fuente: Nunito
  • Peso: pesado
  • Margen superior e inferior: -0.3vw

Espaciado

Luego, ajuste el espacio del módulo.

  • Margen superior:
    • Escritorio y tableta: -0.5vw
    • Tableta: -3vw
  • Relleno superior e inferior: 0vw
  • Margen izquierdo y derecho: 0vw

Frontera

Finalmente, agregue un borde redondeado.

  • Esquinas redondeadas:
    • Escritorio: 1vw las cuatro esquinas
    • Tableta y teléfono: 3vw las cuatro esquinas

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!