Cómo crear una plantilla divertida de página de productos para productos para niños con div Div

Los sitios de productos para niños tienen un estilo único. Tienden a ser divertidos, coloridos e inspiran una sonrisa. Su tienda WooCommerce para productos para niños ahora es más fácil de crear con la ayuda de los módulos de personalización WOO. ¿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 tienen un fondo transparente. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a empezar. Vista previa antes de comenzar a recrear el diseño, eche un vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el producto del producto Fun Kids de forma gratuita para poner su mano en la plantilla de producto infantil gratuita, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. La preparación de diseño para la plantilla de producto para bebés elimina el fondo de la fotografía del producto. Lo primero que haremos antes de comenzar con el diseño de productos para niños es la preparación de imágenes. Elimine el fondo de las imágenes del producto. Puede hacer esto con Adobe Photoshop, Adobe Illustrator o Eliminar.BG. Deje un poco de espacio alrededor del producto para que esté bien en el diseño. El mejor tamaño para la imagen final es 600×400 píxeles.
Crear diseño de fondo El segundo paso es crear un diseño de fondo que se coloque detrás de la imagen. Este diseño con formas superpuestas se crea fácilmente en Adobe Illustrator. Alternativamente, puede encontrar esta imagen de fondo en la carpeta descargable de arriba. Estos son los pasos a seguir si desea crear el fondo:

Crear (o fuente) un formulario.
Dar la forma al color deseado.
Duplicar el formulario.
Colorearlo en un tono similar al original.
Gire la segunda forma para crear una hermosa composición.
Agregue una cierta transparencia a ambas formas.
Agregue un fondo en el mismo color que el fondo en el diseño final.
2. Cree / agregue un nuevo producto de producto de WooCommerce una vez que tengamos la imagen del producto y los dibujos de fondo, es hora de crear un producto para niños. Para crear un diseño exactamente como el nuestro, ingrese la siguiente información.
Título: Bloques de madera de letras



Descripción larga: estos bloques de madera natural son maravillosos para que los niños aprendan sus cartas y números de una manera divertida y creativa. Los bordes se redondean para los dedos, y la pintura no es tóxica.
Precio de venta antiguo: 12.99
Nuevo precio de venta: 7.99
Imagen presentada: Corte la imagen de los bloques de madera. Tamaño favorito: 600 x 400 PX
Atributo: ver más abajo
En la pestaña Atributo, 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. Cree una nueva plantilla en el constructor de temas Abra el creador de temas y agregue una nueva plantilla ahora es el momento de dirigirse al mejor constructor de temas. Construiremos el diseño allí. DD una nueva plantilla.
Comience a construir un cuerpo personalizado para todos los productos Use esta plantilla para todos los productos y comience a construir su cuerpo.

Consejo de temas Builder Pro: Al crear un diseño de producto dentro del fabricante del tema, siempre mantenga una página de producto abierta en otra ventana para verificar los cambios.

4. Recrear el diseño del producto para niños Agregue una nueva sección de fondo dentro del constructor de plantillas del cuerpo, notará una sección. Abra esa sección y cambie el color de fondo. Fondo de pantalla: Pink Pink # F9F2F2



Agregue una nueva línea a la estructura de la columna ahora, agregue una nueva fila con 2 columnas.
Dimensión luego ajuste el tamaño de la fila.
Ancho de canaleta personalizado: 2

Ancho: 90%

Ancho máximo: 90%
Configuración Columna 1 Fondo en la configuración de la columna 1, agregue el diseño de la imagen de fondo que creó con formas superpuestas.
Imagen de fondo
Extienda y luego ajuste el espacio en consecuencia.

Revestimiento superior e inferior: 5VW
Forro izquierdo y derecho

Tableta: 2VW
Teléfono: 0VW
Configuración Columna 2 Pase de espaciado a la columna 2 y ajuste los valores de espaciado de la siguiente manera.
Revestimiento superior: 1VW
Levante inferior:

Tableta + teléfono: 1VW
Forro izquierdo y derecho:
Escritorio: 2VW
Tableta y teléfono: 7VW
Agregue el módulo de imagen WOO al contenido de la columna 1 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 en contenido.
Producto: este producto
Los elementos luego seleccione los elementos que se mostrarán en el diseño.

