El poder elementor page builder

En este tutorial vamos a estar hablando de Elementor page builder ya que despues de haber provado varias herramientas de edición visual, esta se ha ganado mi corazón.

¿Qué es elementor page builder?

Elementor page builder  es un constructor de página que tiene más de 780,064 descargas. Esto lo ubica como uno de los mejores en su línea.

En este tutorial vamos a estar instalando y algunas de sus características.

Características principales de Elementor Page Builder

Elementor page builder es más rápido

El contenedor de Elementor tiene un montón de widget el cual tus tomas y arrastras para ir creandotu sitio web de manera visual.

Este proceso de arrastrar y soltar elementor lorealiza de manera fluido y rápido. No tendremos que esperaro que se quede pegado.

Cada cambio que tus vallas realizando lo veras en tiempo real, esto esexcelente ya que en todo momento veras como va quedando el sitio y de igual manera te ahorrara mucho tiempo.

Elementor page builder es de código abierto

Esto quiere decir que cualquier persona que desee puede descargar su código fuente y modificarlo como él lo desee.

Tendremos a nuestro alcance todas las características de diseño que puedas necesitar para hacer sitios web de manera visual.

Al ser de código abierto esto le da muchas ventajas ya que no solo ira evolucionando más rápido, sino que si se presenta algún problema tendrá soluciones más rápidas gracias a la ayuda de la comunidad.

Podrás hacer sitio web elegantes sin tocar el código
Elementor fue hecho pensando siempre en los diseñadores. Esto lo hace ser un editor que ayuda más a aquellas personas que no tienen ningún conocimiento técnico.

Elementor page builder es fácil de usar

Otras de las características importante que tiene elementor es que es sencilla de utilizar, ya que solamente tendrás que arrastrar y soltar el elemento que deseas poner en tu web, modificar los parámetros que aparecen en el formulario que salga y listo.

Y lo mejor de todo es que cualquier cambio que realice se hará en tiempo real.

Diseño web responsive

Algo muy importante cuando uno crea una página web es que esta sea responsibe, es decir que se adapte a cualquier dispositivo.

Con elementor page builder tendrás el control de manejar los media queries, es decir los css que se encarga de que tu web vaya cambiando en dependencia del dispositivo en que se esté viendo.

Por ejemplo si tu pones una tipografía o una imagen y tu desea ver como se vería en desktop,tablet o movil solo tendrás que dar clic en las diferentes opciones de tamaño y este cambiara.

El plugin elementor page builder es gratis

Algo bueno de elementor es que es gratuito en comparación a otros editores visuales.

Aunque hay una versión de pago que es elementor page builder pro, no piensan quitar ninguna funcionalidad a la versión gratuita.

El plugin elementor compatible con GeneratePress

Quiero comentarte que elementor es completamente compatible en el themeGeneratePress.

En lo personal te recomiendo que utilice ambos ya que el theme Generate Press  en comparación a otros temas es rápido, ligero y está bien construido.

Optimizado para SEO

Otras de las grandes característica que tiene el plugin elementor page builder es que fue pensado para el seo, es decir que que tiene un código limpio y cumple con los estándares que exigen los buscadores.

Intalación plugin elementor

Para instalarlo solo tendrías que irte al área de administración – Plugin – Añadir plugin y en el buscador pones Elementor

Lo instala y activas

A continuación, vamos a ver en funcionamiento elementor page builder:

Para usarlo tendrá por ejemplo que irte a Paginas – Y situar el mouse sobre la página que tengas en mi caso tengo una que se llama Inicio.

Nota: Si no tienes una entonces tendrás que crearte una dando clic en el botón Añadir nueva

Tal y como vez en la imagen superior tendrás que dar clic en Editar con Elementor

Una vez que se ha cargado nos mostrara la siguiente venta

Al lado izquierdo vamos a tener el menú de elementos del plugin elementor, cabe aclarar que dichos elementos son Widgets gratuitos que ellos ponen a disposición. OK veamos cada parte

Si por alguna razón vas por ejemplo a GLOBAL o a cualquier otra parte de dicho panel y deseas volver a ver todas las herramientas o widget solo basta que des clic en los cuadritos que aparece en la parte superior derecha tal y como se muestra en el recuadro.

Secciones

Antes de seguir viendo las herramientas tenemos que hablar de las secciones ya que sin esta no podríamos usar los elementos.

Cuando tu das clic tendrás varias opciones

Con esto tu podrás establecer diferentes secciones en tu diseño web. Las secciones son las estructuras básicas de la página.

