1.2Widgets básicos: título, texto, imagen, botón
Lo esencial en 30 segundos
- Los widgets básicos (desde Free): Título, Editor de texto, Imagen, Botón, Icono.
- El widget Título lleva un nivel semántico (H1 a H6): un solo H1 por página, luego H2, H3… en jerarquía.
- El Botón es la llamada a la acción (texto + enlace); la Imagen debe tener un texto alternativo (alt).
Hilo conductor — Nadia rellena la página de inicio
La estructura está; Nadia coloca ahora el contenido: el título "Carpintería Benali", un párrafo de presentación, una buena foto de taller y un botón "Solicitar presupuesto". Duda sobre el nivel del título y al principio olvida el alt de la imagen. Esta sección fija los buenos reflejos.
Continúa 1.1 — tras la estructura, el contenido.
1. Título, texto, imagen
El widget Título (Heading) muestra un título con su nivel H1 a H6 — importante para el SEO y la accesibilidad: un solo H1 (el título principal de la página), luego H2 para las grandes secciones, H3 debajo. El Editor de texto gestiona los párrafos enriquecidos (negrita, listas, enlaces). El widget Imagen inserta una imagen: se rellena siempre el texto alternativo (alt), que describe la imagen para los motores y los lectores de pantalla.
Para Nadia: "Carpintería Benali" en H1, un párrafo de presentación en el Editor de texto, una foto de taller con alt "Taller de carpintería en Orán".
2. Botón e icono
El Botón es el elemento clicable de la llamada a la acción: se ajusta su texto, su enlace (página, ancla, teléfono, correo) y, eventualmente, un icono. El Icono (widget o dentro de un botón) refuerza el mensaje visualmente.
Nadia coloca un botón "Solicitar presupuesto" enlazado a la página de contacto (o a un número de teléfono "tel:" en el móvil), con un pequeño icono de teléfono. Un buen botón dice con claridad qué va a pasar.
🔎 Ejemplo concreto — Rellenar la página de inicio (caso Nadia)
H1: "Carpintería Benali"
Editor de texto: presentación (2-3 frases)
Imagen: foto de taller — alt "Taller de carpintería en Orán"
Botón: "Solicitar presupuesto" → enlace a /contacto (o tel: en el móvil)
→ Un solo H1, alt rellenado, acción clara.Resultado: una página de inicio legible y bien estructurada.
Lección: jerarquía de títulos + alt = base SEO/accesibilidad.
Vocabulario de la sección
- Widget Título (Heading)
- Muestra un título con su nivel semántico H1 a H6.
Ejemplo sencillo: "Carpintería Benali" en H1, "Nuestros trabajos" en H2.
Lo que no es: poner varios H1 o elegir el nivel según el tamaño deseado.
Reflejo: un solo H1; la jerarquía estructura, el tamaño se ajusta aparte.
- Editor de texto
- Widget para los párrafos enriquecidos (negrita, listas, enlaces).
Ejemplo sencillo: el párrafo de presentación del taller.
Lo que no es: poner ahí un título importante (usa el widget Título para eso).
Reflejo: texto corriente → Editor de texto.
- Imagen + alt
- Inserta una imagen; el texto alternativo (alt) la describe para motores y lectores de pantalla.
Ejemplo sencillo: foto de taller, alt "Taller de carpintería en Orán".
Lo que no es: dejar el alt vacío o poner "image1.jpg".
Reflejo: cada imagen útil tiene un alt descriptivo.
- Botón
- Elemento clicable de llamada a la acción: texto + enlace (+ icono opcional).
Ejemplo sencillo: "Solicitar presupuesto" → página de contacto o "tel:" en el móvil.
Lo que no es: un botón "Haz clic aquí" sin decir qué pasa.
Reflejo: el texto del botón anuncia la acción.
- Icono
- Pequeño pictograma, solo (widget Icono) o en un botón, para reforzar el mensaje.
Ejemplo sencillo: icono de teléfono en el botón de presupuesto.
Lo que no es: apilar iconos decorativos sin sentido.
Reflejo: un icono debe aclarar, no decorar al azar.
En la práctica — Colocar el contenido de una página
- Añade un widget Título en H1 (el título principal de la página).
- Añade un Editor de texto para un párrafo de presentación.
- Inserta una Imagen y rellena su texto alternativo (alt).
- Añade un Botón con un texto claro y un enlace (página, teléfono, correo).
Guion listo para decir — explicar el botón de acción al cliente (20 s)
"El botón 'Solicitar presupuesto' está bien visible: en el móvil, un toque lanza directamente la llamada; en el ordenador, abre su página de contacto. El texto dice exactamente qué va a pasar, para tranquilizar al visitante e incitarlo a contactarle."
Un buen botón anuncia la acción; en el móvil, prefiere "tel:" para llamar con un toque.
Plantilla para copiar y pegar — comprobación de contenido de una página
TÍTULO H1 (uno solo): _______________
SUBTÍTULOS (H2/H3, jerarquía): _______________
PÁRRAFOS (editor de texto): _______________
IMÁGENES + ALT (cada una): _______________
BOTÓN: texto = ___________ → enlace = ___________
ICONO (si es útil): _______________Página de inicio
H1 = nombre de la empresa; botón principal = contacto/presupuesto.
Página de servicio
H1 = el servicio; H2 por beneficio; botón = reservar/contactar.
Móvil primero
Botón en "tel:" para llamar con un toque, texto corto y legible.
Imagen pesada
Comprimir antes de insertar (ver 5.1) y rellenar siempre el alt.
✓ Buenas prácticas
- Un solo H1 por página, luego una jerarquía H2/H3.
- Rellenar el alt de cada imagen útil.
- Dar al botón un texto que anuncie la acción.
✗ Errores frecuentes
- Elegir el nivel de título según el tamaño deseado.
- Dejar los alt vacíos.
- Botones vagos ("Haz clic aquí").
Puntos clave
- Widgets básicos: Título, Texto, Imagen, Botón, Icono.
- Un solo H1, jerarquía H2/H3 (SEO/accesibilidad).
- Alt descriptivo en cada imagen.
- Botón = texto claro + enlace útil.
Reto 48h — aplica mañana
Compón una página sencilla: un H1, un párrafo, una imagen con alt, un botón con texto explícito enlazado a una página/teléfono. Comprueba que solo hay un H1. 15 minutos.
- Coloco un solo H1 y una jerarquía de títulos.
- Relleno el alt de mis imágenes.
- Mis botones anuncian con claridad la acción.
Preguntas frecuentes
¿Cuántos H1 por página?
Uno solo: el título principal. Los demás títulos son H2 (grandes secciones) y luego H3, etc., en jerarquía — importante para el SEO y la accesibilidad.
¿Por qué rellenar el texto alternativo (alt)?
Describe la imagen para los motores de búsqueda y los lectores de pantalla (accesibilidad). Una imagen útil sin alt es una oportunidad perdida y un fallo de accesibilidad.
¿Cómo hago un botón que llame al teléfono?
En el enlace del botón, usa "tel:+213…": en el móvil, un toque lanza directamente la llamada. Práctico para un artesano localizable por teléfono.
Nadia pone "Carpintería Benali", luego "Nuestros trabajos" y "Contacto". ¿Qué jerarquía de títulos es correcta?