¿Cómo personalizar un elemento con Contenido, Estilo y Avanzado en el Editor de bloques de Waclis?

Cada vez que seleccionas un elemento dentro del Editor de bloques de Waclis, el panel lateral muestra las herramientas disponibles para modificarlo.

Las tres áreas principales son:

• Contenido

• Estilo

• Avanzado

Estas pestañas permiten trabajar sobre diferentes aspectos del elemento seleccionado.

De forma general:

Contenido → modifica qué contiene el elemento y sus propiedades principales.

Estilo → modifica cómo se ve.

Avanzado → permite controlar aspectos como visibilidad por dispositivo y animaciones.

Comprender esta diferencia te permitirá trabajar de manera más rápida y evitar modificaciones innecesarias mediante código.

Antes de comenzar: selecciona correctamente el elemento

Antes de modificar cualquier propiedad, asegúrate de haber seleccionado exactamente el elemento que quieres editar.

Por ejemplo, una imagen puede estar dentro de:

Section
└── Container
    └── Grid Row
        └── Grid Column
            └── Link
                └── Image

Visualmente puedes pensar que seleccionaste la imagen, pero en realidad podrías haber seleccionado:

• el enlace;

• la columna;

• la fila;

• el contenedor;

• la sección.

Esto es importante porque las opciones de Contenido, Estilo y Avanzado dependen del elemento seleccionado.

Si tienes dudas, utiliza:

• Navigator;

• la etiqueta que aparece sobre el elemento;

• Seleccionar padre;

• la ruta jerárquica inferior del editor.

Las opciones cambian según el elemento

No todos los componentes muestran las mismas propiedades.

Por ejemplo:

Una Image puede mostrar:

• Set Image;

• Width;

• Height;

• Alt;

• Align;

• Link;

• ID;

• Class.

Un Link puede mostrar:

• URL;

• Rel;

• Target;

• Download;

• ID;

• Class.

Una Section puede mostrar:

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Por eso no debes esperar encontrar siempre los mismos campos.

Waclis adapta el panel a cada tipo de elemento.

1. Pestaña Contenido

La pestaña Contenido permite modificar las propiedades específicas del componente seleccionado.

Piensa en esta pestaña como:

¿Qué es este elemento y qué información contiene?

Aquí normalmente encontrarás propiedades relacionadas con:

• texto;

• imagen;

• enlace;

• tipo de elemento;

• dimensiones propias;

• atributos;

• identificadores;

• clases;

• estructura.

Veamos algunos ejemplos.

Contenido de un Heading

Cuando seleccionas un título o Heading, puedes encontrar opciones como:

• Size;

• ID;

• Class.

Size

Permite definir el nivel del encabezado.

Por ejemplo:

• Heading 1;

• Heading 2;

• Heading 3;

• y otros niveles disponibles.

Los Heading no deben utilizarse únicamente por su tamaño visual.

También representan la jerarquía del contenido.

Por ejemplo:

H1 → Título principal de la página

H2 → Grandes secciones

H3 → Subsecciones

Después puedes modificar el tamaño visual mediante Estilo → Typography sin necesidad de alterar su nivel estructural.

Contenido de una imagen

Cuando seleccionas Image, Waclis muestra propiedades relacionadas con la fotografía.

Entre las principales están:

• Set Image;

• Width;

• Height;

• Alt;

• Align;

• Link;

• ID;

• Class.

Set Image

Utiliza:

Set Image

para reemplazar la fotografía actual.

Después de cambiarla, comprueba siempre:

• su proporción;

• la calidad;

• cómo se adapta al espacio;

• su visualización en dispositivos móviles.

Width y Height

Permiten establecer dimensiones para la imagen.

Debes utilizarlas con cuidado.

Una imagen con valores demasiado rígidos puede comportarse correctamente en computadora y generar problemas en celular.

Siempre comprueba las vistas responsive después de modificar dimensiones.

Alt

Alt significa texto alternativo.

Es una descripción textual de la imagen.

Por ejemplo:

Equipo de trabajo reunido en una oficina

o:

Botella térmica de acero inoxidable color negro

Es preferible evitar textos como:

foto1

o:

imagen

El texto alternativo ayuda a mejorar la accesibilidad y aporta contexto cuando la imagen no puede mostrarse.

Align

Permite determinar la alineación disponible para la imagen.

