Prácticas Elementor

Marketing Digital · 1.º MAPU · Tema 2 · RA5 · CE b) montar páginas con un constructor visual · CE e) meter textos, imágenes y vídeo · CE g) botones y enlaces que llevan tráfico

Actividades de aprendizaje · sin calificación · te preparan para el examen práctico y para la web del proyecto

Cómo se trabaja

  1. Lee el esquema de la actividad (3-6 pasos).
  2. Mira el modelo: es lo que tienes que reproducir.
  3. Hazlo en tu página Prácticas Elementor de tu subdominio, debajo de lo anterior.
  4. Una cosa nueva por actividad. No te adelantes.
  5. Entrega (salvo que se diga otra cosa): URL + captura en escritorio y en móvil, en Aules.

Marca de los ejemplos

Brisa Paddle Benidorm (marca ficticia): escuela de paddle surf y kayak. Objetivo de la web: reservas. CTA: «Reserva tu clase».

Títulos: Poppins · Texto: Inter

Azul mar #0E4D64 · Turquesa oscuro #13827D · Turquesa #1FA6A0 (nunca con texto blanco) · Coral #F2715A (siempre con texto oscuro) · Arena #F4E9D8 · Texto #1E2A30

Índice

Fase 0 · Orientación
01 Conoce el editor
02 Tu primer contenedor

Fase 1 · Contenedores
03 Fila o columna
04 Justificar y alinear
05 Padding, margen y gap
06 Completo / encajonado
07 Anidados
08 Grid
09 Flexbox vs Grid
10 Fondos y acabados
11 Responsive

Fase 2 · Widgets
12 Encabezado
13 Editor de texto
14 Imagen
15 Botón
16 Espaciador y separador
17 Iconos
18 Prueba social
19 Vídeo, mapa y código
20 Acordeón, pestañas y contador

Fase 3 · Como en agencia
21 Colores y fuentes globales
22 Plantillas propias
23 Clases (atómico)

Fase 4 · Composiciones
24 Hero
25 Servicios en Grid
26 Testimonios y CTA
27 Tabla de precios
28 ¿Addon o a mano?
29 Reto final

Fase 0

Orientación

Conoce el editor y crea tu primer contenedor.

01 · Conoce el editor

Nuevo: la interfaz de Elementor.

CE b · 30′ · Editor clásico

Haz esto

  1. Crea la página Prácticas Elementor en tu subdominio y guárdala como borrador.
  2. Ábrela con Editar con Elementor y elige la plantilla de ancho completo (te lo enseño en la demo).
  3. Localiza las 7 zonas: lienzo, panel lateral, barra superior, estructura de capas, selector de dispositivo, historial y botón de publicar.
  4. Arrastra un Encabezado («Mi página de prácticas») y un Editor de texto debajo.
  5. Prueba escritorio, tablet y móvil. Guarda como borrador, no publiques.

Está bien si

  • La página existe y está en Borrador.
  • La abres con Elementor sin buscar el botón.
  • Sabes señalar las 7 zonas sin mirar.

Ojo: si publicas sin querer, vuelve a ponerla en Borrador.

▼ Modelo · así tiene que quedar

Mi página de prácticas

En esta página voy a hacer las prácticas de Elementor del Tema 2.

02 · Tu primer contenedor

Nuevo: añadir contenedor, altura mínima, color de fondo, borrar y recuperar con el historial.

CE b · 25′ · Editor clásico

Haz esto

  1. Añade un contenedor vacío.
  2. Altura mínima 300 px y fondo arena #F4E9D8.
  3. Bórralo y recupéralo con el historial.
  4. Añade debajo otro contenedor azul mar #0E4D64 de 200 px.

Está bien si

  • Ves dos franjas apiladas: arena 300 px y azul 200 px.
  • Las has creado sin contenido dentro.

Ojo: si el contenedor «desaparece», está vacío y sin altura: dale altura mínima.

▼ Modelo · así tiene que quedar

Fase 1

Contenedores

Solo cajas de colores de 120 × 120 px, sin widgets de contenido: así ves la maquetación sin distracciones.

03 · Dirección: fila o columna

Nuevo: contenedor padre con 3 hijos; dirección fila / columna.

CE b · 30′ (+10′ atómico) · Editor clásico + atómico

