Diseño de sitios web con Canva: aprende a diseñar un sitio web en menos de una hora

1. Introducción: Hola a todos, bienvenidos a mi sitio web de diseño usando códigos Amba. Y en este curso, te enseñaré a diseñar sitios web sin escribir una sola línea de código. Sí, puedes diseñar sitios web, especialmente sitios web más simples utilizando herramientas como ABA, que no requieren que escribas una sola línea de código. Y en este curso, aprenderás a diseñar sitios web como sitios web personales o incluso almacenar fondos. Y lo harás sin escribir una sola línea de código. Y en este curso, aprenderás a crear diferentes páginas web y diseñar el sitio web de entrevistas de usuario, pero hace que tu sitio web atractivo para quienes están visitando tu sitio web. También aprenderá a agregar navegación entre páginas web para que las personas que estén visitando sus sitios web puedan pasar de una parte de su sitio web a otra entre páginas web de una sección a otra. También aprenderá a agregar Logos y formularios de suscripción a sus páginas web. Y por formularios de suscripción me refiero formularios utilizados para recopilar direcciones de correo electrónico. Te mostraré cómo integrar los formularios de Google con tu sitio web. También aprenderá a agregar enlaces externos a su sitio web. Los enlaces externos pueden llevar a los visitantes a su sitio web, al frente de su tienda, o a su tienda de Amazon o a su tienda de Facebook, o a algún otro lugar donde tenga contenido almacenado, y le mostraré cómo agregar estos enlaces a su sitio web. Y Básicamente, lo que aprenderás en este curso es cómo crear múltiples páginas web y combinarlas en tu sitio web y organizar tus contenidos manera que haga que tu sitio web sea atractivo para quienes están visitando tu sitio web. Dominarás los principios de diseño web, y eso te permitirá hacer tu sitio web destaque y se vuelva atractivo. Y al final de este curso, podrás crear sitios web de manera rápida y eficiente utilizando herramientas simples como Canva Y también te beneficiarás de usar CanVa porque Canva te ayudará a ahorrar tiempo y tiene una interfaz fácil de usar que te permitirá crear grandes Y así, antes de concluir, diré, lleve su presencia en línea al siguiente nivel y lleve sus habilidades de diseño de sitios web al siguiente nivel usando este curso y entremos y aprendamos 2. Acceso a Canva: Hola a todos, bienvenidos a una nueva conferencia en el diseño del sitio web usando el curso de Canva, y en la conferencia de hoy, voy a mostrar cómo pueden acceder a Canva Y para hacer eso. Tienes que ir a Google, y luego tienes que buscar Canva, CA N VA Haga clic en Entrar y el primer resultado de búsqueda que obtiene es Canva Es una herramienta muy popular. Se utiliza para muchas cosas diferentes que abarcan diseño gráfico, diseño portada de libro, etcétera, etcétera También puede usarlo para el diseño de sitios web, interfaz de usuario y experiencia de usuario. Así que adelante y regístrate o inicia sesión si ya tienes una cuenta, y para registrarte, puedes iniciar sesión a través de Google, Facebook, correo electrónico, o puedes registrarte con tu correo electrónico. Adelante, hazlo y en la próxima conferencia, te mostraré de qué se trata Canva. Muchas gracias. 3. Guía completa de Canva: Oigan, todos. Bienvenido a una nueva conferencia en el diseño del sitio web utilizando el curso Canva Y hoy, voy a mostrarles los alrededores del ecosistema Canva Entonces por aquí, como puedes ver, tienes la landing page de Canva, y tienes diferentes opciones para diferentes tipos de diseños Puedes diseñar documentos, puedes diseñar pizarras blancas, presentaciones, redes sociales, videos, sitios web de productos impresos y mucho más, incluido Logo, etcétera En el lado izquierdo, tienes un menú que tiene home y home es la landing page que estás viendo ahora mismo, entonces puedes acceder a tus proyectos haciendo clic en los proyectos, todos tus proyectos anteriores. Puedes acceder a él haciendo clic en proyectos. Entonces puedes hacer click en plantillas, y Canva te recomendará algunas plantillas para diferentes tipos de diseños gráficos o diferentes tipos de elementos, como para negocios, para redes sociales, para video para marketing, tarjeta impresa personalizada, educación de invitación Entonces, para los negocios, tienes un montón de plantillas, incluyen tarjetas de presentación, pizarra, presentaciones, documentos, negocios, y tienes un montón de plantillas diferentes para publicaciones en redes sociales, incluidas publicaciones de Facebook, publicaciones de Instagram, etc. Y luego tienes plantillas para otras cosas también, como video, marketing, impresiones personalizadas, etcétera Entonces obtienes muchas opciones diferentes en Canva, para diseñar diferentes tipos de cosas y diferentes tipos de elementos, lo que abarca una variedad de áreas diferentes como redes sociales, video, podcast, etcétera Puedes diseñar muchas portadas, muchas publicaciones en redes sociales usando Canva Y luego tienes las aplicaciones que tiene Canva, y Canva tiene algunas aplicaciones diferentes La mayoría de estas aplicaciones son aplicaciones pagas o necesitas una suscripción a Canva pro para ellas. Entonces tu texto a imagen, que es una herramienta de IA, tus marcadores, DID, presentadores, etcétera Entonces te dejaré averiguar a qué diferentes tipos de aplicaciones puedes poner Canva Y por aquí, tienes la barra de búsqueda. Y en la barra de búsqueda, vamos a escribir sitios web y Canva y hacer clic en plantillas, y Canva me dará una lista de opciones en las que voy a hacer clic en sitios web, y Canva ahora va a recomendar algunas Por ejemplo, por aquí, tienes el diseño negro, simple. Tienes el diseño amarillo, colorido. Tienes el blanco y negro, salida de diseño simple tenemos un montón de plantillas diferentes, y puedes usar una de estas plantillas como base para tu sitio web. Así que vamos a elegir una plantilla sencilla. Y digamos que estaremos diseñando un sitio web para un autor. Entonces Una autora vende libros en Amazon, y tiene un sitio web que tiene detalles sobre ella y donde puedes encontrar su libro, un sitio web muy sencillo, no más que digamos dos o tres páginas web. Así que vamos a hacer clic en Negro Simple. Y luego sigue adelante y da clic en Personalizar esta plantilla. Y como puedes ver ahora, tienes la plantilla justo aquí en el espacio de trabajo. Y si quieres cambiar tu plantilla, puedes hacerlo yendo a las plantillas por aquí, el lugar donde mi cursor está flotando, y puedes desplazarte por diferentes plantillas, y puedes seleccionar una que sea de tu agrado Y como puedes ver en el espacio de trabajo, tienes la opción de agregar páginas. Voy a hacer clic en las páginas y tienes una nueva página por aquí. Es un sitio web de desplazamiento, tenga en cuenta. Y puedes agregar notas, puedes registrar páginas, y puedes basar La página. Por ejemplo, quiero golpear la segunda página que generé, voy a dar click en la opción Papelera de reciclaje En el lado izquierdo, por aquí, tienes una barra de herramientas, y con una barra de herramientas con ciertas opciones. Por ejemplo, tienes la opción de diseño aquí en la barra de herramientas en el lado izquierdo. Tienes los elementos. Debajo de los elementos, tienes diferentes elementos como afeitados, botones, gráficos, pegatinas, fotos, videos, lo que necesites agregar básicamente a tu diseño Si quieres agregar alguna foto de la biblioteca de Camba a tu diseño, puedes seleccionar fotos, y puedes agregar algunas fotos Puedes hacer lo mismo con los videos. Y luego tienes la opción de texto en la barra de herramientas, y esto se usa para agregar un cuadro de texto o agregar algo de texto a tu diseño. Entonces tienes la opción de subidas por aquí y puedes subir una imagen usando Canva Y tienes la opción de dibujar y tienes algunos lápices y gomas de borrar y bolígrafos para bocetos por aquí, y puedes dibujar cosas directamente en el espacio No quiero dibujar cosas, así que voy a presionar deshacer, y luego puedes echar un vistazo a los diferentes proyectos en los que estás trabajando aquí mismo. Y nuevamente, tienes una opción para aplicaciones, y puedes echar un vistazo a qué diferentes aplicaciones tienes. Y las aplicaciones se categorizan en algunas categorías como gráficos, fotos, traducir videos, antecedentes, etcétera Por ejemplo, si haces clic en las fotos, puedes ver por aquí, tienes diferentes fotos para comida dinero Moon Beach, flor blanca, lo que quieras. Así que puedes usar estas opciones en el lado izquierdo de aquí para navegar por las diferentes opciones Canva tiene que incluir en tu diseño Entonces con eso dicho, voy a terminar esta conferencia ahora mismo tienes una idea básica sobre cómo se ve Canva y cómo puedes navegar Canva Y después de esto, en la próxima conferencia, voy a empezar a diseñar el sitio web. Así que cosas buenas por delante. Muchas gracias. 4. Diseño de la interfaz de usuario del sitio web con Canva: Hola a todos, bienvenidos a una nueva conferencia en el diseño del sitio web usando Canva post Y hoy, vamos a echar un vistazo a cómo podemos personalizar y editar un sitio web y crear un sitio web que no apesta. Entonces, usando Canva, puedes cambiar una variedad de cosas y puedes personalizar la plantilla que hayas elegido Siempre es bueno elegir una plantilla porque estás empezando con algo en lugar de empezar de cero. Entonces tenemos una plantilla por aquí, y quiero crear un sitio web para un autor, y el sitio web tendrá una biografía y un botón para llevar a los visitantes de este sitio web a la página de Amazon del autor o al libro del autor en Amazon. Eso es todo el sitio web tendrá una biografía y un enlace para llevar a los clientes o probables clientes a la página de Amazon del autor. Ahora, lo primero que voy a hacer es que voy a cambiar el nombre justo por aquí. Voy a cambiar el nombre por aquí porque el sitio web que creará Canva tomará el nombre del nombre de este proyecto, y yo voy a nombrarlo Digamos, autora de Suzanne. Voy a nombrar el sitio web, autora Suzanne. Y este proyecto también se llamará Autor Suzanne. Siempre es una buena práctica hacer esto antemano para que cuando estés generando el sitio web, el sitio web se llame como quieras que se llame. Entonces he cambiado el nombre, y ahora voy a cambiar el fondo. Como puedes ver justo por aquí, tenemos un fondo negro. Y no me gusta el fondo negro. Entonces voy a hacer click una vez en el fondo, y por aquí arriba, tienes la opción de cambiar el color de fondo. Tienes la opción de animar. Tienes la opción de cambiar la posición de cualquier elemento en el que estés haciendo clic En tu página web. Voy a dar click sobre el color de fondo. Y lo que voy a hacer es, voy a bajar a esta sección de gradiente y voy a aplicar un gradiente azulado a la página web Y esto se ve mucho mejor. Y recuerda, el azul es el color preferido para la mayoría de las personas. Entonces, si estás diseñando un producto, trata de incorporar el azul porque eso atrae a la gente. Y ahora que hemos cambiado el color del sitio web, quiero cambiar esta imagen. Quiero usar otra foto. Ahora bien, hay dos formas de hacerlo. Primero, ir a elementos. Después ve a las fotos por aquí y da click en fotos. Y obtendrás un montón de recomendaciones fotográficas, y estas son de la biblioteca de Canvas, o puedes usar la barra de sobretensión aquí o la barra de sobretensión de aquí. Y quiero una foto de una mujer leyendo. Veamos qué tipo de fotos se le ocurre a Canva. Y hay algunas imágenes que pertenecen a la biblioteca Pro o más bien pertenecen a la biblioteca, que es pay word y hay que pagar por la suscripción pro para acceder a esta biblioteca en particular. En lugar de usar una de Canvas, imágenes libres de derechos de autor, usemos una de las nuestras. Usemos una imagen a medida porque recuerden, estamos creando un sitio web para un autor, lo que el rostro del autor o su semejanza o imagen tiene que estar en el Aquí mismo, he subido una imagen de una mujer meditando Voy a hacer clic en esto y arrastrarlo y soltarlo justo donde está la imagen, o puedo hacer clic en esto una vez, y esto se agregará a la página web. Pero lo que voy a hacer es que voy a hacer clic y dejarlo caer justo por aquí. Esta es la foto y voy a estar usando. También puedes subir una imagen de video hacer clic en subir una imagen de video, y puedes seleccionar la imagen que quieras Digamos que quiero usar una imagen una imagen aleatoria de una persona haciendo un Burki Lo seleccionaré y Canva lo subirá a la plataforma. Pero me apegaré a la mujer meditando imagen porque se ve bien Ahora lo que podemos hacer es cambiar el texto aquí mismo. Haga clic en el texto una vez. Haga que su cursor pase el cursor sobre el texto y haga clic en él una vez Puedes hacer doble clic en él, y voy a cambiar el texto dos sobre mí. A se vuelve sobre mí. Quiero cambiar la fuente. Voy a ir justo arriba por aquí y voy a seleccionar una fuente diferente. Seleccionemos Arch go black porque este tiene un bonito aspecto atrevido. Y está tomando un poco de tiempo. Entonces voy a hacer otra cosa. Lo que voy a hacer es, voy a mover un poco esta caja, y luego voy a ir a la fuente seleccionar de nuevo y seleccionar Archivo negro. Se está tomando un poco de tiempo, pero tú consigues el punto. Puede seleccionar la fuente desde aquí. Lo que voy a hacer es que voy a poner el texto en negrita. Y como te mostré antes, puedes mover el texto así. Puedes hacerlo audaz. Se puede aumentar el tamaño de la fuente. Aumentemos el tamaño de fuente a 44 usando esta opción en particular en la herramienta bob, y puedes asizarla o hacerla cursiva Puedes cambiar a mayúsculas, puedes subrayarlo haciendo clic en Puedes cambiar la alineación al centro justificado a izquierda o derecha, mantengámoslo a la izquierda. Puedes agregar viñetas, algo así, y puedes cambiar el ritmo de letras Y voy a quitar las viñetas porque se ve horrorido con las viñetas Y he quitado las viñetas. Voy a aumentar la longitud de la caja para que todo el texto sobre mí venga en una línea, lo que voy a hacer a continuación es ir al espaciado y reducir un poco el espaciado entre letras. Veamos sobre mi parte otra vez. Digamos que quiero reducir un poco más el espaciado entre letras, y voy a aumentar el interlineado. Así es como hemos editado el texto justo por aquí. Ahora bien, ¿qué más podemos hacer? Podemos animar el texto Para que podamos hacer subir el texto. Podemos hacer que el texto se deslice. Podemos hacer que el texto se desvanezca, podemos hacerlo pop, podemos hacerlo a la deriva, o podemos elegir la mejor opción que hay, que no es animarlo Así que hagamos clic en Quitar animación porque este es un sitio web. Esta es la landing page de nuestro sitio web, por lo que no necesitas animación. Pero también podemos hacer otras cosas. Podemos seleccionar el cuadro de texto que contiene el texto sobre mí, y podemos ir a la posición y podemos poner el texto arriba en el medio en la parte inferior a la izquierda a la derecha. Se puede cambiar la posición del texto. También puedes cambiar el ancho del texto justo por aquí. Voy a ponerlo de nuevo donde estaba, y luego voy a ir al segundo cuadro de texto y escribir libros, y puedes cambiar el formato para esto también. Voy a borrar algunos cuadros de texto. Porque no los necesito. Voy a borrar el cuadro de texto de contacto para. Tenemos dos páginas para este sitio web. Una es la sección sobre mí y otra es la sección de libros, que contendrá los enlaces al libro. Ahora, vamos a agregar un nuevo cuadro de texto. Agreguemos un subtítulo. Vamos a bajarlo debajo de los libros. Aumentemos el tamaño del texto. Y por aquí, tenemos un texto suscrito o de suscripción justo por aquí Esto llevará a las personas a esta página de suscripción donde las personas pueden suscribirse a tu lista de correo si así lo desean. Vamos a alinearlo correctamente. Vamos a eliminar el subrayado del texto acerca de mí. También eliminemos el negrita y eliminemos el subrayado Se puede acceder al resto de la herramienta utilizando estos tres puntos negros que eliminan el subrayado Ahora tenemos la landing page de un sitio web. Pero estas opciones de menú no me quedan bien, y te diré por qué porque no se ven como botones o no se destacan de alguna manera. Lo que voy a hacer es, voy a agregar algunas formas, y lo que voy a hacer es, voy a ir a la barra de búsqueda y buscar cuadrado o rectángulo. Como puedes ver ha aparecido una forma rectangular, también puedes usar la opción de menú de aquí y seleccionar formas. Lo que voy a hacer ahora mismo es que voy a cambiar la dimensión de la caja, y ahora mismo como pueden ver, tiene el texto sobre mí justo en esta casilla. Esto se ve bien. Voy a buscar de nuevo rectángulo y voy a hacer los mismos dos libros. Entonces estos no son simétricos, pero se obtiene el punto. Para que puedas agregar cuadros de texto como fondos al texto. Y voy a añadir otro rectángulo. Para la suscripción. Opción. Eso es. Ya terminé con la landing page. Se ve muy básico, pero así es como puedes agregar diferentes elementos a tu página web de aterrizaje. Ahora voy a agregar una página. Lo que voy a hacer por aquí, voy a ir al texto y agregar un encabezado. Y voy a tirar el rumbo directo a la parte superior y esta será la sección sobre mí. Lo que vamos a hacer es que vamos a agregar un cuadro de texto justo en esta página, aumentar la longitud del cuadro de texto Y añadir algunos textos. Soy autor de fantasía. Digamos que este autor en particular es un autor de fantasía, y escribo libros, y escribo libros. Libros sobre un mundo llamado Zenón. Es solo algunas cosas aleatorias que se me ocurrieron ahora mismo. Se puede cambiar el tamaño de la fuente. Puedes cambiar la fuente, y puedes cambiar el color del texto, seleccionar algunos otros colores. Ve al selector de color justo arriba por aquí y hazlo naranja. No se ve bien, pero tienes otra página, y esto es solo para demostrar cómo puedes crear el sitio web y puedes cambiar la posición del texto. Izquierda derecha central central. Puedes animar el texto tal como te mostré antes, y puedes agregar efecto Entonces voy a agregar un efecto al texto. Y puede agregar una sombra, puede agregar un contorno de elevación, hueco, empalme. Es posible que tengas que probar diferentes efectos para ver qué se ajusta a tus necesidades. Voy a usar neón porque me encanta el texto neón, sobre todo cuando tengo algo amarillo en una página web. Ahora como ves, se ha agregado al texto el efecto neón. Voy a aumentar un poco la intensidad del efecto neón para que brille y realmente destaque. Lo tenemos sobre mi pagina. Agreguemos otra página. Agreguemos un cuadro de texto y agreguemos un encabezado. El encabezado irá directamente a la parte superior, o hagamos clic en el encabezado, hagamos clic en la posición. Y llevémoslo a la cima. Perfecto. Voy a llamar a esto libros. En el párrafo, aumentemos primero la longitud del cuadro de texto Entonces puedes comprar mis libros haciendo clic en el siguiente botón. Esto también, voy a cambiar la talla y hacerla s. perfecta. Entonces voy a ponerla atrevida. Simplemente haga clic en el texto o haga doble clic en el cuadro de texto y seleccione todo el texto, y voy a ponerlo en negrita. Voy a cambiar el color, ir al selector de color, elegir un color amarillo. Entonces voy a ir a efectos y hacerlo neón, para que se adapte al tema. Tienes que ser muy consciente de agregar cosas porque lo que sea que agregues a tu página web o sitio web, ajusta a todo el tema de la página web Ahora voy a añadir un botón. Voy a ir a elementos. Voy a ir a las formas. Y voy a buscar rectángulo. Entonces tenemos una forma de rectángulo justo por aquí. Voy a aumentar la longitud de esto, y voy a cambiar el color a y hacerlo rojo. Puedo hacerlo seleccionando en un selector de color justo por aquí. Hazlo rojo. Ahora quiero cambiar un poco la forma. En lugar de un cuadrado o más bien un rectángulo con bordes afilados, seleccionaré uno con bordes redondeados. Voy a redimensionarlo, y voy a hacerlo. Primero agreguemos un cuadro de texto. Agrega un cuadro de texto, o simplemente puedes escribir sobre esta forma en particular si quieres, simplemente haciendo clic en una vez, pero vamos a agregar un cuadro de texto Y escribamos, da clic en el cuadro de texto. Seleccionemos el texto. Hagamos el color amarillo. Vamos a los efectos y hazlo neón para que brille, y luego hagamos clic en Hacer doble clic en el texto Nuevamente, haga clic en negrita para hacerlo en negrita, y aumentemos el tamaño de fuente del texto. Y pondremos el texto click derecha o sobre el fondo rojo. Ahora tienes la segunda página, que contendrá un enlace a los libros del autor o libro en Amazon. Volvamos a hacer clic en agregar página, agregar un cuadro de texto nuevamente en un encabezado. Ve a la posición, llévala a la cima. Haga doble clic en esto. Y digamos suscríbete en este. Y en esta página, vamos a agregar un formulario que la gente puede utilizar para suscribirse al autor. Te voy a mostrar cómo hacerlo en un futuro video. Pero antes de que termine, te mostraré una cosa más. Ahora, digamos que quieres que la t se muestre debajo de la caja amarilla que tienes por aquí. ¿Cómo se hace eso? Haga clic en el cuadro de texto. Haga clic con el botón derecho o haga clic en Control, si está usando una Mac. Vaya a Capa y haga clic en Enviar al dorso, y esto enviará el texto derecho al reverso. Ahora bien, este texto ha sido enviado justo al fondo, como puede ver, ya no se muestra. Ahora digamos que lo quiero de vuelta al frente. Haga clic de control o clic derecho. El cuadro de aquí o el texto, lo que consideres que es más fácil acceder, y haz clic en la posición Lo que puedes hacer es ir a las capas justo por aquí, o puedes ir a arreglar y puedes hacer clic en al frente. Ahora bien, si llevo este cuadro de texto de vuelta a donde estaba, como pueden ver, se ha movido al frente. Así, puedes moverlo hacia atrás o hacia atrás. Puedes moverlo hacia atrás, o puedes moverlo hacia delante o hacia adelante. Entonces, si tienes múltiples lays y por capas, quiero decir, diferentes capas una sobre la otra. Entonces tienes una imagen, tienes un cuadro de texto sobre eso, o más bien tienes una imagen. En la imagen, tienes una forma cuadrada o redondeada, y encima de esa forma del rectángulo o del cuadrado, tienes un cuadro de texto, puedes jugar con el que aparece en la parte superior y que va hacia atrás Entonces como dije, puedes dar click en el cuadro de texto o la forma en el fondo Se lo puede poner al frente. Puedes ponerlo al fondo, puedes ponerlo adelante, puedes ponerlo hacia atrás. Si haces clic en poner al frente, lo pondrá justo al frente. Si haces clic en poner a la parte posterior, se lo pondrá derecho a la parte posterior. Es decir, si tienes tres o más formas, si haces clic en la parte posterior, colocará cualquier elemento que estés haciendo clic en la parte posterior de todas estas tres capas o de todos estos tres elementos. Y también puedes elegir hacia adelante o hacia atrás. Si eliges adelante, lo expondrá. Y si eliges al revés, lo pondrá hacia atrás, pero no derecho a la espalda ni derecho al frente, sino detrás del elemento sobre el que este elemento en particular está este elemento en particular está parado o sentado, ¿verdad? Por ejemplo, como te mostré ahora mismo. Entonces eso es lo que puedes hacer. Y digamos, probemos algo de animación. Hagámoslo subir. Y como puedes ver, las cajas subiendo, como dije, para sitios web, ninguna animación es la mejor animación, sobre todo si estás construyendo en sitios web de autor de toda clase, y vamos a alinear esto correctamente, para que se vea bien y simétrico Y tienes algunos números por aquí, que no quiero. Voy a borrar estos números. Puedes alinear esto muy bien y puedes mantener todo consistente que respecta al texto y a todo lo que concierne. Y ahora en el siguiente deja te mostraré cómo vincular diferentes páginas o agregar botones con enlaces. Entonces, para este sitio web en particular, como has visto o notado, hemos diseñado una interfaz de usuario de sitio web o sitio web muy rudimentaria que la gente va a ver cuando te busque o cuando vaya a su Y como dije, puedes agregar imágenes, puedes subir imágenes, o puedes agregar imágenes que ya están ahí en Canva Y digamos que quieres una imagen diferente. Y lo que podemos hacer es que podemos usar una imagen pinchar sobre ella, y esta imagen es parte de la biblioteca Canva Estoy usando una imagen libre, y luego puedes convertirla en el fondo haciendo clic y arrastrando la imagen y haciéndola huber sobre toda la Página web. Ahora mismo, como pueden ver, esta imagen en particular que he agregado se ha convertido en el fondo de la página web. Lo hice haciendo clic en la imagen y arrastrándola y haciéndola pasar el cursor sobre toda la página web También puedo hacer clic en él una vez y agregará la imagen a la página web, y voy a ir a la sección sobre mí porque esta no tiene imagen. Lo que voy a hacer es que voy a eliminar esta imagen por el momento, y voy a hacer clic en la imagen otra vez, arrastrarla, hacerla pasar el cursor sobre toda la página web, y ahora mismo como pueden ver, tengo cierta consistencia Estoy usando la misma imagen para todas las páginas web. Y ahí has diseñado la interfaz de usuario para un sitio web. Es muy básico, lo que he diseñado. Puedes usar un poco más tu creatividad. Puedes agregar diferentes formas, puedes agregar diferentes gráficos. Puedes agregar animación si quieres. Pero así es esencialmente como diseñas la interfaz de usuario usando Canva Muchas gracias. Te veré en la próxima conferencia. 5. Agregar navegación al sitio web: Hola a todos, bienvenidos a una nueva conferencia, y hoy vamos a echar un vistazo a cómo podemos agregar navegación y enlaces a su sitio web. Entonces por enlaces, quiero decir, si alguien hace clic en un botón en particular, digamos de mí justo por aquí, entonces deberían ser llevados a una página web diferente o algo más en Internet. Por ejemplo, si alguien hace clic en libros en este icono de clic en particular de aquí, entonces deben ser llevados a la librería o deben ser llevados a Amazon donde se vende el libro Para ello, primero, lo que tenemos que hacer es hacer clic en el cuadro de texto que contiene el texto. Haz clic en él una vez, luego controla el clicker derecho dependiendo de si estás usando Mac o Windows, y tienes esta opción aquí para agregar un enlace Haga clic en el enlace. Y tienes una barra de búsqueda por aquí, y ahora quiero enlazar esto a la página acerca de M. Primero, permítanme llevar este cuadro de texto en particular, justo de vuelta a donde estaba porque éste se ha movido hacia abajo. Perfecto. Vuelva a hacer clic en él. Haga clic de control, haga clic en, agregue un enlace. También puedes hacerlo yendo al botón mole de aquí, y puedes agregar un enlace usando el botón Más para, pero la forma más fácil es controlar hacer clic derecho, ir al menú y hacer clic en enlace. Y lo que puedes hacer es agregar un enlace a la segunda página. Como pueden ver, la segunda página contiene la biografía del autor, y quiero que las personas sean llevadas a esa página cuando hagan clic en el enlace sobre mí. La segunda página tiene un número. Como puedes ver si escribas uno, tienes la primera página. Si escribe en dos, tiene la segunda página. Si tecleas tres, tienes la tercera página. Si escribe en dos, tiene las cuatro páginas, y todas ellas están sin título en este momento en particular Entonces voy a agregar un enlace a la segunda página. De. Perfecto. Y ahora esto se ha convertido en un enlace. ¿Y qué más podemos hacer? Bueno, podemos agregar un enlace a la página Libros. Haga clic en Enlace y haga clic en tres, y la tercera página es la página del libro, y hemos agregado un enlace. Y puedes hacer clic y vas a agregar un enlace a la página de suscripción dos. Vaya a Enlace, haga clic en él, haga clic en cuatro, y se ha agregado un enlace. Perfecto. Ahora, cuando la gente vaya a la tercera página, que tiene información sobre los libros, deberían poder hacer clic en el enlace que dice click, y deberían poder navegar a la página del producto Amazon. Ahora, como pueden ver, el formato de los botones se ha cambiado un poco cuando agregué esta imagen de fondo en particular. Voy a dar click sobre la imagen de fondo. Haga clic de control, vaya a la capa, y lo voy a enviar derecho a la parte de atrás. Como puedes ver el botón ha reaparecido. El botón rojo con el texto click sobre él. Y lo que vamos a hacer ahora mismo es que vamos a ir a Amazon. Y estoy en Amazon, Reino Unido ahora mismo, y voy a ir a Harry Porter y a la piedra filosofal Libro famoso, muchos de ustedes pueden haberlo leído. Haga clic en Harry Potter y la piedra filosofal. Ahora, ve a este icono de aquí, que te dará el enlace a esta página en particular. Haga clic en Copiar enlace en el menú que aparece. Vuelve a tu página web. Ahora lo que vamos a hacer es que vamos a hacer clic en el cuadro de texto que contiene la palabra click Vamos a hacer clic derecho o clic de Control. Vamos a hacer clic en Enlace, y vamos a pegar el enlace. Y vamos a darle a Enter, y se ha agregado el enlace. Y ahora lo que voy a hacer es que voy a previsualizar el sitio web y ver si el sitio web me está permitiendo navegar. Haga clic en Vista previa justo en la parte superior por aquí. Ahora, puedes previsualizar el sitio web en una página móvil como página textop o como página móvil Si haces clic en la página Móvil , te mostrará el sitio web como una página móvil. Si haces clic en la página textop, te mostrará el sitio web como una página textop Puedes dar click en Wit Navigation si quieres poder probar si tu navegación está funcionando correctamente o puedes hacer click en sin Na navigation, en cuyo caso, la navegación no se activará en esta vista previa. Ahora, hemos hecho clic con navegación, y ahora quiero ver todo el sitio web, bueno Ahora voy a hacer clic en Acerca de mí. Y como pueden ver me está llevando a la página Acerca de mí, voy a dar click en Libros. Como pueden ver como llevarme a la página de Libros, voy a dar click en suscribirse, como pueden ver me está llevando a la página de suscripción. Y ahora voy a hacer click en el botón click de aquí, que debería llevarme a Amazon. Y veamos si lo hace, sí, me ha llevado a Amazon. Entonces básicamente, si tienes un libro en Amazon o si tienes alguna tienda de productos o alguna página de producto de Facebook, puedes agregar navegación a tu sitio web que al hacer clic en el botón, Que tenga el sitio web o que tenga la página del producto incrustada al hacer clic en ese botón, las personas serán llevadas a tu tienda de productos o tu tienda en línea o tu página de Facebook o tu Instagram donde sea que vendas o exhibas tus productos, esencialmente. Entonces así es como agregas navegación a diferentes botones o texto diferente. Y cuando añades navegación , te permitirá ir a diferentes páginas que son externas al sitio web. Entonces eso se trata de agregar navegación. Muchas gracias. 6. Agregar logotipos a sitios web: Oigan, todos, bienvenidos a una nueva conferencia. En la conferencia de hoy, vamos a ver algunas cosas más sobre el sitio web, el diseño de la interfaz de usuario. Ahora, había agregado una imagen de fondo a todas las páginas web en la conferencia anterior. Pero lo que se hace esta imagen de fondo, es ocultar la imagen de esta mujer meditando, que básicamente representa al autor porque probablemente a la autora le encanta Y lo que tenemos que hacer es sacar a primer plano esta imagen particular de la mujer meditando Lo que puedes hacer es dar click en la imagen. Haga clic de control o clic derecho, dependiendo de su sistema operativo, vaya a Capa y tráelo al frente. Así, y ahora tienes la imagen al frente. Voy a redimensionar esta imagen. Algo así. Y también puedes usar esta imagen como logotipo. Digamos que el autor particular escribe sobre la meditación en un mundo de fantasía o algo por el estilo. Puedes convertir esto en un logo a si quieres. Pero mantengámoslo como una imagen de visualización, y agreguemos un logotipo. Vamos a los elementos. Busquemos logo en la barra Sarge. Tienes algunos logotipos gratuitos por aquí. Vamos a hacer clic en uno. Un solo clic y el logotipo aparece en el espacio de trabajo, y puede cambiarlo de tamaño, y luego puede colocarlo en la esquina superior izquierda o algún otro lugar donde su logotipo deba estar fuera donde su logotipo se destaque como una función de visualización Por ejemplo, si tienes una marca que vende refrescos, tal vez quieras que tu logo ocupe un espacio más central en la página web para que destaque. Entonces, sea lo que sea que estés haciendo, tienes que asegurarte de que tu logo destaque. Ahora bien, no estamos usando un logotipo original para éste. Pero lo que podemos hacer es que podemos eliminar el logo que tenemos, y podemos convertir esta imagen en un logotipo y colocarla justo encima, en la mano izquierda, en la esquina superior izquierda, o en la esquina superior derecha, así. Mantengámoslo así. Ahora voy a terminar esta conferencia. Ahora has aprendido a diseñar una interfaz de usuario de un sitio web. A continuación, vamos a hablar sobre la vinculación de navegación, y la experiencia del usuario. Muchas gracias. 7. Agregar formularios al sitio web: Todos, bienvenidos hoy a una nueva conferencia. Vamos a ver cómo podemos agregar formularios a nuestro sitio web. Por ejemplo, digamos que quieres que la gente se suscriba a tu servicio a tu producto o a tu marca, y necesitas un formulario que pueda ser usado para recopilar las direcciones de correo electrónico de las personas o sus datos de contacto o sus nombres, etcétera Y puedes hacerlo usando Google Forms. Buscaré Google Forms en Google. El primer resultado de búsqueda es Google Forms. Voy a ir y dar clic en Ir a Formularios y esto me dará la opción crear un formulario en blanco, o formulario de contacto, o RSVP party in te, etcétera Voy a dar click sobre los datos de contacto. Y esto debería darme una forma completamente nueva así, y puedes agregar preguntas. Puedes importar preguntas, puedes agregar título y descripción agregar imagen agregar videos, o puedes agregar una sección a este formulario. Lo que voy a hacer es, voy a cambiar la descripción del formulario y llamarlo formulario de suscripción. Eso es lo que voy a hacer. Ese es el único cambio que haré y la gente puede ingresar sus nombres, los correos electrónicos, sus direcciones. Entonces lo que voy a hacer es que voy a hacer direcciones no requeridas no es un campo obligatorio para este formulario porque no queremos recopilar las direcciones de las personas, y la mayoría de la gente no te dará sus direcciones porque es algo arriesgado si lo haces en línea. Y tenemos la opción de número de teléfono y comentarios. Voy a poner el número de teléfono. Pondré la sección para número de teléfono sobre la sección para direcciones. Así que sí. Entonces tienes el número de teléfono como sección no requerida, tienes dirección como sección no requerida, etcétera, y se requiere el nombre y la dirección de correo electrónico Entonces ahora lo que voy a hacer es que voy a hacer clic en Enviar y me ha llevado a esta ventana, y puedes enviar este formulario a la gente vía correo electrónico. Puedes darle a Google un conjunto de direcciones de correo electrónico, y el formulario se incluirá en ese correo electrónico en particular. Y también puedes cambiar las opciones para recopilar direcciones de correo electrónico. Entonces, ¿el formulario debe recoger direcciones de correo electrónico? En este caso, queremos recopilar direcciones de correo electrónico porque Queremos suscriptores que puedan ser notificados sobre el lanzamiento de un nuevo libro o algo estilo cuando el autor termine de escribir un nuevo libro. Entonces voy a dar click en Responder input. Por lo que el formulario podrá recoger direcciones de correo electrónico. Puedes hacer clic en Dot collect o verificado. Voy a dar click en Responder input. Y luego voy a ir a esta opción de enlace por aquí, la opción con el botón Link, y tienes la URL por aquí. Se puede copiar la UL. Voy a dar click en acortar URL, y ahora voy a dar click en Copiar Y voy a volver al sitio web y voy a bajar a la página de suscripción, y voy a pegar esto. Y se está pegando la forma. Como puedes ver, el formulario ha sido pegado a la página web. Y tendrás que registrarte para continuar. Alguien que esté visitando este sitio web puede necesitar iniciar sesión en Google para acceder a este formulario. Pero aparte de eso, el formulario está aquí y puedes recopilar direcciones de correo electrónico y cosas así usando este formulario. Eso es todo por esta conferencia, y en la siguiente conferencia, te mostraré cómo publicar el sitio web. Muchas gracias. 8. Sitio web de publicación: Oigan, todos, bienvenidos hoy a una nueva lección. Vamos a ver cómo podemos publicar nuestro sitio web. Ahora, lo primero que voy a hacer es que voy a presionar el botón de vista previa y previsualizar el sitio web una vez más. Y como puedes ver el sitio web tiene todas las características de navegación, y el sitio web está listo con todos los formularios y navegaciones y enlaces y todo eso Y luego podrás consultar el sitio web móvil. Ya está listo. Puedes acceder a Sitio web publicado desde aquí o puedes hacer clic en Cerrar e ir al sitio web publicado y hacer clic en él. Y ahora lo que podemos hacer es que podemos O conseguir un dominio gratis o usar un dominio existente. Y por dominio existente, me refiero a un dominio que quizás hayas comprado a Go Daddy o Hostinger, o a cualquiera de estos sitios web o servicios que proporcionan nombres de dominio por un precio Vamos a hacer clic en dominio gratuito por el momento. Vamos a hacer clic en Continuar. Y como puedes ver por aquí, el nombre de dominio se está mostrando automáticamente. Así que había nombrado a este proyecto en particular Autor Suzanne y la URL o el nombre de dominio y la URL que está siendo generada por Canva, compone de autor Susanne seguido de Entonces eso es lo que ha hecho Kanva. Puedo cambiar esto. Puedo dar click en el botón del lápiz y básicamente puedo cambiar la URL y hacerla Autor Suzanne Jones Y también puedo cambiar el nombre del Proyecto Canva, y puedo agregar una descripción del sitio web Y llamémoslo un sitio web de autor. Este es un sitio web para la autora Suzanne Jones. Perfecto. Esto no es muy útil. Esa es la parte de descripción del sitio web de este. Pero solo para mostrarte que puedes agregar una descripción del sitio web, agregué una descripción del sitio web, y puedes protegerlo con contraseña y puedes ocultar tu sitio web de los motores de búsqueda. Perfecto. Y como puedes ver por aquí, la URDL ha cambiado y todo eso, y ahora pulsa en el botón publicado y tu sitio web está bien para ir Está listo para ir. Y eso es todo por esta conferencia en particular. Te veré en la última conferencia en la que discutiré el proyecto. Muchas gracias. 9. Proyecto final: Oigan, todos, bienvenidos a la conferencia final de este curso. Y en esta conferencia, voy a hablar del proyecto final. Las instrucciones para el proyecto final son algo así. Tienes que crear un sitio web personal con un mínimo de cuatro páginas, como lo mostré en todo este curso, porque diseñé un sitio web personal para un autor en particular. Por lo que hay que crear un sitio web personal con cuatro páginas. La primera página o página de destino o página de inicio, sea que la llames, debe tener un logotipo. Ahora, no necesitas diseñar tu propio logotipo. Puedes usar uno de los logotipos que está disponible en la Biblioteca Kanvas, y tienes que usar un fondo de imagen colorido, que también puedes obtener de la biblioteca Kanvas Y la primera página debe tener un menú que pueda ser utilizado para acceder a diferentes partes del sitio web. Por lo que debería haber algunas características de navegación en la primera página. La segunda página tendrá una biografía ficticia. No necesitas escribir tu propia biografía, escribir una biografía ficticia, como, ya sabes, eres la estrella de cine más grande del mundo ni nada de eso, o simplemente algo al azar La tercera página tendrá un enlace a algún producto en Amazon. Entonces la tercera página tendrá un botón, y tendrá un enlace. Y cuando la gente haga clic en ese enlace, serán llevados a alguna página de producto en Amazon, cualquier página de producto, puede ser un cepillo de dientes, o puede ser un limpiador de inodoros, puede ser un libro, te lo dejo a ti. Y la última página debería ser un formulario de suscripción. Y una vez que haya terminado de diseñar este sitio web, utilizando imágenes y videos que están disponibles en Canva, y tenga en cuenta esto No necesitas usar tus propias imágenes ni tus propios videos. Tienes que usar imágenes y videos que están disponibles en la biblioteca Canvas. Entonces, una vez que hayas terminado, toma una captura de pantalla de tu sitio web y súbalo a la plataforma. Y puedes tomar múltiples capturas de pantalla para cada página y puedes subirla a la plataforma. Muchas gracias.