Hoy te voy a enseñar cómo hacer un banner gratis con Elementor para tu página de inicio. Si no has visto el artículo anterior, donde te explico cómo funciona, que es Elementor y cuáles son todas las funcionalidades, y todos los beneficios que puedes tener para tu web, ve a verlo primero.
- Acceso a todo el curso de Elementor Gratis
Porque lo vas a tener muchísimo más claro.
Ahora te voy a contar cómo puedes poner tu página, tu blog , tu web, bonita en la página de inicio.
Así que no te pierdas nada porque seguro que este artículo, que contiene un vídeo también, te va a gustar muchísimo. Tal y como te comentaba en el artículo sobre Elementor, tienes que tener instalada este plugin, porque si no, no hacemos nada.
Trabajar con Elementor es una de las maneras más rápidas de crear un banner gratis para tu web.
Cómo hacer un banner en WordPress
Para hacer un banner gratis sólo tienes que entrar en la interfaz de WordPress, y entonces una vez instalado Elementor, vamos a añadir una nueva página. A esta nueva página le vamos a dar un título como Homepage, porque va a ser nuestra página principal.
Por ejemplo, en el caso del título, puedes colocarlo donde tú quieras y editar con Elementor. Si haces click en el botón de Editar con Elementor. Como ves, se nos abre la interfaz de Elementor.
Esta es la herramienta con la que vamos a editar nuestra página. Con la que vamos a hacer este banner dinámico para nuestra página principal. Y como ves, aquí tenemos que centrarnos en estos elementos que aparecen en la parte izquierda de la interfaz.
Como solamente vamos a necesitar una columna, pues vamos a seleccionar esta opción, si tú quisieras tener dos columnas para tu banner en WordPress, eliges ésta, pero nosotros ahora mismo vamos a hacer la del banner dinámico.
Ahora que ya nos encontramos en esta parte, se ha añadido una Sección que como ves tiene un menú en el centro en azul claro, en el que dispones de distintas opciones. Los puntos son para editar la sección, el más, para añadir nueva sección, y la cruz para eliminar Sección.
En el otro menú, el que encontramos en el lateral de la Interfaz:
Tenemos tres opciones en este menú, la de disposición de la sección, el estilo que le queremos dar a nuestra sección, y avanzados. Iré explicando cada una de estas opciones.
Entonces para crear el banner dinámico de la página con Elementor, lo primero que vamos a hacer es, en el ancho de contenido, en lugar de seleccionar ,caja vamos a seleccionar ancho completo, porque queremos que nuestro banner ocupe de lado a lado.
En cuanto a la altura del banner, aparece la opción por defecto, pero nosotros vamos a poner una altura mínima y a esta altura mínima la vamos a dejar en 400. Tú si quieres, le puede dar más. A mí me gusta en 400, si quieres, puedes darle 700 o el ancho que tú prefieras. Vale y por ahora vamos a dejar todo esto tal y como está.
Ajustes de Estilo cuando haces un Banner con Elementor en WordPress
Ahora nos vamos a ir a la sección de estilo, y en el tipo de fondo si le damos al pincel. Nosotros vamos a seleccionar la opción normal. Con el tipo de fondo, seleccionamos clásico y vamos a seleccionar una imagen que ya hemos subido a la biblioteca de medios.
Si tú aún no tienes subida la imagen que quieres en la biblioteca de medios, lo que tienes que hacer es añadir un archivo y seleccionarlo directamente desde desde tu ordenador. Para colocarla en el banner que estamos construyendo para WordPress, con Elementor.
Puedes descargar imágenes gratis de Pexels o de Pixabay. Yo te recomiendo que a todas tus imágenes adjuntas, le des el nombre que mejor la defina, que mejor encaje con la imagen, con el título de la página que estás construyendo, y de la página me refiero de la URL de esa URL que estás construyendo en ese momento.
Todo esto tenemos que ajustarlo. En cuanto a la posición, vamos a darle centro. Centro adjunto vamos a ponerlo en fijo. Elementor le da un carácter muy profesional al banner, hace que sea más dinámico y más chulo.
En cambio, si tú le das desplazamiento se va a quedar ahí, sin moverse. Es como lo contrario, no se va a quedar ahí quieto, y no se va a mover. A mí me gusta que se quede para que cuando vayas desplazando la página, pues se vaya moviendo. Hacer un banner dinámico con Elementor es mucho más profesional y queda más chulo de esta manera.
Y sí, para que se nos quede, pues un poco más amplio, y entonces se verá mucho mejor. Con lo que hemos hecho, aún no se nos ve la imagen completamente, es entera lo que es la imagen de todas, vamos a darle Avanzado, y vamos a darle a relleno.
Enlazar valores entre sí, vas a pinchar ahí y aquí le vamos a poner un relleno. Arriba y abajo , y entonces veis que ya sí que nos aparece la imagen completamente. Ahora ya tenemos nuestra imagen del banner, ahora vamos a añadir. Si nos vamos aquí, a la sección, si nos venimos aquí, a este menú de los tres, de todos estos puntos, nos aparece la opción de añadir más elementos.
Proceso de Crear un banner para una Página Web
Para dar un poco de más vida al banner de la página web, vamos a añadir a nuestro banner algunos elementos como por ejemplo, un encabezado.
Un texto que vamos a añadir también aquí buscando la parte de abajo, y de nuevo aquí le vamos a añadir un botón de llamada a la acción. Perfecto, pues ya los tenemos todos añadidos ahora lo que nos queda hacer es cuadrarlos dentro de nuestro banner dinámico.
Para que queden perfectos y adaptados a nuestra marca, para que quede muchísimo mejor. Es decir, también que en Elementor como en WordPress y como en todas estas herramientas tan versátiles, cualquier tipo de acción que vayas a hacer, cualquier edición que vayas a hacer de tus elementos, se puede hacer de muchas formas diferentes.
Entonces igual que te vas a uno de los menús, y puedes hacerlo de formas distintas. Así que tú elige la que te resulte más cómoda, y esa será la mejor.
Ahora si queremos modificar este texto de este título principal que le hemos puesto a nuestro banner, pues puedes venirte aquí a modificarlo o puedes venirte aquí a la parte del título. De acuerdo, entonces vamos a poner mejores, por ejemplo los mejores cursos online.
Si quisieras, le puedes añadir una url que sería la página a la que enlazaría este título, el tamaño por defecto.
Etiqueta HTML el título normalmente es lo más importante por lo que yo te recomiendo que le pongas un H1 es el título máximo, y yo lo voy a poner pues quizás, centrado.
Estilo del Encabezado de la página web
Vale, ahora nos iríamos a la parte del estilo, le cambiaríamos el color, y aquí te recomiendo que le pongas un color que destaque, que se vea bien sobre tu imagen de fondo, por lo demás, aquí tienes muchas más opciones.
Puedes modificar las tipografías, yo le pongo tipografía secundaria, porque me gusta ese tipo de letra.
Después puedes cambiar también el tipo de letra, la que vaya más acorde con la tipología con tu marca. Selecciona la que vaya mejor con la personalidad de tu marca.
Por ahora la voy a dejar ahí y me sirve. si ahora quieres modificar en el otro texto, como ves solamente tienes que pinchar encima y le añades una pequeña descripción de lo que son los cursos online.
Una vez añadida, hacemos lo mismo. Tienes que ir al estilo. Aquí le puedes cambiar también el color, que yo le voy a poner un color blanco, para que se vea bien y que destaque la tipografía.
Puedes la puedes cambiarla y después, si quieres darle una sombra al texto, pues ocurre exactamente lo mismo.
Añadir un botón en el Header de tu WordPress
En el header de tu web en WordPress puedes añadir un botón .
Añadir un botón en el banner o header de tu WordPress es probablemente, una de las partes más interesantes. Le puedes poner la información que consideres más relevante. En mi caso, le voy a poner información, el texto que quieres ver en el botón, como por ejemplo, VER MÁS.
Aquí añadiríamos la url del enlace que quieres colocar. Ten en cuenta que deberías haber creado antes una página a dónde van a ir en nuestros usuarios.
Puedes modificar la ubicación dentro del botón o el color. Es tan sencillo como si haces click aquí puedes elegir un color de la paleta si pinchas aquí te vas directamente a los colores que tú previamente has añadido en elemento o en tu página.
Creo que es en la configuración de tu página algunos los tienes por defecto, y otros tienes que añadirlos tú. Te recomiendo que añadas los colores que sean de acuerdo a tu a tu personalidad de marca que te definan mejor.
Yo por ejemplo, voy a elegir el color rosa, los tonos que son más acorde con mi marca.
También puedes cambiar el radio del borde como veis va cambiando se va haciendo más redondito y bueno pues todo es un poco así el relleno pues igual la sombra de la caja es todo un poco según vayas investigando.
Hacer un banner en WordPress tipo Slider
Ya tienes un banner bastante dinámico pero también me gusta añadir otra funcionalidad para que tenga un toque más tipo slider o más dinámico. Y para hacer esto, lo que vamos a hacer es:
- Seleccionar todo.
- Hacer Click en Avanzado, y seleccionar efectos de movimiento.
- Puedes añadir este efecto a cualquiera de los elementos de tu diseño. A la imagen, al título, o a los párrafos que añades en tu banner.
Como ya te he explicado otras veces, esto es investigar, probar, y sólo de esa manera vas a descubrir cosas nuevas, ver el tipo de personalidad o el tipo de imagen de marca que le quieres estar a tu página y adaptarlo todo un poco a tus necesidades. Por último, no se te olvide dar a publicar para que se guarden los cambios.
