¡Como usar Elementor! Y 10 motivos para implementarlo

Como usar Elementor

Como usar Elementor es un plugin y no una plantilla, es decir que con Elementor no podrás personalizar el diseño del header de la web, apariencia del menú o el footer. Estos elementos son cosa de las plantillas.

Como usar Elementor básicamente

Como usar Elementor Plugin Elementor Page Builder características

Podemos decir que conforme este plugin vayamos avanzando, realizando modificaciones no tendremos que hacer vistas previas para ver resultados los cambios los iremos viendo en tiempo real.

Esto es una gran ventaja ya que como vamos manejando personalizando todo lo que es texto, iconos en diseño, ya que los ajustes se realizan mucho mas rápido.

Como usar Elementor, pagina principal de menús
Pagina general de Elementor

Elementor y el Control total de las secciones dinámica para personalizar

Las secciones son los contenedores de los mas grandes de un page builder, es esta pagina hay varias secciones, se incluirán columnas y elementos dentro de estas.

Con el page builder Elementor se ha hecho un notable esfuerzo por tener un control total sobre las características de las todas las secciones y cada una funciona para cada instrucción.

Como usar Elementor menú de diseño
Como usar Elementor menú de diseño

Distribución de anchuras de columnas personalizadas con Elementor

Elementor es de los pocos constructores que permite personalizar de manera independiente, la anchura de cada una de las diferentes columnas incluidas las que están en la sección.

Todo esto se puede hacer de forma dinámica.

Como usar Elementor y sus columnas
Como usar Elementor y sus columnas

Opciones de posición de columnas en sección y elementos en columnas

Cuando hablamos del maquetador de visual Elementor, permite varias opciones dinámica, que permite la colocación de las columnas en las secciones y los elementos en las columnas.

De tal forma que podemos ahorar el tener que meter algunos separadores.

Como usar Elementor y secciones de columnas
Como usar Elementor y secciones de columnas

Margin y Padding

El Page builder de las opciones de personalizar el margin osea los margenes exteriores y las opciones de padding los margenes interiores.

Con estas opciones podemos personalizar mas las opciones de dinámica del plugin en la estructura de pagina.

Como usar Elementor y sus margenes
Como usar Elementor y sus margenes

Opciones específicas para dispositivos móviles y modo visualización móvil

Dispone de opciones especificas de configuración para los dispositivos móviles, es decir que se pueden modificar diferentes tipos de dispositivos.

Se puede ver en un pequeño icono en forma de monitor significa que dicha opción se puede modificar desde tu tablet, escritorio o móvil

Como usar Elementor en el móvil
Como usar Elementor en el móvil

Diseños predefinidos para tener un punto de partida

El Elementor contiene un monton de diseños predeterminados, que puedes reutilizar y modificar los proyectos.

Como usar Elementor y sus plantillas
Como usar Elementor y sus plantillas

Guardar, reutilizar, exportar e importar diseños

Elementor permite guardar secciones y paginas completas, luego reutilizar dichos recursos en otras paginas de la misma web, esto se habla de exportar a otras paginas que es muy dinámica y ayuda del plugin.

Estructura del maquetador visual Elementor

  • Secciones: las secciones son los contenedores principales del constructor. Son los contiene más grandes, y en una página se pueden incluir más de uno.
  • Las secciones se utilizan bastantemente para dividir una página en varias partes distintas, haciendo cambios en algode color de fondo.
  • Columnas: las columnas marcan la distribución dentro de cada sección. En la imagen de más abajo tenemos una sección compuesta por 2 columnas.
  • Dentro de las columnas se ubicarán los elementos.
  • Elementos o widgets: son los bloques finales del page builder, cada elemento tiene una funcionalidad diferente.
  • Como antes he comentado, prefiero llamarlos elementos y no widgets para no crear confusión con los widgets de WordPress.
  • Hay elementos para añadir iconos, formularios de contacto, textos, botones.
Como usar Elementor y todas sus características
Como usar Elementor y todas sus características

Elementos del Constructor Elementor.

Ahora veremos diferentes tipos de maquetador visual, los elementos son los bloques finales que utilza el page bauilder, Cada elemento tiene una finalidad diferente.

Hay elementos en forma gratuita del page builder y otros en forma premium, veremos algunos.

(Heading)

Es el elemento plugin de encabezado del page builder, esta pensado para añadir los encabezados, podemos especificar del tipo HTML, lo que quiere decir que son los : H1,H2,H3,H4,H5,H6.

Podemos personalizar añadir titulo, tipo de fuente, tamaño, estilo, decoración, transformación espacio de letras etc.

