Tutorial Elementor Page Builder en Español

¡Compartir es de sabios!

Seguramente ha llegado a su fin el reinado de maquetadores visuales como Thrive Architect, que durante años ha sido el mejor programa de diseño. En este Tutorial Elementor Page Builder, vamos a ver cuales son los motivos por lo que este plugin es el nuevo maquetador visual del momento.

Hay una combinación letal para diseñar páginas o post de gran calidad, nos estamos refiriendo a la combinación del tema GeneratePress Elementor. En las siguientes líneas os diré el por qué.

Ah! se supone que para poder utilizar Elementor debes de tener una página web, si no tienes tiempo para hacerla tu mismo, yo te puedo ayudar. Dicho esto vamos al lío.

Tutorial Elementor Page Builder | Autoempleodigital.com

Versión gratuita de Elementor Page Builder

Ya en su versión gratuita, Elementor te permite diseñar una página web de gran calidad. Evidentemente en esta versión echarás de menos algunos add-ons que si tiene la versión Pro.

Si lo que quieres es probar el funcionamiento, puedes empezar con la versión gratuita. Pero si ya tienes suficiente experiencia el la maquetación de webs, te recomiendo que pases directamente a Elementor Pro, así no echarás de menos las valiosas opciones que trae la versión PRO.

Si buscas programas de diseño gráfico gratis Elementor es tu opción. Fu funcionamiento es muy sencillo, basta con agregar una sección para a continuación mediante el sistema de ‘pincho y arrastro‘, llevar la funcionalidad elegida a dicha sección.

En este tutorial Elemento Page Builder en Español, vamos a repasar cuales son las funcionalidades que trae este page builder WordPress, tanto en su versión gratuita como en su versión de pago.

 

Características de Elementor gratis

Pues lo dicho, vamos a ver las características que trae este page builder en su versión gratuita, que no son pocas.

Tutorial Elementor Page Builder en Español | Autoempleodigital.com

Sección Interior

Esta acción nos permite definir el número de columnas que queremos que tenga la sección. Podemos poner desde 1 hasta 6 columnas, y cada una de ellas con el ancho que nosotros queramos. Cada una de estas columnas puede tener diferentes configuraciones, distintos colores, distintos contenidos, etc.

Encabezado

Como te puedes ir imaginando, sirve para definir los títulos que tendrá el diseño de tu web (H1, H2, H3, H4…). En esta ocasión podemos definir a nuestro gusto el color de la fuente, la familia, el tamaño, y todas las opciones que te puedas imaginar para personalizar tus títulos.

Imagen

Con esta función podemos insertar imágenes, también tienes multitud de opciones a la hora de personalizar tus imágenes. Puedes por ejemplo ponerle borde, oscurecer la imagen, añadirle efectos, enlaces…

Editor de Texto

Es el típico editor de texto de WordPress. Supongo que ya sabes como funciona asi que no voy a decir gran cosa sobre esta característica de Elementor.

Vídeo

No hay mucho que decir sobre esta acción. Nos permite insertar un vídeo en nuestra web de cualquier proveedor de vídeos como YouTube, Vimeo, etc. Al igual que pasa con las anteriores características, también podemos personalizarlo a nuestro gusto gracias a la gran cantidad de opciones para ello.

Botón

Sirve para insertar un botón. Tiene multitud de opciones de personalización. Puedes elegir el tamaño, el color tanto en reposo como en activo, puedes definir bordes, enlaces, introducir iconos y muchas cosas más.

Separador

Gracias a esta función podemos definir claramente donde empieza o donde termina una sección. También tiene un alto grado de personalización.

Espaciador

El espaciador lo que hace es que mete espacios donde nosotros queramos para evitar que los contenidos queden demasiado compactados. Nosotros tenemos el ‘poder‘ de elegir el tamaño del espacio a insertar.

Google Maps

Si tienes un negocio físico, es imprescindible que los clientes sepan la dirección de tu negocio. Y con esta característica lo podrás hacer de forma clara, sencilla y rápida.

Icono

Si necesitas poner iconos en tu sitio web, lo podrás hacer con esta función. Elige el tamaño, el color, ponle un enlace, todas las opciones sobre iconos lo tienes con esta característica.

LO VISTO HASTA AHORA EN VÍDEO

Tutorial Elementor Page Builder versión Pro

Con todas las opciones que has visto en la versión gratuita, ya tendrías suficientes opciones para diseñar una buena página web. Pero este Tutorial Elementor Page Builder no estaría completo sin las opciones que trae la versión pro, y que a continuación pasamos a ver.

Características Elementor Pro

¿Te está gustando lo que tiene que ofrecer Elementor Page Builder? Pues si te gusta su versión gratuita, espera a ver todas las características de su versión Pro.

Curso Elementor Page Builder en Español | Autoempleodigital.com

Post

Lo que hace esta función de Elementor Pro, es coger los post que tengas publicados para que después lo coloques resumidos en el sitio que quieras de tu página web.

