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.
Contenido de la publicación
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.
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.
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.
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.
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.
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
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.
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.
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.
(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.
(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.
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
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.
(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
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.
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
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.
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
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)