La apariencia final dependerá también del contenedor donde esté ubicada.

Link

En algunos casos puedes habilitar un vínculo para hacer que la imagen sea clicable.

Por ejemplo:

Imagen de categoría
↓
/productos/mochilas

Al hacer clic, el visitante puede acceder a otra sección.

Contenido de un Link

Cuando seleccionas un Link, puedes encontrar propiedades como:

• URL;

• Rel;

• Target;

• Download;

• ID;

• Class.

URL

Define hacia dónde dirige el enlace.

Por ejemplo:

/productos

o una URL externa.

Antes de finalizar una página, prueba siempre todos los enlaces.

Target

Permite configurar cómo se abrirá el vínculo.

Dependiendo de las opciones disponibles, puedes utilizarlo para abrir el destino en la misma pestaña o en otra.

Utiliza una nueva pestaña principalmente cuando el visitante será dirigido a un sitio externo y resulte conveniente mantener abierta la Página web.

Rel

Es un atributo relacionado con el comportamiento y relación del enlace.

Se trata de una opción más técnica.

Si no necesitas configurarlo específicamente, no es necesario modificarlo.

Download

Permite indicar que determinados enlaces están destinados a una descarga cuando corresponda.

Contenido de un Html Button

Al seleccionar un Html Button puedes encontrar:

• Text;

• Name;

• Type;

• Autofocus;

• Disabled;

• ID;

• Class.

Text

Permite modificar el texto visible del botón.

Por ejemplo:

Enviar

Solicitar presupuesto

Ver productos

Conocer más

Utiliza textos que indiquen claramente qué sucederá cuando el usuario interactúe con el botón.

Type

Define el tipo de botón.

Es especialmente importante dentro de formularios.

No modifiques esta propiedad si no conoces la función que cumple el botón dentro de su estructura.

Disabled

Permite deshabilitar un botón.

Un botón deshabilitado permanece visible pero no puede utilizarse normalmente.

Contenido de una Section

Cuando seleccionas una Section, las propiedades cambian por completo.

Entre ellas puedes encontrar:

• Title;

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Title

Permite identificar la Section.

Puede ayudarte a reconocerla dentro de estructuras complejas.

Container width

Permite seleccionar:

Boxed

o

Full

Boxed

Mantiene el contenido dentro de un ancho contenido.

Ejemplo:

┌──────────────────────────────────────────┐
│                                          │
│     ┌────────────────────────────┐       │
│     │         CONTENIDO          │       │
│     └────────────────────────────┘       │
│                                          │
└──────────────────────────────────────────┘

Full

Permite utilizar todo el ancho disponible.

Puede resultar útil para:

• banners;

• imágenes de fondo;

• secciones visuales amplias;

• composiciones de ancho completo.

Container height

Permite seleccionar:

Auto

o

Full

Auto

La altura depende del contenido.

Es la opción habitual para secciones informativas.

Full

Permite crear una sección de mayor altura, útil en determinadas composiciones visuales.

Background

Una Section puede utilizar:

• None;

• Image;

• Video.

None

No utiliza un fondo especial.

Image

Permite incorporar una imagen como fondo.

Video

Permite utilizar un video como fondo cuando la composición lo requiera.

Los videos de fondo deben utilizarse con moderación y siempre comprobarse en dispositivos móviles.

Overlay

Permite agregar una capa por encima del fondo.

Es especialmente útil para mejorar la legibilidad de textos.

Por ejemplo:

FOTOGRAFÍA
+
OVERLAY OSCURO
+
TEXTO BLANCO

Esto puede generar un contraste mucho mejor que colocar directamente el texto sobre una fotografía clara.

Top Separator y Bottom Separator

Permiten crear separadores visuales entre secciones.

Puedes aplicarlos en:

• la parte superior;

• la parte inferior.

Son útiles para generar transiciones visuales, pero recomendamos mantener una estética coherente y no utilizar diferentes separadores en cada bloque sin una razón de diseño.

Contenido de Grid Row

Cuando seleccionas un Grid Row, Waclis permite trabajar sobre la estructura de la fila.

Entre las opciones disponibles pueden aparecer:

• Direction;

• Vertical align;

• Horizontal align;

• Wrap;

• columnas;

• tamaños según dispositivo.

Direction

Permite determinar la dirección en la que se organizan los elementos.

La configuración habitual será horizontal en desktop, aunque puede variar según el diseño.

