Elementor: ajustes de estilo y pestaña Avanzado

Contenido, Estilo y Avanzado

La mayoría de widgets de Elementor se editan desde tres zonas: Contenido, Estilo y Avanzado.

• Contenido: cambia el texto, imagen, enlace o datos del widget.
• Estilo: cambia colores, tipografías, fondos, bordes y efectos visuales.
• Avanzado: controla márgenes, padding, responsive, posición, clases CSS y comportamiento.

Pestaña Estilo

Sirve para definir cómo se ve el elemento. Es donde se ajustan colores, tamaños, tipografía, bordes, sombras, fondos y estados hover.

Para mantener coherencia, conviene repetir una paleta de colores y no cambiar cada widget de forma improvisada.

Pestaña Avanzado

Es una de las zonas más importantes. Aquí puedes controlar el espaciado, añadir clases CSS, ocultar elementos en móvil, cambiar el orden o aplicar efectos.

Margin y padding

Margin es el espacio exterior. Padding es el espacio interior. Si una tarjeta se ve apretada, normalmente necesita más padding. Si dos bloques están demasiado juntos, probablemente necesitan margen o gap.

Z-index, posición y visibilidad

El z-index controla qué elemento queda encima de otro. La posición permite mover elementos de forma relativa, absoluta o fija, pero hay que usarlo con cuidado para no romper el responsive.

La visibilidad responsive permite ocultar o mostrar elementos según dispositivo.

Cuándo usar CSS personalizado

Usa CSS personalizado cuando Elementor no permita ajustar algo con precisión o cuando necesites un efecto más concreto. No debe ser la primera opción para todo.

Ejemplos: hacer una card con efecto glass, corregir un desbordamiento móvil, ajustar un grid, crear una animación suave o personalizar un pseudo-elemento.

Estoy editando un widget en Elementor. Explícame qué debo tocar en Contenido, Estilo y Avanzado para conseguir este resultado: [describe el resultado]. Dame pasos sin código primero y CSS solo si hace falta.