El bloque Título de 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 un nombre de producto, este bloque extrae el título directamente de WooCommerce para cada producto, manteniendo tus páginas precisas y consistentes 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 opcionalmente envuelve el título en un enlace. La pestaña Avanzado te ofrece opciones de estilo adicionales, incluyendo tipografía, color y efectos de sombra de texto.
Añadir el Bloque de Título de Producto a tus Páginas
Sigue estos pasos para añadir un bloque de Título de Producto a tu 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 de 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 de Producto para abrir su configuración. En la pestaña Contenido, la sección Encabezado contiene el campo de texto del título y todas las opciones de visualización de cómo aparece el título del producto en la página.
- Texto: El campo de contenido está pre-rellenado con el shortcode
, que recupera automáticamente el título correcto del producto de WooCommerce para cada producto. Puedes añadir texto personalizado alrededor del shortcode si es necesario, o usar el editor de texto enriquecido para aplicar formato en negrita, cursiva u otro formato en línea. - Enlace: Opcionalmente, envuelve el título del producto en un hipervínculo introduciendo una URL en el campo Enlace. Expande las opciones de enlace para habilitar Abrir en Nueva Ventana (abre el enlace en una nueva pestaña del navegador) o No Seguir (añade un atributo
rel="nofollow"al enlace para fines de SEO). - Alineación: Establece la alineación horizontal del título: Izquierda, Centro o Derecha. Soporta alineación por dispositivo para escritorio, tableta y móvil.
- Tamaño de Fuente: Establece el tamaño de fuente del título usando el deslizador (10–72px). Soporta tamaño por dispositivo para escritorio, tableta y móvil.
- Nivel: Elige la etiqueta de encabezado HTML utilizada para mostrar el título del producto: H1, H2, H3, H4, H5 o H6. Para las mejores prácticas de SEO, usa H1 para el título principal del producto si no existe ningún otro H1 en la página.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes estilizar aún más la apariencia del título y controlar su visibilidad en diferentes dispositivos.
Estilos:
- Tipografía: Establece la familia de fuentes, el peso, la altura de línea, el espaciado entre letras y la transformación del texto para el título del producto, dándote control más allá de lo que ofrece el deslizador de 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 tamaños preestablecidos (Ninguno, Delgado, Pequeño, Mediano, Grande, Muy Grande, Extra Grande) para añadir profundidad sutil o dramática al encabezado.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de 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 espaciado interior dentro de tu bloque de Título del Producto (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el texto del título y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único autogenerado para tu bloque de Título del Producto. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-del-atributo|valor (por ejemplo, data-title|producto).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Título del Producto en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Título del Producto en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Título del Producto en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Título del Producto entra en la vista al desplazarse. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Título del Producto y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Título del 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 ningún esfuerzo manual. Experimenta con los niveles de encabezado, los tamaños de fuente por dispositivo y los efectos de sombra de texto para crear una presentación del título del producto que sea visualmente impactante y optimizada para los motores de búsqueda.