Cómo trabajar con el Editor de Páginas de Unbounce

El Editor de Páginas es el área de Unbounce donde “haces” tus landing pages y Convertables. Dentro del editor, puedes también acceder a una versión móvil de tu página en cualquier momento, entrando al área móvil del Editor de Páginas. La versión móvil también es totalmente personalizable, por lo que no tendrás ningún problema en conseguir que tu landing page tenga el look que buscas.

En este artículo descubrirás cómo:

  • Navegar por la barra de herramientas del Editor de páginas.
  • Hacer que tus landing pages existentes sean responsive.
  • Administrar la versión móvil de tu landing page.
  • Hacer el seguimiento de todos los elementos de la página (ocultos y visibles).

Principales características del Editor de Páginas

En la ventana principal del Editor de Páginas, verás tu landing page en progreso, el panel de widgets a la izquierda, la barra de herramientas en la parte superior y los paneles de propiedades a la derecha. En cualquier momento y en cualquier lugar del Editor de Páginas puedes hacer clic en un objeto para que aparezcan sus propiedades a la derecha de la interfaz, o hacer doble clic para ver más opciones de edición.

Barra de herramientas

Save (Guardar): Puedes guardar tu trabajo en cualquier momento, pero asegúrate de guardarlo antes de salir del Editor de Páginas, de lo contrario los cambios se perderán.

Version Control (Control de versiones): Restaura una versión antigua de tu página haciendo clic en Last saved (Última guardada) junto al botón Save.

Preview (Vista previa): Se abrirá en una ventana nueva. No todos los elementos que provienen de terceros (ajenos a Unbounce) se mostrarán correctamente en Vista previa.

Undo & Redo (Deshacer y volver a hacer): Haz clic aquí, incluso después de guardar. Solo asegúrate de guardar de nuevo una vez que hayas realizado cambios. Si vuelves a una versión anterior de tu landing page utilizando la función Control de versiones, Deshacer y Rehacer se restablecerá para esa sesión.

Move up/Move down (Mover hacia arriba/hacia abajo): Te permite mover secciones de tu landing page hacia arriba o hacia abajo.

Bring Forward/Send Backward (Enviar hacia delante/hacia atrás): Te permite mover los objetos hacia delante y hacia atrás en relación con los objetos circundantes.

Duplicate (Duplicar): Selecciona con un solo clic un objeto y haz clic en Duplicate para duplicarlo.

Delete (Eliminar): Selecciona con un solo clic un objeto y haz clic en Delete para eliminarlo.

Copy and Paste (Copiar y pegar): Esta función te permite copiar y pegar elementos entre las páginas de tu cuenta. ¡Significa que puedes copiar y pegar un elemento de una página o Convertable a otra! Pan comido. Es importante que tengas presente algunas de las observaciones que hacemos a continuación en relación al uso de esta herramienta:

Cómo copiar elementos de una landing page

  • Puedes copiar un elemento haciendo clic en el icono Copy (Copiar) o bien utilizando el comando Ctrl + C en tu teclado.
  • Puedes seleccionar varios elementos manteniendo pulsada la tecla "Shift" y seleccionando los elementos que quieres copiar.

Cómo pegar elementos en una landing page

  • El elemento copiado se puede pegar o bien haciendo clic en el icono Paste (Pegar) o utilizando el comando Crtl + P en el teclado.
  • Si quieres reproducir elementos entre cuentas o Clientes puedes hacer lo siguiente:
  1. Abrir el Editor de Páginas dos veces, en dos pestañas dentro de la misma ventana de tu navegador. Inicia sesión en cada cuenta en sus respectivas pestañas y copia el elemento que quieras duplicar de una pestaña a ala otra.
  2. Descarga la página de una cuenta y súbela a la otra. Toma en cuenta que este método no está disponible para Convertables.

Panel de widgets

Para agregar cualquier elemento a tu página, simplemente arrástralo desde el panel de widgets (en el lado derecho del editor) a la página.

Cómo agrupar elementos de página para que se muevan juntos

Para seleccionar varios objetos, simplemente mantén presionada la tecla “Shift” y haz clic en cada objeto que quieras seleccionar. Deberías ver un cuadro de selección alrededor de los objetos. A continuación, podrás moverlos como un grupo.

Cómo agrupar elementos de página para duplicar

Aunque no puedes duplicar una selección de varios objetos, puedes conseguir la misma funcionalidad añadiendo un elemento Box a tu página y arrastrando los objetos que quieres duplicar a este. Estos otros elementos (texto, imagen, botones, etc.) se convertirán en “hijos de la box”, lo que significa que si duplicas la box, todos los elementos contenidos en la box también se duplicarán.


Cómo usar la función Mobile Responsive

¿Qué significa Mobile Responsive?

La función Mobile Responsive te permite presentar o bien una versión móvil o bien una versión de escritorio de tu página automáticamente a tus visitantes en función del tamaño de su navegador, sin necesidad de emplear una redirección. Cuando la función Mobile Responsive está configurada y habilitada en una página o Convertable, cualquier visitante que utilice un dispositivo móvil verá la vista móvil de tu página, mientras que cualquier persona que utilice un ordenador de escritorio recibirá la vista de escritorio.

¿Cómo funciona la función Responsive en Unbounce?

Establecemos el "punto de interrupción" para tus páginas Mobile Responsive a 600px. Esto significa que a cualquier navegador con una configuración de 600px o menos se le servirá la vista móvil de la landing page o Converatable. Y cualquier navegador con una ventana de más de 600px verá la versión de escritorio de la página o Convertable.

Las pantallas Retina, como las del iPhone, son técnicamente más grandes que 600px debido a su alta resolución, pero la ventana de visualización se comporta como una ventana de navegador más pequeña, por eso los teléfonos retina muestran la versión móvil de la página.

Cómo empezar con tu landing page responsive

Tiene tres opciones para crear una página responsive en Unbounce:

  1. Puedes empezar de 0 desde una plantilla: A día de hoy, todas las plantillas Unbounce son Mobile Responsive, por lo que si estás creando una página o Convertable nuevo a partir de una de nuestras plantillas, la mayoría de los trabajos iniciales de configuración están ya hechos para ti.

  2. Puedes actualizar una página existente: Puedes actualizar cualquier página existente para que sea responsive. Los objetos de tu escritorio aparecerán en tu versión móvil, pero tendrás que re-colocarlos. Mantente atento a las advertencias de “fuera de límite” para asegurarte de que todo se muestre correctamente en tu página.

  3. Puedes empezar de 0 desde una página en blanco: Como siempre, puedes empezar con una página o Convertable en blanco y personalizarla para que refleje tu marca. Construye tus landing pages versión escritorio de manera normal, todos los objetos que añadas a tu página aparecerán en tu versión para móviles. Mantente atento a las advertencias de “fuera de límite” para asegurarte de que todo se muestre correctamente en tu página.

Cómo construir tu landing page responsive

Para personalizar tu página responsive y poder presentarla a los usuarios que te visitan a través de sus móviles, necesitarás algunos elementos:  

Desktop / Mobile view (Vista de Escritorio / Móvil): Haz clic en los botones en la parte inferior derecha de la ventana del Editor de Páginas para alternar entre vista de Escritorio y Móvil.

Mobile Layout Assistant (Asistente de diseño móvil): Esta función es la mejor manera de comenzar a personalizar una página responsive. Puedes aplicar el Asistente de diseño móvil a toda tu página/Convertable o a secciones individuales, es un punto de partida mucho más sencillo.


El Asistente de diseño móvil cambiará tu juego a la hora de diseñar una landing page desde una página en blanco. Esta función actúa mejor si la aplicas primero y sigues a continuación con los detalles. Intenta evitar hacer cambios antes de aplicar el Mobile Layout Assistant, ya que este puede causar pequeños problemas de agrupación.

Cómo cambiar el tamaño del texto: Puedes cambiar el tamaño del texto de la versión de escritorio y adaptarlo a tu versión para móviles. Selecciona el cuadro de texto y utiliza la barra deslizante en la parte superior derecha del Panel de propiedades. También se puede cambiar el tamaño del cuadro de texto por separado en la versión de escritorio y la de móvil.

Cualquier ajuste de fuente, tamaño de fuente, formato o altura de línea realizado en  el Editor de texto afectará a ambas vistas.

Formularios y botones: Los formularios y botones serán los mismos en tus vistas de escritorio y móvil. Puedes ocultar un botón en una vista y mostrar otro en la otra vista. Sin embargo, tu formulario debe ser consistente en ambas versiones.


Cómo ocultar/mostrar objetos

Si quieres ocultar algunos objetos en vista móvil o en vista escritorio, haz clic en el objeto y a continuación haz clic en el icono Visibility (Visibilidad) en el Panel de propiedades.

También puedes controlar la visibilidad haciendo clic en Contents (Contenidos) en la parte inferior izquierda del Editor de Páginas.

Cuando selecciones objetos dentro del Editor de Páginas, el Panel de contenidos de página automáticamente resaltará y se desplazará hasta ese objeto. Aparecerá el icono de un ojo  cuando el elemento es visible o un círculo sólido  si no lo es. Haz clic para alternar entre los dos.

NOTA: Si ocultas un cuadro o sección de página con objetos anidados dentro, todos los elementos anidados se ocultarán con él.


Cómo mover elementos entre secciones de página y desvincular elementos anidados

De manera predeterminada, si se mueve un elemento entre secciones de página, se moverá en ambas vistas. Para mover elementos fuera de una sección sin cambiarlos en ambas vistas (escritorio y móvil), mantén presionada la tecla Command (mac) o la tecla Ctrl (Windows) mientras arrastras el elemento. Te aparecerá un recordatorio de esto siempre que muevas un elemento de una sección de página a otra sin mantener presionado la tecla Command o Ctrl.

Si hay varios elementos anidados en un cuadro, mover esos elementos en una vista, también los moverá en la otra vista. También puedes utilizar Command/Ctrl + clic para desvincular un elemento en una vista y moverlo independientemente de la otra vista.

Recuerda que también puedes usar shift + clic para mover más de un elemento a la vez.

Advertencias sobre objetos fuera de límites:

Si alguno de tus objetos se encuentra fuera de los límites de tu landing page, te aparecerá una advertencia. Para eliminarla, no tienes más que mover el objeto dentro de los límites de la landing page u ocultarlo. También puedes desactivar las advertencias sobre objetos fuera de los límites mediante la casilla de verificación situada en la parte superior derecha del Editor de Páginas.


Cómo mostrar versiones móviles al visitante

Puede ser que necesites activar tu vista móvil manualmente (las plantillas para Convertables son Mobile Responsive predeterminadamente, pero sólo algunas plantillas para Landing Pages lo son).

Cómo activar la vista móvil de tu Landing Page:

  1. Da clic en el selector on-off de ‘Mobile’ en la parte inferior derecha del Editor de Páginas.
  1.     Guarda y publica (o re-publica) tu página.

Cómo activar la vista móvil de tu Convertable:

  1. Da clic en el selector on-off de ‘Mobile’ en la parte inferior derecha del Editor de Páginas.
  2. Guarda y publica (o re-publica) tu Convertable.

Cómo modificar una página existente para que sea responsive

Si tu página se publicó antes de que apareciese el formato Responsive, es posible adaptarla a este formato. En tal caso, los conceptos descritos arriba siguen siendo aplicables, pero la configuración inicial de la vista móvil para páginas existentes tiende a llevar más de tiempo del que se invierte al crear una nueva página con diseño responsive (o si se empieza desde una nueva plantilla Responsive).

Seguimiento de visitantes en versión móvil vs seguimientos de visitantes en versión escritorio

Actualmente, al contar el número de visitas, Unbounce no diferencia entre visitas llegadas de móviles y visitas llegadas de escritorio. Pero puedes utilizar Google Analytics y segmentar y filtrar esas estadísticas para realizar un seguimiento y comparar las visitas que llegan de dispositivos móviles a las que llegan de dispositivos de escritorio. Aprende cómo agregar Google Analytics a tus páginas Unbounce aquí.

Y echa un vistazo a este post en nuestra Comunidad para obtener consejos sobre cómo segmentar y filtrar tus datos en GA.


Contenidos

El panel Contents (Contenidos) es una estructura de árbol que muestra el diseño jerárquico de la landing page/Convertable en función de sus elementos. Verás todos los objetos de tu página anidados dentro de las secciones y cuadros de la página.

Para acceder a los Contenidos, haz clic en la pequeña flecha que se encuentra a la extrema  izquierda o en el botón Contents en la parte inferior del Editor de Páginas.

Haz clic en el elemento de los Contents que quieras seleccionar. Puedes cambiar el nombre de los objetos haciendo doble clic en ellos.

Haz clic en la flecha situada a la derecha de Contents para cerrar el panel.


Vuelve a publicar desde el Editor de Páginas

Si estás editando una página que ya se ha publicado, al guardar los cambios se activará el botón Re-publish (Volver a publicar), para que no tengas que abandonar el Editor de Páginas para volver a publicar tu página (nota: Re-publicar desde el Editor no está disponible para Convertables)

Ten en cuenta que volver a publicar desde el interior del editor volverá a publicar también las variantes de tu página.

Si estás editando una página que nunca ha sido publicada, tendrás que hacerlo desde el Overview (Vista General) para poder configurar la URL, las integraciones y el peso del tráfico de la página (si estás ejecutando una prueba A/B).


Navegadores compatibles para crear páginas de Unbounce

Ten en cuenta que el Editor de Páginas de Unbounce no funciona en Safari cuando se activa el modo de navegación privada.

Todas las páginas creadas en Unbounce son totalmente compatibles con IE cuando se publican (junto con Firefox, Safari y Chrome). Sin embargo, nuestro entorno de administración de páginas no es actualmente compatible con IE.

Hemos encontrado que la mayoría de nuestros usuarios prefieren navegadores alternativos, por lo que hemos centrado nuestros esfuerzos en asegurarnos que seamos compatibles con Firefox, Chrome y Safari. Siempre recomendamos a nuestros usuarios que instalen y utilicen uno de los navegadores actualmente soportados, todos ellos gratuitos. Tus opciones son las siguientes: 

  1. Firefox. Puedes descargarlo aquí:
    http://www.mozilla.com/en-US/ 
    Es una descarga rápida y fácil de instalar. Siempre que quieras administrar tus páginas en Unbounce, usa Firefox en lugar de IE.
  2. Google Chrome. Puedes descargarlo aquí:
    http://www.google.com/chrome
    Otra alternativa a IE.

Ten la seguridad de que las páginas y Convertables que publicas en Unbounce funcionan bien en todos los navegadores razonablemente actualizados, incluido IE. 


Glosario

Editor de Páginas: La página dentro de la aplicación Unbounce en la que creas y editas tu landing page.

Barra de herramientas: Ubicada en la parte superior del Editor de Páginas. Aquí puedes Guardar (Save) y Previsualizar (Preview) tu landing page, entre otras cosas.

Panel de widgets: Ubicado a la izquierda del Editor de Páginas. Encontrarás todos los elementos que puedes arrastrar a tu landing page en el Panel de widgets.

Panel de Propiedades: Ubicado a la derecha del Editor de Páginas. Aquí puedes encontrar las propiedades de la página/Convertable, así como las propiedades de elementos individuales. Esta es también el área donde vas a optimizar tu landing  page para SEO.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1
Tecnología de Zendesk