También podemos poner la dinámica que se le llama las letras negritas o también sombreadas.

Como usar Elementor con sus encabezados
Como usar Elementor con sus encabezados

(Image)

En este maquetador de visual Elementor te permite que añadas una imagen, aquí podrás elegir un tamaño predeterminado de la imagen independientemente del dispositivo.

Aquí podrás personalizar los bordes y añadir una sombra personalizada, también podrás personalizar la opacidad de la imagen, de la imagen mas dinámica e inclusive con el movimiento.

Como usar Elementor y sus imágenes
Como usar Elementor y sus imágenes

(Text Editor)

Este elemento del plugin incluye la dinámica el editor por defecto del WordPress. La misión de este elemento es poder añadir a la página bloques de texto claro y muy bien estructurado .

Podremos personalizar color y tipografía a utilizar en el elemento osea cualquier tipo de fuente que guste.

Como usar Elementor con el editor de texto
Como usar Elementor con el editor de texto

Vídeo

Este elemento nos permite incrustar fácilmente un vídeo de YouTube o de cualquier otra plataforma en la página que estemos creando.

Podremos dar o personalizar aspectos como que el vídeo se reproduzca de manera automática (auto-reproductor), mostrar y ocultar vídeos sugeridos, mostrar y ocultar controles del reproductor, mostrar y ocultar título y acciones del reproductor, e incluso silenciar el vídeo para solo ver las imagenes.

Podrás elegir también entre los tipos de formatos que se pueden escoger: 3:2, 16:9, 4:3

Como usar Elementor y sus vídeos
Como usar Elementor y sus vídeos

Botón

Elemento de este plugin que no puede faltar en un page builder y que nos permitirá añadir botones personalizados a la página.

Dispone de todas o de varias opciones necesarias para personalizar el diseño de los botones como tamaño, colores texto y fondo, borde, radio curvatura esquinas y muchas mas.

También ella dispone de opciones para personalizar el diseño del botón en estado se decir que cuando se pone el ratón sobre el botón, el estado podremos personalizar color del texto, color de fondo, borde y animación.

Como usar Elementor y el apartado botón
Como usar Elementor y el apartado botón

(Divider)

Este elemento del plugin te servirá para separar diferentes elementos con una línea personalizada en cuanto a forma, tamaño y colores y que habitualmente este elemento se utiliza situándolo debajo de algunos tipos de títulos que se les agrega al texto.

(Spacer)

Este sirve para añadir un espacio en blanco, la altura de este espacio lo podremos personalizar establecimiento los pixeles de dicho espacios.

(Icon)

Con este elemento podremos insertar un icono de la fuente Awesome aislado o incluido en un círculo por defecto, apilados y encuadrado, podremos añadir un enlace al icono del plugin, personalizar sus colores, tamaño, rotación y muchos mas.

Podremos añadir al icono efectos hover al poner el punteador sobre el mismo de animación y cambio de color.

(Image Box)

La composición esta formada por una imagen en un titulo y un texto, realmente podemos esta crear 3 elementos, el de imagen, mas elemento del titulo, mas el elementos del editor del texto.

Si lo quieres hacerlo mas rápido, lo puedes hacer con esta composición por defecto de los elementos independientes

Como usar Elementor y su editor de imagen
Como usar Elementor y su editor de imagen

Icon Box

Composición como lo anterior con la diferencia de que ahora tenemos un icono en vez de la imagen de encabezando la composición.

Lo de icono anterior es lo mismo de de ahora.

Image Gallery

Estos elementos permite añadir una galería de imágenes de la pagina, al hacer el clic sobre una de ellas, mostrará en una capa overlay que dispondrá de flechas para visualizar.

Vamos a poder personalizar el tamaño de las imágenes y distribuirlas en las columnas, también podremos personalizar dinámicamente en el espacio y margen, también tenemos la opción de mostrar o ocultar la leyenda de cada imagen.

Image Carousel

Esto es muy importante este tipo de elemento que nos permite añadir un carrusel de las imagenes, esto nos sirve para los logos de las empresas.

El nivel de carrusel es muy alto, podemos personalizar el tamaño, numero de imágenes que aparecen en la primera visualización, el elemento carrusel también tienen un montón de opciones relacionadas con la reproducción o movimiento de carrusel.

Como usar Elementor en las imágenes
Como usar Elementor en las imágenes

Icon List

Este elemento del plugin nos permitirá añadir una lista de títulos con un icono situado a la izquierda de cada titulo, algo que se utiliza mucho en los servicios de empresa.