Vertical align

Controla la alineación vertical de los elementos.

Por ejemplo, si tienes:

[ IMAGEN ]    TÍTULO
              TEXTO
              BOTÓN

puedes utilizar la alineación vertical para decidir cómo se relacionan visualmente ambas columnas.

Horizontal align

Permite controlar la alineación horizontal dentro de la estructura.

Wrap

Determina si los elementos pueden reorganizarse en nuevas líneas cuando no existe suficiente espacio.

Esto es especialmente importante en diseños responsive.

Tamaños por dispositivo

Grid Row permite configurar las columnas para diferentes tamaños:

• Extra small;

• Small;

• Medium;

• Large;

• Extra large;

• Extra extra large.

Esto permite transformar:

Desktop:

[ 1 ] [ 2 ] [ 3 ]

en:

Mobile:

[ 1 ]

[ 2 ]

[ 3 ]

sin tener que crear una página diferente para celular.

ID y Class

Muchos componentes incluyen los campos:

ID

y

Class

Son especialmente importantes para personalizaciones avanzadas.

¿Qué es Class?

Una Class puede compartirse entre varios elementos.

Por ejemplo:

beneficio-card

puede estar presente en:

Card 1
Card 2
Card 3

Esto permite aplicar el mismo estilo a todos.

¿Qué es ID?

Un ID sirve para identificar un elemento específico.

Por ejemplo:

beneficio-envios

Debe utilizarse como identificador único dentro de la página.

¿Cuándo utilizar Class y cuándo ID?

Utiliza una Class cuando quieras compartir estilos.

Por ejemplo:

boton-principal

para varios botones.

Utiliza un ID cuando necesites identificar de manera individual un elemento.

Por ejemplo:

banner-home-agosto

2. Pestaña Estilo

La pestaña Estilo controla principalmente:

¿Cómo se ve este elemento?

Aquí puedes modificar su apariencia sin escribir CSS directamente.

Entre las categorías disponibles se encuentran:

• Display;

• Typography;

• Size;

• Margin;

• Padding;

• Border;

• Border radius;

• Background Image.

Las opciones pueden variar según el elemento.

Selector State

En la parte superior de Estilo encontrarás un selector:

- State -

Entre los estados disponibles están:

• hover;

• active;

• nth-of-type(2n).

Esto permite aplicar estilos a situaciones específicas.

Los veremos más adelante en este tutorial.

Display

Dentro de Display encontrarás propiedades relacionadas con el comportamiento visual del elemento.

Entre ellas pueden aparecer:

• Display;

• Position;

• Top;

• Left;

• Bottom;

• Right;

• Float;

• Opacity;

• Background Color;

• Text Color.

Display

Determina cómo participa el elemento dentro de la estructura.

Es una propiedad avanzada.

Si no necesitas modificar el comportamiento estructural del elemento, normalmente puedes mantener el valor existente.

Cambiar Display incorrectamente puede alterar la distribución de otros componentes.

Position

Permite modificar el sistema de posicionamiento.

También es una configuración avanzada.

Puede relacionarse con:

• Top;

• Left;

• Bottom;

• Right.

Si no necesitas posicionamiento específico, recomendamos no modificarlo.

Top, Left, Bottom y Right

Estas propiedades permiten desplazar o posicionar determinados elementos dependiendo de la configuración de Position.

No deben utilizarse como reemplazo habitual de Margin o Padding.

Para separar visualmente elementos, utiliza primero:

• Margin;

• Padding;

• alineaciones;

• estructura de Grid.

Float

Es una propiedad de posicionamiento utilizada en determinadas estructuras.

Normalmente no necesitarás modificarla para diseños habituales construidos con Grid Row.

Opacity

Determina la transparencia.

Por ejemplo:

100 %

elemento completamente visible.

Al disminuir el valor, el elemento se vuelve más transparente.

Puede utilizarse para:

• fondos;

• imágenes decorativas;

• efectos visuales.

Evita reducir demasiado la opacidad de textos importantes porque puede afectar su legibilidad.

Background Color

Permite cambiar el color de fondo del elemento seleccionado.

Es importante comprobar qué nivel estás modificando.

Por ejemplo:

Si seleccionas la Section:

TODO EL BLOQUE

puede recibir el fondo.

Si seleccionas una Card:

SOLO LA TARJETA

recibirá el fondo.

Si seleccionas un botón:

