Ajustar el aspecto de un elemento

La pestaña Diseño permite ajustar el aspecto de un bloque sin cambiar todo el sitio. Utilízala para definir su ancho, alinear contenido, añadir un fondo y controlar el espacio entre sus elementos y los bordes.

Cómo acceder y aplicar un ajuste

1. Abre Sitio web → Páginas → Contenido.
2. Pulsa Editar en la tarjeta del widget.
3. Entra en Diseño.
4. Marca la casilla de la propiedad que quieras personalizar y completa sus valores.
5. Guarda y previsualiza la página.

Pestaña Diseño de un widget

Ancho del widget

Selecciona 8, 16, 25, 33, 42, 50, 58, 66, 75, 83, 92 o 100 %. El porcentaje indica cuánto espacio ocupa: 100 % utiliza todo el ancho disponible y 50 % utiliza la mitad. Si el elemento está dentro de un contenedor, el ancho se calcula sobre ese grupo. En un contenedor del mismo tamaño, el reparto de los elementos que contiene lo determina el número por fila.

Alineación del texto

Selecciona izquierda, centro o derecha. La distribución de los elementos dentro de un contenedor se ajusta mediante Justificar contenido.

Imagen y color de fondo

Puedes añadir una imagen de hasta 2 MB o activar Personalizar color de fondo. El fondo del widget puede cubrir el fondo general de la web.

Color del texto

Marca Personalizar color del texto y selecciona el color. Algunos elementos y fragmentos con formato propio pueden conservar sus estilos.

Altura mínima

Marca Forzar altura mínima e introduce el valor en píxeles. Define un mínimo; el bloque puede crecer si necesita más espacio para el contenido.

Espacio de relleno

Es la distancia interior entre el contenido y los bordes. Personaliza los valores superior, derecho, inferior e izquierdo. Úsalo para que el texto o las imágenes no queden pegados al límite del bloque.

Márgenes

Son los espacios exteriores del widget. Personaliza los cuatro lados. Los márgenes izquierdo y derecho no se utilizan en pantallas pequeñas según la ayuda del control.

Esquinas redondeadas

Activa la opción y escribe un valor en píxeles: un valor mayor hace que las esquinas se vean más redondeadas.

Borde

Activa la opción y define el ancho en píxeles y el color. En el widget Imagen, el borde se aplica a la imagen.

Clases CSS adicionales

Introduce nombres de clases separados por espacios, por ejemplo presentacion evento-destacado  . Una clase es un nombre que permite aplicar un estilo con código a ese elemento. Si no vas a utilizar CSS, puedes dejar este campo vacío. Las reglas se escriben en el editor CSS, no aquí.

Personalizaciones de relleno, márgenes, borde y clases CSS

Ejemplo práctico

Para destacar una sección, aplica un fondo suave, añade relleno a los cuatro lados y centra su título. Mantén el texto con suficiente contraste respecto al fondo.

Ten en cuenta

Los valores que muestra cada formulario dependen del widget y su configuración. Si una casilla de personalización está desmarcada, el valor del campo no significa que esa personalización esté activa.

En Botón y Botón añadir a mi agenda, las propiedades se aplican al enlace. Widget repetido utiliza el diseño del original. Los estilos CSS personalizados también pueden cambiar el resultado.