Cómo personalizar los elementos de tu sitio
Puedes editar el estilo de todo tu sitio y los bloques que cuentan con secciones y columnas, así como personalizar cada columna y widget por separado.
En la introducción a los elementos del sitio web de uno de nuestros artículos anteriores, hablamos sobre los elementos de la página del sitio. En este artículo, te explicaremos cómo personalizar cada elemento y también cómo editar la página completa.
Pautas de configuración de diseño
Puedes personalizar la página completa o cada elemento por separado.
| Estilo del sitio web | Configura el esquema de color y los estilos de texto y botones que se aplicarán a todos los elementos de la página de tu sitio web de forma predeterminada. Con esta opción puedes personalizar tu sitio para que coincida con el estilo de tu marca. Leer más: Cómo personalizar el estilo de tu página. |
| Configuración de bloque | Configura el estilo de tu bloque seleccionado y sus secciones y columnas. |
| Configuración de columna | Configura el estilo de la columna seleccionada en su sección. Puedes copiar una columna junto con todas las configuraciones en columnas nuevas. Por ejemplo, al agregar información sobre las características de tu servicio o los beneficios del producto, puedes crear una columna, duplicarla y agregarla a una nueva y usarla como plantilla. |
| Personalización de widgets | El estilo general de tu sitio web se aplica a todos tus widgets de forma predeterminada. Sin embargo, puedes personalizar algunos de tus widgets una vez que los agregues. |
Más información: Agregar widgets.
Tu sitio tendrá un diseño flexible, que permite que los elementos de tu sitio se ajusten automáticamente a pantallas de varios tamaños. No puedes establecer un ancho o alto fijo para los elementos, pero puedes cambiar su relleno.
Para editar elementos, coloca el cursor sobre la esquina superior derecha de un bloque o columna o sobre la esquina superior izquierda de un widget y haz clic en el ícono de edición.
También puedes volver a la configuración de nivel superior de un elemento (por ejemplo, haciendo clic en Estilo > Bloque > Columna) en el panel de edición.
Personalizar el estilo de un elemento
Vamos a repasar las opciones que puedes utilizar para personalizar los elementos. Para obtener más información sobre opciones específicas, consulta la sección Parámetros de los elementos.
Bloque
Puedes personalizar los siguientes ajustes del bloque:
| Color de fondo | Cambia el color de fondo del bloque en la página. Haz clic en el ícono y selecciona un color. |
| Margen superior e inferior | Añade espacio entre un bloque y otros elementos de la página. Cuanto mayor sea el valor, más espacio habrá entre el bloque y otros elementos. Introduce un valor en pixeles. |
| Imagen de fondo | Establece una imagen de fondo en lugar de un color. Activa la opción y selecciona una imagen. |
| Ancho de pantalla completa | Estira el contenido a pantalla completa. Activa esta opción para que el contenido se ajuste de un borde a otro de la pantalla. |
| Altura de pantalla completa | Estira el contenido a la altura de pantalla completa. Activa esta opción para que el contenido ocupe toda la altura de la pantalla. |
| Ocultar bloque | Oculta el bloque en dispositivos móviles o de escritorio. |
También puedes hacer espacios entre bloques utilizando separadores. Para ello, activa la opción Divisor superior o Divisor inferior en la configuración del bloque y personalízalo:
| Apariencia | Selecciona una forma de separador. |
| Color | Selecciona un color para el separador. |
| Altura | Selecciona la altura del separador. |
| Repetir | Selecciona las veces que deseas repetir la forma del separador. |
| Voltear | Selecciona cómo voltear la forma del divisor:
|
Columna
Puedes personalizar la configuración de las siguientes columnas:
| Ancho de columna flexible | Si activas esta opción, podrás ajustar manualmente el ancho de las columnas. Si aumentas el ancho de una de ellas, las demás se reducirán proporcionalmente junto con su contenido. |
| Espaciado entre columnas | Añade un espaciado externo entre columnas. |
| Alineación del contenido | Alinea verticalmente el contenido del widget dentro de una columna. Puedes fijarlo en la parte superior, central o inferior. |
| Color de fondo | Cambia el color de fondo de una columna. Haz clic en el símbolo y selecciona un color.
Para evitar cubrir el color de fondo del bloque, puedes establecer el valor en Transparente. |
| Redondeo | Redondea las esquinas de las columnas. Cuanto mayor sea el valor, más redondeadas serán las esquinas.
Para ver el efecto de redondeo, selecciona un color de fondo de columna. |
| Relleno interior | Añade relleno entre el borde de la columna y el widget. Selecciona valores predefinidos o introduce los tuyos para el relleno superior, inferior, izquierdo y derecho. |
| Imagen de fondo | Establece una imagen de fondo en lugar de un color de fondo. Activa la opción y selecciona una imagen. |
| Contorno | Añade un borde alrededor de la columna para resaltar sus bordes. Activa el conmutador, establece el grosor del borde en píxeles y selecciona un tipo y color de línea. |
| Sombra | Añade una sombra alrededor de la columna para resaltarla. |
| Animación | Añade animación a los elementos de la columna. Activa la opción y selecciona el tipo de animación, la dirección y la velocidad. |
Widget
Los ajustes de estilo varían según el tipo de widget. Puedes obtener más información sobre cada widget en sus artículos específicos.
Leer más: Widgets de sitio web.
Parámetros de los elementos
Alineación
La alineación sitúa un elemento y su relleno interno con respecto al borde del elemento principal. Por ejemplo, el widget Botón, puedes alinearlo horizontalmente al centro, a la izquierda o a la derecha. Puedes alinear una columna verticalmente para colocar su contenido en la parte superior, central o inferior.
Ancho
Espaciado
El ancho de tu contenido depende del relleno y los márgenes que establezcas al editar un bloque, una columna o un widget.
Para los bloques, en la configuración Margen superior e inferior, puedes añadir márgenes externos en la parte superior e inferior. Puedes establecer el valor de 0 a 240 px.
Para las columnas, puedes establecer márgenes externos horizontales en la configuración Espaciado entre columnas y márgenes internos en la configuración Relleno interior.
Para algunos widgets, en la configuración Relleno interior, puedes añadir margen interno entre los elementos de la derecha, la izquierda, la parte superior y la parte inferior.
Puedes ajustar el espaciado Y y X de los widgets para distribuir los elementos del diseño.
Separadores
Para organizar el contenido en secciones claras, puedes añadir los widgets Espaciador o Separador. Por ejemplo, puedes hacer un espacio entre la pantalla principal y el bloque con las ventajas de tu producto.
Ancho de columnas
A medida que añadas elementos a tu página, los anchos de columna se espaciarán uniformemente a lo largo de la sección. También puedes ajustar el ancho de las columnas para crear el diseño de contenido que prefieras.
Activa la opción Ancho de columna flexible. A continuación, mueve el divisor de columnas.
Esta configuración ajusta todos los anchos de columna de una sección. Al aumentar el ancho de una columna, se reducen proporcionalmente las demás. Puedes cambiar el ancho en secciones con dos, tres o cuatro columnas. Sin embargo, si añades cinco o seis columnas, no podrás ajustar su anchura.
Tamaño del diseño
Puedes modificar el tamaño de los elementos de diseño para colocarlos fuera de la cuadrícula. Coloca el cursor sobre el borde de un elemento, mantén pulsado el deslizador y arrástralo hacia la izquierda o la derecha. Todos los demás elementos de la fila se ajustarán automáticamente al nuevo tamaño.
Ancho del widget
Puedes ampliar tu contenido a lo ancho de la pantalla utilizando la opción Bloque de ancho completo. Esto no cambiará el ancho total de tu página.
Para algunos widgets, como Texto, la opción Ancho permite especificar un porcentaje para controlar qué parte del ancho del elemento se rellenará con contenido.
Altura
La altura de los elementos depende del tamaño de las imágenes, las fuentes, los vídeos y el relleno de los elementos de la sección. Por ejemplo, si tienes varias columnas con diferentes alturas de elementos, la sección utilizará la altura del elemento más alto.
En Alineación del contenido, puedes ajustar la alineación de los elementos dentro de la columna y gestionar el espacio extra.
Posición
En Posición, puedes mover los widgets a izquierda, derecha, arriba o abajo.
Introduce los valores en los campos:
| X | Mueve el elemento en el eje X (horizontalmente). Introduce un número negativo para mover el contenido a la izquierda y un número positivo para moverlo a la derecha*. |
| Y | Mueve el elemento en el eje Y (verticalmente). Introduce un número negativo para mover el contenido hacia arriba y un número positivo para moverlo hacia abajo*. |
| Z-index | Desplaza el elemento en el eje Z (delante o detrás de otros elementos). Establece un número del 1 al 9.
Los elementos con un Z-index más alto cubrirán a los elementos con un número más bajo. |
| Rot.° | Gira el elemento hasta 360 grados. Introduce un número negativo para rotarlo a la derecha y un número positivo para rotarlo a la izquierda*. |
*Al introducir valores, ten en cuenta el tamaño de tu bloque. Si el valor excede el tamaño del bloque, el elemento se moverá fuera de la pantalla y no será visible.
Los elementos posicionados manualmente no se ajustarán automáticamente a los distintos tamaños de pantalla, por lo que es mejor configurar la versión móvil de forma independiente a la versión de escritorio.
Fondo
Por defecto, la combinación de colores que selecciones en la sección Estilo general se aplicará al fondo de tu página. No es posible establecer un fondo personalizado para toda la página al mismo tiempo. Sólo puedes establecerlo para cada bloque y columna individualmente.
Ve a la configuración del fondo del elemento y, en Color de fondo, selecciona un color o una imagen. Si necesitas rellenar espacio, establece los márgenes superior e inferior de tu bloque en pixeles en la opción Margen superior e inferior.
También puedes seleccionar una imagen como fondo del bloque. Activa la opción Imagen de fondo y selecciona o sube una imagen.
Para establecer un estilo de imagen, puedes seleccionar una de las siguientes opciones:
| Tamaño | Ajusta el tamaño de la imagen y su ubicación dentro del bloque.
Están disponibles las siguientes opciones:
|
| Posición | Establece la ubicación de la imagen dentro del bloque.
Este ajuste sólo es aplicable si has seleccionado Predeterminado o Ajustar en la opción Tamaño. |
| Repetir | Repite una imagen dentro del bloque.
Este ajuste sólo es aplicable si has seleccionado Predeterminado o Ajustar en la opción Tamaño. Opciones disponibles: No repetir, Horizontal, Vertical y Ambas. |
| Filtros | Aplica uno de los ocho filtros a tu imagen. |
| Superposición de color | Añade un color de superposición de imagen y ajusta su saturación. |
| Efectos de desplazamiento | Añade un efecto de desplazamiento de imagen.
Están disponibles las siguientes opciones:
|
Redondeo
Por defecto, los bordes de las secciones (columnas o determinados widgets) son rectangulares. Puedes redondear los bordes ajustando el valor de redondeo. Cuanto mayor sea el valor, más redondeadas serán las secciones. Te recomendamos que aumentes el relleno interior para que la información importante no quede recortada.
Fijar un bloque
Puedes fijar el primer bloque al encabezado de tu sitio web para que permanezca en la parte superior incluso cuando el usuario se desplace. Para ello, accede a la configuración del bloque y activa la opción Anclar a la parte superior del sitio.
Animación
Añade animación de desplazamiento a tus elementos para hacer tu página más interactiva y cautivadora.
Puedes añadir animación a los widgets Texto, Botones e Imagen y al elemento Columna. Si añades animación al elemento Columna, todos sus elementos aparecerán con el tipo de animación seleccionado.
Ve a la configuración de tu elemento, activa la opción Animación al desplazar y configura los ajustes:
| Tipo de animación | Selecciona un efecto de entrada. | |
| Desvancer | Esta opción permite que un elemento aparezca o desaparezca gradualmente cuando los usuarios se desplazan hacia abajo o hacia arriba. Utiliza este efecto para llamar la atención sobre un determinado elemento, como un titular o un botón de llamada a la acción. | |
| Escalar | Esta opción permite aumentar o reducir gradualmente el tamaño de un elemento cuando los usuarios se desplazan hacia abajo o hacia arriba. Utiliza este efecto para llamar la atención sobre un determinado elemento o crear una sensación de profundidad. | |
| Deslizar | Esta opción permite mover un elemento de una posición a otra cuando los usuarios se desplazan por la página. Utiliza este efecto para crear una experiencia de usuario dinámica y emocionante. | |
| Ticker de desplazamiento | Esta opción añade un efecto que desplaza continuamente el texto horizontal por la pantalla. Este efecto ayuda a resaltar la información importante.
Puedes aplicarlo sólo al widget Texto. Aparecerá en tu sitio web publicado o en el modo de vista previa. |
|
| Posición de la animación | Selecciona la dirección desde la que debe aparecer tu elemento (izquierda, derecha, arriba o abajo). | |
| Velocidad de animación | Selecciona la velocidad a la que debe aparecer tu elemento (lenta, media o rápida). | |
Cómo editar elementos en la versión móvil
Puedes editar elementos individuales, columnas y secciones, así como personalizar fuentes y ocultar bloques en la versión móvil sin afectar la versión de escritorio.
Última actualización: 20.12.2024
o