SOLO EL BOTÓN

recibirá el color.

Text Color

Permite cambiar el color del texto del elemento seleccionado.

Asegúrate siempre de mantener suficiente contraste entre texto y fondo.

Por ejemplo:

Texto blanco + fondo blanco

será difícil o imposible de leer.

Typography

La sección Typography permite personalizar textos.

Entre sus opciones puedes encontrar:

• Font size;

• Font weight;

• Font family;

• Text align;

• Line height;

• Letter spacing;

• Text decoration;

• Decoration color;

• Decoration style.

Font size

Controla el tamaño visual de la tipografía.

Por ejemplo:

16px
24px
32px

El tamaño apropiado depende de:

• importancia del texto;

• dispositivo;

• jerarquía;

• diseño.

Font weight

Controla el grosor del texto.

Puede utilizar valores o alternativas similares a:

• normal;

• medium;

• bold;

• diferentes pesos disponibles.

No todos los textos necesitan estar en negrita.

Utiliza el grosor para establecer jerarquía visual.

Font family

Permite elegir la familia tipográfica.

Mantener pocas tipografías diferentes dentro de una Página web ayuda a conservar consistencia visual.

Text align

Permite alinear el texto:

• izquierda;

• centro;

• derecha;

• otras opciones disponibles.

No todo contenido debe estar centrado.

Los párrafos extensos suelen resultar más fáciles de leer alineados a izquierda.

Line height

Controla el espacio entre las líneas.

Ejemplo:

Texto con una
separación correcta
entre sus líneas.

Una altura demasiado pequeña puede hacer que las líneas queden amontonadas.

Una demasiado grande puede dificultar la continuidad visual.

Letter spacing

Controla la separación entre caracteres.

Puede utilizarse para determinados títulos o efectos visuales.

Evita valores excesivos en párrafos largos.

Text decoration

Permite aplicar decoraciones como subrayados según las opciones disponibles.

Decoration color y Decoration style

Permiten personalizar el color y estilo de esa decoración.

Son propiedades más específicas y normalmente se utilizan en diseños concretos.

Size

La sección Size controla dimensiones.

Puedes encontrar:

• Width;

• Height;

• Min Width;

• Min Height;

• Max Width;

• Max Height.

Width

Determina el ancho.

Puede resultar útil para:

• imágenes;

• contenedores;

• botones;

• componentes.

Evita utilizar anchos fijos demasiado grandes sin comprobar responsive.

Height

Determina la altura.

Un Height fijo puede ser útil en algunos diseños, pero también puede producir recortes si el contenido cambia.

Utilízalo solo cuando sea necesario.

Min Width y Min Height

Definen dimensiones mínimas.

Por ejemplo, puedes indicar que una tarjeta no sea más pequeña que determinado tamaño.

Max Width y Max Height

Permiten establecer un límite máximo.

Por ejemplo, puedes utilizar Max Width para evitar que un bloque de texto ocupe una línea excesivamente larga en pantallas grandes.

Margin

Margin controla el espacio exterior del elemento.

Se divide en:

• Top;

• Right;

• Bottom;

• Left.

Visualmente:

            MARGIN TOP

     ┌───────────────────┐
     │                   │
M    │     ELEMENTO      │    M
A    │                   │    A
R    └───────────────────┘    R
G                             G
I                             I
N                             N

           MARGIN BOTTOM

Ejemplo de Margin

Tienes:

TÍTULO
TEXTO

y están demasiado juntos.

Puedes agregar:

Margin Bottom

al título.

Resultado:

TÍTULO


TEXTO

Padding

Padding controla el espacio interior.

Por ejemplo:

┌──────────────────────────────┐
│                              │
│       ESPACIO INTERIOR       │
│                              │
│          CONTENIDO           │
│                              │
│       ESPACIO INTERIOR       │
│                              │
└──────────────────────────────┘

Ejemplo de Padding

Una tarjeta tiene:

┌───────────────────┐
│Título             │
│Descripción        │
└───────────────────┘

Puedes agregar Padding para obtener:

┌───────────────────┐
│                   │
│   Título          │
│   Descripción     │
│                   │
└───────────────────┘

Diferencia entre Margin y Padding

La forma más sencilla de recordarlo:

Margin = espacio por fuera.

Padding = espacio por dentro.

¿Cuál debo modificar?

Si quieres separar dos tarjetas:

