Cómo Personalizar los Elementos de Tu Sitio

Puedes editar el estilo de todo tu sitio y los bloques que constan de secciones y columnas y 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

Puedes personalizar la página completa o cada elemento por separado:

Estilo del sitio web: Establece 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.

Puedes leer más en: Cómo personalizar el estilo general de tu página.

Configuración de bloque: Establece el estilo de tu bloque seleccionado y sus secciones y columnas.

Configuración de la columna: Establece el estilo de la columna seleccionada en su sección. Puedes copiar una columna junto con todas las configuraciones en columnas nuevas. Por ejemplo, cuando agregas 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.

Adición de 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 Tus Elementos

Bloque

Pasa el cursor sobre la esquina superior derecha de un bloque y haz clic en Configuración del bloque.

Puedes establecer 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.

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.

Ve 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 estableces al editar un bloque, una columna y un widget. También puedes ajustar el contenido para que se ajuste al ancho de pantalla completa usando la opción "Ancho de pantalla completa" y de esta manera el ancho del sitio no cambiará.

El ancho de la imagen se establece en pixeles.

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 establecerá en la altura máxima.

Toma en cuenta que también 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

De forma predeterminada, la paleta de colores que seleccionaste en Estilo general se aplica al fondo de tu página. No puedes configurar un fondo personalizado para toda la página a la vez, solo puedes configurarlo para cada elemento por separado.

Ve a la configuración de fondo del elemento y selecciona un color o una imagen.

Una sección se compone de columnas, por lo que para personalizar el fondo de tu sección, debes cambiarlo para cada columna de la sección.

Anclar un Bloque

Puedes anclar cualquier bloque al encabezado de tu sitio para que permanezca en la parte superior, incluso cuando un usuario se desplace verticalmentese desplaza. Para hacer esto, ve a la configuración de bloqueo y activa la opción "Fijar en la parte superior del sitio".

De esta manera puedes sacar mayor provecho de la función de “Elementos” en el creador de sitios web de SendPulse.

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 agrega animación a "Columna", todos sus componentes se mostrarán con el tipo de animación seleccionado.

Para ello, ve a la configuración del elemento y activa la opción "Animación en desplazamiento".

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 le 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 establecer qué tan rápido aparecerá este elemento (lento, medio o rápido).

Cómo editar elementos en la versión móvil

Puedes editar columnas, elementos, secciones y bloques por separado para las versiones de sitios web móvil y de escritorio.

De forma predeterminada, el diseño de la página es responsivo, por lo que cualquier configuración de estilo que hayas aplicado a la versión del sitio web de escritorio se sincroniza y adapta para el tamaño de la versión móvil.

Para ajustar manualmente la apariencia de la versión móvil, desactiva la sincronización y cambia a la pestaña de la versión móvil.

Examina el diseño de la versión móvil y selecciona individualmente las alineaciones, rellenos y colores de fondo para cada elemento.

También puedes cambiar entre las versiones móvil y de escritorio activando el interruptor en el lado derecho del creador de sitios web.

Última actualización: 19.09.2023