Portfolio

Cómo su propio nombre indica, podrás colocar con esta función un portfolio en cualquier sitio de tu web. Es algo parecido a la función ‘Post‘ que hemos visto anteriormente.

Sliders

Esta función lo que nos permite es poner información de ciertas páginas o post en un mismo sitio. Simplemente irán desplazándose y mostrándose según el tiempo que hayas establecido en cada transición.

Slide 1 Heading
Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 3 Heading
Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Previous
Next

Formularios

Olvídate de recargar tu página web con plugins como por ejemplo Contact Form 7. Con Elementor Pro tienes la posibilidad de crear llamativos formularios de contacto. También puedes configurarlo para aumentar tus listas de correo  integrando Mailchimp, Active Campaign o con cualquier plataforma de Email Marketing..

Login

Si tu web es de las que necesita el registro de usuarios como puede ser una membresía, lo que hace esta función es crear una zona de acceso para tus usuarios registrados.

Nav Menú

¿Nunca has sentido la necesidad de colocar el menú de navegación donde te plazca? Pues ahora lo puedes hacer con esta función de Elementor Pro. Además puedes elegir si quieres que el menú se vea en horizontal o vertical. Para gustos los colores.

Animated Headline

Si quieres resaltar alguna parte de una frase, esta función es justo lo que necesitas. Podrás editar todo lo que quieras de la frase o palabra elegida, desde lo colores hasta el modo de resaltar la palabra.

Autoempleodigital.com es !!!

Price List

Nos muestra una lista de productos con sus respectivos precios. Esta acción encaja perfectamente en un ecommerce o en las páginas donde se venden infoproductos.

Price Table

Lo mismo que el »Price List‘ pero de una forma mucho más gráfica y atractiva para los usuarios.

Escribe tu título

Introduce tu descripción
$ 39
99
Monthly
  • Elemento de lista nº1
  • Elemento de lista nº2
  • Elemento de lista nº3
Populares

Flip Box

Hace la mima función que el ‘Slide‘, pero en vez de ser una transición de desplazamiento, la transición se hace von un volteo.

Este es el encabezado

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Este es el encabezado

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here

Call to Action

Si quieres hacer una llamada de acción para que los usuarios compren algo o se suscriban a una lista de correo, lo podrás hacer de forma muy llamativa e irresistible .’.

Media Carrusel

Esta opción es muy necesaria, si lo que pretendes es mostrar una gran cantidad de archivos multimedia como pueden ser vídeos, fotos o música.

Testimonial Carrusel

Hace la misma función que el ‘Media Carrusel‘ pero en vez de mostrar archivos multimedia, lo que hace es mostrar testimonios de clientes. 

Reviews

Parecido a las dos anteriores funciones, pero en esta ocasión nos da la opción de ir a la cuenta de Twitter de un socio o cliente.

Countdown

La típica cuenta atrás donde muestra los días, horas, minutos o segundos que faltan para el lanzamiento de una web , o el tiempo que falta para la salida de un producto.

Days
Hours
Minutes
Seconds

Share Buttons

Podemos poner los botones para compartir el contenido de todas las redes sociales, y cuando digo todas es todas. Podemos elegir el diseño de los botones, el tamano, el color, etc. Al final de cada artículo mío siempre encontrareis estos botones, para que podáis compartirlo con vuestras amistades. Y yo os estaré eternamente agradecido.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Blockquote

Este apartado es para publicar frases tuyas o de otros, en las que quieres dar énfasis. También tendrás la posibilidad de Twitearlo. Te animo a que hagas la prueba.

No pruebes la versión gratuita de Elementor si no quieres caer en la tentación de comprar la versión Pro. Yo lo probé y ahora no puedo estar más contento con la versión Pro.

Facebook Button

Botón típico de Facebook para indicar que te gusta el artículo que estás leyendo.

LO VISTO HASTA AHORA EN VÍDEO

Opciones generales de Elementor Page Builder

Si creías que el Tutorial Elementor Page Builder en Español, había ya acabado al ver sus opciones gratuitas y sus opciones profesionales, déjame decirte que aún quedan muchas cosas más. ¿No te lo crees? Sigue, sigue leyendo que más widgets podemos encontrar en este increíble maquetador visual.

Si con lo que has visto hasta ahora ya estás convencido en comprar la versión Pro de Elementor, puedes hacerlo mediante el siguiente botón.

Cuadro de imagen

Este widget lo que nos permite es insertar una imagen. Podemos ponerle un título, una descripción, un enlace y todo lo que se te ocurra, pues es altamente personalizable.

Caja de icono

Es muy similar al anterior, pero esta vez insertamos iconos en vez de imágenes. Como pasa con todos los widgets de Elementor Page Builder, puedes personalizarlos totalmente a tu gusto.

Valoración de estrellas