Margin

puede ser una alternativa.

Si quieres alejar el texto del borde de una tarjeta:

Padding.

Border

La sección Border permite crear bordes.

Puedes configurar propiedades como:

• Style;

• Width;

• Color.

Style

Determina el tipo de borde.

Debe existir un estilo visible para que el borde aparezca.

Width

Controla el grosor.

Por ejemplo:

1px
2px
3px

Color

Define el color del borde.

Ejemplo de tarjeta

Sin borde:

   CONTENIDO

Con borde:

┌────────────────────┐
│     CONTENIDO      │
└────────────────────┘

Border radius

Border radius permite redondear esquinas.

Puedes controlar:

• Top Left;

• Top Right;

• Bottom Left;

• Bottom Right.

Ejemplo

Sin radius:

┌───────────────┐
│    TARJETA    │
└───────────────┘

Con radius:

╭───────────────╮
│    TARJETA    │
╰───────────────╯

Puedes aplicar el mismo valor a las cuatro esquinas o utilizar valores diferentes.

Background Image

La configuración de Background Image permite aplicar una imagen de fondo a determinados elementos.

Entre las propiedades disponibles puedes encontrar:

• Image;

• Repeat;

• Size;

• Position X;

• Position Y.

Image

Permite elegir la imagen utilizada como fondo.

Repeat

Controla si la imagen se repite.

Una imagen pequeña puede repetirse para llenar un área, aunque normalmente las fotografías de fondo suelen configurarse para no repetirse.

Size

Controla cómo se adapta.

Dos conceptos habituales son:

Cover

La imagen cubre toda el área.

Puede recortar parte de la fotografía para conseguirlo.

Contain

Intenta mostrar la imagen completa dentro del espacio.

Puede dejar zonas libres si las proporciones son diferentes.

La opción adecuada depende del objetivo visual.

Position X y Position Y

Permiten ajustar qué área de la imagen queda mejor posicionada.

Por ejemplo, si una persona aparece a la derecha de una fotografía, puedes ajustar la posición para evitar que quede fuera del área visible.

Linked styles

Mientras trabajas con Estilo, Waclis puede mostrar una advertencia:

Linked styles

Esto significa que los estilos que estás modificando están asociados a más de un elemento.

Por ejemplo:

Tarjeta 1 → .beneficio
Tarjeta 2 → .beneficio
Tarjeta 3 → .beneficio

Cambiar el fondo de:

.beneficio

puede afectar las tres tarjetas.

¿Linked styles significa que existe un error?

No.

Puede ser completamente intencional.

De hecho, compartir clases es una forma de mantener consistencia.

Por ejemplo, quieres que todos los botones principales sean:

• azules;

• con texto blanco;

• redondeados.

Una misma clase permite mantenerlos iguales.

¿Qué hago si solo quiero modificar uno?

Si observas que cambian otros elementos:

1. utiliza Deshacer si el resultado no era el esperado;

2. revisa Navigator;

3. comprueba Class;

4. comprueba ID;

5. identifica si la regla es compartida.

En el tutorial específico de clases, IDs y estilos vinculados veremos este tema en profundidad.

3. Pestaña Avanzado

La pestaña Avanzado contiene herramientas relacionadas principalmente con:

• visibilidad según dispositivo;

• animaciones.

Piensa en esta pestaña como:

¿Cuándo debe verse y cómo debe aparecer este elemento?

Hide based on device screen width

Dentro de Avanzado encontrarás:

Hide based on device screen width

Esta herramienta permite ocultar el elemento en determinados tamaños de pantalla.

Las opciones disponibles incluyen:

• Extra small devices;

• Small devices;

• Medium devices;

• Large devices;

• XL devices;

• XXL devices.

¿Para qué sirve?

Por ejemplo, puedes tener un banner muy grande diseñado especialmente para computadora.

Puedes decidir ocultarlo en celulares y utilizar otro diseño más sencillo.

También puedes ocultar:

• textos secundarios;

• imágenes decorativas;

• determinados botones;

• elementos que no son necesarios en pantallas pequeñas.

Importante: ocultar no es lo mismo que previsualizar

Existe una diferencia fundamental.

Vista móvil/tablet/desktop

Sirve para comprobar cómo se ve el contenido.

No modifica su visibilidad.

Hide based on device screen width

Realmente determina en qué tamaños se mostrará u ocultará.

