Crea y edita páginas con el editor arrastrar y soltar (BETA)

Con el editor arrastrar y soltar, puedes configurar y personalizar la disposición y el estilo de tus páginas HubSpot sin necesidad de tener acceso a hojas de estilo o plantillas. Para alojar tu página en un dominio específico, conecta tu dominio en HubSpot.

• En tu cuenta de HubSpot, navega hasta Marketing > Páginas de destino.
• En la parte superior derecha, haz clic en Crear.
• Coloca el cursor sobre una plantilla y haz clic en Vista preliminar.
• Para seleccionar la plantilla para tu página, haz clic en Usar esta plantilla o en Atrás para ver más opciones.
• Introduce un Nombre de página y luego haz clic en Crear página.

Contenido

Las plantillas arrastrar y soltar son módulos compuestos que se pueden agrupar en filas horizontales y columnas verticales. Estos módulos, filas o columnas se pueden agrupar ensecciones de elementos. En la pestaña Contenido puedes personalizar el contenido, espaciamiento y disposición de los elementos de tu página.

• Para agregar un módulo a tu página, haz clic en y arrastra el módulo desde la pestaña Agregar al panel de la izquierda. Aparecerá una línea azul que indicará dónde se colocará el módulo. 

• Para mover el módulo, fila, columna o sección arrastra el elemento que deseas mover y suéltalo donde deseas colocarlo.
• Para ajustar el ancho de los elementos en una columna dentro de la misma sección, haz clic y arrastra el divisor vertical entre esos módulos.
• Para hacer o deshacer una acción, haz clic en los iconos de flechas en la parte superior izquierda.

• Para personalizar, duplicar o eliminar un módulo, coloca el cursor sobre la vista previa a la derecha.
  • Para editar el contenido de un módulo, haz clic en edit el icono de lápiz. En el panel izquierdo, realiza cambios al contenido, imágenes, etc. Los módulos de texto enriquecido también se pueden editar dentro de la vista previa de la página a la derecha.
  • Para modificar la posición y el estilo de los módulos, haz clic en styles el icono de la brocha.
  • En el panel de la izquierda, personaliza el color de fondo, la forma y los estilos de los bordes del módulo. Las opciones de estilo disponibles dependen del tipo de módulo
  • Para crear una copia del módulo dentro de la misma columna, haz clic en duplicate el icono Copiar.
  • Haz clic en delete el icono de papelera para eliminar el módulo de tu página.

• Para eliminar los estilos de un grupo de elementos, coloca el cursor sobre una fila, columna o sección, luego haz clic en el menú desplegable y selecciona estilo [elemento].
  • En la pestaña Fondo, selecciona un Fondo y personaliza su configuración. La vista preliminar se actualizará a medida que hagas los cambios.
    • Ninguno: selecciona este color para eliminar cualquier color o imagen de fondo.
    • Color: selecciona esta opción para establecer un color como color de fondo. Introduce un valor de color de fondo y un porcentaje de transparencia.
    • Imagen: selecciona esta opción para establecer una imagen como fondo. Si la plantilla contiene una imagen como opción predeterminada, haz clic en Reemplazar para cambiar la imagen. Haz clic en Cargar para agregar una imagen de tu computadora o haz clic en Buscar imágenes para seleccionar una imagen de tus archivos.
    • Gradiente: selecciona esta opción para establecer dos colores que se desvanecen como color de fondo. Establece la dirección del gradiente. Introduce un valor hexadecimal y establece la transparencia de cada color.
  • Haz clic en la pestaña Espaciado para modificar el tamaño y el espaciado de cada fila, columna o sección
    • Introduce un ancho máximo para el contenido de este elemento en tu página.
    • Haz clic en las pestañas Relleno y Margen para modificar el espaciado alrededor de tu contenido. El relleno controla el espacio que rodea el elemento de la página. El margen controla el espacio entre el contenido y el borde del elemento.
• Para hacer una copia de un elemento existente, coloca el cursor sobre el elemento y haz clic en el menú desplegable, luego selecciona Clonar [elemento].
• Para eliminar un elemento de tu página, coloca el cursor sobre el elemento y haz clic en el menú desplegable, luego selecciona Eliminar (elemento).

A medida que editas tu página, las actualizaciones se guardan automáticamente. Si quieres que restaurar una revisión anterior:

• Arriba, a la izquierda, coloca el cursor sobre Guardar automáticamente.
• En la alerta que aparece, haz clic en revisiones para ver las versiones de esta página guardadas anteriormente.
• En el panel de la izquierda, selecciona la revisión que deseas restaurar según la fecha y la marca de tiempo. A la derecha, verás una vista preliminar de la revisión.
• Para restaurar la revisión seleccionada, haz clic en Restaurar esta versión. Para volver a tu versión actual de la revisión, haz clic en Regresar.

Diseño

Puedes modificar el formato y el estilo predeterminados de los formularios y botones de tu página como un todo:

