📚 Diccionario v2.0

Diccionario de Bloques

Guía completa de los 13 componentes del sistema Goote.co.
Utiliza esta referencia para entender las capacidades de cada bloque o para generar sitios automatizados.

Estructura Global

Portadas de Impacto

🎬

Hero Clásico

hero_classic

Portada estándar con título, subtítulo, fondo personalizable y botón principal.

Campo Técnico
Nombre Humano
Función y Ejemplo
content.title
Título Principal

El encabezado H1 de la página.

Ejemplo Bienvenido a Goote
content.subtitle
Subtítulo

Texto descriptivo debajo del título.

Ejemplo Creamos experiencias digitales.
content.cta_text
Texto Botón

Etiqueta del botón de llamada a la acción.

Ejemplo Ver Servicios
content.cta_url
Enlace Botón

A dónde lleva el botón.

Ejemplo /servicios
background.type
Tipo de Fondo

Elige entre 'image' (imagen), 'solid' (color) o 'gradient' (degradado).

Ejemplo image
background.image
Imagen Fondo

URL de la imagen (si el tipo es 'image').

Ejemplo assets/img/hero.jpg
layout.height
Altura

Altura mínima de la sección.

Ejemplo min-h-screen
🎥

Hero Cinematográfico

hero_cinematic

Experiencia visual inmersiva con video de fondo en bucle y múltiples botones.

Campo Técnico
Nombre Humano
Función y Ejemplo
content.title
Título

Título grande centrado.

Ejemplo Naturaleza Viva
background.type
Tipo Medio

'video' para MP4 o 'image' para estático.

Ejemplo video
background.video
URL Video

Enlace al archivo MP4.

Ejemplo assets/video/intro.mp4
background.overlay_opacity
Opacidad Capa

Oscuridad de la capa sobre el video (0-90) para leer el texto.

Ejemplo 50
buttons
Botones

Lista de botones. Style puede ser 'primary' o 'outline'.

Ejemplo [{text: 'Ver Video', url: '#', style: 'outline'}]

Contenido y Narrativa

🖼️

Texto con Imagen

text_with_image

Bloque dividido 50/50. Ideal para 'Sobre Mí', describir servicios o productos.

Campo Técnico
Nombre Humano
Función y Ejemplo
content.title
Título

Encabezado de la sección.

Ejemplo Sobre Mí
content.body
Cuerpo

Texto principal. Soporta HTML básico y saltos de línea.

Ejemplo Soy fotógrafo...
media.image
Imagen

La imagen que acompaña al texto.

Ejemplo assets/img/perfil.jpg
layout.image_position
Posición Imagen

Ubicación de la imagen: 'left' (izquierda) o 'right' (derecha).

Ejemplo right
layout.image_width
Ancho Imagen

Proporción de la imagen: 'w-1/3', 'w-1/2', o 'w-2/3'.

Ejemplo w-1/2
📝

Bloque de Texto

text_block

Párrafos de texto simple para manifiestos, introducciones largas o cartas.

Campo Técnico
Nombre Humano
Función y Ejemplo
content.title
Título

Título opcional arriba del texto.

Ejemplo Nuestra Misión
content.body
Contenido

El texto principal.

Ejemplo Creemos en un mundo...
layout.width
Ancho Contenedor

Controla el ancho de lectura: 'max-w-3xl' (estrecho), 'max-w-7xl' (ancho).

Ejemplo max-w-3xl
layout.align
Alineación

'text-center' (centro) o 'text-left' (izquierda).

Ejemplo text-left

Listas Dinámicas

📰

Noticias (Blog)

news_classic

Muestra automáticamente tus últimos artículos del blog o una selección manual.

Campo Técnico
Nombre Humano
Función y Ejemplo
source.type
Fuente

'latest' (automático) o 'manual' (elegir IDs específicos).

Ejemplo latest
source.limit
Cantidad

Número de noticias a mostrar.

Ejemplo 3
layout.columns
Columnas

Diseño de rejilla: 'grid-cols-2' o 'grid-cols-3'.

Ejemplo grid-cols-3
card_design.style
Estilo Tarjeta

'minimal' (limpio), 'card' (borde), 'shadow' (sombra).

Ejemplo shadow

Conversión y Ventas

🛍️

Producto Destacado

product_showcase

Foco total en un solo producto con precio, badge y botón de compra directo.

Campo Técnico
Nombre Humano
Función y Ejemplo
content.title
Producto

Nombre del producto.

Ejemplo Cámara Pro X
content.price
Precio

Precio visible con moneda.

Ejemplo $1,200
content.badge_text
Etiqueta

Texto del badge flotante (ej: OFERTA).

Ejemplo NUEVO
media.image
Imagen

Foto del producto.

Ejemplo assets/img/camara.jpg
cta.url
Link Compra

Enlace directo al checkout o detalle.

Ejemplo /shop/product/123
✉️

Formulario de Contacto

contact_form

Formulario funcional que envía los mensajes directamente a tu email.

Campo Técnico
Nombre Humano
Función y Ejemplo
title
Título

Encabezado del formulario.

Ejemplo Contáctanos
recipient_email
Email Destino

A este correo llegarán los mensajes.

Ejemplo info@miempresa.com
success_message
Mensaje Éxito

Lo que ve el usuario al enviar.

Ejemplo ¡Gracias! Te responderemos pronto.
styling.background_color
Fondo Sección

Color de fondo del área del formulario.

Ejemplo #f3f4f6
☕

Buy Me a Coffee

buy_me_a_coffee

Widget integrado para recibir donaciones rápidas.

Campo Técnico
Nombre Humano
Función y Ejemplo
username
Usuario BMC

Tu slug de Buy Me a Coffee.

Ejemplo rgmendezr
cta_text
Llamada

Texto principal invitando a donar.

Ejemplo Apoya mi trabajo
container_style
Estilo

'card' (tarjeta flotante) o 'simple' (texto plano).

Ejemplo card
background_type
Fondo

Tipo de fondo del widget.

Ejemplo gradient