Ejemplo

Supongamos que tienes:

IMAGEN DECORATIVA | TEXTO

En celular la imagen ocupa demasiado espacio.

Puedes decidir:

Desktop:
[ IMAGEN ] [ TEXTO ]

Mobile:
[ TEXTO ]

ocultando la imagen para determinados anchos.

No ocultes contenido importante sin necesidad

Evita utilizar esta función para solucionar todos los problemas responsive.

Primero intenta que la estructura se adapte correctamente.

Por ejemplo, es mejor transformar:

[ 1 ] [ 2 ] [ 3 ]

en:

[ 1 ]

[ 2 ]

[ 3 ]

que ocultar dos de las tres tarjetas solamente porque no entran en celular.

La ocultación debería utilizarse cuando realmente quieres ofrecer una experiencia diferente.

Animate on scroll

Dentro de Avanzado encontrarás:

Animate on scroll

Permite agregar una animación que se ejecuta cuando el visitante llega al elemento mientras recorre la página.

Puedes configurar:

• Animation type;

• Duration;

• Delay.

Animation type

Permite seleccionar el tipo de animación.

Según las opciones disponibles puedes encontrar diferentes efectos de entrada.

Duration

Controla cuánto dura la animación.

Una animación demasiado rápida puede resultar casi imperceptible.

Una demasiado lenta puede hacer que la página se sienta pesada.

Delay

Permite establecer una demora antes de comenzar.

Puede utilizarse para crear apariciones escalonadas.

Por ejemplo:

Tarjeta 1 → Delay 0

Tarjeta 2 → Delay breve

Tarjeta 3 → Delay mayor

Esto puede generar un efecto progresivo.

Play animation

Utiliza:

Play animation

para comprobar el efecto dentro del editor.

No es necesario guardar cada vez únicamente para probar la animación.

Ejemplo de animaciones en tres beneficios

Supongamos:

[ Envíos ] [ Calidad ] [ Soporte ]

Puedes aplicar una animación similar a las tres tarjetas.

Una pequeña diferencia de Delay puede producir:

Envíos → aparece primero

Calidad → aparece después

Soporte → aparece por último

Utiliza animaciones con moderación

No todo elemento necesita movimiento.

Una buena animación puede:

• destacar contenido;

• guiar la mirada;

• mejorar la percepción de una transición.

Demasiadas animaciones pueden:

• distraer;

• dificultar la lectura;

• hacer que la página se sienta lenta;

• generar una experiencia visual inconsistente.

Estados desde Estilo

Aunque están dentro de Estilo y no de Avanzado, los estados son también una herramienta de comportamiento visual.

Desde:

State

puedes seleccionar:

• hover;

• active;

• nth-of-type(2n).

Hover

hover representa el momento en el que el visitante coloca el cursor sobre un elemento.

Es muy útil para:

• botones;

• tarjetas;

• enlaces;

• imágenes.

Ejemplo de Hover en un botón

Estado normal:

[ VER PRODUCTOS ]

Puedes configurar:

• fondo oscuro;

• texto blanco.

Luego seleccionas:

State → hover

y cambias:

• Background Color;

• Text Color.

Resultado:

Normal:
[ VER PRODUCTOS ]

Cursor encima:
[ VER PRODUCTOS ] ← nuevo color

Ejemplo de Hover en una tarjeta

Puedes cambiar:

• borde;

• fondo;

• opacidad;

• otros estilos disponibles.

Esto ayuda a comunicar visualmente que el elemento es interactivo.

Active

active representa un estado activo de determinados elementos.

Puede utilizarse en componentes interactivos cuando corresponde.

Si el elemento no tiene un comportamiento donde Active sea necesario, no hace falta configurarlo.

nth-of-type(2n)

nth-of-type(2n) es una opción avanzada basada en selectores CSS.

Permite trabajar con elementos según su posición.

Por ejemplo, puede utilizarse conceptualmente para estilizar:

Elemento 1
Elemento 2 ← estilo
Elemento 3
Elemento 4 ← estilo

Es decir, elementos pares.

Si no tienes un objetivo específico o conocimientos de CSS, recomendamos no modificar este estado.

Ejemplo completo: personalizar una Card

Supongamos que tienes esta estructura:

Card
├── Image
├── Heading
├── Paragraph
└── Button

Queremos conseguir:

• fondo claro;

