Crea Tu Landing Page GRATIS Con Systeme IO | TUTORIAL COMPLETO

[0:00]¿Cómo crear una landing page totalmente gratis con System.io? En este video vas a aprender a crear una página de ventas 100% gratis y profesional utilizando la herramienta de System.io. Yo ya tengo diferentes tutoriales hablando sobre esta herramienta, te los voy a dejar aquí abajo en la descripción de este video, pero aquí nos vamos a centrar única y exclusivamente en crear una página de ventas bonita y responsiva que funcione en todos los dispositivos. Y lo mejor de todo es que lo vas a poder hacer con el plan gratuito que te permite tener hasta cinco páginas totalmente gratis. El único detalle es que te va a quedar con una marca de agua que dice System, pero realmente esto no va a afectar en lo absoluto la navegación de la página. Lo primero que debe entender es que una landing page y una página de ventas es exactamente lo mismo. Básicamente una landing page o una página de ventas nos sirve para promocionar y para vender algún producto o algún servicio con el objetivo de convertir a los visitantes de esa página en clientes. Te voy a colocar el mejor ejemplo y es conmigo mismo. Yo vendo productos del nicho de la salud, tengo cursos de ayuno intermitente, cursos de hábitos saludables, tengo dietas, recetarios, PDFs y varios productos. Y para cada uno de ellos tengo una página de ventas. En la página de ventas algunos tienen un video de ventas, otros simplemente tienen mock-ups, en la mayoría de ellas describo paso a paso de qué se trata el producto, qué es lo que la persona va a recibir, cuáles son los bonos, el descuento, la garantía, etcétera, etcétera. Y como yo quiero entregarte absolutamente todo en este video, también te quiero entregar la estructura ganadora de una página de ventas. Mira, yo estoy aquí dentro de una página que está construido en otro constructor en WordPress y básicamente una página de ventas va a tener los siguientes ítems. Vamos a pasar por cada uno de ellos. El primero es una transformación o una propuesta única de valor, que sea lo suficientemente clara para que la persona sepa de qué se trata. Por ejemplo, te ayudo a bajar de peso con el método de las porciones en 30 días, entonces es algo que es super específico. Luego vamos a tener un video de ventas o también puede ser un mock-up, que es como la imagencita del producto. Ya la vas a ver aquí porque vamos a construir la página. Luego vamos a reforzar el producto es para ti, vamos a colocar más o menos qué es lo que la persona pudiera lograr a través de este curso o de este programa. Vamos a colocar luego los testimonios y vamos a colocar el primer botón que va a dirigir a la página de pago. Luego vamos a describir el producto y para eso vamos a describir o cada módulo o cada elemento que tiene el curso y para eso vamos a utilizar estas imagencitas que son algunos mock-ups. Si tú quieres saber cómo se hacen mock-ups 100% gratis y en línea, te voy a dejar un video aquí en las tarjetas donde explico paso a paso cómo lo puedes hacer. Después de escribir el producto, podemos entonces ir para los bonos, describimos cada uno de los bonos. Después reforzamos la garantía de satisfacción, que por ley los productos digitales siempre tienen 7 días de garantía. Colocamos el segundo botón, hacemos una recapitulación de todo lo que tiene ese producto. Creamos un gatillo mental de escasez diciéndole a las personas que cuesta tanto y que hoy estará por tanto. Colocamos el siguiente botón, luego añadimos un poco de urgencia con este contador y por último colocamos las preguntas frecuentes o que nos contacten por WhatsApp. Esta es una estructura de una página de ventas ganadora y te voy a enseñar paso a paso cómo hacerla con System.io totalmente gratis. Lo primero que tenemos que hacer es entrar a System.io. El link te lo va a dar aquí abajo en la descripción. Recuerda que con el plan gratuito de por vida, tú puedes crear hasta cinco páginas web totalmente gratis. Una vez hayas creado tu cuenta de manera gratuita, vas a venir aquí donde dice sitios, le vas a dar click en túneles y le vas a dar click donde dice crear. Aquí vamos a crear un nuevo túnel, que así lo nombra System.io, pero básicamente es un embudo de ventas o un funnel de ventas. Yo le voy a colocar aquí producto uno, voy a elegir el dominio de System.io y le voy a dar click aquí donde dice personalizado porque vamos a hacer una página de ventas personalizada. La moneda es irrelevante, euros o dólar, no pasa absolutamente nada. Ya una vez creado el túnel, le vamos a dar click aquí donde dice producto y vamos a agregar una etapa que sería la página de ventas. Entonces aquí le podría poner página de ventas producto uno. ¿Qué tipo de página necesitamos? Pues mira, necesitamos una página de ventas, vamos a seleccionarla y hacemos click en guardar. Una de las cosas que más me encantan de System.io es que ya tiene plantillas listas, simplemente colocar ahí una imagen, cambiar un poquito el texto, darle guardar y listo. Yo voy a seleccionar una plantilla que haga sentido aquí y ya te muestro. Mira, esta plantilla me pareció interesante, le voy a dar click donde dice vista previa de la plantilla y es justamente un producto de alimentación saludable el que vamos a diseñar aquí. Parece que se ve super bien, voy a darle click derecho, inspeccionar y luego le voy a dar en este cuadrito de dispositivo móvil para mirar cómo se ve en el celular. Eso es lo que llamamos responsivo. La verdad es que se ve muy bien, entonces voy a cerrar esta página y justamente esta es la que voy a seleccionar, le voy a hacer click donde dice seleccionar. Aquí donde dice ruta URL, vamos a cambiar este final para nombrar nuestra página, entonces le voy a colocar aquí producto de pérdida de peso y hacemos click afuera. Y mira, con eso nosotros ya tendríamos una página, voy a darle click aquí donde dice copiar el link, vamos a darle control V y mira, con tres, cuatro clicks, nosotros ya tenemos una página 100% funcional. Pero realmente vamos a diseñar una página profesional, entonces acompáñame aquí porque va a ser bastante interesante. Vamos a darle click aquí donde dice editar página y como lo habíamos visto aquí en la página de ventas que te había mostrado la estructura, yo voy a copiar exactamente aquí el texto. Vamos a darle control C, vamos a volver aquí y aquí vamos a colocarle la propuesta. Mira, esto que está aquí encima lo voy a quitar. Básicamente System.io funciona a través de secciones, dentro de las secciones hay lo que llamamos filas y dentro de las filas están los elementos. Entonces si tú por ejemplo quisieras borrar esta imagen le das click aquí en borrar. Si quisieras borrar toda la fila, entonces la vas a seleccionar y le das click ahí en el botoncito azul. De hecho eso es lo que yo voy a hacer, voy a borrar esta fila, voy a borrar toda la fila de acá que no me interesa para nada. Esta fila siento que está como muy lejos de de la parte de arriba, entonces vamos a disminuirla, que me quede un poquito más pegado. Esto que dice 40% lo voy a eliminar y aquí voy a colocar el copy que pegué que dice aquí debes colocar la transformación real de tu avatar. Si yo quisiera cambiar la imagen de fondo y no me gusta, voy a darle aquí en selección y aquí donde dice imagen de fondo, simplemente la voy a quitar. Y voy a hacer algo aquí un poco diferente, mira, voy a seleccionar este texto y le voy a cambiar el tamaño de la fuente. Lo voy a colocar en 45 y también la altura de la línea. Aquí me está diciendo que solo en ordenador, entonces voy a hacer click ahí, voy a irme hasta el final y le voy a decir que en móvil también me lo muestre. Y este título de aquí arriba lo voy a eliminar y le voy a dar click en aceptar. Aquí está el link de la página de pago, entonces aquí podemos colocar un llamado a la acción. ¿Cómo modificamos ese botón? Hacemos click ahí y vamos aquí en la parte donde dice texto del botón y aquí sería el llamado a la acción. Por ejemplo, si es un producto de pérdida de peso, entonces quiero bajar de peso. Una vez hecho eso le voy a dar click aquí atrás, vamos a irnos aquí a los elementos, en la parte izquierda siempre aparecen los elementos y vamos a seleccionar el elemento que sea una imagen y vamos a arrastrarla a este cuadrito de aquí. Aquí yo voy a seleccionar algunos mock-ups. Mira, te quiero mostrar algunos mock-ups que yo tengo acá. Estos mock-ups son de un producto saludable, entonces te los voy a mostrar aquí rápidamente. Este, por ejemplo, es de la oferta completa, este solamente un recetario, este es de unas tablas nutricionales, soporte WhatsApp, lista de compras, menús. Te lo voy a utilizar todos para poder ilustrar la página de ventas para dejarla bien bonita. Entonces voy a tocar aquí en la imagen, se me va a abrir la configuración al lado izquierdo, dice archivo de imagen, entonces le voy a hacer click ahí y voy a seleccionar un archivo de mi computadora. Y voy a seleccionar la imagen del producto principal, que sería un producto que se llama dieta de 18 días y lo voy a insertar. Yo aquí puedo hacerle click y le puedo colocar un tamaño mayor inclusive. Bueno, ahí ya está en el tamaño mayor que es 550, entonces lo vamos a dejar ahí. Voy a tocar aquí en la fila para que esta imagen me quede centrada, voy a hacerle click aquí donde dice centrar. El llamado a la acción ahí está muy bien y luego vamos entonces a seguir con esta página. Aquí lo que yo hice fue en vez de colocar la propuesta, la transformación como un título y luego el video de ventas, lo que estoy haciendo es colocando al lado izquierdo todo el texto y al lado derecho voy a colocar el mock-up o la información del producto. Luego vamos a colocar este producto es para ti. Si nos vamos a venir acá, vamos a eliminar estas imágenes de aquí que no me sirven para nada. Voy a eliminar esta fila, voy a venir aquí en texto, lo voy a arrastrar hasta acá. O lo otro que puedo hacer es que como ya tengo un texto con formato, le voy a dar click aquí en duplicar, lo voy a arrastrar. Esto luego en System.io que es simplemente arrastra y suelta, este aquí lo voy a eliminar y voy a pegar entonces el copy. Este producto es para ti si... Pero está al lado izquierdo, ¿cómo hago para centrarlo? Toco aquí en el texto y me voy en la alineación y le doy click en centrado. Luego tenemos aquí al lado izquierdo una lista de viñetas, yo la puedo arrastrar para acá y ya puedo copiar entonces todo esto. Si tienes F capacidades, si eres E persona, voy a hacerlo aquí rápidamente. Y para centrarlo, le voy a hacer click acá. Y para centrarlo, voy a hacer click en la lista de viñetas, me voy a ir aquí en margen y al lado izquierdo lo voy a aumentar para poderlo centrar un poco. Otra cosa que puedo hacer es venirme aquí donde dice diseños de columnas, colocar tres columnas aquí abajo y en la columna de la mitad colocar ahí los beneficios y esto lo corro a la izquierda y esto también lo corro a la izquierda. Hay muchas formas de hacer las páginas de System.io, pero yo aquí te estoy mostrando la forma como yo lo hago. Después de eso vamos a una parte que dice lo que dice de nosotros que básicamente son unos testimonios. Entonces vamos a duplicar este título, lo vamos a pasar aquí para abajo, vamos a crear una fila de tres columnas y en cada una de ellas vamos a colocar un video de YouTube. Vamos a colocar aquí el primero, luego aquí el segundo y luego aquí el tercero, que en este caso serían los testimonios de las personas. Y vamos a pegar lo que dicen de nosotros. Luego tenemos el primer botón que es el llamado a la acción. Podemos inclusive duplicar este botón y nos lo arrastramos para la parte de abajo. Lo arrastramos para acá y como el botón no está centrado, hacemos click en el botón y nos vamos para centrar. Inclusive podemos hacer muchas cosas, podemos aumentar el tamaño de la fuente y yo no quiero que ese botón sea de ese color verde, sino de color rojo y la letra de color blanca. Entonces, mira que ahí ya tenemos ese botón. Ahorita les vamos a poner nuestros links de afiliados, simplemente quiero que prestes atención de cómo se construye la página. Vamos a hacer click en el botón y en la parte de arriba le vamos a dar un pequeño margen para que se separe. Luego vamos a colocar la descripción de del producto, entonces vamos a colocar este título. Nuevamente duplicamos este título, lo arrastramos aquí abajo. Aquí veo que hay un mock-up a la izquierda y un texto a la derecha, entonces voy a seleccionar aquí donde dice dos columnas. Aquí al lado izquierdo voy a colocar una imagen y aquí al lado derecho voy a colocar un texto. De la imagen voy a utilizar un mock-up de los que yo te mostré ahorita, puede ser este de aquí, etiquetas nutricionales. Le doy click en insertar y aquí dice Masterclass X, o sea un título normal, entonces lo que voy a hacer es que voy a duplicar este título. Lo voy a colocar aquí arriba del texto y voy a colocarle aquí Master X. Para que todo eso me quede centrado, le hago click en este botoncito de acá. Y el mock-up siento que está muy grande, entonces vamos a disminuirle el tamaño. Cómo hay que hacer los demás, lo voy a hacer aquí rápidamente y ya te muestro que es exactamente la misma lógica. Quiero mostrarte cómo va quedando la página de ventas, aquí tenemos los testimonios, el llamado a la acción. Mira que aquí ya tenemos los mock-ups y la descripción, agregué el acceso al grupo VIP, que aquí en vez de acceso al grupo VIP era como un certificado, luego los bonos. Pues aquí agregué los bonos exclusivos y hasta ahí vamos. Hay algo que me está incomodando y que yo te recomiendo que también lo uses y es que utilices diferentes colores de fondo. Por ejemplo, que dice este producto es para ti, me gustaría más bien colocarle un color verde. Entonces voy a elegir aquí donde dice fila y dice fondo y le voy a dar un color de fondo, puede ser este verde. Mira, me parece que se ve supremamente bien. Aquí ya después un color rojo se ve muy bien y aquí donde dice acceso al grupo VIP también me gustaría colocarle un color verde. Mira, me parece que se ve supremamente bien. Inclusive aquí me pasó algo y es que hice acceso al grupo VIP, pero también los bonos me quedaron de color verde y la verdad eso no es lo que quiero hacer. Porque pasa eso porque lo tenemos en la misma sección. Entonces, mira que aquí hay una sección diferente, ¿qué voy a hacer yo? Voy a arrastrarme todo esto a esta sección de aquí abajo. Mira, te muestro cómo lo hacemos, voy a tocar aquí donde dice fila y aquí me lo arrastra aquí para abajo. Lo arrastro ahí para abajo, ahí quedo. Y lo mismo voy a hacer con esta fila de acá, hago click ahí y lo mismo para el título. Y mira, de esa forma, solamente me quedó el color verde el acceso al grupo VIP y los bonos exclusivos. Hay como una separación muy grande aquí entre bonos exclusivos, entonces voy a darle click aquí en la sección, voy a seleccionar el padding y arriba le voy a colocar por ahí un 10 nada más. Luego lo que sigue acá es la garantía de satisfacción. Para eso vamos a darle control C, vamos a duplicar este título y lo vamos a traer aquí abajo. Tu compra se encuentra respaldada por la garantía de satisfacción. Aquí tenemos dos secciones, entonces vamos a regresar aquí a los elementos y vamos a darle aquí donde dice dos columnas, al lado derecho vamos a colocar una imagen. Vamos a seleccionar esa imagen y ahí vamos a colocar el sello de garantía. Y le vamos a dar click en insertar. Luego aquí abajo vamos a colocar un texto, vamos a copiar todo este texto, vamos a darle control C y vamos a darle control V, que era prácticamente el mismo y luego sigue un botón. Ese botón prácticamente lo que yo voy a hacer es que lo voy a duplicar, voy a duplicarlo y me lo voy a llevar hasta abajo. Toca llevárselo así a poquiticos, mira, lo vamos arrastrando hasta que lleguemos aquí abajo. Recuerda que para centrar todo hacemos click en la fila, le damos click aquí en centrar, aquí en la imagen lo mismo, aparece la fila, le vamos a dar click en centrar, seleccionamos la imagen y vamos a cambiar el tamaño porque está muy grande. Bueno, acabo de ver que lo hice mal porque no, no se me colocó aquí en el bono número dos, entonces es muy sencillo, simplemente arrastro la fila aquí abajo. Voy a arrastrar esta para arriba o la otra para abajo y listo. Le voy a dar click aquí en fila y en la parte de arriba le voy a dar un espaciado por ahí de 49. Mira, básicamente ahí ya tenemos casi toda la página de ventas, yo lo que voy a hacer aquí para que el tutorial no sea tan largo, ya te mostré cómo funciona absolutamente todo. Voy a eliminar el restante que queda aquí de la página y vamos a dejarla hasta ahí. Digamos que tú ya podrías continuar aquí con la estructura que te estoy mostrando, colocar el botón que le hace falta, la recapitulación de todo el curso. Pero entonces vamos a dejarlo hasta ahí porque necesito mostrarte algo que es muy importante y es la responsividad. Mira, yo no sé si tú lo sabías, pero el 89% del tráfico de los productos digitales provienen de un dispositivo móvil. Entonces, yo te voy a dar aquí la recomendación y es que diseña tu página siempre así en el formato computador, pero necesito que le prestes atención al formato mobile, al formato celular y que ese quede mucho mejor aún. Si yo, por ejemplo, escondo la barra aquí de de la página, le voy a dar click aquí en guardar, le voy a dar aquí en el ojito para visualizar los cambios. Mira que nosotros ya tenemos una página 100% funcional para vender nuestro producto digital. Pero si hacemos click derecho y nos vamos a inspeccionar y revisamos la página en el celular, te vas a dar cuenta que hay algunas cositas que no cuadran muy bien. Eso cómo lo hacemos, vamos a regresar aquí al editor, vamos a desplegar la barra izquierda y mirate que aquí en la parte inferior aparece un dispositivo móvil. Vamos a hacerle click ahí en ese dispositivo. Y mira que aquí me apareció un texto que no me aparecía normalmente, mira que aquí hay un espacio, entonces yo qué voy a hacer? Voy a empezar a eliminar todas esas cosas que yo no las quiero aquí en el celular. El botón, por ejemplo, está pegado al mock-up, entonces le voy a hacer click en el botón y en el margen de abajo lo voy a separar un poquitico. También estoy notando que el botón no está centrado, entonces voy a hacer click ahí en el botón y voy a darle click aquí donde es centrado. Lo mejor de todo es que lo que tú hagas aquí no se va a modificar aquí en la versión de computador. Mira, no se ha modificado absolutamente nada, eso es lo que más me gusta de System.io. Aquí en la sección siento que ese espaciado de arriba no hace sentido, entonces vamos a dejarlo más o menos por aquí en 15 o 16. Aquí donde dicen de nosotros, vamos a darle un pequeño espaciado en la parte de arriba. Luego aquí en los testimonios están también todos pegados, nos vamos a ir aquí en margen, vamos a darle un pequeño espaciado de 15, voy a copiar el número y vamos a hacer eso en todos los videos. Margen, arriba, vamos a darle 15. El botón del llamado a la acción me parece que se ve super bien. Este mock-up está un poquito grande, entonces voy a dejarlo un poco más pequeño. Y también en la margen, en la parte de abajo lo voy a separar un poquitico del texto. Aquí está pasando algo y es que mira, tenemos el título, el mock-up, el subtítulo y el texto, pero aquí me apareció que el mock-up me aparece después del texto, entonces como que no hace sentido. ¿Cómo lo podemos arreglar? Vamos a darle click aquí donde dice fila y aquí en la parte eh, casi al final dice invertir el orden de las columnas en dispositivos móviles. Míralo ahí, entonces le voy a hacer click aquí y con esto seguimos la misma jerarquía. Aquí faltó que dice acceso al grupo VIP de WhatsApp. Este mock-up me parece que se ve muy bien, los demás me parece que están de buen tamaño, este recetario sí está un poquito grande, entonces vamos a cambiar el tamaño a la imagen. Este tu compra se encuentra respaldada por la garantía de satisfacción, vamos a ver por qué me aparece ahí. Sí, señor, justamente se me coló ese subtítulo ahí, entonces vamos a pasarlo aquí abajo. Mira, si yo hago una modificación, la hago primero en la versión computador y después en mobile. Aquí volvió a pasar exactamente lo mismo de las columnas, entonces ¿qué es lo que yo tengo que hacer? Dale click aquí donde dice fila. E invertirlo aquí en los dispositivos móviles para que aparezca primero el mock-up, después el título y después el texto. Lo mismo aquí, quiero entonces darle click aquí donde está esta fila y quiero cambiar o invertir para que me aparezca primero el sello. El sello de satisfacción está demasiado grande, vamos a colocarlo más pequeño. Este llamado a la acción no está centrado, vamos a darle click en centrar y mira, aquí ya tenemos una página super buena, vamos a darle click en guardar cambios. Una vez tengamos todos esos ajustes listos, le vamos a dar click donde dice guardar cambios. Volvemos a la versión de computador y mira que está exactamente igual. Es decir, que el tema de que la hagamos responsiva no se va a alterar aquí en la versión de computador. Nos queda faltando un último paso y es colocar nuestro link de afiliado aquí en todos los botones. Esta página tiene un botón, dos y tres botones porque el último está aquí en la garantía de satisfacción. Entonces yo ya estoy aquí entro de Hotmart, me vine aquí a productos, mis productos y me voy a meter a productos que soy un afiliado y voy a buscar ese que dice dieta de 18 días. Le voy a dar click aquí en los links de divulgación y mucho cuidado porque aquí lo que tenemos que hacer es copiar el link de la página de pago. No la página de ventas porque es la que estamos creando, entonces yo le voy a dar aquí donde dice checkout personalizado y le voy a dar click donde dice copiar link. Luego me vengo acá, llamado a la acción, ¿cuál es la acción que queremos? Abrir URL y le vamos a dar control V para pegar nuestro link de afiliado y a mí me gusta que se abra en una ventana nueva. Y voy a hacer exactamente lo mismo con los otros dos links, voy a pegar el link de la URL y que se abra en una ventana nueva. Y lo mismo aquí en el último link, link de afiliado de Hotmart y que se abra en una ventana nueva y le damos click donde dice guardar cambios. Vamos a darle click aquí donde dice vista previa o lo que es mejor aún, vamos a hacer lo siguiente, vamos a darle click aquí donde dice salir. Y mira, este es el link de tu página de ventas, donde dice ruta URL, solamente es que lo copies. Para que tú veas que todo lo que te estoy mostrando aquí es verdad y que realmente está funcionando, lo voy a abrir en una ventana incógnito para que tú mismo veas cómo queda la página. Mira, es una página de ventas que lo hicimos en un tutorial. Si yo la estuviera haciendo para mí, para mi producto, yo aquí me voy a tardar unas 4 o 5 horas de escoger otros colores, colocarle otras imágenes, el texto, o sea, hacer las cosas un poquito más minuciosas. Para que no hayan dudas de cómo queda en la versión de computador, te voy a mostrar cómo queda en el celular. Mira, aquí tenemos la página, es como lo que yo te digo, en el celular es donde se tiene que ver super bien. Aquí tenemos los testimonios, la página fue super rápida, es super responsiva, los mock-ups se ven super bien, la persona puede achiquitarlo, hacerle zoom. Y si hacemos click en el botón, fíjate lo que pasa, se abre una nueva ventana y nos va a enviar a la página de pago de Hotmart. Mira, esta es la página de pago del producto, aquí ya tiene mi link de afiliado. Todas las personas que compren aquí yo me voy a ganar el 50% y este producto adicional tiene dos order bump, o sea, que ahí voy a tener tres ventas si la persona compra todos los productos. Espero que este tutorial te ayude a construir tu página de ventas. Recuerda que aquí abajo te voy a dejar el link para que tú crees tu cuenta en System.io con el plan de por vida, inclusive la cuenta gratuita ya tienes para hacer cinco páginas de ventas. Te mostré absolutamente todo, mock-ups, estructura, cómo hacer la página responsiva, cómo modificar los textos, así que yo creo que este video merece un like, merece una suscripción al canal y nos vemos en un próximo video.