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.
Cómo editar elementos
Bloque
Pasa el cursor sobre la esquina superior derecha de un bloque y haz clic en Configuración del bloque.
Puedes configurar el color de tu bloque, seleccionar una imagen de fondo, agregar márgenes, y estirar el contenido horizontal y/o verticalmente.
También puedes ocultar el bloque en dispositivos móviles o de escritorio.
Columna
Pasa el cursor sobre la esquina superior derecha de una columna y haz clic en Configuración de columna.
También puedes ajustar el ancho de columna para que se adapte a la estructura de tu contenido.
Activa la opción Ancho de columna flexible y arrastra el borde de la columna.
Este ajuste afecta el ancho de todas las columnas de la misma sección. Si aumentas el ancho de una columna, las demás disminuirán proporcionalmente.
Puedes establecer tu color de fondo, agregar una sombra paralela y un contorno, redondear las esquinas, ajustar el relleno, agregar relleno entre columnas y alinear el contenido en la parte superior, inferior o central.
Widget
Pasa el cursor sobre la esquina superior izquierda de un widget y haz clic en Configuración del widget.
También puedes volver a la configuración de elementos de nivel superior (tu estilo, bloque o columna).
Parámetros de elementos que puedes editar
Alineación
Puedes alinear los widgets dentro de cada columna horizontalmente: izquierda, derecha o centro y ajustar la alineación de los siguientes widgets: botón, imagen, línea, social, acordeón y temporizador, así como establecer la alineación del elemento Texto utilizando la barra de herramientas de formato de texto.
Dirígete al editor de tu elemento y selecciona su alineación.
Ancho
A medida que agregas elementos a la página, el ancho de tu columna se distribuye uniformemente en todo el ancho de la sección. Sin embargo, puedes cambiar el ancho de la columna moviendo el control deslizante.
Puedes cambiar el ancho de dos, tres y cuatro columnas. Si agregas cinco o seis columnas, no podrás cambiar su ancho.
El ancho de tu contenido se ve afectado por el relleno y los márgenes que configuras al editar un bloque, una columna y un widget. También puedes ajustar el contenido para que se adapte al ancho de la pantalla completa usando la opción Ancho de pantalla completa. De esta manera, el ancho del sitio no cambiará.
El ancho de la imagen se establece en píxeles.
Altura
La altura de tu elemento depende del tamaño de la imagen, fuente, video y sangrías de los elementos en la sección. Por ejemplo, si tienes varias columnas con diferentes alturas de elementos, la sección se configurará con la altura máxima.
Incluso puedes ajustar la alineación de los elementos.
Sangría y espaciado
Puedes agregar relleno en la parte superior e inferior de tu bloque y configurarlo de 0 a 240 px.
A su vez, puedes agregar relleno derecho, izquierdo, superior e inferior a tu columna.
La plataforma también te permite agregar espacios entre columnas al editarlas.
También puedes separar los elementos de tu sitio agregando los widgets Espaciador o Divisor. Por ejemplo, puedes separar la pantalla principal de los beneficios de tu servicio o producto.
Fondo
La combinación de colores seleccionada en la sección Estilo general se aplica por defecto al fondo de la página. No es posible establecer un fondo personalizado para toda la página al mismo tiempo, sólo puedes realizar los ajustes deseados para cada elemento de manera individual.
Dirígete a la configuración de fondo del elemento y selecciona un color o una imagen.
De igual manera, puedes elegir una imagen como fondo del bloque. Para ello, activa la casilla Imagen de fondo y selecciona o sube la imagen deseada.
Si deseas editar la imagen seleccionada, haz clic en el ícono situado más a la izquierda.
A continuación, puedes personalizar tus imágenes.
| Tamaño | Ajusta el tamaño de la imagen y su posición dentro del bloque.
Puedes elegir entre las siguientes opciones:
|
| Posición |
Establece la posición de la imagen dentro del bloque. Esta configuración se aplica sólo si has seleccionado Predeterminado or Adaptar para la opción Tamaño. |
| Repetir |
Repite una imagen dentro del bloque. Esta configuración se aplica sólo si has seleccionado Predeterminado or Adaptar para la opción Tamaño. Opciones disponibles: No repetir, Horizontal, Vertical, y Ambos. |
| Filtros | Aplica uno de los 8 filtros a tu imagen. |
| Superposición de color | Añade un color de superposición a la imagen y ajusta su saturación. |
| Efectos de deslizamiento | Añade un efecto de deslizamiento a la imagen.
Puedes elegir entre las siguientes opciones:
|
Fijar un bloque
Puedes fijar cualquier bloque al encabezado de tu sitio para que permanezca en la parte superior, incluso cuando te desplaces verticalmente. Para hacer esto, dirígete a la configuración de bloqueo y activa la opción "Fijar en la parte superior del sitio".
Animación
Agrega movimiento a tus elementos para que tu página sea interactiva y cautivadora.
Puedes agregar animación a los widgets de Texto, Botón e Imagen e incluso al elemento Columna. Si agregas una animación al elemento Columna, todos sus componentes se mostrarán con el tipo de animación seleccionado.
Para ello, dirígete a la configuración del elemento y activa la opción Animación al desplazar.
Selecciona un tipo de animación.
| Desvanecer | Esta opción hace que un elemento aparezca o desaparezca gradualmente cuando los usuarios se desplazan hacia arriba o abajo. Utiliza este efecto para llamar la atención sobre un determinado elemento, como un título o un botón de llamada a la acción. |
| Escala | Esta opción te permite aumentar o disminuir gradualmente el tamaño de un elemento cuando los usuarios se desplazan cerca de él. Utiliza este efecto para enfocar la atención en un determinado elemento o crear una sensación de profundidad. |
| Deslizar | Con esta opción puedes mover un elemento de una posición a otra cuando los usuarios se desplazan por tu página. Utiliza este efecto para crear una experiencia de usuario dinámica y atractiva. |
| Ticker de desplazamiento |
Esta opción añade un efecto que desplaza continuamente el texto horizontal a través de la pantalla. Este efecto ayuda a resaltar la información importante. Puedes aplicar este efecto únicamente al widget Texto. Aparecerá en tu sitio web publicado o en el modo de vista previa |
Selecciona la posición de tu animación, es decir, el lado desde el que aparecerá el elemento (izquierda, derecha, arriba o abajo).
Selecciona la velocidad de tu animación para configurar qué tan rápido aparecerá este elemento (lento, medio o rápido).
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.
Leer más: Cómo ajustar la versión de tu sitio web.
Última actualización: 29.07.2024
o