• espacio interior;

• esquinas redondeadas;

• título grande;

• botón con efecto Hover;

• animación al aparecer;

• una distribución correcta en móvil.

Paso 1: selecciona Card

Utiliza Navigator si es necesario.

Paso 2: agrega espacio interior

Ve a:

Estilo → Padding

y agrega espacio alrededor del contenido.

Paso 3: redondea las esquinas

Ve a:

Estilo → Border radius

y utiliza el mismo valor para las cuatro esquinas.

Paso 4: cambia el fondo

Utiliza:

Estilo → Background Color

Paso 5: selecciona Heading

Ve a:

Estilo → Typography

y modifica:

• Font size;

• Font weight;

• Line height.

Paso 6: selecciona Button

Configura su texto desde:

Contenido → Text

Paso 7: personaliza el botón

Desde Estilo configura:

• Background Color;

• Text Color;

• Padding;

• Border radius.

Paso 8: crea Hover

Selecciona:

State → hover

y modifica el fondo o texto.

Paso 9: agrega animación a Card

Selecciona Card.

Ve a:

Avanzado → Animate on scroll

y configura:

• Animation type;

• Duration;

• Delay.

Paso 10: revisa celular

Utiliza la vista móvil y comprueba:

• ancho;

• imagen;

• texto;

• botón;

• espacios.

Ejemplo completo: una Section con imagen de fondo

Queremos crear:

┌──────────────────────────────────────────────┐
│                                              │
│             NUEVA COLECCIÓN                  │
│                                              │
│       Descubre nuestros productos            │
│                                              │
│              [ VER MÁS ]                     │
│                                              │
└──────────────────────────────────────────────┘

con una fotografía detrás.

Paso 1: selecciona Section

En:

Contenido

configura:

Background → Image

Paso 2: ajusta el fondo

Desde:

Estilo → Background Image

revisa:

• Repeat;

• Size;

• Position X;

• Position Y.

Paso 3: agrega Overlay

Vuelve a:

Contenido → Overlay

y utiliza una capa que mejore el contraste.

Paso 4: cambia el color del texto

Selecciona Heading y Paragraph.

En:

Estilo → Text Color

utiliza un color suficientemente contrastante.

Paso 5: agrega Padding

Selecciona Section o el contenedor adecuado.

Aumenta el espacio superior e inferior.

Paso 6: revisa la imagen en móvil

La imagen puede recortarse de manera diferente.

Ajusta Position X / Y si es necesario.

Ejemplo completo: imagen con enlace

Quieres que una fotografía lleve al visitante a Productos.

Paso 1

Selecciona Image.

Paso 2

Activa o configura la propiedad de enlace.

Paso 3

Selecciona el Link que contiene la imagen.

Utiliza:

Contenido → URL

y agrega:

/productos

Paso 4

Comprueba que el enlace funcione desde Ver página.

¿Contenido o Estilo?

Una duda frecuente es saber en qué pestaña buscar determinada configuración.

Puedes utilizar esta regla:

Quiero cambiar la imagen

Contenido

Quiero cambiar la URL

Contenido

Quiero modificar el texto de un botón

Contenido

Quiero cambiar una clase o ID

Contenido

Quiero cambiar el color

Estilo

Quiero cambiar la tipografía

Estilo

Quiero agregar espacio

Estilo

Quiero redondear esquinas

Estilo

Quiero cambiar el fondo visual

Estilo o las propiedades específicas de la Section según el caso.

Quiero ocultar en celular

Avanzado

Quiero agregar una animación

Avanzado

¿Qué ocurre si una opción no aparece?

Primero comprueba el elemento seleccionado.

Por ejemplo, quieres cambiar la imagen pero en Contenido no aparece:

Set Image

Es posible que tengas seleccionado:

Link

en lugar de:

Image

Utiliza Navigator para seleccionar Image.

Evita modificar el padre por error

Otro caso frecuente:

Quieres cambiar el fondo de un botón.

Pero seleccionaste:

Grid Column

y cambias:

Background Color

Resultado:

toda la columna cambia de color.

Antes de realizar una modificación visual importante verifica qué componente aparece seleccionado.

Utiliza Deshacer

Si un cambio afecta más elementos de los esperados:

1. utiliza Deshacer;

2. comprueba el elemento;

3. revisa Linked styles;

4. revisa Navigator;

5. vuelve a realizar el cambio.

