Banners para diseño de tu tienda de Shopify con Canva

1. Introducción: Bienvenido a mi nueva clase, diseñando banners para tu tienda Shopify usando Canva. ¿Estás listo para llevar tu tienda Shopify al siguiente nivel? En esta clase, aprenderás a crear banners profesionales llamativos que te ayudarán a aumentar las conversiones y ventas en tu tienda Shopify. Echaremos un vistazo a otros banners de Shopify en busca de inspiración e ideas. Entonces entraremos en Canva y crearemos nuestro propio banner personalizado de Shopify. También te mostraré cómo exportar tu banner y agregarlo a tu sitio web de Shopify también. Aprenderás a usar Canva para crear banners que se alineen con tu marca y atraigan a tu público objetivo. Te mostraré cómo agregar imágenes de texto y otros elementos a tus banners. Al final de la clase, tendrás un diseño de banner que está listo para ser implementado en tu tienda Shopify. Y usaste en tu sitio web para promocionar un producto, eventos de venta o incluso una promoción. Únete a la clase hoy y comencemos a diseñar banners que ayudarán a aumentar las conversiones y las ventas en tu tienda Shopify. 2. Mirar otros Banners de Shopify para inspiración e ideas: Hola y bienvenidos de nuevo. En este video, vamos a echar un vistazo a algunos otros banners de la tienda Shopify en busca inspiración e ideas para nuestro propio diseño. Porque antes de comenzar a diseñar nuestro propio banner, es importante inspirarnos y comprender los principios y las mejores prácticas para crear banners efectivos. Entonces, como puedes ver aquí, he abierto Pinterest y he hecho una búsqueda de banners de la tienda Shopify. Ahora podemos ver algunos ejemplos aquí mismo. No obstante, me gustaría llamarlos pancartas. Algunas otras personas los llaman deslizadores. Entonces, como puedes ver aquí, también he hecho una búsqueda de los deslizadores de la tienda Shopify también. Básicamente son exactamente lo mismo, pero algunas personas solo usan la palabra deslizador y algunas personas usan la palabra banner. obstante, no dejes que eso te distraiga porque básicamente son exactamente lo mismo. Entonces echemos un vistazo a algunos ejemplos. Ahora enseguida, creo que este de aquí abajo se ve bastante bien. Entonces voy a dar click en abrir aquí y podemos ver el banner de esta tienda. Entonces este es un banner bastante simple, solo tiene algo de texto y un botón y una imagen de su producto a la derecha. Entonces, si me desplazo hacia abajo, veremos algunos ejemplos más. Este de aquí, por ejemplo, se ve bastante bien. Esta es la cocina donde solo tenemos ollas y sartenes y es realmente simple pero efectiva también. Entonces si vuelvo a la otra búsqueda en Pinterest, como pueden ver, aquí es donde he buscado un Shopify store banners. También podemos echar un vistazo a los ejemplos aquí. Entonces por ejemplo, si empiezo haciendo clic en este primero de aquí, podemos ver que este es un banner del Black Friday. Esta primera, y la segunda también es para una empresa de moda o ropa. Y la tercera es una simple oferta de venta de moda. Entonces, si me desplazo hacia abajo desde aquí, también tenemos algunos ejemplos más aquí abajo. Entonces estos dos primeros se ven bastante bien en este primero son pancartas del Black Friday, y este segundo son pancartas anticuadas . Justo aquí. Se puede ver que este es un estilo de diseño completamente diferente, es más burbujeante y colorido, mientras que este tiene el tema negro y rojo para el Black Friday. Por último, voy a dar click en este de aquí para que podamos tener una mejor mirada. Debido a que este es un estilo de banner más avanzado, por ejemplo, este primero es más de un banner 3D. Se puede ver que esto tiene productos para el cuidado de la piel. El segundo es una pancarta de cocina con alimentos y productos de cocina. Y luego tenemos más productos a base de belleza y luego una pancarta deportiva. Y finalmente otro burnout de moda también. Entonces tenemos un montón de diferentes ejemplos e ideas que espero te den algo de inspiración para crear tu propio banner. Creo que ahora estamos listos para abrir Canva y jugar con las características dentro de Canva para ver qué podemos crear para nuestra propia tienda Shopify. Ahora tal vez quieras crear algo completamente diferente a lo que yo creo. No obstante, esto solo sería un ejemplo guiándote a través del proceso de creación de una pancarta en Canva. Entonces eso es todo por este video. Ya estamos listos para seguir adelante y diseñar nuestro propio banner en Canva. Te veré en la siguiente. Gracias por mirar y adiós. 3. Cómo diseñar banners para tu tienda de Shopify con Canva: Hola y bienvenidos de nuevo. En este video, te voy a mostrar cómo diseñar banners para tu tienda Shopify, igual que el que puedes ver en mi sitio web aquí mismo, usando Canva. Así que vamos a sumergirnos directamente en ello. En primer lugar, vamos a abrir Canva, y ahora lo vamos a hacer es crear un nuevo diseño. Ahora voy a crear un diseño de tamaño personalizado, y esto va a ser de 2,400 por 1,200 píxeles. Por lo que esto puede variar dependiendo del tipo de banner que se quiera crear. Pero esto es con lo que vamos a ir para este video. Entonces simplemente haz clic en Crear, nuevo diseño. Aquí vamos. Entonces ahora estamos listos para comenzar a construir nuestro banner para nuestra tienda Shopify. En el banner que viste en mi tienda Shopify hace unos segundos, se dividió en dos secciones. Tenía texto a la izquierda y una imagen a la derecha. Entonces para hacer eso, antes que nada, voy a agregar la imagen a la derecha por aquí. Entonces lo voy a hacer es agregar un elemento de marco cuadrado para la imagen. Voy a ir a elementos y buscar. Y luego vamos a hacer click en frame. Así que sólo vamos a encontrar un marco cuadrado perfecto. Entonces este de aquí es bueno. No obstante, tiene un borde blanco, para que uno no sea lo que queremos. Este de aquí es perfecto. Entonces vamos a editar a nuestro diseño. Y entonces vamos a hacerlo más grande. Y lo vamos a hacer 1,100 píxeles de alto y ancho también. Ahí vamos, Eso es perfecto. Entonces eso es 1,100 por 1,100. Entonces ya tenemos el marco agregado. Ahora voy a seguir adelante y subir una foto para arrastrar a este marco. Y como pueden ver, ya he subido algunas fotos, así que simplemente la voy a arrastrar en esta de aquí. Entonces voy a hacer doble clic en él y asegurarme de que esté centrado en el marco. Ahí vamos. Ahora, voy a volver a hacer clic en el marco y asegurarme de que esté centrado. Creo que por ahora aquí va a ser sobre lo correcto. Y ahora ya estamos listos para agregar el texto de la izquierda por aquí. Entonces lo que voy a hacer es agregar unos simples elementos cuadrados que vamos a agregar nuestro texto encima. Entonces simplemente voy a ir a elementos y escribir en cuadrado. Aquí vamos. Entonces esta primera plaza es absolutamente perfecta. Entonces ahora sólo voy a mover la plaza a la esquina superior izquierda. Y voy a mantener pulsada la tecla Mayús y dar clic y arrastrar para agrandar el cuadrado. Y al sostener Shift, hará que el ancho y la altura se bloqueen para que no cambien aleatoriamente. Y para que podamos mantenerlo exactamente cuadrado. Y recuerda que queremos que sea de 1,100 por 1,100. Ahí vamos. Eso es perfecto. Ahora sólo voy a alinearlos a los dos. Y voy a seleccionar ambos y agruparlos. Entonces les voy a mandar a ambos juntos también. Ahí vamos. Entonces esa es la primera parte hecha. Ahora lo que quiero hacer es cambiar el color del cuadrado. Así que voy a hacer clic en él y hacer clic en el bloque de color aquí arriba. Y ahora voy a añadir mi propio color personalizado. Puedes agregar cualquier color que quieras. Y puedes hacer el cuadrado de cualquier color que quieras. Por supuesto, puedes ir a comprar tus propios colores de marca. Y eso es exactamente lo que voy a estar haciendo. Así que simplemente voy a pegar el código de color aquí arriba. Y voy a dar click sobre el color que he añadido. Ahí vamos. No es del todo blanco. Como se puede ver. Es ligeramente diferente al fondo, que es exactamente blanco. Y no es exactamente lo mismo que el fondo de la foto Ivor. Le agregamos una dinámica agradable a este diseño. Ahora estamos listos para comenzar a agregar nuestros textos a nuestro diseño de banner. Entonces vamos al texto de la izquierda por aquí. Y simplemente vamos a agregar un encabezado. Ahora voy a sustituir este texto y voy a escribir el 20%. Y voy a hacer el texto mucho más grande. De hecho, en los bultos de aquí arriba, simplemente voy a hacer que el tamaño de fuente 270 pixeles y presione Enter. Ahí vamos. Ahora puedes configurar la fuente para que sea lo que quieras que sea. No obstante, voy a usar la fuente espartana de liga justo aquí. Ahora lo voy a hacer es asegurarme de que esto lleve centrado en el cuadro de la izquierda justo aquí. Para hacer eso, en realidad voy a tener que desagrupar estos dos elementos. Y ahora voy a poder centrarlo. Ahí vamos, eso es perfecto. Y ahora podemos agrupar de nuevo a estos dos. Bien, entonces tenemos la parte principal hecha. Ahora, solo tenemos algunas cosas más que hacer y luego esto estará prácticamente terminado. Entonces antes que nada, voy a añadir otro elemento cuadrado. Y voy a hacer que sea del mismo color que el fondo del cuadro izquierdo. Entonces ese es este de aquí. Ahora lo que voy a hacer con esto es traerlo delante del texto. Y voy a cubrir la mitad inferior del cero. Ahí vamos. Creo que podría bajarlo un poco. Ahora creo que esto agregará un efecto genial. Y lo que voy a hacer es agregar la palabra off sobre la parte superior de esta caja. Entonces voy a duplicar el texto. Y voy a despedirme. Y por supuesto, habilite el modo en mayúsculas. Y este texto sólo necesita rondar los 70 píxeles. Así que vamos a quitar el 200 y que sea sólo 70. Ahora vamos a mover el texto hacia aquí para que esté en la mitad inferior del cero. Y ahí vamos. Creo que esto se ve absolutamente fantástico. Ahora aceite que voy a hacer es agregar el pedacito final de textos que necesitamos agregar a este diseño. Entonces voy a duplicar este texto aquí. Y voy a hacerlo un poco más pequeño. Pienso en 15 pixeles. También voy a cambiar la fuente a asistente extra light. Y yo sólo voy a mover los elementos de los textos aquí abajo. Y aquí voy a escribir código de uso. Verano al finalizar la compra. Ahora solo queremos que esto esté en una línea. Así como así. Y voy a hacer que el código de cupón sea negrita. Ahora sólo voy a poner esto debajo la palabra sobre ahí. Y ahí vamos. Hemos creado nuestro banner. Creo que esto se ve absolutamente fantástico. Y por supuesto puedes agregar tus propios estilos únicos a tu banner. Pero creo que este es un diseño realmente genial. Ahora puedes seguir adelante y descargar esto y luego subirlo a tu tienda Shopify. No obstante, antes de eso, te voy a mostrar cómo diseñar otro estilo de este mismo banner. Entonces lo que voy a hacer es duplicar esta página haciendo clic en este icono aquí para que no tengamos que volver a diseñar todo de nuevo. Y ahora voy a desagrupar estos dos elementos. Y sólo voy a seleccionar esta foto aquí. Ahora lo voy a hacer es hacerlo un poco más pequeño. Pienso que hay buena. Y voy a traerlo. Y luego lo voy a duplicar tres veces. Ahora voy a poner uno a la derecha de él, uno debajo de él, y uno aquí abajo también. Solo tenemos que asegurarnos de que todo esto esté alineado correctamente. Ahí vamos. Ahora creo que esta brecha en el medio es un poco demasiado grande. Así que en realidad voy a tener que hacerlos un poco más grandes. Entonces voy a empezar con este de aquí. Creo que 540 podría ser bueno. Veamos cómo funciona eso. Lo duplicaré tres veces otra vez. Y voy a alinearlo todo. Solo tenemos que asegurarnos de que todo esté perfectamente alineado. Entonces este de aquí también. Bien, esto no es del todo perfecto, todavía. Sólo voy a seleccionar ambos de estos dos a la izquierda y los voy a traer un poco. Ahí vamos. Creo que esto se ve absolutamente perfecto. Ahora voy a volver a subir. Y sólo voy a arrastrar algunas otras imágenes. Y claro, queremos asegurarnos de que todas nuestras fotos estén centradas en los marcos de imagen. Y finalmente, este de aquí también. Y ahí vamos. Así que acabamos de crear dos banners Shopify diferentes. Son estilos similares, pero también hay diferentes. Entonces este de aquí dice 20% de US Code verano al finalizar la compra con la imagen de un impuesto de cubo a la derecha, o simplemente cualquier imagen podrías agregar cualquier foto del producto a la derecha. Por lo que esto te permitirá enfocarte en un solo producto. Y luego tenemos este dial aquí abajo, que es lo que podemos usar para enfocarnos en cuatro productos diferentes. Entonces ahora lo que voy a hacer está atado a nuestro proyecto. Solo voy a atar simplemente hoy son los banners de Shopify. Y para entrar. Ahora para descargarlos, voy a hacer clic en compartir y descargar. Queremos descargar ambas páginas y después voy a hacer clic en el botón Descargar. Ahora solo quieres asegurarte de guardarlos en la ubicación correcta de tu computadora. Y una vez que esté listo, haga clic en Guardar. Ahora voy a hacer clic en Mostrar en carpeta. Y debido a que descargamos múltiples diseños a la vez, nos ha dado un archivo zip. Entonces voy a hacer clic derecho en él y hacer clic en Extraer a Shopify banners. Esto nos dará entonces una carpeta con los diseños que hemos creado. Ahora volvamos a nuestra tienda Shopify y podremos subir nuestros banners a nuestra tienda. Así que sólo voy a hacer click en la tienda en línea de la izquierda por aquí. Y luego voy a hacer clic en personalizar. Antes de subir nuestros banners, voy a quitar este bloque en medio. Entonces voy a borrar los textos en el encabezamiento. Y luego voy a borrar ambos botones. Y ahora si hago clic de nuevo en el banner y deshabilito el contenedor, y también borro la segunda imagen también. Ahora, tenemos que hacer es subir los banners que hemos diseñado. Entonces en la primera imagen, voy a hacer clic en Cambiar y seleccionar Imagen. Ahora voy a hacer clic en Subir. Y en la carpeta que acabamos de crear, voy a seleccionar ambas y dar clic en Abrir. Ahora podremos ver cómo se ven estos en nuestra página web. Entonces aquí están los productos individuales. Así que gastaron eso nos permite enfocarnos un producto y luego tenemos el otro aquí. Y esto nos permite enfocarnos en cuatro productos separados. Así que elige el banner que deseas mostrar en tus sitios web. Y luego haz clic en Seleccionar en la parte inferior de aquí abajo, y Guardar en la parte superior justo aquí arriba. Ahora podemos salir del editor de páginas y ya estamos listos para ver nuestra tienda para ver cómo se ve con el banner que acabamos de diseñar. Bien, esto se ve bien, pero todavía hay otra cosa que vamos a tener que cambiar en el editor de páginas. Así que voy a hacer clic en Editar Página de nuevo aquí abajo. Y voy a seleccionar el banner de imagen. Y lo voy a hacer es habilitar esta opción aquí que dice adaptar la altura de sección al tamaño de la primera imagen. Entonces haré clic en eso y luego volveré a hacer clic en el botón Guardar. Y ahora podemos salir del editor y volver a abrir nuestros sitios web. Y como pueden ver, esto ahora se ve mucho, mucho mejor ya que ya no se está apretando debido a cómo se configuró previamente el banner. Entonces ahora echemos un vistazo a cómo se ve el otro banner que hemos diseñado. Podemos volver a editar la página principal. Y simplemente voy a seleccionar el otro Banner. Entonces haremos clic en el banner, clic en cambiar y cambiar imagen. Y vamos a dar click en éste aquí. Después iré a Seleccionar y guardar y salir del editor y ver su tienda en línea. Ahora si actualizo esta página, y ahí vamos, así ya podemos ver cómo se ve el primer banner que diseñamos. El banner que se centra en los productos individuales. Entonces ahí vamos. Hemos utilizado con éxito Canva para diseñar algunos banners de sitios web de Shopify de aspecto absolutamente fantástico . Eso es todo por este video. Espero que lo hayas disfrutado y espero que hayas aprendido algo nuevo. Te veré una vez más en la siguiente , gracias y adiós. 4. Proyecto de clase: Bienvenidos al video final de la clase. En este video, estaremos discutiendo el proyecto de clase y cómo puedes poner en práctica todo lo que has aprendido en esta clase. El proyecto de la clase es crear un banner para tu tienda Shopify usando Canva. El objetivo de este proyecto es diseñar un llamativo banner que ayude a incrementar las conversiones en tu tienda Shopify. Para completar el proyecto, deberás seguir estos pasos. Primero, echa un vistazo a algunas otras tiendas Shopify para ver cómo ven sus banners y obtener inspiración e ideas para los tuyas. Después elige una plantilla o empieza desde cero en Canva. Después de eso crea un diseño de banner que se alinea con tu marca y atrae a tu público objetivo. Textos de anuncios, imágenes y animaciones, si lo deseas. Y por último, guarda y exporta tu diseño. Una vez que hayas completado el proyecto, tendrás un diseño de banner que está listo para ser implementado en tu tienda Shopify y utilizado en tu sitio web para promocionar un producto, venta, evento u otra promoción. Me encantaría ver tu Biodiseño final, así que siéntete libre de enviarlo en la sección de proyectos de esta clase si necesitas ayuda, asegúrate de enviar un mensaje. Y recuerda que la práctica hace la perfección. Y cuanto más diseñes, mejor obtendrás. Así que gracias por acompañarme en esta clase. Espero que lo hayas disfrutado y hayas aprendido algo nuevo. Y espero verte en otro pronto. Adiós.