Haz esto

  1. Crea un contenedor padre con 3 contenedores hijos de 120 × 120 px (azul mar, turquesa, coral).
  2. Pon el padre en dirección fila.
  3. Duplica el padre y cámbialo a columna.
  4. Pon un encabezado H3 encima de cada uno: «Fila» y «Columna».

Está bien si

  • Las 3 cajas salen en línea en uno y apiladas en el otro.
  • Has cambiado solo la dirección del padre, no las cajas.

Ojo: la dirección se cambia en el padre, no en las cajas.

Lo mismo en atómico · +10 min

  • Rehaz las 3 cajas en fila con el elemento de maquetación Flexbox atómico.
  • Pregunta: ¿dónde está ahora la opción de dirección y en qué se parece a la del clásico?
  • La versión atómica se monta en directo.

▼ Modelo · así tiene que quedar

Fila

1
2
3

Columna

1
2
3

04 · Justificar y alinear

Nuevo: justificar (eje principal) y alinear (eje transversal).

CE b · 35′ · Editor clásico

Haz esto

  1. Padre en fila de 400 px de alto con 3 cajas.
  2. Prueba todas las opciones de justificar y de alinear.
  3. Reto: deja una sola caja en el centro exacto del padre.
  4. Monta los 3 casos del modelo con su rótulo.

Está bien si

  • Sabes qué opción mueve en horizontal y cuál en vertical.
  • La caja del reto está centrada en los dos ejes.

Ojo: en fila, justificar es horizontal; en columna, se vuelve vertical.

▼ Modelo · así tiene que quedar

Izquierda arriba

1
2
3

Repartidas con espacio entre ellas

1
2
3

Centro exacto

●

05 · Padding, margen y gap

Nuevo: relleno interior (padding), margen exterior y espacio entre elementos (gap).

CE b · 35′ · Editor clásico

Haz esto

  1. Copia el padre de 3 cajas tres veces.
  2. Al primero: padding 40 px.
  3. Al segundo: gap 30 px.
  4. Al tercero: margen superior 60 px.
  5. Rotula cada uno.

Está bien si

  • Ves la diferencia entre espacio dentro, entre y fuera.
  • Las cajas no llevan margen propio.

Ojo: no separes las cajas con margen una a una: usa el gap del padre.

▼ Modelo · así tiene que quedar

Modelo de cajas: margen (fuera) → borde → padding (dentro) → contenido. El gap es el hueco entre hijos.

Padding 40 px

1
2
3

Gap 30 px

1
2
3

Margen superior 60 px

1
2
3

06 · Ancho completo frente a encajonado

Nuevo: ancho de contenido completo / encajonado, ancho máximo y anchos en %.

CE b · 35′ · Editor clásico

Haz esto

  1. Contenedor de fondo azul mar a ancho completo.
  2. Contenido encajonado a 1140 px.
  3. Dentro, dos hijos: 33 % (barra lateral) y 66 % (contenido).
  4. Rotula cada hijo.

Está bien si

  • El fondo llega de borde a borde de la pantalla.
  • El contenido no pasa de 1140 px.

Ojo: si el fondo no llega a los bordes, revisa la plantilla de ancho completo de la página.

▼ Modelo · así tiene que quedar

Barra lateral · 33 %
Contenido · 66 %

07 · Contenedores anidados y estructura

Nuevo: contenedores dentro de contenedores; renombrar capas.

CE b · 40′ · Editor clásico

Haz esto

  1. Padre en fila con dos hijos al 50 %.
  2. El hijo derecho, en columna, con dos cajas apiladas.
  3. Renombra todas las capas: Bloque principal, Columna izquierda, Columna derecha, Caja superior, Caja inferior.
  4. Entrega también una captura de la estructura de capas con los nombres.

Está bien si

  • En la estructura ves el árbol con los 5 nombres.
  • Nada se llama «Contenedor».

Ojo: si arrastras una caja fuera de su padre, muévela en la estructura de capas, no en el lienzo.

▼ Modelo · así tiene que quedar

Columna izquierda
Caja superior
Caja inferior

08 · Contenedor Grid

Nuevo: diseño Grid: columnas, filas y gap de la rejilla.

CE b · 35′ (+10′ atómico) · Editor clásico + atómico

Haz esto

  1. Contenedor en diseño Grid.
  2. 3 columnas × 2 filas, gap 24 px.
  3. Mete 6 cajas numeradas del 1 al 6.

Está bien si

  • Las 6 cajas quedan en 2 filas de 3, todas iguales.
  • No has tocado el ancho de ninguna caja.

