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 de detalles 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 Gutenberg Editor, 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.