Este es otro claro ejemplo de como puedes evitar el sobrecargar tu WordPress eliminando plugins innecesarios una vez instalas Elementor. Bueno pues este complemento lo que nos permite es que nuestros usuarios valoren los artículos.

5/5

Galería de imágenes

Funciona básicamente como las galerías de imágenes de WordPress. Eliges las imágenes para insertar en la galería y estas se muestran en el lugar que quieras de tu página web.

Carrusel de imágenes

El típico carrusel donde van pasando las imágenes. Puedes modificar los segundos entre el movimiento de las imágenes.

Listado de iconos

  • Elemento de lista nº1
  • Elemento de lista nº2
  • Elemento de lista nº3

Podemos poner un listado de iconos donde queramos. Los iconos podrás ponerlos del tamaño que quieras, del color que quieras. Entre la cantidad de iconos disponibles están los iconos de Amazon, Youtube y como no el icono de WordPress.

Contador

Con el contador puedes poner el número de usuarios registrados, el número de infoproductos que vendes, y para cualquier cosa que necesite tener un contador.

0
Título de número

Barra de progreso

Un simpático widget donde podemos poner barras de progreso para diferentes objetivos.

Mis habilidades
Diseñador web 50%
Programación 75%
SEO 37%
[thrive_leads id='681']

Recomendación

También podemos poner los feedback de los usuarios que hayan comprado un producto o servicio. Si están contentos con tus servicios o productos seguramente se ofrecerán para recomendarlos.

Pestañas

Si quieres mostrar información por medio de pestañas como si fuese un archivador, este es sin duda el widget que necesitas.

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contenido de tabla

Acordeón

Puedes mostrar también información mediante el widget acordeón. Puedes ver como funciona justamente debajo de estas líneas.

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Alternar

Básicamente funciona como el anterior widget, así que no hay mucho más que explicar de esta funcionalidad.

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Iconos sociales

Aquí vemos los típicos iconos que nos llevarán a las distintas redes sociales de la página web o blog. Normalmente suelen ir acompañados de la frase «Síguenos en las redes sociales».

Madre mía que pedazo de artículo nos estamos currando, ¿Sabéis cuantas palabras llevamos hasta ahora? En este punto del Tutorial Elementor Page Builder llevamos 2391 palabras.

Me están empezando a salir ampollas en los dedos, pero no pienso desistir 😉 .Sigamos!

Alertas

Las alertas de Elementor Pro están dentro de unas cajas de colores. Disponemos de 4 alertas:

  • Información (Caja Azul)
  • Éxito (Caja Verde)
  • Peligro (Caja Roja)
  • Advertencia (Caja Amarilla)

Como ya te estarás imaginando y dado que lo he repetido unas cuantas veces en este Tutorial Elementor Page Builder, puedes personalizar estas cajas a tu gusto.

SoundCloud

Una imagen vale más que mil palabras, aunque en esta ocasión sería… una canción vale más que mil palabras.

Shortcode

Nos permite insertar shortcodes en cualquier lugar de tu página web.

HTML

Si sabes de código html, con este widget puedes insertar código html y personalizar todavía más tu web.

Ancla de menú

Lo que hace este widget de Elementor Pro, es que te traslada desde un enlace hasta un punto concreto de esa misma página. Un ejemplo de como funciona lo tienes justamente al inicio de este artículo. Si pinchas en cualquier enlace del indice, irás de forma automática al contenido de ese enlace.

Barra lateral

Tal y como sucede en muchos blog que disponen de una barra lateral, con esta función puedes hacer exactamente lo mismo. Poco más que explicar pues todos sabéis a que barra lateral me refiero.

Leer más

Podemos poner un enlace «Leer más» donde queramos para que redirija a cualquier página o entrada de nuestro blog.

LO VISTO HASTA AHORA EN VÍDEO

GeneratePress + Elementor

El diseño de esta misma web desde la que escribo, trabaja bajo el tema GeneratePress Premium. Este tema destaca por su gran rapidez de carga, por ser muy liviano e intuitivo a la hora de personalizar tu web.

Si a esto le sumas que trabaje junto al mejor maquetador visual del momento los resultados pueden ser espectaculares.

Por lo tanto si eres un diseñador experimentado como si eres un novato, mi recomendación es que no busques más. La combinación de GeneratePress + Elementor Page builder es la mejor opción actualmente.

Si ya te has decidido a trabajar con estas dos herramientas, puedes hacerlo pinchando en los siguientes botones.

Y hasta aquí este «pequeño» Tutorial Elementor Page Builder. Próximamente colgaré un curso con lecciones en vídeo donde veremos como hacer una página web desde cero con GeneratePress + Elementor.

¿Piensas al igual que yo, que Elementor Pro es el mejor maquetador visual del momento? ¿Trabajas también con el tándem GeneratePress + Elementor? Si lo deseas, a continuación puedes dejarme cualquier comentario sobre el Tutorial Elementor Page Builder.

TE PUEDE INTERESAR:

Deja un comentario

shares