Ojo: en Grid no se da ancho a las cajas: lo decide la rejilla.

Lo mismo en atómico · +10 min

  • Rehaz la misma rejilla 3 × 2 con el elemento Grid atómico.
  • Pregunta: ¿cómo se define el número de columnas en cada editor?
  • La versión atómica se monta en directo.

▼ Modelo · así tiene que quedar

1
2
3
4
5
6

09 · Flexbox frente a Grid

Nuevo: comparar los dos sistemas con la misma maqueta.

CE b · 45′ · Editor clásico

Haz esto

  1. Monta 6 tarjetas con Flexbox: fila, ajuste de línea (wrap) y ancho ≈ 31 %.
  2. Monta las mismas 6 con Grid de 3 columnas.
  3. Cronometra cuánto tardas en cada una.
  4. Haz que en móvil las dos salgan a 1 columna.
  5. Escribe tu conclusión en una frase.

Está bien si

  • Las dos versiones se ven igual en escritorio.
  • En móvil, 1 columna sin desbordes.
  • Has entregado capturas móviles + frase.

Ojo: en Flexbox tienes que ajustar el ancho de cada tarjeta por dispositivo; en Grid basta con cambiar las columnas.

▼ Modelo · así tiene que quedar

Versión Flexbox

1
2
3
4
5
6

Versión Grid

1
2
3
4
5
6
FlexboxGrid
Piensa enUna dirección: fila o columnaDos direcciones: filas y columnas
MandaEl contenidoLa estructura (la rejilla)
ControlasDirección, justificar, alinear, gap, wrapColumnas, filas, gap, celdas que ocupa
En móvilFila → columna y anchos a manoColumnas 3 → 2 → 1
Úsalo paraHero, fila de botones, icono + texto, interior de tarjetaRejillas: servicios, precios, galerías, logos

Regla práctica: en línea → Flexbox; en cuadrícula → Grid. En una web real se combinan.

10 · Fondos y acabados

Nuevo: imagen de fondo, superposición, borde, radio y sombra.

CE b, e · 40′ · Editor clásico

Haz esto

  1. Franja de 500 px con foto de mar de fondo (posición centrada, tamaño cubrir).
  2. Superposición azul mar al 60 %.
  3. Encima, caja blanca con radio 16 px y sombra suave.

Está bien si

  • El texto de la caja se lee bien sobre la foto.
  • La foto pesa menos de 200 KB.

Ojo: una foto de 4 MB de fondo hace la página lentísima. Optimiza antes de subir.

▼ Modelo · así tiene que quedar

Caja blanca

Radio 16 px + sombra suave sobre foto con superposición al 60 %.

11 · Responsive de contenedores

Nuevo: ajustes por dispositivo: dirección, orden y ocultar.

CE b · 40′ · Editor clásico

Haz esto

  1. Padre en fila con 4 cajas.
  2. En móvil: dirección columna.
  3. En móvil, la caja 3 sube la primera.
  4. La caja 4 «solo escritorio»: ocúltala en móvil.
  5. Revisa escritorio, tablet y móvil.

Está bien si

  • En ningún modo hay nada cortado ni desbordado.
  • En móvil el orden es 3-1-2.

Ojo: si cambias algo estando en vista móvil, solo cambia en móvil. Mira siempre en qué vista estás.

▼ Modelo · así tiene que quedar

1
2
3
4 · solo escritorio

Míralo con el selector de dispositivo: en móvil pasa a columna, la caja 3 sube y la 4 desaparece.

Fase 2

Widgets básicos

Desde aquí, contenido real de Brisa Paddle Benidorm. Uno o dos widgets nuevos por actividad, siempre dentro de contenedores.

12 · Encabezado

Nuevo: widget Encabezado; niveles H1-H3; un solo H1 por página.

CE b · 30′ (+10′ atómico) · Editor clásico + atómico

Haz esto

  1. H1 con la propuesta de valor.
  2. H2 «Nuestras clases».
  3. Dos H3 en fila: «Iniciación» y «Excursiones».
  4. Títulos en Poppins, color azul mar.

Está bien si

  • Solo hay un H1 en tu página.
  • Los niveles siguen el orden H1 → H2 → H3.

Ojo: no elijas H1 «porque se ve más grande»: el tamaño se cambia en Estilo, no con el nivel (lo verás en SEO, Tema 4).