Imagen presentada: Sí
Galería: No.

Insignia de ventas: sí
Texto de la insignia de venta En la pestaña Diseño, ajuste los valores para la insignia de venta de la siguiente manera.
Insignia de color: transparente
FUENTE: NUNITO

Peso de fuente: en negrita
Color de texto: rosa # f24881
Tamano del texto:
Escritorio: 5VW
Tableta: 12VW
Teléfono: 10 VW
Dimensión y luego ajuste la distancia para que las cosas se ajusten mejor.
Revestimiento superior:
Escritorio y tableta: 1 VW

Teléfono: 2vwcăptușușiere: 0VW
Junta izquierda y derecha: 0VW
Agregue el módulo de título WOO al contenido de la columna 2 en la segunda columna, agregue un módulo de título WOO y seleccione este producto en la pestaña Contenido.
Producto: este producto
Dale al módulo un fondo blanco.
Color de fondo: blanco #ffffff

El texto del título luego estiliza el texto del título a un nivel H1.
Nivel de título: H1

FUENTE: NUNITO
Peso de fuente: Ultra Bold


Alineación de texto: Centro
Color de texto: verde gris oscuro # 314942
Tamano del texto:
Escritorio: 2.6VW
Tableta y teléfono: 6.4VW
El espacio continúa ajustando el espacio en el módulo.
Revestimiento superior e inferior:
Escritorio: 1.5VW
Tableta y teléfono: 2.5VW

Junta izquierda y derecha: 2VW
Finalmente, borde, ajuste el borde para las dimensiones de escritorio y receptivas.
Esquinas redondeadas:
Desktop: 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 bajo el 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
Soporte entonces, le dé al módulo un color de fondo.

Color de fondo: blanco #ffffff
Interruptor de texto a la pestaña de diseño y estilice el texto.
FUENTE: NUNITO

Color: verde gris oscuro # 314942
Tamaño:

Escritorio: 1VW
Tableta: 2.5VW
Teléfono: 3VW
Espacio y luego ajusta el espacio para el módulo.
Margen superior:
Escritorio y tableta: -0.5VW
Teléfono: -3VW

Revestimiento superior e inferior:
Escritorio: 1.5VW
Tableta y teléfono: 4VW
Forro izquierdo y derecho:
Escritorio: 2VW
Tableta y teléfono: 6VW
El borde finalmente agregue las esquinas redondeadas.
Esquinas redondeadas: escritorio: 1 vw las cuatro esquinas
Tableta y teléfono: 3VW las cuatro esquinas
Agregue el módulo de información de WOO adicional al contenido de la columna 2 en el módulo Descripción, agregue el módulo de información WOO adicional. Elija este producto en la pestaña de contenido.

Producto: este producto
fondo y luego agregue un fondo blanco.
Color de fondo: blanco #ffffff
Texto en la pestaña Diseño, comience a diseñar diferentes tipos de texto. Primero, el texto que se aplica a los valores de los atributos.

FUENTE: NUNITO
Estilo: cursiva

Color: verde gris oscuro # 314942
Tamaño:

Escritorio: 0.8VW
Tableta: 1.5VW
Teléfono: 2VW
El texto del texto en segundo lugar, estilice el texto del título.
FUENTE: NUNITO
Peso: Ultra Bold
Color: rosa # f24881
Tamaño:

Escritorio: 1.7VW
Tableta: 3VW
Teléfono: 3.5VW
Altura de línea: 1em
El texto del atributo en la tercera fila, estilice el texto del atributo.
FUENTE: NUNITO
Peso: en negrita
Color: verde gris oscuro # 314942
Tamaño:

Escritorio: 0.9VW
Tableta: 2VW
Teléfono: 3VW
El espacio luego ajusta el espacio de la siguiente manera.
Margen superior:
Escritorio y tableta: -0.5VW
Teléfono: -3VW
Revestimiento superior:

Escritorio: 1.5VW
Tableta: 3VW
Teléfono: 5VW
Lengo izquierdo: 1VW
Junta derecha:
Escritorio: 2VW
Tableta y teléfono: 5VW
El borde finalmente agregue las esquinas redondeadas.
Esquinas redondeadas:
Desktop: 1VW las cuatro esquinas
Tableta y teléfono: 3VW las cuatro esquinas
Agregue el módulo de precio WOO al contenido de la columna 2 Agregue un módulo de precio WOO y elija este producto en la pestaña de contenido.

Producto: este producto
El fondo también agregue un fondo rosa a la forma de resaltarlo.
Color de fondo: rosa # f24881
Texto de precio antiguo para la venta Vaya a la pestaña Diseño y estilice el precio de venta anterior. * Al agregar un precio de venta nuevo y antiguo a un producto, el módulo de precio WOO no se mostrará ambos en el generador de temas. Consulte la página del producto real para ver cómo se ve el diseño final.

Color: blanco #ffffff
Tamaño:

Escritorio: 1.5VW
Tableta: 2.5VW

Teléfono: 3VVW
Venta de texto con nuevo precio Continúe con el estilo del nuevo precio.
FUENTE: NUNITO
Peso: en negrita
Color: blanco #ffffff
Tamaño:
Escritorio: 2VW

Tableta: 2VW
Teléfono: 4VW
Espacio de letras: 1 PX
Espacio y luego ajusta el espacio del módulo.
Margen superior:
Escritorio y tableta: -0.5VW
Teléfono: -3VW
Revestimiento superior e inferior:
Escritorio: 1.5VW

Tableta y teléfono:
Forro izquierdo y derecho:
Escritorio: 2VW
Tableta y teléfono: 5VW
El borde finalmente agregue las esquinas redondeadas.
Esquinas redondeadas:
Desktop: 1VW las cuatro esquinas
Tableta y teléfono: 3VW las cuatro esquinas
Diseño final Esto muestra el diseño del producto real en comparación con lo que se ve en el generador de temas.
Agregue Woo Agregar a los módulos de carrito en el contenido de la columna 2 bajo el módulo de precio, coloque un módulo de adición en el carrito. Seleccione este producto en la pestaña Contenido. * Al agregar un módulo Woo Agregar al CART, notará que en la parte superior tiene un menú de caída para una opción de color. Si no ha especificado esto en la página de su producto, no aparecerá en el diseño final. Puede asegurarse de revisar su producto en vivo mientras construye dentro del fabricante de tareas.

Producto: este producto
Elementos continuos, seleccione los elementos que se mostrarán en el módulo.
Campo de cantidad: discapacitado
Stock: Off

Fondo y luego agregue un color de fondo blanco. Fondo de pantalla: White #FFFFFF

El botón ahora es el momento de estilizar el botón. Agregue los valores de la siguiente manera.
Tamano del texto:

Escritorio: 2VW
Tableta: 3VW
Teléfono: 5VW

Color de texto: rosa # f24881
Color de fondo: blanco #ffffff

Espacio de letras: 1 PX
FUENTE: NUNITO
Peso: pesado
El margen superior e inferior: -0.3VW
Espacio y luego ajusta el espacio del módulo.
Margen superior:
Escritorio y tableta: -0.5VW
Tableta: -3VW
Revestimiento superior e inferior: 0VW
Margen izquierdo y derecho: 0VW
El borde finalmente agregue un borde redondeado.


Esquinas redondeadas:
Desktop: 1VW las cuatro esquinas
Tableta y teléfono: 3VW las cuatro esquinas
Vista previa para echar un vistazo final al diseño completado en diferentes tamaños de pantalla. La plantilla de diseño de productos para niños ahora se aplicará a todos los productos de su tienda. Asegúrese de volver para verificar las dimensiones de la imagen para asegurarse de que todos encajen. Escritorio
Móvil
¡Es una envoltura en la página del producto para niños! En esta publicación, le mostré cómo recrear un diseño para la página de productos infantiles. Este diseño de bordes suaves, un diseño de fondo divertido y colores alegres harán que todos sus productos se vean acogedores y listos para comprar. Esperamos que le guste este diseño y lo use para inspirar sus propias creaciones. ¡Deje sus opiniones en los comentarios!