Guía tutorial del generador de diseños de WoodMart Theme

WoodMart es un programa muy orientado a los negocios y práctico WooCommerce Tema, cuyo Layout Builder es uno de los módulos funcionales más importantes de todo el sistema de temas. A través del Layout Builder, se puede anular directamente la estructura de la página de WooCommerce, lo que permite una personalización profunda de las páginas de productos, las páginas de la tienda y otras páginas del sistema.

Comprender y utilizar correctamente el generador de diseños es una habilidad fundamental para crear sitios de comercio electrónico con WoodMart.

1. El posicionamiento de Layout Builder dentro de WoodMart

1.1 Aplicaciones prácticas del generador de diseños

El propósito del Layout Builder no es «embellecer las páginas», sino más bienRediseño de la estructura de la página WooCommerce.

Aborda principalmente las siguientes cuestiones:

• La estructura predeterminada de la página del producto no se puede controlar.
• Los diferentes productos no pueden utilizar diferentes diseños de página.
• Los diseños de la página de la tienda y de la página de categorías son bastante monótonos.
• Modificar los archivos del tema conlleva riesgos elevados y supone importantes costes de mantenimiento.

Con Layout Builder, puedes reestructurar completamente los diseños de página sin necesidad de escribir código.

1.2 Diferencias entre el generador de diseños y la edición de páginas estándar

El editor de páginas estándar solo afecta al contenido de las páginas individuales, mientras que el generador de diseños influye directamente en las páginas del sistema de WooCommerce.

La diferencia clave es la siguiente:

• El generador de diseños sustituirá al predeterminado. PHP Salida de la plantilla
• El diseño se puede controlar mediante condiciones para determinar su ámbito de aplicación.
• Un solo sitio puede contener simultáneamente múltiples estructuras de páginas de productos.

Por lo tanto, Layout Builder se parece más a un «sistema de plantillas de página» que a un editor de contenido.

II. Creación de un diseño de página de producto único

2.1 Ruta para crear un nuevo diseño de producto único

La ruta de operación del backend es la siguiente:

Backend de WordPress
Diseños
Producto único
Añadir nuevo

Durante la creación deben completarse dos configuraciones fundamentales:

• Nombre del diseño
• Condiciones de aplicación

2.2 Lógica de configuración de las condiciones de aplicación

Las condiciones determinan a qué productos se aplica este diseño. Entre los usos más comunes se incluyen:

• Todos los productos utilizan un único diseño.
• Una categoría concreta emplea un diseño independiente.
• Designar productos específicos para utilizar estructuras exclusivas.

La importancia de este paso radica en permitir que los diferentes tipos de productos empleen estrategias de visualización distintas, en lugar de aplicar una única plantilla para todos.

2.3 Acceder al generador para editar estructuras de diseño

Al hacer clic en Crear diseño, el sistema entrará en el Builder visual.

El diseño se compone de elementos modulares, tales como:

• Fotos del producto
• Título del producto
• precios
• descripciones
• botones
• Bloque de contenido personalizado

Cada elemento admite:

• espaciado
• Configuración de fuentes
• Control del color
• Configuración de parámetros funcionales

Todos los diseños son compatibles por defecto con ordenadores de sobremesa, tabletas y dispositivos móviles.

III. Explicación de las categorías de elementos en el generador de diseños

3.1 Elementos globales

Los elementos globales son módulos versátiles que se pueden reutilizar en múltiples diseños, adecuados para:

• Zona promocional unificada
• Módulo de explicación fija
• común (uso) CTA bloques

Estos elementos se utilizan para mantener la coherencia estilística en todo el sitio.

3.2 Elementos del sitio

Sitio Los elementos comprenden componentes a nivel del sitio, normalmente asociados con la estructura general, que sirven para mantener una lógica coherente en diferentes diseños.

3.3 Elementos exclusivos de un solo producto

Los elementos del área de producto único solo se pueden utilizar en páginas de productos únicos, por ejemplo:

• Título del producto
• Clasificación de los productos
• Precio del producto
• Botón Añadir a la cesta

Estos elementos no se pueden invocar en páginas normales ni dentro de otros diseños.

IV. Establecimiento del objetivo correcto para la vista previa del producto

4.1 ¿Por qué es necesario especificar un producto de vista previa?