• Haz clic en la pestaña Diseño para abrir el panel de la izquierda
  
  • En la sección Tipografía, edita la fuente y estilo de fuentes que se aplican al cuerpo y encabezados de tu página. Se admiten todas las fuentes Google.
    • Texto del cuerpo: personaliza la fuentes, el tamaño de la fuente y los colores de la fuente del cuerpo de tu página.
      • Haz clic en el menú desplegable Texto del cuerpo para seleccionar una fuente.
      • Haz clic en las teclas de flechas para seleccionar un tamaño de fuente.
      • Haz clic en la burbuja de colores para establecer un color para tu fuente. Para establecer un color personalizado, haz clic en la pestaña Avanzado para introducir un valor hexadecimal.
    • Encabezados: personaliza la fuente y el color de la fuente para cualquier texto de tus módulos que tenga una etiqueta de encabezado.
      • Haz clic en el menú desplegable Encabezados para seleccionar una fuente.
      • Haz clic en la burbuja de colores para establecer un color de fuente.
    • Texto del enlace: personaliza las fuentes y los colores que se aplican a los enlaces de tu página
      • Haz clic en el menú desplegable Texto del enlace para seleccionar una fuente.
      • Haz clic en la burbuja de colores para modificar el color de tu enlace.
      • Haz clic en los botones de estilo o en el menú desplegable para seleccionar los estilos que se aplican al texto de tus enlaces, incluyendo si deseas que los enlaces sean subrayados en la página.
      • Para personalizar la manera en la que los enlaces se muestran a los visitantes que interactúan con tu página, puedes personalizar el color y la transparencia del enlace.
        • Color al colocar cursor sobre el enlace: personaliza el color y la transparencia del texto cuando un visitante coloca el cursor sobre los enlaces de tu página.

• • • • • Color del enlace activo: personaliza el color y la transparencia predeterminados del texto antes de que se haga clic en el enlace.
        • Color del enlace activo: personaliza el color y la transparencia predeterminados del texto antes de que se haga clic en el enlace.
  • En la sección Botonespersonaliza la manera en la que se asignan los estilos de los módulos de botones y de los botones de formularios en la página.
    • Color de fondo del botón: personaliza el color que se aplica al fondo de tus botones.
      • Introduce un valor hexadecimal o haz clic en la burbuja de colores para establecer un color para tu fuente.
      • Introduce un porcentaje o haz clic en las teclas de flechas para establecer la transparencia de los botones de esta página.
    • Color del texto de botones: el color que se aplica al texto de los botones de tu página.
      • Introduce un valor hexadecimal o haz clic en la burbuja de colores para seleccionar un color para el texto.
      • Introduce un valor de porcentaje o haz clic en las teclas de flechas para establecer la transparencia del color del texto.
    • Radio de la esquina del botón: personaliza la forma de tus botones al introducir un valor o arrastrar el deslizador. Un valor más alto significa que los botones de tu página tendrán border más redondos. Un valor de cero indica que los botones serán rectangulares.

Configuración

Personaliza la configuración de tu página de manera que puedas editar los detalles de la página que aparecen internamente y en el navegador web de tus visitantes.

• Haz clic en la pestaña Configuración para personalizar los detalles de tu página:
  • Nombre interno de la página: el nombre de tu página para referencia interna. Este nombre aparece en el panel de tu página.
  • Título de la página: El título de tu página aparece en la barra de título del navegador y en los resultados de búsqueda.
  • URL de la página: esta es la dirección URL de tu página. Descubre cómo conectar el dominio de tu sitio web a HubSpot.
  • Metadescripción: agrega una metadescripción para que los buscadores puedan ver de qué se trata tu página desde la página de resultados de búsqueda.
  • Imagen principal: agrega una página principal que se presenta en vista preliminar cuando tu página se comparte mediante las redes sociales.

Optimización

Haz clic en la pestaña Optimizaciones para ver recomendaciones para mejorar el contenido de tu página para efectos de SEO (optimización de motores de búsqueda) Más información sobre las mejores prácticas de SEO y como sugerencias afectan el tráfico orgánico hacia tu sitio.

Vista preliminar

Para mostrar una vista preliminar de tu página y cómo aparecerá a tus visitantes:

• Haz clic en Vista preliminar en la parte superior derecha para abrir el modo vista preliminar. Verás una vista preliminar actualizada de tu contenido a la derecha.
  • Tipo de dispositivo: selecciona un tipo de dispositivo para ver cómo aparecerá tu página en un equipo de escritorio o en diferentes orientaciones en un dispositivo móvil o en una tableta.
  • Vista preliminar como un contacto específico: para probar la personalización, haz clic en el menú desplegable Vista preliminar como un contacto específico y selecciona un contacto de tu CRM.
  • Vista preliminar compartible: Haz clic en Abrir en ventana nueva para mostrar una versión compartible de tu correo en una ventana del navegador o haz clic en Copiar para copiar el enlace de vista preliminar en tu portapapeles para ser compartido.
• Para regresar al editor de contenido, haz clic en Salir del modo de vista preliminar en la parte superior derecha.

Publicar

Para publicar tu página, haz clic en Publicar en la esquina superior derecha.