Por ejemplo, si selección la primera opción   y damos clic se en la pestaña secciones nos aparecerá la siguiente ventana

Aquí podrás marcar la opción “StretchSection” o seleccionar “Ancho completo” dichas opciones la puedes encontrar en Ancho del contenido.

Podrás establecer como fondo tanto una imagen como un video. Así como borde, margen, relleno, animación, aplicar estilos CSS, etc, para cada sección.

Nota: Una página web hecha con  elementor page builder está compuesta o dividida por secciones.

Columnas


Las columnas son bien importantes para hacer una página web. Con elementor podemos incluir la cantidad de columna que deseemos en una misma fila,  en la cual nosotros tendremos el control para darle la proporción que nosotros estimemos a bien a cada una de ellas.

En lo personal esto me parece fantástico ya que en su momento probé otros plugins pero elementor lo hace de manera sencilla y sin ninguna limitación, ya que si por ejemplo tú tienes 3 columnas y a una de ella le das una dimensión de 30% otra 10% y otra de 60% no habría ningún problema. Esto te ayudara a usar tu creatividad al máximo.

Encabezado

Esta herramienta es más que obvio.

Te servirá para poner los encabezados en tus diseños. Dichos encabezados pueden ser (h1, h2, h3, etc.)

Tambiénpodrás establecer enlace, tamaño, alineación, color, fuente, márgenes, relleno, animación, estilos css al encabezado.

Imagen

Podrás agregar imágenes en cualquier lugar de tu sitio web con las siguientes opciones de de configuración: tamaño, leyenda, enlace, opacidad, borde, sombra, margen, relleno, animación, css.

Editor de texto

Con este elemento podrás agregar texto en cualquier parte de tu sitio entre algunas de las características que tiene son: DropCap, Alineación, Color, Fuente, margen, relleno, animación, css, fondo.

Algo importante es que podrás elegir la posición que tendrá el texto.

FALTA IMAGEN

Video


Si desea poner video de sitios como Youtube o Vimeo de manera sencilla y responsive este elemento te será de ayuda.

Tendrás la posibilidad de: Auto producir video, Mostrar u ocultar controles, Videos sugeridos, Títulos y acciones del reproductor, imagen de cubierta.

Algo que me parece interesante es la posibilidad de elegir la proporción de tu video ejemplo (15:10, 5:7) antes que el usuario pulse el botón de reproducir.

Boton


Podrás tener la posibilidad de agregar iconos en tu web entre algunas de las características están:

Tipo,texto,enlace,alineación,tamaño, diferentes fuentes de iconos, tipografía,color,borde,sombra,animación, etc.

Separador


En este elemento podrá hacer separaciones donde tú lo desees.

Entre las características que tiene están: Estilo, peso, color, ancho, alineación, brecha, etc…

Espaciador

Este elemento te servirá para agregarle espacio en blanco de separación entre cada elemento.

Google Maps


Si deseas establecer maps de Google directamente en tu diseño estableciendo de manera sencilla dirección y coordenadas, tamaño, nivel de zoom y deshabilitar que las personas puedan hacer zoom.

Los mapas son importantesgeneralmente para ubicar a tus visitantes donde está ubicado tu negocio.

Iconos


Si deseas incluir los famosos iconos Font Awesome ahora podrás hacerlo con este elemento.

Entre las características están: Podrás poner un cuadro al icono o circular, relleno, colores, link, rotación, animación, y mucho mas.

Cuadro de imagen


Tal y como se muestra en la imagen con este elemento podrás poner un cuadro con una imagen, título y una pequeña descripción. Podrás controlar: Enlace, TítulosHTML, espacio, Tamaño, Animación, etc…

Caja de iconos

Caja de icono elementor page builder
Es similar al anterior con la única diferencia es que, en vez de subir una imagen, se utiliza iconos Font Awesome.

Galería de imagen


Con este elemento podrás crear galería de imagen de manera sencilla.

Puedes hacer una selección de cuales desea que se muestren, tamaño, numero de columna, border, fondos, etc.

Carrusel de imágenes


Si desea crear una slider de imagen este es tu elemento. Podrás establecer tamaño, cantidad a mostrar, tipo de controles, enlace, leyenda, etc.

Listado de iconos


Este elemento te servirá para agregar viñeta en tus diseños.

Puedes establecer como viñeta cualquier icono de Font Awesome, así mismo puedes establecer un icono diferente para cada lista.  También puedes agregar espaciado, separador, color, animación, etc.

Contador


Si deseas representar algunos datos de referencia en tu sitio web, pues este elemente te será de mucha ayuda.

