Cómo editar el diseño de tus formularios en el editor de landing pages

Cómo editar el diseño de tus formularios en el editor de landing pages

Usuarios autorizados: Administradores y editores.
La misión: Edita el diseño de tus formularios con estas 4 acciones.



1. Edita el contenido y diseño de tu formulario 

1.1 Para editar el contenido de tus formularios, haz clic sobre el formulario en el page builder y encontrarás las herramientas de edición en la columna izquierda de la pantalla, bajo la pestaña Contenido. Así, podrás editar el Título del formulario, el Texto del botón y el Mensaje de confirmación que se mostrará luego de que los visitantes de tu landing page envíen el formulario.


1.2 Para editar la fuente, el tamaño, el color, el tipo de letra, el espaciado y la alineación del texto, haz clic en la pestaña de Diseño y configura los datos en la sección de Texto del título
1.3 En la opción de Espacio del título puedes modificar el espacio exterior correspondiente al margen, de manera uniforme o personalizada. Para esto, haz clic en la tuerca y luego en el ícono de vinculación, para modificar el espacio de manera independiente.


2. Edita estilos de campo y el contenido de los placeholders

2.1 En Estilos de los campos, encontrarás la opción de cambiar el color del fondo, el grosor del borde, el color, el radio del borde y el estilo del texto, como el Label, el Input y el Placeholder.
  1. Label corresponde a las etiquetas o texto guía que se ubica en la parte externa de los campos. En esta pestaña, podrás editar la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. En caso de que desees ocultarlas, haz clic en el ícono de edición de formulario y luego selecciona la opción de Ocultar etiquetas.
  2. Input corresponde al texto que ingresan tus visitantes en el formulario.
  3. Placeholder hace referencia a la etiqueta de texto colocada dentro del campo de un formulario. 


2.2 En caso de que desees editar el contenido de los placeholders sólo debes hacer clic en el ícono de edición de formularios y, en la sección de Campos, ubica el campo que deseas editar y haz clic en el ícono de lápiz.


2.3 Luego, selecciona la opción de Avanzada en la ventana emergente. Allí, podrás editar el contenido del placeholder y, por último, haz clic en Actualizar y Guardar.


3. Edita el texto y estilo de botón

3.1 A continuación, en Texto del botón, podrás modificar la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. Por otra parte, en Estilos del botón puedes cambiar el ancho y el alto del botón, el color, colocar una imagen de fondo, modificar el Hover agregándole un nuevo color de fondo, color del texto, grosor del borde, radio del borde, sombra, margen o padding y alineación del texto.
 Nota: El Hover corresponde al efecto o alteración del aspecto del botón cuando se sitúa el cursor sobre el mismo, pero no se ha seleccionado aún.


 Importante: Si se coloca una imagen para el botón, no se modificará el Hover. Lo único que se podrá modificar, en ese caso, es el color del botón.

4. Edita el texto del mensaje y estilo de fondo

4.1 En Texto del mensaje, puedes editar el mensaje de éxito de tu formulario cambiando la fuente, tamaño, color, el tipo de letra, el espaciado y la alineación del texto. 


4.2 Para modificar el ancho, el grosor y el radio del borde del formulario, haz clic en la sección de Estilo del marco donde también podrás agregar sombra e imagen de fondo.
4.3 En la opción siguiente, Espacio del marco, podrás alterar el margen y el padding del formulario. 
4.4 Por último, en Alineación del marco, podrás modificar la alineación del marco del formulario.
4.5 Al finalizar la edición, no olvides hacer clic en Guardar para confirmar los cambios.


¿Estás listo para completar la misión en Escala?

    • Related Articles

    • Cómo editar el contenido y diseño de un pop-up

      Usuarios autorizados: Administradores y editores. La misión: Edita el contenido y diseño de un pop up con estas 2 acciones. 1.  Configura el texto y diseño de un pop up 1.1 Cada botón en Escala puede ser configurado para realizar una acción ...
    • Cómo editar landing pages publicadas

      Usuarios autorizados: Administradores y editores. La misión: Edita páginas publicadas con estas 4 acciones. 1. Cambia el diseño y contenido 1.1 Para editar una landing page que hayas publicado en Escala, haz clic en la sección Landing Pages ubicada ...
    • Cómo ocultar elementos de tus landing pages para distintos dispositivos

      Usuarios autorizados: Administradores y editores.  La misión: Oculta elementos en tus landing pages con estas 3 acciones. 1. Abre tu landing en el editor 1.1 Al crear tus landing pages en Escala, puedes elegir cuáles elementos ocultar de acuerdo al ...
    • Cómo guardar las secciones de tus landing pages como plantillas

      Usuarios autorizados: Administradores y editores. La misión: Guarda las secciones de tu landing page como plantillas con estas 4 acciones. 1. Visualiza el listado de secciones de tu landing page 1.1 En Escala, puedes guardar las secciones de tus ...
    • Cómo editar las imágenes que se insertan en las landing pages

      Usuarios autorizados: Administradores y editores. La misión: Edita las imágenes de tus landing pages con estas 3 acciones. En Escala puedes editar las imágenes que necesitas insertar en tus landing pages creadas en la plataforma. 1. Agrega una imagen ...