Lo mismo en atómico · +10 min

  • Rehaz el H2 «Nuestras clases» con el encabezado atómico, misma fuente y color.
  • Pregunta: ¿qué panel de estilos te resulta más claro y por qué?
  • La versión atómica se monta en directo.

▼ Modelo · así tiene que quedar

En tu página, el primer título es el H1. Aquí va como H2 porque esta página ya tiene su propio H1.

Aprende paddle surf en la bahía de Benidorm en una sola mañana

Nuestras clases

Iniciación

Excursiones

13 · Editor de texto

Nuevo: párrafos, negrita, listas y enlace; ancho de línea legible.

CE b, e · 30′ · Editor clásico

Haz esto

  1. H2 «Quiénes somos».
  2. Editor de texto de unas 80 palabras con una negrita y una lista de 3 puntos.
  3. Un enlace dentro del texto.
  4. Limita el ancho del texto a unos 700 px.

Está bien si

  • Las líneas no ocupan toda la pantalla.
  • La lista es una lista de verdad, no guiones escritos a mano.

Ojo: no pegues texto desde Word con formato: pégalo como texto sin formato.

▼ Modelo · así tiene que quedar

Quiénes somos

Brisa Paddle Benidorm nació para que cualquiera pueda ponerse de pie sobre una tabla en su primera mañana. Salimos desde la playa de Levante con grupos pequeños y monitores que conocen la bahía. No hace falta experiencia: solo ganas de mojarse un poco.

  • Grupos de máximo 6 personas
  • Todo el material incluido
  • Clases en castellano, valenciano e inglés

¿Dudas? Consulta las preguntas frecuentes.

14 · Imagen

Nuevo: widget Imagen: subir a la biblioteca, tamaño, texto alternativo, título y leyenda.

CE e · 35′ · Editor clásico

Haz esto

  1. Contenedor en fila: imagen a la izquierda, texto a la derecha.
  2. Sube una foto libre de derechos de menos de 200 KB.
  3. Radio de borde 12 px.
  4. Escribe un texto alternativo que describa la foto.
  5. En móvil, una debajo de otra.

Está bien si

  • La imagen pesa menos de 200 KB.
  • El alt describe la imagen, no repite palabras clave.

Ojo: alt «paddle surf Benidorm barato» es relleno SEO, no una descripción.

▼ Modelo · así tiene que quedar

Grupo de personas aprendiendo paddle surf en aguas tranquilas cerca de la orilla

Tu primera clase, sin prisas

Empezamos en la orilla, practicamos el equilibrio de rodillas y, cuando estás listo, te pones de pie. Al final de la mañana remas solo.

Alt de la foto: «Grupo de personas aprendiendo paddle surf en aguas tranquilas cerca de la orilla».

15 · Botón

Nuevo: widget Botón: texto, enlace interno y externo, pestaña nueva, color en hover.

CE g · 30′ (+10′ atómico) · Editor clásico + atómico

Haz esto

  1. Dos botones en fila.
  2. Principal: coral con texto oscuro, «Reserva tu clase», enlace interno (ancla).
  3. Secundario: con borde, «Ver la previsión del mar», enlace externo en pestaña nueva.
  4. Cambia el color en hover.

Está bien si

  • El coral lleva texto oscuro, nunca blanco.
  • El externo se abre en otra pestaña.

Ojo: «Haz clic aquí» no vende nada: verbo + beneficio.

Lo mismo en atómico · +10 min

  • Rehaz el CTA coral con el botón atómico: enlace y color en hover.
  • Pregunta: ¿dónde se configura el hover en cada editor?
  • Guárdalo: lo reutilizas en la actividad 23.

▼ Modelo · así tiene que quedar

Reserva tu clase
Ver la previsión del mar

16 · Espaciador y separador (y por qué casi nunca hacen falta)

Nuevo: widgets Espaciador y Separador frente a gap y padding.

CE b · 20′ · Editor clásico

Haz esto

  1. Monta la misma sección dos veces.
  2. Versión A: separa con Espaciador y Separador.
  3. Versión B: sin esos widgets, solo con gap y padding del contenedor.
  4. Compara en móvil.

Está bien si

  • Las dos se ven casi igual.
  • Sabes explicar por qué la B se mantiene mejor.

Ojo: llenar la página de espaciadores obliga a retocar cada uno en móvil.

▼ Modelo · así tiene que quedar

A · Con espaciador y separador

