¿Cómo editar mi proyecto para versión móvil?
En este artículo, te explicaremos cómo adaptar tus Funnels o proyectos a la versión móvil correctamente. Sigue estos pasos para garantizar que tu página se vea y funcione bien en dispositivos móviles.
Paso 1: Crea tu funnel en versión escritorio
Antes de comenzar a editar para la versión móvil, asegúrate de que tu funnel esté primero creado en formato escritorio. Si comienzas a editar en versión móvil o tablet, y luego intentas ajustar la versión de escritorio, la plataforma no lo permitirá.
Teniendo claro esto, empecemos:
Paso 2: Accede a la plataforma MasterTools y abre FunnelTool
Ingresa a la plataforma MasterTools y selecciona la herramienta FunnelTool.
Una vez tengas tu funnel creado en versión escritorio, haz clic en el ícono de la versión móvil en la barra superior del constructor para cambiar a la vista móvil.
Paso 3: Minimiza el uso de elementos
Ten en cuenta que cada elemento que agregas a tu funnel, sitio web o proyecto añade un código que puede aumentar el peso del proyecto y afectar su velocidad de carga. Te recomendamos usar los elementos con moderación para asegurar una carga rápida en la versión móvil.
Paso 4: Identificar bloques originales y copiados
Al ingresar a la versión móvil, verás diferentes bloques. Es importante identificar cuáles son bloques originales de la versión móvil y cuáles son copias de la versión escritorio, aunque no sean visibles, hacen parte del código fuente de tu sitio web o de tu proyecto. La idea es que no los habilites si no es necesario:
¿Cómo identificamos los bloques?
Bloques originales: Si ves solo los íconos de Tablet o Móvil, significa que el bloque es original de la versión móvil. No elimines estos bloques, ya que son esenciales para la versión móvil y eliminar los bloques originales puede afectar la versión de escritorio.
Bloques copiados: Si ves los tres íconos (PC, Tablet y Móvil), esto indica que el bloque es una copia de la versión escritorio. Puedes ocultar estos bloques sin que afecten la versión de escritorio.
Paso 5: Ocultar bloques innecesarios
Una vez identificados, oculta los bloques copiados (con los tres íconos) y deja únicamente los bloques originales de la versión móvil.
Paso 6: Habilitar bloques en la versión móvil
Para habilitar los bloques necesarios en la versión móvil, simplemente haz clic sobre los íconos correspondientes. Esto activará los bloques que necesitas para que tu página se vea bien en dispositivos móviles.
Paso 7: Ajustar los estilos globales
Es recomendable realizar los ajustes desde los estilos globales en lugar de hacerlo directamente en el funnel, ya que esto evitará que los cambios afecten la versión de escritorio y desconfiguren lo que ya has hecho.
Ve a la opción Estilos globales dentro de la plataforma.
Selecciona la opción Estilos de texto.
Paso 8: Configurar los estilos de texto para móvil
Nota: Es importante configurar primero los estilos globales antes de empezar a trabajar en tu funnel para que los cambios se configuren antes de iniciar.
Asegúrate de que la opción de móvil esté seleccionada antes de realizar cualquier cambio.
Al hacer clic en cualquiera de los encabezados, podrás ajustar los siguientes parámetros:
Tamaño de la fuente: Ajusta el tamaño de la letra para que se vea bien en la pantalla móvil.
Espaciado entre letras: Modifica la separación entre las letras para mejorar la legibilidad en móviles.
Altura de la línea: Controla el espacio entre los párrafos para mejorar la visualización del contenido.
Paso 9: Vista previa para comprobar cambios
Una vez que hayas realizado los ajustes, utiliza la vista previa para asegurarte de que los cambios se han aplicado correctamente.
Puedes elegir entre tres versiones de vista: escritorio, tablet y móvil. Si los cambios no se aplican correctamente en algún encabezado, es posible que ese texto o widget no tenga configurados los estilos globales.
Nota: Si no se te aplican los cambios en alguno de los encabezados, quiere decir que en el momento ese encabezado o ese widget no tiene configurado los estilos globales.
Paso 10: Aplicar estilos globales manualmente
Si algún encabezado no muestra los cambios, sigue estos pasos para aplicar los estilos globales manualmente:
Haz doble clic en el texto que no tiene el estilo aplicado.
Aparecerá un menú donde podrás seleccionar la opción Estilos globales.
Elige el estilo global que deseas aplicar y guarda los cambios.
Consejos finales:
Siempre configura los estilos globales antes de trabajar en tu funnel. Esto asegurará que todos los elementos estén correctamente alineados con tu diseño general.
Mantén la simplicidad. Evita usar demasiados elementos, ya que esto puede ralentizar la carga de tu página, especialmente en dispositivos móviles.
Con estos pasos, podrás adaptar tu funnel o proyecto para que se vea perfecto en cualquier dispositivo móvil. ¡No dudes en volver a este tutorial siempre que necesites hacer ajustes!
Paso 1: Crea tu funnel en versión escritorio
Antes de comenzar a editar para la versión móvil, asegúrate de que tu funnel esté primero creado en formato escritorio. Si comienzas a editar en versión móvil o tablet, y luego intentas ajustar la versión de escritorio, la plataforma no lo permitirá.
Teniendo claro esto, empecemos:
Paso 2: Accede a la plataforma MasterTools y abre FunnelTool
Ingresa a la plataforma MasterTools y selecciona la herramienta FunnelTool.
Una vez tengas tu funnel creado en versión escritorio, haz clic en el ícono de la versión móvil en la barra superior del constructor para cambiar a la vista móvil.
Paso 3: Minimiza el uso de elementos
Ten en cuenta que cada elemento que agregas a tu funnel, sitio web o proyecto añade un código que puede aumentar el peso del proyecto y afectar su velocidad de carga. Te recomendamos usar los elementos con moderación para asegurar una carga rápida en la versión móvil.
Paso 4: Identificar bloques originales y copiados
Al ingresar a la versión móvil, verás diferentes bloques. Es importante identificar cuáles son bloques originales de la versión móvil y cuáles son copias de la versión escritorio, aunque no sean visibles, hacen parte del código fuente de tu sitio web o de tu proyecto. La idea es que no los habilites si no es necesario:
¿Cómo identificamos los bloques?Bloques originales: Si ves solo los íconos de Tablet o Móvil, significa que el bloque es original de la versión móvil. No elimines estos bloques, ya que son esenciales para la versión móvil y eliminar los bloques originales puede afectar la versión de escritorio.
Bloques copiados: Si ves los tres íconos (PC, Tablet y Móvil), esto indica que el bloque es una copia de la versión escritorio. Puedes ocultar estos bloques sin que afecten la versión de escritorio.
Paso 5: Ocultar bloques innecesarios
Una vez identificados, oculta los bloques copiados (con los tres íconos) y deja únicamente los bloques originales de la versión móvil.
Paso 6: Habilitar bloques en la versión móvil
Para habilitar los bloques necesarios en la versión móvil, simplemente haz clic sobre los íconos correspondientes. Esto activará los bloques que necesitas para que tu página se vea bien en dispositivos móviles.
Paso 7: Ajustar los estilos globales Es recomendable realizar los ajustes desde los estilos globales en lugar de hacerlo directamente en el funnel, ya que esto evitará que los cambios afecten la versión de escritorio y desconfiguren lo que ya has hecho.
Ve a la opción Estilos globales dentro de la plataforma.
Selecciona la opción Estilos de texto.
Paso 8: Configurar los estilos de texto para móvil
Nota: Es importante configurar primero los estilos globales antes de empezar a trabajar en tu funnel para que los cambios se configuren antes de iniciar.
Asegúrate de que la opción de móvil esté seleccionada antes de realizar cualquier cambio.
Al hacer clic en cualquiera de los encabezados, podrás ajustar los siguientes parámetros:
Tamaño de la fuente: Ajusta el tamaño de la letra para que se vea bien en la pantalla móvil.
Espaciado entre letras: Modifica la separación entre las letras para mejorar la legibilidad en móviles.
Altura de la línea: Controla el espacio entre los párrafos para mejorar la visualización del contenido.
Paso 9: Vista previa para comprobar cambios
Una vez que hayas realizado los ajustes, utiliza la vista previa para asegurarte de que los cambios se han aplicado correctamente.
Puedes elegir entre tres versiones de vista: escritorio, tablet y móvil. Si los cambios no se aplican correctamente en algún encabezado, es posible que ese texto o widget no tenga configurados los estilos globales.
Nota: Si no se te aplican los cambios en alguno de los encabezados, quiere decir que en el momento ese encabezado o ese widget no tiene configurado los estilos globales.
Paso 10: Aplicar estilos globales manualmente
Si algún encabezado no muestra los cambios, sigue estos pasos para aplicar los estilos globales manualmente:
Haz doble clic en el texto que no tiene el estilo aplicado.
Aparecerá un menú donde podrás seleccionar la opción Estilos globales.
Elige el estilo global que deseas aplicar y guarda los cambios.
Consejos finales:
Siempre configura los estilos globales antes de trabajar en tu funnel. Esto asegurará que todos los elementos estén correctamente alineados con tu diseño general.
Mantén la simplicidad. Evita usar demasiados elementos, ya que esto puede ralentizar la carga de tu página, especialmente en dispositivos móviles.
Con estos pasos, podrás adaptar tu funnel o proyecto para que se vea perfecto en cualquier dispositivo móvil. ¡No dudes en volver a este tutorial siempre que necesites hacer ajustes!
Actualizado el: 03/03/2025
¡Gracias!