El elemento Diseño en el creador de sitios web

El elemento Diseño te permite dividir el contenido en segmentos bien definidos dentro de bloques, secciones o columnas.

Veamos cómo agregar un diseño y configurar pestañas dentro de él.

Añade un diseño

Para agregar un diseño, haz clic en + Añadir widget en un bloque, columna o sección, y luego haz clic en Diseño.

Selecciona una ubicación de entre las opciones disponibles.

Después, puedes añadir widgets a cada segmento de forma vertical. Para ello, haz clic en + y selecciona un widget.

Para separar los segmentos, coloca el cursor sobre el diseño, haz clic en los tres puntos de la parte inferior y selecciona Editar. A la derecha, introduce los valores en píxeles del espaciado entre widgets del eje X y del eje Y.

Añade un diseño con pestañas

Un diseño con pestañas organiza el contenido en varias pestañas dentro de una misma sección. Esto permite mantener compacto el contenido extenso y ayuda a que quepa en una sola pantalla.

Por ejemplo, una tienda en línea puede dividir la descripción de un producto en las pestañas Especificaciones, Entrega y Reseñas.

Para agregar un diseño con pestañas, haz clic en + Añadir widget en un bloque, columna o sección. Ve a la pestaña Diseño. Elige una opción de diseño con pestañas.

Las pestañas forman parte de la misma página, en lugar de ser páginas separadas. Cuando un visitante hace clic en el nombre de una pestaña, la página muestra el contenido de esa pestaña y oculta las demás.

Cada pestaña tiene su propio contenido. El número de pestañas y el diseño de los segmentos dependen de la opción que hayas seleccionado.

Para completar una pestaña, haz clic en su nombre, haz clic en el signo + dentro de un segmento y selecciona un widget.

Un ícono de advertencia marca las pestañas que aún no tienen contenido.

Para personalizar tu diseño, pasa el cursor por encima y haz clic en los tres puntos. Selecciona Editar.

Elige la ubicación de las pestañas

Los nombres de las pestañas pueden aparecer encima del contenido o al lado de este, dependiendo del espacio disponible en tu página. Por defecto, aparecen encima del contenido.

En la sección Apariencia, elige una de las siguientes posiciones: encima del contenido, a la izquierda o a la derecha.

Personaliza estilos de pestañas

Para que las pestañas se adapten al diseño de tu sitio web, haz clic en Estilos de pestañas.

En la sección Encabezado, personaliza la apariencia de los nombres de las pestañas.

La pestaña activa es aquella que el visitante tiene abierta. También puedes resaltarla y separar el encabezado del contenido:

En la sección Contenido, configura los ajustes generales de apariencia del área que contiene los widgets. En Espacio entre widgets, configura el espacio entre los widgets dentro de esa área, en píxeles.

Para aplicar los cambios, haz clic en Guardar.

Gestiona las pestañas

La sección Pestañas muestra todas las pestañas que has agregado al diseño.

Para cambiar el nombre de una pestaña, haz clic en el ícono de lápiz que se encuentra junto a ella. Ingresa un nuevo nombre en el campo Texto y, luego, haz clic en Guardar.

Para copiar o eliminar una pestaña, haz clic en los tres puntos que se encuentran junto a ella. Selecciona Duplicar para añadir una copia con todos los widgets de la pestaña original. Selecciona Eliminar para quitar la pestaña.

Para reorganizar las pestañas, arrastra una pestaña hacia arriba o hacia abajo por su controlador a la izquierda.

Para añadir una nueva pestaña, haz clic en Añadir.

Para añadir una transición suave cuando un visitante cambie de pestaña, activa la opción Animación. Luego, elige un tipo de animación, una posición y una velocidad.

Para que las pestañas estén disponibles para los visitantes, haz clic en Publicar. Los visitantes ven una pestaña a la vez y pueden abrir otra seleccionando su nombre.

Última actualización: 23.07.2025