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.

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:

  • Predeterminado: Mantiene el tamaño original.
  • Alargar: Estira la imagen para que cubra todo el bloque. También debes enfocar la imagen al seleccionar el campo Establecer punto de enfoque.
  • Adaptar: Reduce el tamaño de la imagen para que se ajuste al bloque.
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:

  • Fijo: Fija la imagen en la página.
  • Parallax: Mueve la imagen, ajustándose a la velocidad de deslizamiento de los usuarios para crear una sensación de profundidad.

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.

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.

    Califica este artículo sobre "Cómo personalizar los elementos de tu sitio"

    Opinión de los usuarios: 4 / 5 (0)

    Anterior

    Cómo ajustar la versión móvil de tu sitio web

    Siguiente

    Cómo personalizar el estilo de tu página

    Popular en nuestro blog

    Pruebe SendPulse hoy mismo gratis