Por ejemplo, que desea poner en tu web la cantidad de sitios llevas realizado, o la cantidad de clientes satisfecho ejemplo:

Podrás personalizar número de inicio y fin, Prefijo de número, Sufijo del número, Duración de la animación, Titulo, etc.

Barra de proceso


Te servirá para agregar barras de progreso de lo que tu desees.

Me imagino que has visto en diferentes sitios barras que se van llenando dependiendo  del grado de habilidad que tengas en una determinada disciplina.

Entre algunas características tenemos: Poner título, Tipo, Porcentaje, Texto interior, etc.

Recomendación


Este complemento te servirá para poner testimonio de clientes satisfechos. Entre las características que tenemos están: Contenido, Imagen, Nombre, Trabajo, etc.

Pestaña


Este elemento te ayudara a dividir diferente contenido a través de pestaña de una forma sencilla y práctica.

Acordeón


Igual que el anterior, con la única diferencia es que el texto que está incluido en cada parte está oculto y su estructura es vertical.

Alternar


Es lo mismo que el anterior, la única diferencia es que tu puedes tener flechita en cada elemento.

Iconos sociales


Te permite poner iconos de redes sociales en tu página web. Tú puedes decidir cómo se van a mostrar de forma cuadra, circulo, colores, espaciado que tendrá entre cada uno de ellos.

Alertas


Es una caja de color con texto destacado que el usuario en cualquier momento puede decidir cerrarlo.

SoundCloud


Con este elemento podrás subir archivos de audio en tu web.  Es útil cuando por ejemplo tu sitio es para reproducir música o para el uso de podcast que hoy en día está agarrando bastante popularidad.

Entre las características que tiene este elemento están: Podrás poner la opción de que reproduzca o no, Poner un botón de compra, me gusta, descargar, compartir, posibilidad de poner comentarios, etc.

ShortCode


Si deseas agregarle aún más opciones a elementor tienes a tu disposición los shortcode .

Los shortcode son pequeños fragmentos de código que pueden venir de los plugin. Este elemento se utiliza principalmente cuando queremos agregar funcionalidad externa a elementor.

HTML


Si eres desarrollador o sabes de HTML y deseas agregar tus propios diseños visuales, etc. Entonces este elemento te será de mucha ayuda.

Ancla de menú


Si deseas crear diseño de una sola página es decir One Page Desing. De tal manera que puedas indicarle a tu menú principal  hacia que sección de dicha página se deberá dirigir al pulsar el enlace haciendo el efecto scroll hacia abajo o hacia arriba.

Barra Lateral


Este elemento te dará la posibilidad de agregar una barra lateral en cualquier lugar de tu sitio web.

Esto te será de mucha importancia ya que podrás seleccionar cualquier widget y ponerlo donde tu desees.

WordPress

Por último, tenemos la sección de wordpress.

En esta sección puedes ver todos los widgets que tu coloques o que los plugin te permitan. Con esto podrás utilizar cualquier widget en cualquiera lugar de tu página.

Ultimas opciones de elementor

La X te servirá para que salgas del editor y vuelvas al área de administración de nuestro wordpress.

Icono del monitor

Sirve para que tú puedas visualizar tu sitio web en los diferentes dispositivos tales como: Escritorio, Tablet o Movil.  Esto te será de mucha ayuda ya que podrás darle un vistazo de manera general si tu web se muestra de la mejor manera.

El tercer icono es el de signo de interrogación

Si desea recibir ayuda para aprender a manejar mejor la herramienta solo bastara que le eches un vistazo a esta zona.

El cuarto icono del folder

Te servirá para dos propósitos, uno para ver todas las plantillas disponibles de manera gratuita que los desarrolladores de elementor han puesto a tu disposición. Y el otro propósito es para que tú puedas guardar tu propias plantillas o secciones de tu diseño.

Conclusión

Espero que este tutorial te haya sido de mucha ayuda para que puedas entender mejor las características que tiene el plugin elementor

En lo personal te recomiendo que alquerías este plugin, ya que te facilitara la vida de gran manera.

Si usas como complemento Elementor page builder  más el theme de GeneratePress veras que hacer página web para ti y tus clientes será divertido y sencillo.

Si deseas sacarle el máximo provecho al plugin te recomiendo que veas  el tutorial  Elementor page builder pro en el cual estaremos viendo las características que trae la versión de pago.


Llamado  acción (Formulario promocional)

 

Déjame un comentario, please, que me interesa mucho saber tu opinión sobre este tema.

 

 

 

 

 

 

Deja un comentario