Salidas al amanecer

Quedamos a las 7:00 en la playa de Levante. El mar está plano y la luz es la mejor del día.

Reserva tu clase

B · Con gap y padding

Salidas al amanecer

Quedamos a las 7:00 en la playa de Levante. El mar está plano y la luz es la mejor del día.

Reserva tu clase

Las dos se ven igual; la segunda es más fácil de mantener y de adaptar a móvil.

17 · Icono, caja de icono y lista de iconos

Nuevo: widgets Icono, Caja de icono y Lista de iconos.

CE b, e · 40′ · Editor clásico

Haz esto

  1. Rejilla de 4 cajas de icono con los beneficios de la marca (2 en tablet, 1 en móvil).
  2. Iconos de la librería gratuita.
  3. Debajo, una lista de iconos «Qué incluye la clase».

Está bien si

  • Los 4 iconos tienen el mismo tamaño y color.
  • La lista usa el mismo icono en todos los puntos.

Ojo: mezclar estilos de icono (relleno, línea, colores distintos) se ve descuidado.

▼ Modelo · así tiene que quedar

Máximo 6 personas

Grupos reducidos para que el monitor te vea.

Material incluido

Tabla, remo y chaleco. Solo trae bañador.

3 idiomas

Castellano, valenciano e inglés.

Salidas al amanecer

Mar plano y la mejor luz del día.

Qué incluye la clase

  • Tabla y remo adaptados a tu altura
  • Chaleco salvavidas
  • Explicación en la arena antes de entrar
  • 90 minutos en el agua con monitor

18 · Prueba social: testimonio, estrellas y caja de imagen

Nuevo: widgets Caja de imagen, Testimonio (en el panel: «Recomendación») y Valoración de estrellas.

CE b, e · 40′ · Editor clásico

Haz esto

  1. 2 testimonios en fila con foto de banco de imágenes y 5 estrellas.
  2. Debajo de cada uno, el rótulo visible «(testimonio ficticio de ejemplo)».
  3. Una caja de imagen «Excursión al amanecer».

Está bien si

  • Los dos testimonios tienen la misma altura y estilo.
  • Se ve claramente que son ficticios.

Ojo: en una web real solo valen testimonios reales y con permiso. Inventarlos es publicidad engañosa.

▼ Modelo · así tiene que quedar

Valorado con 5 de 5
Nunca me había subido a una tabla y al final de la mañana remaba solo. El grupo pequeño se nota.
Hombre sonriente remando de pie en una tabla de paddle surf en el mar
Marcos R.
Clase de iniciación

(testimonio ficticio de ejemplo)

Valorado con 5 de 5
Fuimos al amanecer con mi hermana. El mar estaba como un plato y las explicaciones, muy claras.
Mujer haciendo paddle surf en una bahía de agua tranquila
Laura P.
Excursión al amanecer

(testimonio ficticio de ejemplo)

Silueta de una persona remando de pie en una tabla de paddle surf con el cielo naranja de fondo

Excursión al amanecer

Salimos con la primera luz y volvemos para el desayuno. 2 horas en el agua.

19 · Vídeo, mapa e inserción de código

Nuevo: widgets Vídeo (YouTube), Google Maps y HTML.

CE e, g · 40′ · Editor clásico

Haz esto

  1. Fila: vídeo a la izquierda y mapa de la playa de Levante a la derecha.
  2. Debajo, un widget HTML con un código de inserción (el iframe de un mapa).
  3. Comprueba que el vídeo permite la inserción y apunta su URL.

Está bien si

  • Vídeo y mapa tienen la misma altura en escritorio.
  • En móvil, uno debajo del otro.

Ojo: el widget HTML no es para «arreglar» diseño: solo para códigos de inserción.

▼ Modelo · así tiene que quedar

Widget HTML con un iframe

20 · Acordeón, pestañas y contador

Nuevo: widgets Acordeón (preguntas frecuentes), Pestañas y Contador.

CE b · 45′ · Editor clásico

Haz esto

  1. Acordeón con 4 preguntas frecuentes.
  2. Pestañas: Iniciación / Bono / Excursión.
  3. 3 contadores con datos marcados como ficticios.

Está bien si

  • Al abrir una pregunta, se cierra la anterior.
  • Los datos inventados llevan «(dato ficticio)».

Ojo: en esta versión el acordeón y las pestañas son «anidados»: cada elemento es un contenedor donde puedes meter widgets.

