1.3Las 3 pestañas: Contenido, Estilo y Avanzado
Lo esencial en 30 segundos
- Contenido: el qué (texto, enlace, opciones funcionales del elemento).
- Estilo: la apariencia (colores, tipografía, fondo, bordes).
- Avanzado: lo técnico (márgenes/paddings, posicionamiento, responsive, CSS).
Hilo conductor — Nadia se orienta en todas partes
Nadia se agobia un poco: cada widget tiene montones de ajustes. Luego nota que es siempre la misma organización — tres pestañas. Una vez entendida la lógica, ajusta cualquier elemento sin buscar: el contenido en Contenido, el aspecto en Estilo, los márgenes en Avanzado.
Continúa 1.2 — la clave para no perderse nunca en los ajustes.
1. Tres pestañas, siempre
Casi todo elemento (widget o contenedor) se ajusta mediante tres pestañas. La pestaña Contenido lleva el contenido y las opciones funcionales: el texto de un título y su nivel, el enlace de un botón, las imágenes de un carrusel. La pestaña Estilo gestiona la apariencia: colores, tipografía, fondo, bordes, sombras. La pestaña Avanzado reúne los ajustes finos y técnicos: márgenes y paddings, posicionamiento, visibilidad responsive, clases y CSS personalizado.
Esta organización es sistemática: siempre sabes dónde buscar. Nadia gana muchísimo tiempo — ya no tiene que rebuscar.
2. La buena pregunta a la pestaña correcta
El reflejo: preguntarse "¿qué quiero cambiar?". El qué (texto, enlace) → Contenido. El aspecto (color, fuente) → Estilo. El espacio y lo técnico (margen, padding, ocultar en móvil) → Avanzado.
Para el botón de presupuesto: el texto y el enlace en Contenido, el rosa de marca en Estilo, el padding y el margen inferior en Avanzado.
🔎 Ejemplo concreto — Ajustar el botón de presupuesto (caso Nadia)
Pestaña Contenido: texto "Solicitar presupuesto", enlace /contacto.
Pestaña Estilo: rosa de marca, esquinas redondeadas.
Pestaña Avanzado: padding cómodo, margen inferior de 24px.
→ El mismo método para cualquier elemento.Resultado: se ajusta todo sin buscar.
Lección: una pregunta → una pestaña.
Vocabulario de la sección
- Las 3 pestañas
- La organización sistemática de los ajustes de casi todo elemento: Contenido, Estilo, Avanzado.
Ejemplo sencillo: título, botón, imagen, contenedor: todos tienen estas 3 pestañas.
Lo que no es: creer que cada widget tiene una interfaz única.
Reflejo: ¿nuevo elemento? busca en las mismas 3 pestañas.
- Pestaña Contenido
- El contenido y las opciones funcionales (texto, nivel, enlace, imágenes…).
Ejemplo sencillo: el texto y el enlace del botón de presupuesto.
Lo que no es: buscar ahí el color (está en Estilo).
Reflejo: el qué → Contenido.
- Pestaña Estilo
- La apariencia: colores, tipografía, fondo, bordes, sombras.
Ejemplo sencillo: el rosa de marca en el botón.
Lo que no es: buscar ahí los márgenes (están en Avanzado).
Reflejo: el aspecto → Estilo.
- Pestaña Avanzado
- Los ajustes finos: márgenes/paddings, posicionamiento, responsive, clases, CSS.
Ejemplo sencillo: el padding del botón y su margen inferior.
Lo que no es: buscar ahí el texto del elemento (está en Contenido).
Reflejo: el espacio y lo técnico → Avanzado.
- Lógica sistemática
- La misma organización en todas partes: siempre sabes dónde encontrar un ajuste.
Ejemplo sencillo: Nadia ajusta 10 elementos distintos sin rebuscar jamás.
Lo que no es: reaprender la interfaz para cada widget.
Reflejo: una sola lógica que memorizar, válida en todas partes.
En la práctica — Dominar las 3 pestañas
- Selecciona un botón: en Contenido, cambia su texto y su enlace.
- En Estilo, cambia su color y su tipografía.
- En Avanzado, ajusta su padding y su margen inferior.
- Repite el ejercicio en un título y una imagen: constata la misma lógica.
Guion listo para decir — tranquilizar a un cliente que quiere 'cambiarlo todo' (20 s)
"Todo es modificable con facilidad: el texto y los enlaces, los colores y las fuentes, los espaciados. Como la herramienta ordena siempre los ajustes de la misma forma, puedo ajustar cada elemento rápido si quiere un cambio."
Muestra que la coherencia de la herramienta = capacidad de respuesta para el cliente.
Plantilla para copiar y pegar — dónde ajustar qué
QUIERO CAMBIAR: _______________
→ EL QUÉ (texto, enlace, opciones): pestaña CONTENIDO
→ EL ASPECTO (color, fuente, borde): pestaña ESTILO
→ EL ESPACIO/TÉCNICO (margen, padding, responsive): pestaña AVANZADOPrincipiante
Memorizar la regla "qué / aspecto / espacio" antes de explorar las opciones avanzadas.
Ahorro de tiempo
Preguntarse "¿qué cambio?" evita rebuscar en las pestañas equivocadas.
Contenedor
Misma lógica: fondo en Estilo, padding/responsive en Avanzado.
Reproducir un estilo
Copiar el estilo de un elemento y pegarlo en otro (clic derecho) para ir más rápido.
✓ Buenas prácticas
- Preguntarse "qué / aspecto / espacio" para encontrar la pestaña correcta.
- Memorizar que márgenes/paddings están en Avanzado.
- Copiar y pegar un estilo para ahorrar tiempo.
✗ Errores frecuentes
- Buscar los márgenes en Estilo.
- Buscar el color en Contenido.
- Reaprender la interfaz para cada widget.
Puntos clave
- Contenido = el qué; Estilo = el aspecto; Avanzado = el espacio/técnico.
- Márgenes y paddings → pestaña Avanzado.
- La lógica es la misma para todo elemento.
- Una pregunta → una pestaña.
Reto 48h — aplica mañana
Toma un botón y modifícalo en las tres pestañas: texto+enlace (Contenido), color (Estilo), padding+margen (Avanzado). Reproduce en un título para constatar la misma lógica. 15 minutos.
- Sé qué va en Contenido, Estilo, Avanzado.
- Encuentro los márgenes/paddings en Avanzado.
- Aplico la misma lógica a todo elemento.
Preguntas frecuentes
¿Dónde se ajustan los márgenes y paddings?
En la pestaña Avanzado (con el posicionamiento y el responsive), no en Estilo. Estilo agrupa la apariencia (colores, tipografía, bordes).
¿Todos los widgets tienen estas 3 pestañas?
Casi todos los elementos (widgets y contenedores). El contenido de las pestañas varía según el elemento, pero la lógica sigue igual, lo que ahorra tiempo.
¿Puedo copiar el estilo de un elemento?
Sí: clic derecho → Copiar, luego "Pegar el estilo" en otro elemento. Práctico para armonizar rápido varios botones o títulos.
Nadia quiere aumentar el espacio bajo su botón. ¿En qué pestaña ajusta el margen?