Poner diferentes iconos asociado a cada título que se requiera , podremos personalizar el espacio de interlineado entre cada título.

Podremos personalizar el tamaño de los iconos, color normal y hover, también podremos personalizar muchas cosas como son:

  • El color del texto de título (normal y en posición hover)
  • El espacio entre los iconos
  • El texto (sangría)
  • La tipografía, entre otros
Como usar Elementor y sus listas
Como usar Elementor y sus listas

Counter

Este elemento Contador de plugin, permite personalizar incluir el típico contador animado que va desde dinámica un número inicial hasta otro número final, que podremos personalizar en la personalización del elemento.

Podremos colocar un prefijo y también sufijo al número, que podremos utilizar para poner de distintos signos también, además podremos personalizar la duración de la animación, y poner un título debajo de la animación.

También podremos personalizar todo lo que es el color la tipografía del número y algunas cosas del texto.

Progress Bar

Nos permite añadir una barra animada con un determinado porcentaje en la cual vamos a rellenar.

Podremos personalizar el porcentaje de relleno de la barra, personalizar el color de esta, la opción de mostrar y también ocultar el porcentaje y poner un texto encima entre otra cosas podremos personalizar el color de la barra y texto.

Accordion

Un acordeón esta formado por una serie de bloques o títulos desplegables, que muestran un contenido cuando se despliegan texto y también imágenes, con la peculiaridad de que solo puede haber un bloque desplegado.

Muy utilizado para crear las preguntas frecuentes o FAQS en la web.

Podremos personalizar el tipo de título HTML de cada bloque de texto o título también, podremos personalizar el icono que se mostrará en el título, tanto en cualquier posición cerrada como en la posición abierta del bloque señalado.

Además también podremos personalizar el ancho de borde, el diseño de los títulos y fondo, diseño del contenido de texto y fondo, así como de los iconos de los títulos.

Como usar Elementor y su apartado acordión
Como usar Elementor y su apartado acordión

10 motivos para implementar Elementor

Aquí presentaremos cada uno de los motivos para implementar el plugin:

  • Editar en vivo y en directo
  • Código optimizado para SEO
  • Es ágil y estable
  • Cuenta con un repertorio muy exitoso de plantillas
  • Cuenta con un editor móvil
  • Es de código abierto
  • La versión gratuita cuenta con 29 widget
  • Diseña sin tocar el codigo
  • Nunca volverás a utilizar las plantillas del wordpress
  • Existen infinidad de plugins
Como usar Elementor y sus ventajas
Como usar Elementor y sus ventajas

Historia del Elementor

Elementor es una compañía de software israelí que brinda servicios de desarrollo web.

 El generador de sitios web Elementor permite a los usuarios de WordPress crear y editar sitios web mediante el uso de la técnica de arrastrar y soltar , con un modo de respuesta incorporado .

Además de una versión freemium , Elementor también ofrece una versión premium de su creador de sitios web: Elementor Pro, que incluye características adicionales y más de 700 complementos. 

A partir de abril de 2020, Elementor está disponible en más de 50 idiomas y es el sexto plugin de WordPress más popular, con más de 5 millones de instalaciones activas en todo el mundo. 

Es una plataforma de código abierto, licencia GPLv3 y alimenta el 2.24% de los sitios web de 1M más importantes del mundo.

Los sitios web creados con Elementor:

  • Sitios web de 1M creados con Elementor: 5 de julio de 2018 
  • Sitios web de 2M creados con Elementor: 18 de febrero de 2019 
  • Sitios web de 3M creados con Elementor: 14 de agosto de 2019 
  • Sitios web de 4M creados con Elementor: 29 de enero de 2020 
  • Sitios web de 5M creados con Elementor: 12 de mayo de 2020

Conclusión

Como hemos visto en el texto , nos damos cuenta como es relativamente sencillo hacer una pagina web con los conocimientos básicos en Elementor.

Elementor nos facilita el editar,acomodar todo tipo de secciones es un plugin de maquetacion, que ofrece ventajas a sus competidores.

Así que es recomendable pasar a elementor y disfrutar la sensación del 100% de diseño web


Cano Miguel (Equipo Devloteq)

Soy Ingeniero en Comunicaciones y Electrónica del IPN, me encanta la electrónica y la tecnología , buscar soluciones y problemas en ejercicios de tipo electrónico y matemático, también me dedico a los videojuegos, al ejercicio al aire libre y me encantan los debates.
¿Que te pareció?
[Total: 5 Promedio: 5]

Deja un comentario

Tu dirección de correo electrónico no será publicada.



- Publicación: 03/08/2020 - Actualización: 06/08/2020 -