El bloque «Título del producto » recupera y muestra dinámicamente el título de cada producto de WooCommerce en tus plantillas de producto único. En lugar de introducir manualmente el nombre de un producto, este bloque extrae el título directamente de WooCommerce para cada producto, lo que garantiza la precisión y coherencia de tus páginas en todo tu catálogo.
Este bloque está diseñado exclusivamente para su uso en plantillas de producto único. Tienes control total sobre cómo se muestra el título: elige el nivel de encabezado HTML (H1 a H6), establece la alineación y el tamaño de fuente por dispositivo y, si lo deseas, envuelve el título en un enlace. La pestaña Avanzado te ofrece opciones de estilo adicionales, como tipografía, color y efectos de sombra de texto.
Añadir el bloque del título del producto a tus páginas
Siga estos pasos para añadir un bloque de título de producto a su plantilla de producto único de SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques > Etiquetas de plantilla de WooCommerce, arrastra y suelta el bloque Título del producto en la sección deseada de tu plantilla de producto único.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Título del producto para abrir su configuración. En la pestaña Contenido, la sección Título contiene el campo de texto del título y todas las opciones de visualización sobre cómo aparece el título del producto en la página.
- Texto: El campo de contenido está prellenado con el
código corto, que obtiene automáticamente el título correcto de cada producto de WooCommerce. Si lo necesitas, puedes añadir texto personalizado alrededor del código corto o usar el editor de texto enriquecido para ponerlo en negrita, cursiva u otro formato. - Enlace: Opcionalmente, envuelva el título del producto en un hipervínculo introduciendo una URL en el campo Enlace. Expanda las opciones de enlace para habilitar Abrir en una ventana nueva (abre el enlace en una nueva pestaña del navegador) o No seguir (añade un
rel="nofollow"atribuir al enlace con fines de SEO). - Alineación: Establece la alineación horizontal del título: izquierda, centrada o derecha. Admite la alineación por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Tamaño de fuente: Establezca el tamaño de fuente del título utilizando el control deslizante (10-72 píxeles). Admite el ajuste del tamaño por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Nivel: elige la etiqueta de encabezado HTML que se utilizará para mostrar el título del producto: H1, H2, H3, H4, H5 o H6. Para optimizar el posicionamiento SEO, utiliza H1 para el título principal del producto si no hay ningún otro H1 en la página.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar aún más el aspecto del título y controlar su visibilidad en los distintos dispositivos.
Estilos:
- Tipografía: configura la familia tipográfica, el grosor, la altura de línea, el espaciado entre letras y la transformación del texto del título del producto, lo que te ofrece un control superior al que proporciona el control deslizante Tamaño de fuente de la pestaña Contenido.
- Color: Establece el color del texto del título del producto.
- Sombra de texto: añade un efecto de sombra directamente al texto del título. Elige entre los tamaños preestablecidos (Ninguno, Muy fino, Pequeño, Mediano, Grande, Extragrande, 2X Extragrande) para añadir una profundidad sutil o dramática al encabezado.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque del título del producto (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el título y los elementos circundantes en la página del producto.
- Relleno: Ajusta el espacio interior dentro del bloque del título del producto (arriba, derecha, abajo, izquierda). Esto crea un espacio entre el texto del título y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para el bloque del título de tu producto. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-title|product).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque del título del producto en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque del título del producto en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque del título del producto en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque del título del producto aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Título del producto y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de título de producto a tu plantilla de producto único! El bloque muestra automáticamente el título correcto para cada producto de tu catálogo de WooCommerce sin necesidad de realizar ningún esfuerzo manual. Experimenta con los niveles de encabezado, los tamaños de fuente por dispositivo y los efectos de sombra del texto para crear una presentación del título del producto que sea visualmente llamativa y esté optimizada para los motores de búsqueda.