▼ Modelo · así tiene que quedar

Preguntas frecuentes

Sí, lo básico. Siempre llevas chaleco y estamos en zona de poca profundidad.

Bañador, toalla, crema solar y ganas. El resto lo ponemos nosotros.

Si el mar no está bien, cambiamos la clase de día sin coste.

Desde 12 años acompañados de un adulto.

Nuestras propuestas

90 minutos para ponerte de pie y remar solo. Ideal si es tu primera vez.

3 clases para coger soltura y hacer tu primera ruta por la bahía.

Ruta de 2 horas en kayak o paddle surf hasta las calas cercanas.

alumnos (dato ficticio)
0 +
personas máx. por grupo
0
años en la bahía (dato ficticio)
0

Fase 3

Trabajar como en agencia

Colores y fuentes globales, plantillas propias y clases: cambias una vez y se actualiza todo.

21 · Colores y fuentes globales

Nuevo: ajustes del sitio: colores y tipografías globales.

CE b · 40′ · Editor clásico

Haz esto

  1. Define los 6 colores de la marca como colores globales.
  2. Define Poppins (títulos) e Inter (texto) como fuentes globales.
  3. Aplícalos a lo que hiciste en las actividades 12 a 20.
  4. Cambia un color global y mira cómo se actualiza todo.
  5. Monta en tu página la guía de estilo del modelo.

Está bien si

  • No queda ningún color «suelto» en tus widgets.
  • Al cambiar un global, cambia en toda la página.

Ojo: si un widget no cambia, tiene un color puesto a mano: quítalo y elige el global.

▼ Modelo · así tiene que quedar

Azul mar
#0E4D64

Turquesa oscuro
#13827D

Turquesa
#1FA6A0

Coral
#F2715A

Arena
#F4E9D8

Texto
#1E2A30

H1 · Poppins 700 · 48 px
H2 · Poppins 700 · 36 px
H3 · Poppins 600 · 24 px

Párrafo · Inter 400 · 16 px. Aprende paddle surf en la bahía de Benidorm en una sola mañana.

22 · Plantillas propias, copiar estilo y duplicar

Nuevo: guardar como plantilla, insertar desde «Mis plantillas», copiar/pegar estilo y duplicar.

CE b · 30′ · Editor clásico

Haz esto

  1. Monta una tarjeta: icono, título, texto y botón.
  2. Guárdala como plantilla.
  3. Insértala 2 veces más desde tus plantillas y cambia solo los textos.
  4. Prueba copiar y pegar el estilo de un botón a otro.

Está bien si

  • Las 3 tarjetas son idénticas salvo el texto.
  • La plantilla aparece en tu biblioteca.

Ojo: duplicar copia una vez; la plantilla te sirve en cualquier página.

▼ Modelo · así tiene que quedar

Iniciación

Tu primera mañana sobre la tabla, paso a paso.

Reserva tu clase

Bono 3 clases

Coge soltura y haz tu primera ruta.

Reserva tu clase

Excursión en kayak

Dos horas hasta las calas cercanas.

Reserva tu excursión

23 · Estilos con clases en el editor atómico

Nuevo: crear una clase, aplicarla a varios elementos, editarla y ver cómo cambian todos.

CE b · 45′ · Editor atómico

Haz esto

  1. Parte del botón atómico de la actividad 15.
  2. Crea la clase boton-cta con el estilo del CTA coral y aplícala a 3 botones.
  3. Crea la clase tarjeta (fondo blanco, radio, sombra, padding) y aplícala a 3 elementos de maquetación.
  4. Cambia el radio en la clase: cambian las 3 tarjetas.
  5. Cambia el color de un botón con estilo local y explica qué ha pasado.

Está bien si

  • Las 3 tarjetas y los 3 botones comparten clase.
  • Sabes distinguir estilo de clase y estilo local.

Ojo: retocar cada elemento a mano en vez de editar la clase es justo el hábito que esta actividad quiere quitar.

▼ Modelo · así tiene que quedar

Este modelo se monta en directo en el editor atómico. Objetivo: fila de 3 tarjetas con la clase «tarjeta», cada una con un botón con la clase «boton-cta». Rótulo final: «Una clase, muchos elementos: cambias uno y cambian todos». Es la misma idea que los colores globales (21) y las plantillas (22), aplicada al estilo de cada elemento.

Fase 4

Composiciones de premio

Cada una en un único contenedor padre. Calidad: jerarquía clara, máx. 2 fuentes, paleta de la marca, contraste, aire, imágenes con alt y de menos de 200 KB, revisada en 3 dispositivos.

24 · Hero

Nuevo: combinar Flexbox, fondo con superposición, encabezado, texto, botones y responsive.

CE b, e, g · 50′ · Editor clásico

Haz esto

  1. Contenedor de 85 vh de alto con foto de fondo y superposición azul mar.
  2. H1 con la propuesta de valor + subtítulo.
  3. 2 botones: coral y con borde.
  4. Fila de 3 microbeneficios con icono.
  5. En móvil: todo centrado y en columna.

Está bien si

  • Se entiende la oferta en 5 segundos.
  • El texto blanco se lee bien sobre la foto.
  • En móvil no se corta nada.

Ojo: texto blanco sobre foto sin superposición = ilegible.

▼ Modelo · así tiene que quedar

Aprende paddle surf en la bahía de Benidorm en una sola mañana

Grupos reducidos, monitores titulados y todo el material incluido.

Reserva tu clase
Ver excursiones
  • Máximo 6 personas
  • Material incluido
  • Castellano · valenciano · inglés

25 · Servicios en Grid

Nuevo: Grid por fuera + Flexbox en columna dentro de cada tarjeta + plantilla de tarjeta + efecto hover.

CE b · 50′ · Editor clásico

Haz esto

  1. H2 + subtítulo.
  2. Rejilla de 3 columnas (2 en tablet, 1 en móvil).
  3. Cada tarjeta: imagen, título, texto, precio de ejemplo y botón.
  4. Usa tu plantilla de tarjeta (actividad 22).
  5. Hover: la tarjeta sube un poco y gana sombra.

Está bien si

  • Las 3 tarjetas miden lo mismo aunque el texto cambie.
  • Las imágenes tienen la misma altura.

Ojo: si las tarjetas tienen alturas distintas, revisa que la rejilla las estire y que las fotos tengan altura fija.

▼ Modelo · así tiene que quedar

Elige tu forma de salir al mar

Tres planes para tres niveles. Todos con monitor y material incluido.

Grupo de personas aprendiendo paddle surf en aguas tranquilas cerca de la orilla

Clase de iniciación

90 minutos para ponerte de pie y remar solo.

Desde 35 € · precio de ejemplo

Reserva tu clase
Vista aérea de cinco personas remando de pie en tablas de paddle surf sobre el mar

Bono 3 clases

Coge soltura y haz tu primera ruta por la bahía.

Desde 90 € · precio de ejemplo

Reserva tu clase
Dos personas remando en un kayak verde sobre el mar

Excursión en kayak

Dos horas hasta las calas cercanas.

Desde 45 € · precio de ejemplo

Reserva tu clase

26 · Testimonios y CTA final

Nuevo: testimonios + estrellas + separador de forma (ola) + botón.

CE b, g · 50′ · Editor clásico

Haz esto

  1. Franja arena con 3 testimonios ficticios (rotulados).
  2. Debajo, franja azul mar con separador de forma en ola arriba.
  3. H2 «¿Te animas este fin de semana?» + CTA coral.

Está bien si

  • La ola une las dos franjas sin línea recta.
  • Hay un único CTA principal.

Ojo: el color de la ola tiene que ser el de la franja de arriba (arena) para que parezca continua.

▼ Modelo · así tiene que quedar

Lo que dicen quienes ya han remado

Valorado con 5 de 5
Nunca me había subido a una tabla y al final de la mañana remaba solo. El grupo pequeño se nota.
Hombre sonriente remando de pie en una tabla de paddle surf en el mar
Marcos R.
Clase de iniciación

(testimonio ficticio de ejemplo)

Valorado con 5 de 5
Fuimos al amanecer con mi hermana. El mar estaba como un plato y las explicaciones, muy claras.
Mujer haciendo paddle surf en una bahía de agua tranquila
Laura P.
Excursión al amanecer

(testimonio ficticio de ejemplo)

Valorado con 5 de 5
Lo reservé para un cumpleaños y repetimos con el bono. Material en perfecto estado.
Hombre sonriente remando de pie en una tabla de paddle surf en el mar
Andrea M.
Bono 3 clases

(testimonio ficticio de ejemplo)

¿Te animas este fin de semana?

Quedan plazas para el sábado y el domingo por la mañana.

Reserva tu clase

27 · Tabla de precios

Nuevo: Grid + tarjetas + lista de iconos + botones + jerarquía para destacar la opción recomendada.

CE b, g · 50′ · Editor clásico

Haz esto

  1. 3 planes: Iniciación, Bono 3 clases y Excursión.
  2. El central, destacado: borde coral, etiqueta «El más elegido» y algo más grande.
  3. Precios marcados como «precio de ejemplo».
  4. En móvil, el destacado sale el primero.

Está bien si

  • El ojo va directo al plan central.
  • En móvil el orden es Bono → Iniciación → Excursión.

Ojo: si todo está destacado, nada lo está.

▼ Modelo · así tiene que quedar

Clase de iniciación

35 €

precio de ejemplo

  • 90 minutos
  • Material incluido
  • Grupo de máx. 6
Reserva tu clase

El más elegido

Bono 3 clases

90 €

precio de ejemplo

  • 3 clases de 90 minutos
  • Material incluido
  • Ruta final por la bahía
Reserva tu clase

Excursión en kayak

45 €

precio de ejemplo

  • 2 horas
  • Kayak doble
  • Parada en cala
Reserva tu excursión

Práctica real · efecto ancla: el plan del medio parece «la opción sensata» al lado de los otros dos. Es persuasión; úsala con datos reales.

28 · ¿Lo construyo o tiro de addon?

Nuevo: qué es un addon y cómo decidir si usarlo.

CE b · 40′ · Editor clásico + Essential Addons

Haz esto

  1. Rehaz la tabla de la actividad 27 con la Tabla de precios de Essential Addons.
  2. Rellena la tabla comparativa de abajo (4 filas).
  3. Desactiva un momento el plugin en tu subdominio, mira la página y vuelve a activarlo.
  4. Conclusión en dos líneas: ¿cuándo usarías el addon y cuándo no?

Está bien si

  • Has rellenado las 4 filas con datos tuyos.
  • Has visto qué pasa sin el plugin.

Ojo: cada addon suma peso, actualizaciones y posibles fallos de seguridad. Instala solo lo que uses y mantenlo actualizado.

▼ Modelo · así tiene que quedar

Hecha a mano con contenedores

Es la tabla de la actividad 27 (míralo arriba). Rehazla con el addon y compara.

Hecha con Essential Addons

Clase de iniciación

35€
  • 90 minutos
  • Material incluido
  • Grupo de máx. 6
Reserva tu clase

Bono 3 clases

90€
  • 3 clases de 90 minutos
  • Material incluido
  • Ruta final por la bahía
Reserva tu clase

Excursión en kayak

45€
  • 2 horas
  • Kayak doble
  • Parada en cala
Reserva tu clase
A manoEssential Addons
Tiempo que he tardado
Control sobre el diseño
Cómo se ve en móvil
Si mañana se desinstala el plugin…

29 · Reto final: tu sección de premio

Nuevo: todo.

CE b, e, g · 90′ · Editor clásico (atómico opcional)

Haz esto

  1. Brief: «Lanzamos salidas al atardecer en julio y agosto y necesitamos una sección para la portada que consiga reservas».
  2. Diseña una sección completa en un único contenedor padre.
  3. No hay modelo que copiar: el de abajo es de otro encargo (tarjeta regalo) y solo marca el nivel.
  4. Autoevalúate con la lista y prepárate para la galería en clase (coevaluación, sin nota).

Está bien si

  • Se entiende la oferta en 5 segundos (H2 + subtítulo).
  • Un único CTA principal, con verbo + beneficio.
  • Colores y fuentes globales, sin colores sueltos.
  • Contraste suficiente y alt en todas las imágenes.
  • Imágenes de menos de 200 KB.
  • Bien en escritorio, tablet y móvil.
  • Estructura ordenada y con nombres.

Ojo: quien quiera puede hacerlo en atómico usando clases (actividad 23).

▼ Modelo de nivel (otro encargo: tarjeta regalo)

Tablas de paddle surf de colores amarradas a un pantalán flotante

Tarjeta regalo

Regala una mañana en el mar

Una clase de iniciación para quien siempre ha querido probar. Válida 12 meses, se reserva cuando quiera.

  • La recibes al momento por email
  • Fecha libre durante 12 meses
  • Cambio de día gratis si hay mal tiempo
Regala una clase

35 € · precio de ejemplo

<