Cuándo utilizar CSS en lugar de Estilo

Las herramientas de Estilo cubren muchas necesidades habituales.

Utiliza CSS principalmente cuando:

• la propiedad que necesitas no está disponible;

• necesitas un selector especial;

• quieres controlar varios elementos mediante una regla;

• necesitas un efecto avanzado;

• estás trabajando con código personalizado.

Para cambios sencillos es preferible mantenerlos dentro de la interfaz visual.

Ejemplo

Quieres que un botón tenga:

• fondo rojo;

• texto blanco;

• esquinas redondeadas.

Puedes resolverlo con:

Estilo

No necesitas escribir CSS.

Pero si quieres un efecto muy específico como:

transform: translateY(-5px);
transition: transform .3s ease;

puede ser necesario recurrir a CSS.

Cuándo utilizar HTML

Utiliza Editar código HTML cuando necesites modificar la estructura o atributos que no puedas resolver desde Contenido.

Por ejemplo:

• agregar un atributo;

• cambiar determinada estructura;

• incorporar una clase específica;

• realizar una modificación generada por una IA.

Para reemplazar un texto o cambiar un color, normalmente no es necesario abrir HTML.

Flujo recomendado para editar cualquier elemento

Puedes utilizar siempre este orden:

1. Selecciona el elemento.

2. Comprueba Navigator.

3. Revisa Contenido.

4. Configura sus propiedades.

5. Pasa a Estilo.

6. Modifica apariencia.

7. Comprueba si aparece Linked styles.

8. Pasa a Avanzado si necesitas responsive o animaciones.

9. Comprueba desktop.

10. Comprueba tablet.

11. Comprueba celular.

12. Guarda.

13. Utiliza Ver página.

Errores frecuentes

Buscar todas las opciones siempre en Contenido

Recuerda que la apariencia está principalmente en Estilo.

Buscar el enlace en Estilo

La URL pertenece a Contenido.

Cambiar Width o Height sin revisar celular

Las dimensiones fijas pueden generar problemas responsive.

Utilizar Position para crear espacios

Para separaciones normales utiliza primero Margin y Padding.

Confundir Margin y Padding

Recuerda:

Margin = exterior.

Padding = interior.

Cambiar una clase compartida sin revisar Linked styles

Puede modificar varios elementos.

Modificar toda la Section cuando querías cambiar una Card

Comprueba Navigator.

Ocultar contenido solamente porque no entra en móvil

Primero intenta adaptar el diseño correctamente.

Aplicar animaciones a todos los componentes

Utilízalas con una lógica visual coherente.

Cambiar estados sin volver al estado normal

Después de trabajar sobre Hover o Active, recuerda volver a:

- State -

para continuar modificando el estilo normal.

Tabla rápida de referencia

Buenas prácticas

Cuando personalices elementos recomendamos:

• comenzar siempre por Contenido;

• utilizar Estilo antes de recurrir a CSS;

• comprobar el nivel de la estructura seleccionado;

• utilizar Navigator cuando tengas dudas;

• prestar atención a Linked styles;

• evitar dimensiones rígidas sin necesidad;

• comprobar responsive después de cambiar tamaños;

• mantener una paleta coherente;

• evitar demasiadas tipografías;

• utilizar animaciones de manera moderada;

• revisar el resultado final fuera del editor.

En resumen

Las tres pestañas principales del Editor de bloques cumplen funciones diferentes:

Contenido

Controla la información y propiedades propias del elemento.

Por ejemplo:

• imagen;

• URL;

• texto;

• tamaño estructural;

• ID;

• Class;

• propiedades de Section;

• configuración de Grid Row.

Estilo

Controla la apariencia visual.

Por ejemplo:

• color;

• tipografía;

• tamaños;

• Margin;

• Padding;

• bordes;

• Border radius;

• fondos;

• estados Hover y Active.

Avanzado

Controla comportamientos adicionales.

Por ejemplo:

• visibilidad según dispositivo;

• animaciones al hacer scroll.

La clave para trabajar correctamente es seleccionar primero el elemento adecuado y después utilizar la herramienta correspondiente.

Cuando una modificación no produce el resultado esperado, revisa:

Elemento seleccionado → Navigator → Linked styles → Contenido / Estilo / Avanzado.

Con este método podrás realizar gran parte de las personalizaciones de una Página web sin necesidad de escribir código.