De forma predeterminada, el Generador selecciona aleatoriamente un producto para la vista previa, lo que puede dar lugar a errores de juicio en las siguientes circunstancias:

• Los campos del producto están incompletos.
• Los productos variables difieren de las estructuras de productos simples.
• El diseño se muestra incorrectamente en el producto real.

4.2 Especificar el método de funcionamiento para los productos de vista previa

La ruta de funcionamiento es la siguiente:

Configuración del tema
Producto único
Área de constructores
Seleccione un producto específico.

Una vez configurado, el diseño dentro del Builder siempre se renderizará basándose en este producto.

V. Razones de la pérdida de funcionalidad debido a diseños personalizados

5.1 La causa fundamental de la desaparición de características

Cuando se utiliza un diseño personalizado:

• Se ha borrado la estructura predeterminada de la página de WooCommerce.
• El contenido generado originalmente mediante PHP Hooks ya no se carga automáticamente.

En consecuencia, es posible que algunos módulos funcionales ya no se muestren, por ejemplo:

• Contador de visitas
• Información sobre complementos de terceros
• Contenido de extensión personalizado

5.2 Utilización de la funcionalidad de restauración de elementos de gancho de WooCommerce

WoodMart proporciona elementos WooCommerce Hook para insertar ganchos manualmente.

El proceso de uso suele ser el siguiente:

• Confirmar los nombres de los ganchos para las dependencias del complemento.
• Añadir un elemento WooCommerce Hook al diseño
• Seleccione el correspondiente. Gancho
• Habilitar acciones de limpieza para eliminar la salida predeterminada

La función principal de Hook es:

• Asegúrate de que sea compatible con plugins de terceros.
• Añadir código de funcionalidad personalizada

VI. Creación del diseño de la página de la tienda

6.1 Crear un nuevo diseño de archivo de productos

La ruta del backend es la siguiente:

Diseños
Archivo de productos
Añadir nuevo

Del mismo modo, deberá establecer el nombre del diseño y aplicar las condiciones.

6.2 Especificación de elementos exclusivos en el diseño del archivo

Las páginas de archivo de productos presentan diferentes componentes en comparación con las páginas de productos individuales, tales como:

• Módulo de ciclo de producto
• Filtrado por categoría
• Herramienta de clasificación
• Descripción de la clasificación Área

Estos elementos solo están disponibles en el diseño del archivo de productos.

6.3 Efectos posteriores al diseño

Después de la publicación:

• La página predeterminada de la tienda será sustituida.
• Todas las páginas de categorías que cumplan los requisitos adoptarán la nueva estructura.

Esto constituye la base para lograr un diseño diferenciado en las páginas de las tiendas.

VII. Otros tipos de diseño de página compatibles con WoodMart

7.1 Rango de páginas personalizable

Además de las páginas relacionadas con productos, Layout Builder también admite:

• Carrito página web
• Página de pago
• Página de agradecimiento
• Página de publicación única
• Página de archivo de publicaciones

Esto permite gestionar toda la estructura del sitio de manera uniforme dentro de un único sistema.

7.2 La importancia de emplear un sistema de diseño unificado

El uso sistemático de Layout Builder ofrece las siguientes ventajas:

• La estructura de la página es coherente.
• Reducir los costes de mantenimiento
• Minimizar los conflictos entre plantillas
• Mejorar la estabilidad de la extensión

Para los sitios WooCommerce que llevan mucho tiempo en funcionamiento, este es un punto crucial.

VIII. Recomendaciones comunes en la práctica

• Los diferentes tipos de productos emplean diferentes diseños.
• Estructura de página dedicada a los productos más vendidos.
• Gancho de comprobación de prioridad de excepciones del complemento
• Evita apilar módulos redundantes dentro de los diseños.
• Se deben comprobar los efectos de visualización en dispositivos móviles.

Conclusión

WoodMart El generador de diseños es, básicamente, un conjunto de WooCommerce Un sistema de gestión de la estructura de las páginas, más que una simple herramienta para embellecerlas. Si se utiliza con prudencia, puede liberarle por completo de las limitaciones de las plantillas predeterminadas, permitiendo que las páginas de productos, las páginas de tiendas y las páginas del sistema tengan una estructura controlable, mantenible y escalable.

Para los sitios de comercio electrónico que utilizan WoodMart, el generador de diseños es una función básica indispensable.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres