A veces necesitamos crear una plantilla de página de detalles del producto sencilla para diferenciar los detalles del producto de la página de detalles del artículo normal. En este artículo, explicaremos cómo utilizar la plantillaElementor y el editor GutenbergRealice este tipo de creación de plantilla de página de detalles del producto y comparta las ideas de implementación relacionadas y los pasos concretos.

División y maquetación de páginas

Antes de empezar a hacerlas, tenemos que hacer la páginaelementos separados.. Una página de detalles de producto estándar puede dividirse enPartes superior e inferiorla parte superior puede dividirse en partes izquierda y derecha, y la parte inferior también en partes izquierda y derecha. Al dividir la página de este modo, podemos modular mejor el dise?o y la maquetación.

Creación de plantillas de páginas detalladas de productos con Elementor

1. Creación de plantillas Single Post

1. Nueva plantillaUtilizando ElementorCreador de temascree una nueva plantilla Single Post.
2. Hacer el primer tiempo::
   • A?adir unContenedory configurado como una estructura de dos columnas con columnas iguales a izquierda y derecha.
   • Para establecer la imagen de fondo del contenedor, utilice la función Etiqueta dinámica para seleccionar Imagen destacada como imagen de fondo y anular los ajustes de estilo.
   • Columna izquierda: a?adir módulo Post Title, navegación breadcrumb (se puede utilizar)Rank Math SEOtal vezSlim SEOetc. proporcionados por plugins), además de dos módulos de botones. El botón WeChat se puede configurar como una ventana emergente para hacer clic en el código QR.
   • Barra lateral derecha: A?adir un módulo de imagen destacada.
3. Hacer la segunda parte::
   • A?ade un contenedor, de nuevo dividido en dos columnas, con la columna izquierda ajustada a unos 75% de ancho.
   • Columna izquierda: Arrastre el módulo Post Content para llamar al contenido del artículo, también puede a?adir módulos como pasar página y compartir.
   • Columna derecha: insertar módulo de búsqueda, módulo de título, llamar a artículos o productos recientes.

Después de la producción, publique la plantilla y aplíquela a todos los artículos o categorías especificados. De este modo, cuando establezcamos diferentes títulos de productos (artículos), imágenes destacadas y descripciones detalladas, el contenido de los productos cambiará automáticamente, el formato será fijo y uniforme, y será más fácil de usar.

2. Inserción del contenido del artículo

En lugar de escribir posts directamente en Elementor, se recomienda llamar al contenido normal del post insertando el módulo Post Content. De esta forma, podemos seguir escribiendo contenido utilizando el editor Gutenberg en el backend de WordPress, lo que resulta más cómodo y eficiente.

Cómo crear plantillas de páginas de detalles de productos con el editor Gutenberg

La funcionalidad de Gutenberg Editor sigue mejorando con la ampliación delplug-in (componente de software)Puede conseguir una potente funcionalidad de creación de páginas. Se comparten las dos siguientes ideas de implementación.

Idea 1: El enfoque sencillo

Este método es similar a la redacción de artículos en general, sin necesidad de crear plantillas fijas ni de utilizar las funciones de personalización de plantillas del plugin.

1. Instalación del plugin de mejora de GutenbergComoBloques Kadencetal vezTurno Verdeetc.

2. Hacer el primer tiempo::
   • Crea un nuevo artículo y a?ade el módulo ROW utilizando el editor de Gutenberg, dividido en dos columnas.
   • Columna izquierda: a?ada el módulo de título, el módulo de navegación breadcrumb y el módulo de botón respectivamente. Los botones emergentes se pueden crear con el módulo Popup de Greenshift.
   • Barra lateral derecha: Inserte el módulo de portada que viene con WordPress y establezca la imagen destacada.
3. Hacer la segunda parte::
   • A?ada un módulo ROW. Si el tema ya tiene funcionalidad de barra lateral, componga el contenido del producto directamente; si no, configure la barra lateral manualmente.
4. Función de copia rápida::
   • Instale un plugin de replicación como Yoast Post.
   • Cuando a?ada un nuevo producto, sólo tiene que hacer clic en Clonar o Borrador rápido junto a [Plantilla de producto] en la lista de artículos y cambiar el texto y la imagen.

Este método, aunque aparentemente tedioso, funciona junto conCopiar PluginEs muy cómodo y puede utilizarse con regularidad para mejorar enormemente la eficacia.

Idea 2: Métodos avanzados

Este método requiere el uso del temaFunción de ganchosActualmenteAstra ProyKadence ProyBlocksy Proetc. admiten esta función.

1. Nueva plantilla de ganchos: Especifica que la aplicación debe aplicarse a la categoría de artículos deseada.
2. Hacer el primer tiempo::
   • Cree un nuevo módulo ROW dividido en dos columnas, a?ada un módulo de título, navegación breadcrumb y botón a la izquierda; a?ada un módulo de portada a la derecha y configúrelo como imagen destacada.
3. Hacer la segunda parte::
   • Inserte el módulo Post Content, que viene con WordPress.
   • Dependiendo de la situación real, si el tema ya tiene una función de barra lateral, no hay necesidad de crear adicional; si no, entonces manualmente dividido en dos columnas, el lado derecho como una barra lateral.

Este enfoque es más avanzado y flexible, y resulta adecuado para proyectos que requieren una personalización más detallada.

resúmenes

Arriba está la guía detallada para crear plantillas fáciles de páginas de detalles de productos utilizando Elementor y el editor Gutenberg. Al dividir razonablemente la estructura de la página y utilizar las potentes funciones de Elementor y el editor Gutenberg, puede lograr fácilmente un dise?o modular y con plantillas de páginas de detalles del producto.

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