×

CONTÁCTANOS

¿Necesitas ayuda? Disponemos de la información que necesitas.

Base de conocimientos aero-right Páginas de destino aero-right Cómo crear una página de destino

Cómo crear una página de destino

Páginas de destino Actualizado en agosto 12, 2020

Descubre todo lo que puedes lograr con el editor de páginas de destino de Benchmark. Crea páginas de destino impresionantes muy fácil y rápido, solo arrastra y suelta los bloques y listo.

landing-page-builder

¿Sobre qué tema te gustaría saber más?

  1. Primeros pasos: Crear mi primera página de destino
  2. Cómo duplicar una página de destino
  3. Secciones de la página de destino
  4. Cómo añadir imágenes de fondo
  5. Bloques disponibles
  6. Formularios de registro
  7. Tipografía
  8. Cómo animar los bloques

 


Primeros pasos: Crear mi primera página de destino

Para crear tu primera página de destino inicia sesión en tu cuenta de Benchmark y sigue los pasos a continuación:

  1. Desde el menú principal haz clic en Páginas de destino y nuevamente en páginas de destino.
  2. Haz clic en el botón Crear una nueva página de destino.
  3. Escribe un nombre para tu nueva página de destino. Este nombre solo será visible para ti. Al terminar haz clic Siguiente.

 

Para duplicar una página de destino, haz clic en el botón de Más opciones de la página de destino que deseas duplicar. Dale una nuevo nombre a tu página duplicada y haz clic en Guardar.

Al duplicar una página de destino, se copiarán los elementos de diseño de la página, los demás pasos del checklist deberán ser añadidos nuevamente.

  1. En la página a continuación, podrás ver un checklist. Notarás que el botón Publicar se encuentra desactivado, este se activará cuando hayas completado todos los pasos del checklist.
  2. Localiza el paso Información de la página y haz clic en el botón Añade un título y una descripción. Toma en cuenta que un buen título te ayudará a incrementar las visitas en tu página. Una vez completado este paso la marca de verificación se tornará verde.
  3. Ahora, es momento de enfocarse en el diseño de tu página de destino

Dirígete al paso Diseñar y haz clic en Diseñar la página.

 

El editor de páginas de destino es muy parecido a nuestro Editor de arrastrar y soltar de campañas de correo electrónico. Si ya sabes cómo utilizar nuestro editor, entonces te será muy sencillo crear páginas de destino. Si no es así, no hay nada de que preocuparse, ya que nuestro editor es bastante intuitivo y además puedes continuar leyendo para resolver cualquier duda.

 

Una vez dentro del Editor de páginas de destino, verás tres pestañas. La primera seleccionada por defecto es Diseños. En esta etapa podrás decidir entre crear tu diseño desde cero o bien, elegir uno de los diseños preestablecidos. También puedes elegir una de nuestras plantillas. Sin importar lo que elijas siempre podrás personalizar tu diseño en el editor.

Una vez hayas seleccionado un diseño esta será la pantalla que se mostrará.

  1. Diseños: Al hacer clic en esta pestaña regresarás a las opciones de diseño. Si decides cambiar a otro diseño o plantilla, toma en cuenta que perderás el contenido creado previamente.
  2. Bloques: En esta pestaña encontrarás dos opciones:
    1. Secciones
    2. Bloques
  3. Estilos globales: Esta pestaña te permitirá cambiar los colores de fondo de tu página de destino. En esta pestaña encontrarás la opción de agregar una imagen de fondo a toda tu página de aterrizaje. Para aprender cómo añadir una imagen de fondo haz clic aquí. En esta opción también te será posible elegir la tipografía de tu campaña.
  4. Botón Mostrar áreas: Al hacer clic en este botón podrás ver tu diseño dividido por áreas y cada área con sus columnas. En esta opción encontrarás flechas para cambiar la ubicación de la sección, para duplicar la sección o eliminarla y la opción del engrane te permitirá realizar cambios en el fondo de la sección y su contenido
  5. Botón Mostrar bloques: Esta opción te permitirá ver cuantos bloques tienes en tu diseño. Un área puede tener varios bloques.
  6. Botón Ver versión móvil: Al hacer clic en este botón podrás ver la versión móvil de tu página de destino. En esta opción también tienes la posibilidad de personalizar esta vista. Es posible que los cambios hechos en esta versión, afecten a la versión de escritorio.
  7. Barra de título: La barra de título se encuentra en la esquina derecha y allí podrás ver el nombre de tu página de destino.
  8. Volver a la página de verificación: Esta opción te permitirá volver al checklist.
  9. Área de diseño de la página de destino: En este espacio podrás arrastrar los bloques y ver el diseño de tu página.
  10. Registro de guardado: Benchmark protege tu trabajo guardando cada cierto tiempo un respaldo, aquí podrás observar la última copia guardada.
  11. Vista previa: Revisa cómo se verá tu diseño en un móvil o en computadora, haciendo clic en este botón.
  12. Guardar y Seguir: Haz clic aquí para guardar tu diseño y continuar con la lista de verificación.

Opciones de ocultar

Algunos bloques tendrán la opción de ser ocultados para la versión móvil y para la versión de escritorio. Para hacer uso de esta opción cambia la barra de gris a azul. Cada bloque tiene opciones de configuración distintas, busca las opciones de ocultar en la barra de configuraciones de la izquierda que aparecerá al hacer clic en el bloque.

 

Regresar al inicio


 

Secciones

El diseño de tu página estará divido en secciones. Una página puede tener múltiples secciones y cada sección puede tener diferentes bloques.

La opción secciones se encuentra debajo de la pestaña bloques. Puedes arrastrar la cantidad de secciones que necesites a tu página de destino.

Las secciones disponibles se encuentran divididas en columnas, hay secciones desde una hasta cuatro columnas. 

Para añadir secciones a tu página de destino tan solo tienes que arrastrar el bloque y soltarlo en el lugar deseado, tal y como se muestra en la imagen siguiente:

Para ver las secciones de tu página de destino haz clic en botón Mostrar Áreas.

Al hacer clic en este botón verás las secciones y sus columnas existentes en tu diseño y además, tendrás las opciones siguientes:

  1. Flechas: Estas flechas te ayudarán a mover las secciones de lugar.
  2. Engrane: Al hacer clic en este icono se abre la configuración de la sección en dónde podrás cambiar el color de fondo de una sección específica o añadir una imagen.
  3. Copiar: Copiará la sección completa.
  4. Basura: Este icono borrará la sección completa. Esta acción no es reversible.

Para salir del modo secciones haz clic ahora en el botón ocultar áreas.

 

Regresar al inicio


Cómo añadir imágenes de fondo en mi página de destino

La opción de colocar imágenes como fondo, está disponible desde la pestaña Estilos globales y también en cada sección de tu diseño.

Para añadir una imagen de fondo en una sección:

Aprende paso a paso cómo añadir una imagen en una sección específica de tu página de destino.

  1. En tu página de destino haz clic en la opción Mostrar secciones (para ver esta opción deberás estar situado en la pestaña Bloques).
  2. Ubica la sección en la cual deseas añadir la imagen de fondo, y haz clic en el engranaje de esa sección.
  3. A tu izquierda aparecerá las opciones de configuración de la sección, haz clic en Añadir fondo y selecciona la imagen de fondo.

Para añadir una imagen como fondo en toda mi página de destino:

Esta opción está disponible desde la pestaña Estilos globales, sigue los pasos a continuación para añadir una imagen como fondo en tu diseño:

  1. En el editor, haz clic en la pestaña Estilos globales.
  2. Haz clic en la opción Imagen de fondo.
  3. Después, haz clic en la opción Añadir fondo.

Para ambas opciones:

Después de hacer clic en Añadir fondo, verás tu galería de imágenes, allí puedes elegir una imagen ya existente o bien añadir una imagen nueva.

Una vez que la imagen esté insertada verás nuevas opciones.

 

 

  1. Imagen de fondo
    1. Relleno. La imagen cubrirá el fondo de la sección por completo quedando fija. La imagen se desplazará en el sentido del puntero. A continuación un ejemplo de una página de destino con imágenes como relleno. Para este ejemplo se utilizó una imagen de relleno al principio y al final, para dar un efecto de transición de color se usó una imagen con un fondo gradiente.
    2. Mosaico. La imagen se repetirá continuamente formando un patrón similar a una retícula de mosaicos. La cantidad de repeticiones de la imagen dependerá del tamaño de la pantalla.
    3. Parallax. La imagen llenará el espacio de la sección, sin embargo al deslizar la página hacia arriba o abajo, la imagen obtendrá un movimiento dinámico, que a la vista parecerá que el contenido a continuación cubre la imagen, mientras ésta queda estática. NOTA: El efecto parallax se apreciará cuando la página se deslice hacia arriba o abajo. Además pudieras aprovechar este efecto para darle un toque creativo a tus diseños, como en el ejemplo a continuación:
  2. Posición de la imagen. Estos controles te permitirán cambiar la posición de la imagen. Haz clic en la posición que más se ajuste a tus necesidades.
  3. Opciones de edición
    1. Editar: Esta opción te permitirá entrar a nuestro editor de imágenes, donde podrás cambiar el tamaño de la imagen o incluso añadir efectos.
    2. Reemplazar: Si la imagen no es lo que necesitas, puedes reemplazarla haciendo clic en esta opción y eligiendo una nueva imagen desde la galería.
    3. Reiniciar: Esta opción eliminará la imagen de fondo, dejando el fondo libre para tu elección de color o nueva imagen.
  4. Diseño del contenido
    1. Fondo cuadrado: Esta opción resguardará tu diseño dentro de un marco. Este marco es fijo y puedes agregarle color, tu diseño se mostrará dentro de este margen.
    2. Fondo ancho total. Esta opción permitirá que tu diseño tenga el ancho de la pantalla.
  5. Al terminar no olvides hacer clic en Guardar y cerrar.

 

Regresar al inicio


Bloques

Los bloques son los elementos de diseño que podrás insertar a tu página de destino. Para hacer uso de ellos haz clic en la pestaña bloques, donde encontrarás dos opciones: secciones y contenido. Los bloques disponibles están debajo de la pestaña Contenido.

Para añadir un bloque a tu diseño haz clic en él y arrástralo hacia el lugar deseado, tal y como se muestra en la imagen a continuación:

 

A continuación te mostramos los bloques disponibles y sus características:

 

Regresar al inicio


 

 

Bloque de imagen e imagen de tarjeta

Utiliza este bloque para añadir imágenes que puedes subir en el momento o tomar desde tu galería de imágenes. Para utilizar cualquiera de estos bloques haz clic él y arrástralo hacia tu diseño, una vez allí, suelta el bloque en el lugar deseado.

Un bloque de imagen añadirá una imagen a tu diseño, mientras que un bloque de imagen de tarjeta, añadirá la imagen más texto dentro de un marco.

En el siguiente ejemplo puedes ver a tu izquierda un bloque de imagen y a la derecha un bloque de imagen de tarjeta.

¿Qué bloque debo usar en mi diseño?

Utiliza el bloque de imagen cuando desees añadir una imagen.

Cuando necesites añadir texto o una descripción a tu imagen, entonces utiliza el bloque de imagen de tarjeta, de esta forma al mover el bloque se moverá imagen junto a su descripción.

Para aprender cómo añadir una imagen de tarjeta haz clic aquí, para añadir un bloque de imagen, haz clic aquí.

También podrían interesarte los siguientes contenidos:

  • Editar o cambiar el tamaño de una imagen
  • Qué es la galería de imágenes y que tipo de imágenes puedo usar
  • Cómo consigo la URL de una imagen
  • Cómo consigo imágenes gratuitas
  • Cómo borrar imágenes de la galería de imágenes

 

Regresar al menú Bloques


 

Bloques de texto e imagen

Un bloque de texto e imagen te permite básicamente añadir una imagen con texto. La diferencia entre estos bloques y el bloque imagen de tarjeta es que el bloque de imagen con texto no se encuentra sujeto a un contenedor o marco, mientras que el bloque de imagen de tarjeta sí. Esto le permite a los bloques de texto ajustar los márgenes hasta el final del espacio en el bloque. A continuación te mostramos un ejemplo de un bloque de texto a la izquierda y un bloque de imagen de tarjeta a la derecha.

Para aprender cómo añadir uno de los bloques disponibles de imagen y texto, haz clic aquí.

 

Regresar al menú Bloques


 

Bloque de texto

El texto es esencial, y para añadirlo, puedes arrastrar el bloque de texto a tu diseño y soltarlo en el lugar que desees. Una vez colocado el bloque basta con hacer clic en el para eliminar el texto por defecto y añadir el tuyo.

El bloque de texto es totalmente personalizable y además puedes hacer uso de las siguientes opciones:

Copiar y Pegar

Si ya tienes un texto listo, puedes usar la opción Pegar . Esta opción removerá cualquier código o formato escondido en el texto, y permitirá que obtengas un diseño nítido.

Código de fuente

Para añadir código deberás usar el bloque texto, una vez allí, haz clic en el icono código de fuente y pega el código.

Si estas opciones no están simple vista, haz clic en la opción Más en tu barra de herramientas.

 

Regresar al menú Bloques


 

Bloque de video

Los videos son herramientas visuales muy efectivas, ya que le permiten al usuario ver el producto y sus características y esto se traduce en compras exitosas. No dejes de utilizar esta increíble herramienta en tus páginas de destino.

Si deseas aprender cómo subir un video a tu página de destino, o a tu galería de videos, haz clic aquí.

 

Regresar al menú Bloques


 

Bloque divisor

Utiliza este bloque para crear espacios entre los elementos de diseño, esto hará que tu página de destino luzca profesional y que cada elemento sea visto con claridad. Para añadir este bloque solo tienes que arrastrar y soltar en el lugar deseado. Si deseas saber más sobre este bloque haz clic aquí.

 

Regresar al menú Bloques


 

Bloque de botón

El CTA (Call to action por sus siglas en inglés) o llamada a la acción, es la parte crucial de tu diseño, ya que es allí dónde podrás medir la interacción de los usuarios. Para añadir este botón haz clic en el bloque y arrastralo hacia el la posición deseada. En el panel de la izquierda verás las opciones para personalizar el botón. Sigue leyendo para conocer las opciones de la pestaña Contenido del botón.

  1. En esta casilla deberás añadir el texto que se mostrará en el botón. Procura que sea algo que capte la atención del lector y que logre el objetivo: hacer clic.
  2. Añade la URL a la cual se dirigirá el usuario al hacer clic. Esta URL puede ser externa o bien puede dirigirse a una parte de la página de destino, por ejemplo, si hace clic en SUSCRIBIRSE, puede enviar a el usuario al formulario de registro contenido dentro de la misma página. Puedes añadir opciones alternativas, por ejemplo anclas, números de teléfono y correos. Para añadir estas opciones:
    1. Haz clic en la opción enlace en la barra de herramientas.
    2. En el recuadro emergente, selecciona una opción del menú desplegable. Nota: Si eliges usar un ancla deberás añadirla antes.
  3. Barra de herramientas del botón: Esta barra se encuentra en la parte superior del editor y allí podrás personalizar el texto y añadir enlaces alternativos.
  4. La opción Aplicar estilo a todos los botones, te puede ser útil si añadirás a tu página varios botones y deseas que todos tengan las mismas características.

 

Regresar al menú Bloques


 

Bloques de redes sociales y compartir en redes

Añadir bloques de redes sociales a tu página de destino es esencial. Nuestro editor tiene bloques de redes sociales con propósitos diferentes. Para usar cualquier de ellos, solo tienes que arrastrar y soltar el bloque en tu diseño.

El bloque de redes sociales te permite añadir los iconos de tus redes sociales, este bloque contiene los iconos de más de 20 diferentes redes, incluyendo, Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, entre otros.

El bloque de compartir en redes sociales te permite añadir: Facebook, Twitter, Linkedin, Myspace, e instapaper. Este bloque le permite a los lectores compartir la página de destino en cualquiera de las redes mencionadas.

¿Cuál debo usar?

Según tu estrategia, si lo que quieres es enviar a tus lectores a tus redes sociales, utiliza el botón de redes sociales, de esta forma los usuarios harán clic en la red social de su preferencia donde podrán compartir tu contenido o dar una reacción.

Ahora, si lo que deseas es que tus usuarios compartan la página de destino, entonces, añade el botón de Compartir en redes sociales.

Sigue estas instrucciones para añadir cualquiera de los dos bloques:

  1. Arrastra a tu diseño el bloque deseado o haz clic en él si ya existe en tu diseño.
  2. En el panel de la izquierda haz clic en la pestaña Contenido.
  3. Selecciona un servicio del menú desplegable y haz clic en el icono de más a un costado de este menú.
  4. Ve a tu diseño y haz clic en el icono agregado recientemente, verás que aparecerán nuevas opciones de configuración.
  5. Añade el texto del botón, puedes también cambiar el color y el radio del borde. Y si así lo deseas copiar el mismo radio a los demás botones del bloque.

Si deseas mover o eliminar el icono, ubica el puntero de ratón en él y elige la opción deseada.

 

Regresar al menú Bloques


 

 

Barra de navegación

La barra de navegación es una barra con múltiples enlaces que le permitirá a tus usuarios ir directamente al enlace que les concierne en vez de explorar la página completamente.

  1. Haz clic en Agregar enlace para agregar opciones a tu barra. Puedes añadir hasta 6 enlaces por barra, estos enlaces pueden ser imágenes como logotipos y texto.
  2. Existen tres disposiciones de los enlaces, explora cada una de ellas para revisar cual le conviene a tu diseño.
  3. Utiliza las opciones de alineación vertical y horizontal para ubicar la barra. El tamaño del canal determina el espacio entre cada enlace.
  4. El estilo para móvil te permite manipular la forma en la cual los usuarios de dispositivos móviles verán la disposición de los elementos de la barra.

 

Regresar al menú Bloques


 

Formularios de registro

Usualmente las páginas de destino tienen la finalidad de colectar suscriptores. Entre más suscriptores tengas, la información de tus campañas llegará más lejos.

Sigue las instrucciones a continuación para añadir un formulario de registro a tu página de destino. Deberás usar un formulario integrado el cual ya deberá haber sido creado.  Para crear un formulario integrado haz clic aquí.

  1. Arrastra el bloque formulario de registro a la posición deseada.
  2. Dirígete al panel de la izquierda y selecciona un formulario existente. Solo se permite insertar formularios integrados.
  3. Tu formulario será mostrado en tu diseño. Dentro del editor de páginas de destino puedes personalizar el tamaño del formulario. Para más opciones de diseño deberás ir a la opción Abrir el editor del formulario. El formulario se abrirá en nueva ventana, al terminar los cambios recuerda guardar.
  4. Un par de segundos después los cambios se reflejarán automáticamente en el formulario dentro de tu página de destino. Si no visualizas los cambios, elimina el formulario y agrégalo nuevamente (para eliminar sitúa el puntero en el formulario y haz clic en el icono de eliminar).

Nota: Puedes cambiar el formulario de registro cuando quieras seleccionando uno distinto desde el menú desplegable formulario integrado.

Regresar al inicio


 

Tipografía

Utiliza las fuentes de Google en tu página de destino y dale un toque llamativo a tu diseño.

Para aplicar fuentes de Google sigue estos pasos:

  1. Dirígete al diseño de tu página de destino.
  2. A tu izquierda se encuentran tres pestañas, haz clic en Estilos globales.
  3. Localiza la opción Tipografía y haz clic en ella.
  4. Ahora selecciona el tipo de fuente que deseas para tus encabezados y para el cuerpo.

Regresar al inicio


Animación de bloques

Impresiona a tus lectores animando los bloques de tu página de destino, selecciona diversas animaciones y configura su duración y demora.

Para agregar animación a tus bloques haz lo siguiente:

  1. Dirígete al diseño de tu página de destino.
  2. Inserta un bloque en tu diseño y después haz clic en él o bien elige un bloque ya existente en tu diseño.
  3. Una vez hayas seleccionado el bloque verás las opciones de configuración a tu izquierda, ahora, selecciona la casilla Bloque animado
  4. Selecciona el tipo de animación y configura los demás campos.

Al hacer clic en el menú desplegable Tipo de animación podrás elegir la animación que más se adapte a tu estrategia, además puedes añadir la duración de la animación, la demora y la compensación.

Regresar al inicio


Si tienes preguntas adicionales sobre páginas de destino, ponte en contacto con nuestro equipo de soporte vía Email, LiveChat o teléfono.

¿Te ha resultado útil esta información?
0 0

¿No encuentras lo que buscas?

Crea un ticket