Transcripciones
1. Vamos a crear sitios web divertido con Canva: Hola a todos. Se trata de Ronny y en este curso, te
voy a mostrar paso cómo crear sencillos landing pages con Canva. En primer lugar, permítanme darles la bienvenida a nuestra casa. Aquí es donde Diana y yo vivimos en Sydney y me gustaría darle la bienvenida sinceramente dentro de nuestra sala de estar. hoy en este curso, te
voy a mostrar cómo usar Canva para crear sencillos landing pages para todos los proyectos. Verás que es una manera fácil de llegar a una página de aterrizaje rápida y sencilla o incluso mini sitio web para promocionar un curso en el que estás trabajando, un bootcamp en nuestro ejemplo, o cualquier proyecto comercial o incluso no-- proyecto comercial. Para quién es este curso? En su mayoría para cualquiera que necesite un sitio web, pero no necesariamente tiene todas las habilidades para crear un sitio web o tal vez no tenga el dinero para crear un sitio web, o incluso no tenga tiempo para crear un sitio web. Porque verás que con Canva puedes llegar a sitios web
muy sencillos y hermosos en poco tiempo, un par de horas. Te voy a pasar por un proyecto en particular, que es este sitio web que ves aquí que se ha creado para promocionar el Bootcamp RonDi, que es nuestro bootcamp con Diana, 10 cursos sobre Canva en dos meses. Este sitio web que acabas de ver se está creando con Canva en unas dos horas. Te voy a pasar por todos los pasos que han dado para crear este sitio web. Te mostraré exactamente cómo hacerlo para recrear este único sitio web en particular pero por supuesto, puedes aplicarlo a tu propio negocio. La primera vez que usé Canva para crear una página de aterrizaje o sitio web fue jugar realmente con la funcionalidad. Cuando se estrenó Canva 2.0 hace aproximadamente un año, tenían esta exportación como funcionalidad de sitio web, por lo que era algo nuevo en Canva. Por lo que de inmediato salté sobre esa característica y la probé. Intenté crear sitios web para promocionar un evento. Intenté crear sitio web para incluso promocionar los cursos que vendía en Udemy y en Skillshare. Esta fue mi primera experiencia y desde entonces he creado una buena media docena de sitios web y páginas de aterrizaje con Canva. Todas ellas han sido muy divertidas y son súper fáciles de crear básicamente igual que estás creando cualquier diseño con Canva. En la primera conferencia, vamos a repasar la estructuración básica de su sitio web. ¿ Cuántas páginas necesitas? ¿ Cuántas secciones de tu página web van a ser útiles para tus proyectos? Nos vamos a hacer cargo de todo esto, pero también elegir si estamos creando un sitio web que esté optimizado para móviles o para la experiencia de escritorio. Entonces en las siguientes conferencias vamos a sumergirnos en el diseño real de las diferentes secciones de tu sitio web para lograr la página de aterrizaje completa, la página web completa. Vamos a ir por la página de inicio, pero también la página que anuncia tu oferta luego el programa real del RonDi Bootcamp, porque este sitio web va a ser sobre promocionar nuestro bootcamp. Después la página final, que será una página con una llamada a la acción y botones
reales que se pueden hacer clics en tu página de destino. Si esto es algo que estás deseando aprender con nosotros hoy, te
invito a saltar a la siguiente conferencia.
2. Configuración de tu sitio web: Hola chicos, bienvenidos a la conferencia 1 de este curso sobre la creación de landing pages, vamos a empezar. Como pueden ver, ya tengo un documento aquí con el Rondi Boot Camp. Ya está creado, las páginas de aterrizaje ya aquí, lo han visto en la introducción así que voy a volver a mi página de inicio aquí en Canva, y voy a crear un nuevo documento y recrear todo este sitio web desde cero. Durante este curso vamos a estar recreando esta misma página de aterrizaje exacta desde cero para que puedas seguir paso a paso cómo la hice. Vamos, esta primera conferencia va a ser sobre configurar tu proyecto. Siempre que inicies una página de aterrizaje o un proyecto de mini sitio web con Canva, siempre
tienes que averiguar la estructura de ese sitio web. En primer lugar, necesitarás tomar una decisión importante porque lamentablemente Canva aún no tiene esta capacidad de respuesta completa cuando se trata de sitio web, eso significa que si creas un sitio web con el formato de presentación se verá muy bien en escritorio e ingresos en computadoras, en su laptop, pero podría no verse bien o no tan bien en un teléfono móvil porque no va a adaptar el tamaño de la pantalla. Esto es lo que llamamos en términos de página web y terminología responsividad no
modificará la relación de aspecto de tu pantalla para caber una pantalla más pequeña o una pantalla móvil. Este es un tema conocido en Canva, sabemos exactamente que esto está pasando y nuestros ingenieros realmente quieren mejorar la funcionalidad de la página web y sé de hecho que esto es una prioridad en Canva, pero por el momento no lo es aún posible tener sitio web totalmente receptivo. Tendrás que elegir y tomar una decisión importante al inicio de este proyecto entre, ¿queremos crear este sitio web para un uso móvil como móvil optimizado o queremos crearlo para una experiencia de escritorio? En mi caso, porque quiero crear junto con Diana este boot camp, queremos optimizar esto para la experiencia móvil porque sabemos
que muchos de ustedes van a tropezar a través de nuestras publicaciones en redes sociales, nuestro anuncio en redes sociales para este campamento de arranque desde sus teléfonos móviles. Para esto, lo primero que tenemos que hacer es seleccionar los doctypes adecuados para poder ir con una historia de Instagram, la relación de aspecto de 1080 por 1920. Pero porque Canva tiene algunas bonitas plantillas que son mobile primera presentación y sé que estoy consciente de que vamos a usar este doctype. Vamos a dar click en la primera presentación móvil aquí mismo, así que Canva va va a abrir este lienzo en blanco y la razón por la que quería este doctype sobre el doctype de la historia de Instagram es
que se ve aquí en el botón de plantilla diferente tipos de plantillas realmente bonitas, y ves estas plantillas 22 diapositivas, 18 Diapositiva 16 diapositivas, 16, etc Estas son mobile primera presentación así que si hago click en una, ya ves tenemos una serie de diapositivas diferentes, así que esto es va a ser muy útil para diseñar nuestro sitio web optimizado para móviles. El primero que tenemos que hacer es entender la estructura de nuestro proyecto, en nuestro caso con Diana, queremos promover el campamento de arranque Rondi. Queremos anunciar qué es, queremos mostrar el programa de este boot camp y queremos decirle a la gente cómo podrían entrar, como cómo pueden registrarse para el boot camp. Estas son las tres secciones principales, la primera es como una portada de libro si lo deseas, como la primera página del sitio web anunciando el título del boot camp y el subtítulo como el tagline, lo que es la bota vino sobre. En conjunto con algunos visuales fuertes representa nuestra marca. Segunda parte será el contenido del campamento de arranque así
al programa y luego finalmente cómo meterse dentro de estos campamentos de arranque. Ahora que tenemos estos fundamentos abajo, podemos empezar a cuidar el diseño real. Por hacer esto, te animo a que realmente te sumerjas en estas plantillas, verás que son muy interesantes. Estas son las primeras presentaciones móviles, estos son ciertos doctipos en Canva y se ven muy bonitas. En nuestro ejemplo para el Rondi Boot Camp, he estado usando esta plantilla en particular, la que dice el nombre de tu empresa, y que aquí luce morado y rojo. Si hacemos click en él, ves que lo que he estado haciendo, esta es la primera página donde necesito poner el título, etc. hago click en esto y tenemos esto y luego
por supuesto me removiré más tarde pero esto es solo la configuración de nuestros proyectos. A continuación, lo que tuve es una página similar a esta con diferentes bloques que representarán mis diferentes cursos que forman parte de la página web y esto, voy a duplicar tres veces porque tendremos 10 cursos en estos campamentos de arranque así 1 2 3 4, 1 2 3 4, 1 2 3 4 eso es 12, pero nos encargaremos de eso más adelante. Entonces por fin, tenemos una página final donde hacemos saber a la gente cómo y dónde pueden registrarse para el boot camp por lo que esta será una página la cual usará algún elemento de esta última diapositiva que acabo de agregar. Pero para ti, realmente depende de ti y de qué se trata tu proyecto. Cuál es el propósito de crear esta página
de aterrizaje, por supuesto así tendrás que encontrar la plantilla adecuada y si decides ir por una página web o página de destino la cual está optimizada para una experiencia de escritorio, tendrás que elegir una diferente tipo de documento. Déjame guardar esto, voy a darle un nombre así que esta es la creación de la página del campamento de arranque Rondi. Vamos a llamarlo así, está guardado. Voy a volver a la página de inicio de Canva para mostrarte muy rápidamente cómo debes iniciar este mismo proyecto exacto si optas la versión optimizada
para escritorio de tu página de destino. En lugar de elegir la presentación móvil, elegirás otro doctype, que es el doctype de presentación por lo que para esto simplemente puedes usar el carrusel aquí mismo y encontrar presentación, o por supuesto, puedes simplemente vaya a su página de inicio y escriba en presentación así y podrá iniciar una presentación en blanco. Lo que quería mostrarte es que manera similar la página de plantillas aquí mismo te mostrará un montón de plantillas diferentes que puedes usar. Por ejemplo, podrías crear como, veamos esta presentación creativa aquí mismo, tiene 15 diapositivas. Si haces click en él, podrías usar esto en lugar de lo que te
estaba mostrando como tu estructura, como tu base. Eso es todo para la conferencia 1, hemos configurado nuestros fundamentos, yo diría nuestra estructura para la página de aterrizaje. En la próxima conferencia, voy a empezar a diseñar y vamos a crear cada página, las tres secciones de nuestra página de aterrizaje, nos vemos ahí.
3. Diseño de tu sitio web (página de inicio): Chicos, bienvenidos a la Conferencia 2 de este curso donde vamos a empezar a diseñar nuestra página de aterrizaje. Vamos a ir de esto, lo que ven aquí, las diferentes páginas, que es básicamente la estructura que hemos establecido a esto, lo que el actual mini sitio web RonDi Boot Camp que he creado ayer. Estamos en el proceso de recrear esta página de aprendizaje para mostrarte paso a paso cómo se hizo. Vamos a dar click en nuestro proyecto que habíamos iniciado y ya verás, déjame cerrar esta pestaña, que aquí es donde lo dejamos, vale, en la conferencia anterior. Ahora, vamos a empezar a llenar la información con el título correcto, el subtítulo correcto, pero también a retocar este documento para que se vea como el color de nuestra empresa, nuestros colores de marca. En mi caso, tengo aquí, si hace clic en el botón de color aquí en Canva, he creado una marca kits junto con Diana para este proyecto específico, lo
llamamos equipo RonDi y hemos desarrollado una identidad visual para el equipo RonDi. Contamos con un kit de marca con colores, colores primarios, pero también colores secundarios y también hemos establecido nuestra tipografía para el equipo RonDiS. Se ven las fuentes de la marca, pieza sans, luego construyeron titulación negrita cursiva, y Montserrat. Estas tres fuentes forman parte de nuestra identidad visual, yo diría para este proyecto que llamamos equipo RonDi, por lo que el proyecto entre Diana e I. Canva te permite subir tu paleta de colores y subir tu fuente o crear un poco kit de tipografía para que tengas tus encabezados, subpartida y compañero, si sí tienes Canva pro. Si no tienes Canva pro, no
podrás personalizar estos elementos de tu identidad visual, pero simplemente puedes crear una guía rápida de estilo de marca exportada como PDF, quedarte con eso o puedes imprimirlo para que recuerdes, o simplemente puedes recordar simplemente qué tipografía estás usando, qué fuentes estás usando y los colores que estás usando. Pero siempre es bueno si tienes Canva pro, te
recomiendo encarecidamente crear tu kit de marca para que ahorres algo de tiempo mientras usas tus colores y fuentes básicamente. Para mí, vamos, vamos a empezar a ajustar estas plantillas que hemos estado importando desde las primeras presentaciones móviles con nuestros colores. Yo quiero que esto esté usando nuestro color rosa, este botón estará usando un color azul. Yo me quedaré con estos tres colores dominantes principales, diría. Porque estos son los colores que realmente queremos mostrar con nuestra marca, así que me voy a centrar en los colores principales,
los colores dominantes y voy a desagrupar todos los elementos de esta página. Voy a deshacerme de éste y éste va a estar usando mi fuente aquí mismo, que es peace sans, que es parte de mi identidad de marca. Voy a estar llamando a esto el Boot Camp Rondi. Este Rondi Boot Camp y esta segunda línea aquí mismo, va a abrir mi página ya terminada para asegurarme de que estoy usando exactamente las mismas frases, mantener la calma y aprender Canva. Voy a insertar eso, mantener la calma y aprender Canva. Por supuesto, voy a personalizar esto así que en realidad está usando una de mis fuentes de marca, Montserrat y va a ser todo gorras, y va a ser más grande también. Esto es 42, así 42, así, y voy a reducir la caja por lo que es aproximadamente del mismo tamaño de los otros textos aquí. Lo siguiente que voy a hacer es reducir ligeramente el espaciado entre estas diferentes palabras aquí mismo porque está demasiado extendido una línea de otra. Voy a usar el botón “Espaciado” aquí mismo y reducir esto a uno solo, perfecto. Este se ve bien. Entonces voy a copiar esto, duplicar este pequeño cuadro de texto aquí mismo, y cambiar el texto a simplemente eso. Puedo hacer esto un poco más pequeño así y lo
haremos negro así que usando mi negro aquí, que no es completamente negro. Pero voy a estar usando esto porque es parte de mi kit de marca. Lo vamos a poner aquí y esto, creo que era amarillo, así que lo haré amarillo. Esto, lo vamos a llevar al mismo negro. Esto es lo que tenemos. Vamos a asegurarnos de que también personalizamos esto, la fuente aquí. Toda fuente que vamos a estar utilizando en nuestro documento necesita
ser una de las fuentes que forman parte de nuestra identidad visual. Esto es súper importante si queremos mantener y mantener esa consistencia en nuestra marca. Necesitamos todo lo que ponemos ahí para estar absolutamente en la marca. Estarás notando en nuestra página de aterrizaje de Boot Camp que usamos muchos bitmojis. Tenemos a Diana y me tenemos igual que diferentes bitmojis. ¿ De dónde sacamos estos bitmojis, estos emojis de nosotros mismos? Bueno, hay una nueva funcionalidad en Canva, que es una app que puedes conectarte y la
encontrarás haciendo click en los tres puntos aquí mismo. Es la adición bitmoji aquí mismo, por lo que puedes agregar avatares bitmoji a tus diseños si conectas esto a tu Canva. No está conectada a esta única cuenta de Canva en particular que estoy usando para este tutorial, pero está conectada a mi cuenta principal. Te sugiero que lo conectes a tu cuenta y empieces a diseñar tu bitmoji. Tenemos todo un curso sobre esto en el Boot Camp, creo que es el curso número dos. Se puede referir a eso para entender plenamente cómo hacerlo. Pero una vez que hayas conectado tu bitmoji con tu Canva, puedes empezar a usar tus bitmojis. Para mí, en este caso en particular, es un poco diferente porque estoy usando no sólo mis bitmojis, sino también los bitmojis de Diana. Tenía que subir sus bitmojis a Canva así que tengo acceso a ellos. De la forma en que los voy a estar usando, voy a crear otra página aquí y eliminar todo lo que hay en ella. Haré clic en los bitmojis de Diana aquí, que básicamente es una carpeta que he creado con sus fotos. Pero lo que podrías hacer también, simplemente
puedes importar los diferentes bitmojis que necesitas. Pero en tu caso, lo que imagino es que no tendrás que conseguir el bitmoji de otra persona, simplemente
puedes usar el tuyo y para eso, solo tienes que dar click en los tres pequeños puntos aquí mismo, ve a “Bitmoji” y todos tus bitmojis estará ahí. Pero en mi caso, porque también estoy usando la de Diana, tuve que encontrar una solución para esto. El primero es aquel en el que saltamos del papel igual que estamos perforando el papel. Creo que éste estaba en algún lugar de aquí. Déjame ver. Esto es básicamente todos los bitmojis. Sí, es éste, así que me voy a deshacer de los otros. Siento esta solución,
pero esta es la única opción que tenía si quería usar bitmoji a dos personas. Lo mismo con el mío, va a estar pinchando aquí y encontrando este bitmoji y debería estar aquí en alguna parte. Oh no, borramos a Diana, así que tengo que volver y tengo que añadir otra página. Esto es un poco una solución alrededor del sistema. ¿ Este es el correcto? Probablemente. Sí, estoy aquí. Aquí lo puedo ver. Lo que voy a hacer, ponerlo en esta página, deshacerme del resto de estos así y puedo quedarme esta página para más adelante. Pero básicamente, quiero agarrar estos dos bitmojis, que voy a reducir un poco el tamaño. Ponlo en mi página principal aquí y asegúrate de que estén correctamente centrados y en la zona segura, así que algo así se ve bastante bien. Yo, soy un poco más grande que la Diana, así que puedo retocar un poco esto y voy a rotarlas un poco para más impacto. Esto se ve bastante bonito. Si vuelvo a mi página principal aquí mismo, se ve bastante parecido. Sí. Yo diría que tengo mi primera página abajo. Vamos a estar moviéndonos a la página número dos y ya saben qué chicos, me di cuenta que me olvidé en la primera conferencia de este curso agregar una sección importante a nuestra estructura aquí mismo. Si miramos el documento original es esta página aquí mismo, que es una página que explica de qué se trata el bootcamp. Olvidé agregar esto a nuestra estructura y fui directo al curso diferente y al programa bootcamp, que es la siguiente sección. Tendré que corregir eso y mostrarles dónde encontré esta inspiración. Voy a duplicar esta página aquí mismo. Deshazte de ese contenido y lo siento. Volviendo a mis plantillas. Encontrar el mismo set, que fue éste y sí. Esta es la página que he estado usando para esta sección aquí mismo. Perdón por eso. Pero está bien. Te llevo conmigo en el proceso de aprender a hacerlo y no siempre es un proceso sencillo. Hay un poco de ida y vuelta, pero también es interesante que veas mi proceso de diseño y flujo de trabajo de diseño. Por supuesto, vamos a ocuparnos de esta página. Esa es la siguiente página en la que tenemos que enfocarnos. Esta página. Si recuerdo correctamente, esta parte de aquí era amarilla y esta parte de aquí era el color azul. Este color azul, por supuesto, no
usamos esta ilustración, y también usamos este pequeño círculo aquí mismo, pero de una manera diferente. Vamos a desagrupar, no mantener el pequeño símbolo dentro de él, pero haremos algo así. El círculo necesita estar usando uno de nuestros colores y esta también necesita ser una de nuestras fuentes. Aquí ves las ventajas de tener tus kits de marca directamente dentro Canva porque básicamente trabajas más rápido. No tienes que ir a tus teléfonos escribiendo para Peace Sans o cualquier fuente que estés usando y lo mismo para el color aquí mismo. Simplemente puede hacer clic en el botón de color y utilizar uno de los colores preestablecidos aquí. De lo contrario, tendrías que ir al nuevo color y escribir el código Hex de tu color. Tener un kit de marca vale la pena porque te está ayudando a ahorrar tiempo básicamente. El título de esta página fue The Rondi Bootcamp, esto es 72 con un espaciado de uno. Con el propósito de ir más rápido, solo
voy a copiar esto y pegarlo aquí. Rondi Bootcamp, 72 con un espaciado de uno. Tenemos nuestro título aquí mismo, y creo que agregué aquí un pequeño cohete subiendo porque esto es lo que vas a estar haciendo si sigues este bootcamp, catapultarás tu negocio a otra dimensión. Vamos a buscar un elemento que sea un icono de cohete. Es así como lo busco, Rocket Icon y creo que utilicé este el cual es un elemento pagado. No tienes que usar elementos pagados si no quieres pagarlos. Por supuesto, Canva tiene muchas cosas lindas gratis. Pero para mí, este es el que creo que era más representativo y que el que quería usar y como tengo aquí algún crédito Canva que necesito usar, voy a estar usando este con el color blanco. Si quieres asegurarte de que esto esté perfectamente centrado, puedes acercar. Siempre puedes acercar zoom para trabajar en detalles. Esto se ve bastante bien. Voy a volver a mi 25 por ciento. Aquí de nuevo, tuve diferentes textos. Simplemente voy a copiar mis textos. Aquí es donde por supuesto tendrás que añadir tu propio texto. Entonces razón número uno, razón número dos. También voy a usar la misma propiedad. 58 y un espaciado de 1.2 y esto era todo gorras y el color era mi negro aquí, y la fuente por supuesto, es Peace Sans. Un pequeño truco aquí mismo que podemos hacer es que selecciones esa casilla, usas el botón de estilo de copia y das click en el otro texto justo aquí. Copia el atributo de esta línea específica de texto. Esto es bastante cool y creo que este texto también estaba alineado en el otro lado. De igual manera, voy a estar copiando mi copia aquí. Siempre es bueno, por supuesto, tener tu copia lista cuando diseñas con Canva para que no tengas que pasar demasiado tiempo creando tus textos sobre la marcha, pero ya está preparada de antemano. Este es mi texto y es 35, Montserrat, espaciado de 1.4. Voy a tener 35 años, Montserrat, un espaciado de 1.4. Es por supuesto negro. Ups, no audaz, negro, así. Esto se ve bien. Lo mismo. De igual manera, utilizaré el botón de estilo de copia, asegurándome de haber seleccionado los libros de texto correctos. Utilice el botón Copiar estilo y Copiar el estilo. Diez cursos de Canva en 60 días. Se puede escribir eso rápidamente. En 60 Días. Así y voy a agarrar este último trozo de texto aquí mismo para copiar aquí. Alinear eso similar a este título a la derecha. Ahora tenemos la estructura de la segunda página. Todo lo que necesito hacer es agregar mis dos visuales aquí mismo y estos también fueron bitmojis. Déjame mostrarte. Sí, estos eran estos dos bitmojis y los remetí con el logo de Canva en los ojos. Entonces hagámoslo. Reproducimos esto. Tenía que encontrar primero mis bitmojis. Por lo que necesito una página extra. Pero si sí tienes la App conectada, simplemente
puedes ir a tus tres pequeños puntos aquí mismo Morm y dar click en Bitmoji. Aquí porque estoy usando esto de una manera un poco especial. Tendré que encontrarlos y creo que están aquí. El que busco. Ahí vamos y nos deshacemos de estos. La de Diana. Yo estoy bien. Ella debe estar aquí. Ahí vamos. Tráelo aquí en la página principal y me desharé de éste. Creo que podemos reducir
ligeramente el tamaño de estos dos y me aseguraré de que estén bien. Voy a acercarme para ser más preciso. Yo las quiero, ves los hombros para estar donde empieza la parte amarilla. Perfecto. Volver a alejar el zoom a 25. Yo quiero asegurarme de que tenemos la misma distancia aquí entonces aquí. Esto es bastante bueno, pero tal vez pueda estar un poco más cerca. Al igual que esto y ahora de nuevo, centrando esto. Perfecto. Lo último que necesito hacer para personalizar esta página y reproducir esto. Ya ves que había un poco más pequeños aquí así que puedo reducir el tamaño un poco más. Lo importante es que estén centrados. Esto se ve bien. Voy a añadir el logo de Canva. Para esto puedes acudir a elementos y escribir en Canva. Lo primero que debería aparecer es tu logo de Canva. Por supuesto que necesitas hacerlo más pequeño y voy a acercar todo el camino hacia arriba. A lo mejor no demasiado grande. 200, sí. Para tener más precisión también puedo colapsar este panel aquí mismo. La idea era tener eso en los ojos y puedes empezar a posicionarlos y luego jugar con las flechas del teclado para terminar el posicionamiento. Una vez que tengo uno, simplemente duplico este elemento. Sé que es del mismo tamaño. Yo lo rotaré, lo posicionaré. Terminando con las flechas del teclado. Esto se ve bastante bien. Pasando a los ojos de Diana, otra vez, duplicando. A lo mejor puedo hacerlo un poco más pequeño así. Déjame dar click para ver. Sí, se ve decente y duplicar una vez más colocando el otro ojo, rota ligeramente. Ahora tenemos nuestras caras locas escupiendo arco iris porque estamos aprendiendo tanto sobre Canva. Bien. De acuerdo, puedo alejarme de nuevo a mis 25. ¿Sabes qué? Ronnie debería ser un poco más grande. Ah, se me olvidó un ojo. Asegurándome de seleccionar todo aquí. Puedo agrupar a Ronnie y puedo agrupar a Diana por separado. Ahora puedo hacer mi cara un poco más grande que la de Diana porque soy un poco más alta que ella. Eso se ve bien sigamos adelante y usemos esto. Puedo desagrupar esto también para pedir un poco más aquí y perfecto. Estoy contento con esta página. Podemos comparar con la página original. Ya ves que es bastante similar. Oh, noté que nos cambié, pero está bien. Podemos usar esto de todos modos. De acuerdo, así que vamos adelante. Voy a cortar esta conferencia aquí, y en la próxima conferencia seguiremos creando la página web. Te veo ahí.
4. Diseño de tu sitio web (Ofer): Chicos bienvenidos de nuevo. Se trata de la conferencia 3, y seguimos diseñando nuestra página de aterrizaje. Hasta el momento tenemos la primera página, que es como la página de inicio, donde tenemos nuestro título, y la proposición de valor, el tagline, si así lo deseas. Después tenemos nuestra página de presentación. ¿ Qué es el Bootcamp Rondi? Diez cursos de canva en 60 días. Esto es un poco de introducción de lo que es el Bootcamp. Ahora, vamos a abordar la carne de esta página web, que es el programa Bootcamp. Déjame volver a la página de aterrizaje original que ya he creado. Estas son las tres páginas, una, dos, y tres que en realidad son el programa Bootcamp. Vamos a reproducir esto en esta conferencia. En la última conferencia, voy a abordar el diseño de tu última página, que es cómo iniciar el Bootcamp. Ya verás que esto incluye diferentes elementos como un video,
un llamado a la acción y una pegatina. Por ahora, centrémonos en esta conferencia; el programa Bootcamp. Volver a nuestro original proyecto en curso pendiente aquí mismo, la reproducción de todo esto. Yo había derrumbado el panel lateral izquierdo en la conferencia anterior. Voy a reabrirla simplemente haciendo clic en cualquier parte negra, hice clic en el texto, pero puedo estar en mi página de plantillas, por ejemplo. Hemos utilizado de la plantilla aquí, la presentación, las plantillas de primera presentación móviles en Canvas. Hemos utilizado esta página aquí mismo para crear la estructura de esta página. Empecemos por retocar el título. Este va a ser Bootcamp, si tengo razón, programa. Déjame asegurarme de programa Bootcamp en tres líneas, Programa
Boot Camp. Deshazte de este pequeñito aquí mismo. Tenemos un Bitmoji de Diana. El primero que quiero hacer es
simplemente, al igual que las otras páginas,
agregar los colores de mi marca, así que hazlo en marca si así lo deseas. Tengo el fondo, que es el color amarillo, este color. Esto, que es mi color negro en sonidos de paz. Esa ya es la fuente correcta, y entonces creo que empezamos con azul aquí. Empezamos con la caja azul y luego
tenemos una rosa y luego otra vez azul, y así, simplemente alternamos el azul y el rosa. Voy a volcar este, estos dos por ahora y simplemente copiar esto para que sea más fácil, y déjame revisar la página 2 aquí mismo. Empiezo con el azul. Entonces tendré la última página, que son sólo dos, y volveremos a esto más adelante. Lo que voy a hacer ahora es agregar el bitmoji aquí mismo, el que tiene el lápiz y el que tiene los libros al final de la página 2. Añadamos todos estos bitmojis. Para esto, de nuevo para
ti, solo tienes que dar click en la sección más aquí, bitmoji y encuentras todos tus bitmoji ahí. Pero para mí, porque tuve que usar dos personas bitmoji, necesito volver a mi carpeta donde las almacené, así que voy a crear una página en blanco, que es ésta. Deshazte del fondo para que no te confundas en qué página es esta, y encuentra el bitmoji de Diana con el lápiz. ¿Dónde estaría eso? Probablemente sea la serie one. Lo puedo ver aquí mismo. Este, perfecto, así que hago esto más pequeño, trae eso aquí. Creo que es un poco más grande y lo volteé. Cuando se selecciona, se puede utilizar el botón flip y voltear horizontalmente así. Puede volver atrás y ver. Empecé con un rosa en realidad aquí. Esto no es gran cosa, puede continuar con el azul, no es gran cosa. Simplemente voy a acercar un poco y en 25 para asegurarse de que sus pies realmente toquen la forma azul justo aquí, así que esto se ve bien. Volver a 25, por lo que tenemos programa bootcamp. Tenemos el bitmoji de Diana aquí, lo cual es bueno. También puedo asegurarme de que estoy usando las zonas seguras. Esto sería como probablemente aquí, se ve bien. Estaré usando el que tiene los libros aquí mismo, pero puedes usar realmente cualquier bitmoji que te guste. Esto depende realmente de ti. Tráela aquí abajo, y además voy a voltearla así, hacerla más pequeña. No la acercaré demasiado al borde aquí del documento porque dependiendo del teléfono que la gente esté usando, pueden tener un ligero recorte en la resolución de su pantalla aplicará un cultivo diferente. No quiero acercarme demasiado al borde en ninguna dirección, básicamente. Esto se ve bien. El último bit que necesito es esta parte aquí mismo donde
ambos estamos repartiendo el trofeo porque tú lo has hecho todo el camino a todos los cursos. Déjame mostrarte en el original,
éste donde ambos estamos aquí sosteniendo el trofeo. Yo también voy a encontrar a estos grandes emojis. Eliminé la página para que agregue otra página. Hazlo blanco. Para ti, solo
se trata de encontrar el bitmoji correcto o lo que sea. Ya sabes, realmente puedes crear tu sitio web. Decidí ir con bitmojis por el estilo de estos sitios web en particular. Pero realmente puedes jugar con cualquier foto que te guste, lo que sea que te guste. Esto depende realmente del todo de ti. Voy a estar usando este de aquí. Yo creo que éste es el uno. Elimina todo lo demás. Ponlo aquí por ahora. Ve a los bitmojis de Diana, encuentra el mismo, lo puedes ver aquí de fondo. Tráelo aquí, y puedo deshacerme de esto. De la forma en que hice esto, seleccionarlos a ambos y hacerlos más grandes, eso es lo primero, así que corre esto aquí, entonces como aquí, por
supuesto necesita voltearse así. Tan solo necesitas llevarlos al tamaño correcto, por lo que podría ser algo así y correr un poco más grande o el otro tal vez un poco más pequeño como este. Esto se ve bien. Lo último que hice es encontrar un trofeo. Fui a mi sección de elementos y mecanografié trofeo. Simplemente agarré este trofeo. Esto se ve bastante bien, puede bajarlo un poco, esto funcionará. Tenemos nuestro bitmoji está todo listo. Ahora voy a acelerar el video mientras retoque todos los textos aquí. Sé que no necesitas ver que realmente va a depender de la copia que vas a estar usando. Para efectos de que este video no sea demasiado aburrido, solo
voy a copiar y pegar todos los textos que tengo aquí y acelerar el video. Te veré cuando termine con esto. Terminé de copiar o mis textos en las casillas correctas. Aquí es donde estamos ahora mismo. Detendré por ahora esta conferencia aquí, y en la siguiente, nos vamos a centrar en la última página de nuestra página de aterrizaje, que es la página que incluye el video, el llamado a la acción, y el flechas pequeñas aquí mismo. Te veré en la próxima conferencia.
5. Diseño de tu sitio web (llamada a la acción): Oigan chicos. Bienvenido a la última conferencia de diseño de este curso donde vamos a terminar nuestra página de aterrizaje y ver cómo todo cobra vida. Esta es la página que vamos a diseñar. Esto tiene un título, una pegatina, video
incrustado en YouTube y un llamado a la acción con otra pegatina aquí para atraer la atención de la gente. Vamos a diseñar esta página. Nos vamos a deshacer de este visual, configurar nuestro color base como el color rosa. Todo esto, voy a desagrupar este texto. probablemente mueve esto hacia arriba por ahora, deshazte de las partes más pequeñas y esta va a ser del mismo estilo que esta parte de aquí. Voy a hacer clic en esto, usar el botón Copiar estilo, desplácese hacia abajo y haga clic en mi texto “Contáctenos”. Yo quiero que esto sea todo gorras. Es todo gorras, perfecto. No va a ser Contáctanos, pero va a decir Cómo iniciar el boot camp, y esa es una pregunta así que necesito un signo de interrogación. Setenta y dos, esto es 75. Necesito que sea 72 y blanco. Elegir el color, blanco. ¿ Cómo iniciar el campamento de botas? Esto viene todo el camino hacia arriba. A continuación, ¿qué tenemos aquí? Tenemos un video aquí con un poco de sombra detrás de él. Esta sombra es en realidad otro tono de este rosa y es sólo una forma que puse detrás de ella. Este que verás tiene esquinas redondeadas, así que vamos a deshacernos de éste y añadir un rectángulo adecuado. Ya ves Canva propone este color así que no
miré mucho más allá y estaba usando este color que Canva estaba sugiriendo. Cómo iniciar el boot camp, entonces tenemos esta sombra para detrás mi video así que todo lo que necesito hacer ahora es buscar el video. Vamos a buscar ese video e incrustar un video en Canva. Déjame mostrarte cómo podemos incrustar videos en Canva. Para esto, haces click en el pequeño botón “Más” justo aquí y ves que tienes una app de YouTube en la sección App de Canva justo aquí. Esto está disponible para todos los usuarios, por lo que los usuarios libres y pro por igual tendrán esta extensión, esta app. Puedes hacer clic aquí y puedes navegar por YouTube y elegir un video, o si tienes la URL en particular para un video tuyo en particular, puedes escribirlo aquí. Si no tienes videos en YouTube, también
puedes incrustar videos de diferentes plataformas. Si haces clic en el plus aquí, puedes incrustar cosas desde Instagram. Podría ser una publicación de Instagram, podría ser una publicación de Facebook desde tu página, desde tu cuenta personal. Podría ser también un embed directo aquí desde todas estas diferentes plataformas. Hay una amplia variedad de cosas que puedes incrustar en Canva. Para mí, voy a volver a YouTube. Oops, éste no. Yo estaba en el Embed, pero voy a volver a la sección más justo aquí, en la sección Apps e ir a YouTube. Porque conozco exactamente la URL de este video en particular, esa es la que voy a estar usando. Para esto, es mi video de SkillShare Free for 2 Meses. Puedes escribir eso aquí, solo una búsqueda regular en YouTube y ver si surge. Sí, sí surge así que eso es perfecto. Voy a estirar que no quepa mi caja porque la caja necesita encajar el video en realidad. Yo me aseguro de que esté centrado. Ahora, todo lo que necesito hacer es seleccionar el rectángulo detrás él y hacerlo en la forma correcta. También puedo moverlo. Tiene que ser un poco más grande. Voy a acercarme para ver realmente lo que estoy haciendo. Deshacerse de este panel y tener un borde parejo alrededor de este video para que se vea genial. Eso se ve bastante bien. Yo diría que es bastante parejo así que puedo alejarme al 25 por ciento. ¿Qué significa eso? Bueno, significa que cuando la gente haga clic en la página web porque vamos a exportar todo este proyecto como sitio web. Para esto, iremos con el botón Presente aquí mismo. Ya ves, harás click en la flecha que hay junto a ella y luego tienes la opción de exportar como sitio web. Debido a que vamos a compartir esta página de aterrizaje como sitio web, vamos a compartir URL en la que otras personas pueden hacer clic. Esto en realidad se va a hacer clic en esta URL final, esta versión final de la página de aterrizaje para que la gente pueda ver este video de YouTube directamente desde tu página de destino. Eso va a ser muy guay. ¿ Qué más tenía en esta página? Sí, teníamos el gran botón Llamar a la acción. Para esto, simplemente volví a mi página de inicio y copié este Llamado a la acción. Eso puedes agruparlo y simplemente lo copiaré. Voy a ir con el botón derecho, copiar, desplazarme hacia atrás a mi última página, hacer clic derecho, pegar. Ahora, lo tenemos. Voy a traerlo de vuelta hasta aquí, y necesito centrar esto un poco mejor. En realidad es seleccionar todo. Yo lo puedo hacer para que se vea más en medio de todo así. Perfecto,. Para cambiar el color de esta caja a amarillo y el color de los textos. Déjame traer de vuelta mi banner de sitio aquí. Voy a desagrupar por ahora, seleccionar mi texto y tener el color negro para el máximo contraste. Hice un par de retoques más a esto. Creo que hice esto primero audaz y aquí también. Voy a desagrupar por ahora y voy a negrita este texto. Estos dos botones van exactamente al mismo enlace, van a mi habilidad share pruebas gratuitas para que gente pueda realmente iniciar el campo de arranque porque esta prueba en la cuota de habilidad, que es donde quiero llevar a la gente. Pasemos un poco de tiempo explicando eso, un 100 por ciento para que entiendas lo que estoy haciendo. El punto de Diana y yo para crear este campamento de botas es doble. Queremos ofrecerles chicos una serie de 10 cursos sobre Canvas, para que realmente puedan crecer sus habilidades como diseñador de lona y aprender porque tienen todo este tiempo frente a
ustedes, pueden tomarlo para aprender nuevas habilidades. Entonces ese es el primer objetivo, y el segundo objetivo por supuesto, es que generemos algún tipo de ingreso. Pero nos dimos cuenta, no todo el mundo está listo para pagar por el contenido ahora mismo en esta etapa. Tenemos este lindo trato con Skill Share. Contamos con este enlace de afiliación, este enlace de referencia, donde toda persona que se inscriba con nuestro enlace a participación de
habilidad puede beneficiarse de cuota de habilidad gratis durante dos meses. Entonces pensamos, ¿por qué no creamos una serie de diez cursos que la gente puede seguir en menos de 60 días para que puedan completar todo el boot camp durante su prueba gratuita. Si quieren continuar Skillshare, perfecto, simplemente no pueden hacer nada, y luego su tarjeta de crédito o su cuenta PayPal se cobraría después de 60 días o si quieren detenerlo ahí y han completado el boot camp, simplemente pueden detener su membresía antes de que se cobre su tarjeta de crédito o su cuenta PayPal. Por lo que es un trato bastante dulce porque realmente puedes beneficiarte de todos estos cursos de forma gratuita si los tomas durante la prueba gratuita. Entonces eso es lo que teníamos en mente, y luego el camino para que esto funcione, tenemos que dejarlo muy claro. Por eso hemos creado este video explicando cómo funciona. Entonces es básicamente lo que te acabo de decir es un resumen de cómo funciona. Se trata de un enlace de referencia gratuito, puedes probar skill share gratis durante dos meses para que puedas tomar todos nuestros cursos, pero también todos los otros 25 mil cursos en la plataforma. No tienes que limitarte solo a nuestros cursos, pero para este boot camp, hemos establecido diez cursos muy prácticos de Lona al igual que este para ti. En Skill share, aprenderás básicamente todo lo que está aquí en estas páginas para que puedas ver el programa. Si quieres iniciar esto, simplemente
puedes hacer click aquí y verás que te llevará a este enlace de referencia sobre la participación de habilidades. Verás la página de aterrizaje. Voy a llegar a esto en un momento, pero para que entiendas de qué se trata esta última página de mi oferta. Cómo creo esta página de aterrizaje y por qué tengo estos botones. Dos cosas aquí en esta página, el número 1, el video informativo que te explica, a la gente, ¿qué es este trato? ¿ Cómo consigo este campamento de arranque? Entonces el video explica eso, explica
lo que acabo de contarles sobre los dos meses libres en cuota de habilidad. Entonces el botón que está aquí y en la primera página, la página principal, este botón en realidad va a llevar al mismo enlace que este botón. Este va a ser el enlace de referencia real para Skillshare. Entonces pegaré ese enlace en ese botón, ya está aquí, creo. Ya ves, si hago clic en el enlace, verás creé un bit.ly, sé de dónde viene este tráfico, pero este es en realidad mi Skillshare prueba gratuita de dos meses, voy a copiar esto y voy a pegar esto aquí. Pero antes de empezar pegándolo en el primer, botón de la
página de inicio, reagruparé este seleccionado. Por lo que te aseguras de seleccionar tus botones y luego añades un enlace simplemente así. Toda esta parte aquí mismo, los textos y la caja, podremos hacer clic en tu versión exportada final de esta página de aterrizaje. Voy a llegar a esto en la última conferencia del curso. Ahora todo lo que tenemos que hacer es agregar estas dos pegatinas a las flechas pequeñas de aquí y el pequeño fuego y el dedo tocando en este icono de botón. ¿ Dónde encontré estos? Voy a mis elementos y puedo teclear flechas de pegatina, y luego Lienzo abrirá todas las pegatinas y las flechas en movimiento. Puedes usar lo que quieras pero yo uso algo como esto, solo en un color diferente. Creo que fueron estos, déjame revisar dos veces. Tres flechas, moviéndose de una manera loca, creo que estas. Afortunadamente por ahora no puedes cambiar el color de tus pegatinas. Entonces estoy encontrando uno que funcione con el resto de mis colores aquí mismo. Entonces esta estará bien, creo que
utilicé la palabra clave Tap. Encontrar el del fuego, fue éste, haciendo clic en mi página usando esto y haciéndolo más pequeño así, creo, es más grande. Se ve bien ahora, déjame ver, en realidad
es un poco más grande. Siempre es bueno tener un fuego más grande. Creo que estamos más o menos aquí, déjame ver. Creo que podemos hacer que estos textos sean más grandes y este texto no dice que empiece, pero insértese ahora. Lo moveré ligeramente así y moveré ligeramente el fuego al revés, así. Déjame dar un paso atrás y ver, esto podría estar un poco más centrado. Inscribirse ahora tenemos el fuego, necesitamos agrupar todo esto y añadir el enlace aquí también. Entonces pegando mi enlace, perfecto. Entonces creo que todos estamos bien con esta página de aterrizaje. Lo último que necesito hacer es probar todo, voy a hacer esto en la próxima conferencia, aguantar chicos, estamos casi al final de este proyecto de página de aprendizaje. Estoy orgulloso de ti por estar aquí y por seguirte. En la próxima conferencia, te voy a mostrar cómo exportar este sitio web y para realmente mostrarte que todo es clicable, también
voy a probar esto desde mi celular.. Manténgase atentos para la próxima conferencia.
6. Exportar el sitio web y probarlo: Oigan chicos, bienvenidos de nuevo al curso. Esta es la última conferencia absoluta y esta va a ser una corta. Te voy a mostrar cómo exportar esto en una página web, y luego vamos a probar esto con un teléfono móvil para ver cómo se ve todo en un teléfono móvil. De la forma en que exporta tu sitio web, puedes asegurarte de tener todas tus páginas, podemos usar la página de vista
así, para que puedas ver todas tus páginas establecidas. Esto se ve bastante cool, muy de marca. Se puede ver todo usando mi tipografía, pero también los colores de mi marca. Todo se ve super cool, super agradable, y ese es el resultado por el que debes esforzarte. Necesitas tener algo muy de marca. Un par de pistas y consejos para llegar. Tener una guía de estilo de marca. Si no tienes una guía de estilo de marca, creo que hay un curso completo sobre esto en mi perfil de habilidadcompartir, por lo que puedes buscar ahí y encontrar la sección sobre usar y crear tu guía de estilo de marca con Canva. No te arrepentirás porque esta es la base de muchos proyectos. Entonces, una vez que tengas tu guía de estilo de marca, solo utilízala a fondo. Úsalo realmente, asegúrate de que cada fuente que traigas, cada color que utilices, sea algo de tu kit de marca. También puedes ir más rápido si tienes una cuenta Canva pro, simplemente
creando tu kit de marca, que no tengas que escribir cada código hexadecimal de color o cada nombre de fuente cada vez. Voy a cerrar esta vista de varias páginas y voy a exportarla. Como decía, irás a la flecha pequeña aquí
mismo en la esquina superior derecha de tu pantalla, y buscarás sitio web. Da click en página web y verás que tienes diferentes estilos. El estilo web está aquí, tienes presentaciones, desplazamiento, navegación clásica, y te animo a jugar aquí con diferentes estilos web, pero voy a ir con el desplazamiento. Voy a ir con desplazamiento, y puedo pagar y abrir el sitio web porque tengo un elemento pagado, puedo ver cuál es. Es nuestro pequeño cohete aquí mismo, que está bien. Voy a pagar por esto y descargar el sitio web. Pagar y descargar. Yo he pagado por este elemento de $1 y ahora, genial, su pago fue exitoso. Puedo copiar el enlace de mi sitio web y puedo abrir el sitio web. Yo sólo voy a abrir la página web. Está abriendo mi página web. Sólo ten en cuenta, que como te estaba diciendo, esto no está optimizado para una experiencia de escritorio sin embargo. Todo estará bastante centrado aquí en medio de mi pantalla de escritorio porque estoy grabando esto desde mi escritorio, pero no se ve mal. Es solo que no está optimizado para un escritorio. Debería estar extendiéndose por toda la página y no así, centrado todo en el medio, pequeño en el medio. Pero ahora, y esta es la parte interesante, vamos a ir a cambiar a mi vista móvil. Voy a estar grabando la pantalla de mi iPhone y verás la diferencia aquí mismo. Déjame cerrar esto, y te estaré mostrando cómo se ve desde una vista móvil. El primero que tengo que hacer es compartir el enlace
al sitio web para que pueda acceder a esto a través de mi teléfono. Para esto, voy a volver a esta pequeña flecha aquí mismo, página web. Puedo abrir el sitio web así, y simplemente puedo copiar esta URL aquí mismo. Tendré que enviarme eso a mí mismo. Voy a estar usando messenger, mandarme un mensaje. Voy a pegar esto, enviármelo a mí mismo, y ahora puedo agarrarlo de mi teléfono. Este es el enlace. Se va a abrir la página web. Bien. Se puede ver aquí, cómo se ve el sitio web, y se puede ver que se ve bastante bien en un móvil en realidad. Se ve muy bien en realidad. Ya ves que todo está en la dimensión correcta, las pegatinas están funcionando, el video también está funcionando. Puedo detenerlo, puedo cerrarlo, y los enlaces, esto es lo más importante, están funcionando. Ronny te invita a probar habilisshare premium, gratis por dos meses. Ahí tienes, tienes todos tus enlaces trabajando. También puedo por supuesto volver a la primera página, eso empieza. Haga clic en este, y esto también está funcionando. Todos los enlaces están funcionando, los botones están funcionando, y todo está realmente optimizado para tu experiencia móvil. Esto es lo que quería mostrarles chicos. Creo que hemos llegado al final de este curso. Es así como creas tus proyectos de landing page con Canva. Se puede ver que se ven hermosas. Fue bastante fácil de crear. Probablemente te hubiera llevado un par de días crear un sitio web real con esta oferta, pero con Canva puedes hacer esto en un par de horas. Espero que este curso haya sido útil, que disfrutes haciéndolo, y en la siguiente, última conferencia, te voy a explicar el proyecto. Te sugiero que vayas ahí, pero probablemente lo hubieras adivinado. Se tratará de crear tu propia página de aterrizaje. Te veré ahí.
7. Proyecto del curso: Chicos, lo lograron hasta el final de este curso. Gracias por ver hasta ahora, hasta ahora. este momento, ya es hora de que te pongas bajo el foco de atención y nos gustaría ver tu proyecto o tu página de aterrizaje. El proyecto de este curso es muy directo. Me gustaría que crearas un mini sitio web o página de aterrizaje con Canva. Puedes decidir elegir el formato de presentación o el formato móvil, realmente
depende de ti. Pero lo que me gustaría ver es que publiques la URL de
tu sitio web de Canva en la sección de proyectos para que nosotros descubramos tu sitio web. Buena suerte a todos y nos comprometimos a dar un feedback a cada persona que publique sus sitios web. Disfruté enseñándote esta clase. Espero que haya disfrutado tomando la clase con nosotros. Para aquellos de ustedes que se preguntan, ¿qué es este campamento de botines redondos y a dónde puedo llevarlo? Al igual que me has visto construyendo esta página de aterrizaje, pero en realidad no sabes dónde hacer clic para entrar, bueno, dejaré un enlace con este sitio web en la descripción del curso para que realmente puedas experimentar el sitio web tú mismo, en su móvil, y en su computadora de escritorio. Si estás interesado en tomar el curso, solo tienes que dar click en el botón Llamar a la Acción. Eso es todo para mí, te veo en el próximo curso.
Ronny Hermosa, Your Go-To Canva Guru
