Al crear un sitio web en WordPress, necesitamos crear una plantilla de página de detalles de producto sencilla para mostrar mejor los detalles del producto y el contenido general de la entrada. En este artículo, vamos a introducir en detalle cómo utilizar Elementor para lograr este tipo de creación de plantilla de página de detalles del producto, y compartir las ideas de implementación relacionados y pasos específicos.

División y maquetación de páginas

Antes de empezar a crear, tenemos que dividir la página. Una página de detalles de producto estándar puede dividirse en dos partes, la 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 esta manera, podemos modular mejor el dise?o y la disposición.

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

1. Creación de plantillas Single Post

Primer pasoAcceda al backend de su sitio WordPress desde [Plantilla]>[Creador de temas] en el constructor de temas de Elementor.

Paso 2: Cambiar a [Puesto único] y haga clic en [A?adir nuevoA?adir una nueva plantilla de página de detalles del artículo.

Paso 3Plantillas recomendadas por Elementor: Después de a?adirla, saltará automáticamente a la página de edición de plantillas con una ventana emergente de plantillas recomendadas por Elementor. Puede optar por importar la plantilla y editarla, o puede desactivar la recomendación de plantilla y crear y editar la página de detalles del artículo por sí mismo.

Paso 4: Después de cerrar la plantilla de recomendación, verá una ventana de edición de Elementor en blanco.

2. Edición y configuración de plantillas de páginas detalladas de artículos

Vamos a hacer plantillas de acuerdo a las necesidades reales y la experiencia personal, los siguientes pasos se pueden utilizar como referencia. Después de dominar Elementor, puede hacer diferentes estilos de plantillas de acuerdo a sus necesidades.

Paso 5Módulo A?adir título

• Coloque el módulo del título del artículo en la parte superior de la plantilla.
• Primero a?ada unSección.

• establecerSección(utilizado como expresión nominal)Acolchado Topresponder cantandoLa parte inferior es de 50pxEn0px.

• A?ade la etiqueta Heading a la Sección, establece su Etiqueta HTML como H1 y establece que esté centrada.

• Establezca el Título del elemento Encabezado en el Título de la entrada del contenido dinámico. de modo que el contenido de la etiqueta H muestre el título adecuado en función de la entrada.

Paso 6: Configurar la navegación por migas de pan

• A?ade navegación con migas de pan debajo del título. Puedes usar el elemento breadcrumb de WooCommerce si está instalado; si no, puedes usar el elemento breadcrumb de RankMath.

• Ajuste el contenido del elemento de la miga de pan para que esté centrado y cambie los colores del texto y de los enlaces.

Paso 7: Configuración del fondo de la cabecera Sección

• Configure el fondo como contenido dinámico para mostrar automáticamente la imagen destacada de la entrada.
• Establezca la Posición de la imagen en Centrado y Centrado, Repetición en Sin repetición y Tama?o en Cubrir.
• A?ada una superposición al fondo para que el texto se muestre con claridad; defina el color y la transparencia del fondo superpuesto.

Paso 8A?adir barra lateral

• A?ada una nueva Sección debajo del módulo Título.
• Establezca el espaciado entre la parte superior e inferior de la Sección en 50px y entre la izquierda y la derecha en 0px.
• A?ade un elemento de búsqueda a la peque?a columna de la izquierda, establece el fondo de la entrada en blanco y el fondo del botón en el color del estilo del tema.
• A?ada el elemento Encabezado, ponga el Título a Categorías y la Etiqueta HTML a Span, y también ponga la fuente en negrita.
• Haz una lista de categorías de entradas con el plugin IKS MENU y a?ádela a la barra lateral en forma de shortcode.
• A?ada un formulario de consulta a la barra lateral.

Paso 9: A?ade la parte del cuerpo de los detalles del artículo

• A?ada un elemento Post Content a la derecha de la barra lateral, este elemento obtendrá automáticamente el contenido del post.
• A?ade un elemento Post Info para mostrar la categoría y la fecha de la entrada.
• A?ada un elemento Social Share en la parte inferior del artículo para activar la función de compartir artículos.
• A?adir el elemento Progress Tracker para realizar la función de cambio de página del artículo, que es conveniente para que los usuarios cambien al siguiente artículo para leer.

Paso 10: Ajusta el estilo y el patrón de la plantilla

• Por último, el estilo y el estilo de toda la plantilla para ajustar, hacer embellecimiento detalle, por lo que es más acorde con el estilo de dise?o general del sitio.

resúmenes

Arriba está la guía detallada para crear plantillas de página de detalle de producto fácil usando Elementor y editor de 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 de plantilla para las páginas de detalles del producto. Espero que este artículo pueda ayudarte a comprender mejor y utilizar estas herramientas para lograr tus objetivos de dise?o de sitios web.

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