Elementor Page Builder:
La MEGA GUIA DEFINITIVA

Share on facebook
Share on google
Share on twitter
Share on linkedin

Si est√°s buscando el mejor editor visual para el dise√Īo de p√°ginas web, has llegado al sitio correcto.¬†

Con este tutorial elementor aprender√°s desde cero a utilizar este potente maquetador y lograr√°s un resultado profesional sin necesidad de ser un experto programador.

A mediados del 2016 salió al mercado Elementor Page Builder y desde ese entonces hasta ahora ha logrado posicionarse en tiempo record como uno de los mejores, sino el mejor, de los maquetadores web por encima de otros quizás más conocidos y de mayor trayectoria, esto gracias a su facilidad de uso, estabilidad y todas las funcionalidades que te permiten crear cosas realmente increíbles.

En esta guía Elementor Page Builder queremos explicarte todo sobre este editor para que aprendas a usarlo y le saques el mejor provecho.

Veamos punto por punto lo principal que debes saber y de ahí en adelante ya dependerá de ti lograr excelentes resultados. 

¬ŅEst√°s preparado? Manos a la obra

 Elementor Page Builder es un maquetador visual para WordPress de código abierto que permite editar webs realizando cambios sobre la página sin necesidad de tener que escribir líneas de código.

Es un plugin (aplicación que amplía las funciones de un programa o herramienta)   gratuito que también ofrece una versión de pago Pro, la cual contiene muchas más posibilidades que la versión gratuita, aun cuando ésta es de por sí bastante funcional.

Elementor es ideal para quienes desean empezar su p√°gina desde cero o mejorar la que ya tienen en poco tiempo, de una manera amigable, d√°ndole la forma que se quiera sin tener que ser un experto dise√Īador web.

Facilidad de uso: Prácticamente cualquier persona puede manejarlo, sus funciones son muy sencillas y las posibilidades de personalización son enormes.

Resultados en tiempo real: Cada cambio que realices lo puedes ver de manera inmediata. Puedes ir construyendo tu sitio mediante la técnica de arrastrar y soltar bloques a lo largo de la página.

Código abierto: Es el primer editor visual de código abierto lo que supone una gran ventaja ya que puedes modificar su código fuente y adaptarlo a tus necesidades.

Compatibilidad: Es compatible con una gran variedad de plantillas y además puedes crearlas, guardarlas y volver a utilizarlas cuantas veces quieras.

Optimizado para SEO: Favorece el posicionamiento en google ya que su código es bastante limpio.

Genera c√≥digo HTML:¬†Para conseguir las maquetaciones Elementor utiliza c√≥digo HTML por lo que si decides en alg√ļn momento desinstalarlo, no dejar√° la molesta marca de los shortcodes. Seguir√°s teniendo el contenido en formato HTML pero sin los estilos gestionados por el plugin.

Para el desarrollador y el usuario: Re√ļne todo lo que necesita el desarrollador sin olvidar lo que necesita el cliente como usuario no experto. Cubre las necesidades de ambos perfiles lo que es algo fundamental.

Mucho más que responsive: No sólo está preparado para ser responsive, es decir, que permite adaptar la visualización de la página de acuerdo al dispositivo que se use para visitarla, sino que también permite editar la vista del móvil o Tablet, pudiendo modificar ciertos elementos en la versión móvil.

Sin barreras de idioma: Está traducido al castellano y es compatible con los plugins de traducción WPML y Polylang.

Adem√°s de todas las razones anteriores, tambi√©n podemos decir que fue creado tomando en cuenta el punto de vista del dise√Īador y no s√≥lo el del programador, siendo aqu√≠ donde radica una de sus mayores fortalezas, ya que permite hacer much√≠simas cosas que con otros maquetadores ni se pensaban posibles.

Y por si fuese poco a√Īadimos a la larga lista de las virtudes de Elementor, que¬†pesa menos, es¬†m√°s r√°pido¬†y se¬†actualiza constantemente.

Todo lo anterior se puede certificar por las más de 1 millón de instalaciones activas y las 5 estrellas de valoración de las que goza.

Seguramente que después de haber leído todo esto querrás comprobarlo por ti mismo. Así que pasemos al siguiente punto.

Puedes instalarlo directamente en WordPress a través del repositorio o descargarlo desde la página oficial de Elementor y subir el archivo después de forma totalmente gratuita.

La forma m√°s r√°pida y c√≥moda es hacerlo desde tu WordPress para lo que tendr√°s que ir a la opci√≥n¬†Plugin>>>A√Īadir nuevo.

En la parte superior derecha encontrarás el buscador, ahí debes escribir el nombre del maquetador: Elementor Page Builder. Una vez que aparezca sólo tienes que hacer clic en Instalar ahora y luego en Activar.

Una vez instalado ya puedes empezar a disfrutar de sus funcionalidades pero no olvides que también tienes la posibilidad de adquirir la versión de pago PRO, que te resultará una muy buena inversión si deseas ponerle total seriedad al asunto de tu página.

Primero prueba con la versión gratuita a ver qué tal te va. Seguramente vas a querer al cabo del tiempo disfrutar la versión PRO, pero para empezar está muy bien la versión gratuita.

Luego que hayas instalado el maquetador notar√°s que tendr√°s una nueva opci√≥n en los men√ļs del escritorio del WordPress que corresponde a Elementor.

Antes de empezar a trabajar con él, tómate unos pocos minutos para configurarlo.

El men√ļ consta de 5 submen√ļs: Ajustes, Mi Biblioteca, Herramientas, Informaci√≥n del sistema y Licencia.

Información del sistema y Licencia muestran la información referente a la página web y a la licencia con la que se está usando Elementor. Cómo has de suponer, no se pueden modificar y en realidad no afecta en nada su funcionamiento.

Nos centraremos entonces en los men√ļs restantes, es decir en Ajustes, Mi Biblioteca y Herramientas,

En el submen√ļ Ajustes encontrar√°s 4 pesta√Īas: General, Estilo, Integraciones y Avanzado.¬†

Veamos los ajustes que se pueden realizar en cada una de ellas.

Tipos de entrada:¬†En esta opci√≥n seleccionas en qu√© tipo de contenido vas a poder usar Elementor. Como m√≠nimo las opciones presentes ser√°n: entradas y p√°ginas. Es opciones pueden variar dependiendo del tema y los plugins que tengas instalados. Lo que m√°s se recomienda es seleccionar s√≥lo p√°ginas y las entradas que sean seg√ļn el tema.

Perfiles excluidos: Con esta opción puedes restringir el uso del plugin a otros usuarios que tengan acceso a tu WorPress.

Desactivar colores globales/Desactivar tipograf√≠as globales:¬†Con la activaci√≥n de estas opciones utilizar√°s los colores y la tipograf√≠a que vienen por defecto en las plantillas que est√©s usando. Es mejor dejarlas sin marcar por si luego quieres hacer alg√ļn ajuste.

Mejorar Elementor: Con esta opción se envía de forma anónima datos relacionados sobre el uso que le das al maquetador, esto con la finalidad de mejorar el producto en cada actualización.

Puedes marcarlo o no, esto no influye de ninguna forma en su funcionamiento. Queda a tu elección.

Fuentes genéricas predeterminadas: Aquí seleccionas la familia de fuetes que serán utilizadas por defecto.

Ancho del contenido: Se refiere al ancho máximo del contenido que vas a crear con Elementor.

Si no necesitas algo especial deja el que viene configurado por defecto.

Espacio entre Widgets: En esta parte puedes indicar el espacio por defecto que que deseas exista entre Widgets. En realidad no hace falta cambiar este valor, el que trae funciona bastante bien.

Extender hasta ajustar selección: Ajusta una sección hasta una parte en concreto de la web.

Selector de t√≠tulo de p√°gina:¬†Introduce el selector que tiene el t√≠tulo de la p√°gina que vas a editar por si en alg√ļn momento quieres eliminarlo de tus dise√Īos.

Recaptcha: Esta opción te permite activar el servicio de protección contra spam. Puedes incluir en los formularios que vayas a crear los conocidos recuadros con letras difíciles de reconocer que tienen que ser completados para asegurarse que está siendo utilizado por una persona.

Avanzado: En este apartado se establece el método de impresión del código CSS y se puede cambiar el método de carga del editor en caso que se genere un conflicto entre los otros plugins y Elementor.

En esta secci√≥n podr√°s ver los dise√Īos que hayas guardado y adem√°s tendr√°s la posibilidad de importar otros.

Elementor incluye una serie de herramientas que te pueden resultar de mucha utilidad y que en algunos casos te ahorrar√° tener que instalar otros plugins.

Regenerar CSS y sincronizar biblioteca: Esta herramienta se utiliza para recuperar los archivos originales en caso de fallas al usar el editor.

Reemplazar URL: Si vas a cambiar la URL no tendrás mucho problema gracias a esta herramienta, basta con escribir la dirección antigua, la nueva y hacer clic.

Revertir a la versi√≥n anterior:¬†Si llegas a tener alg√ļn problema luego de haber actualizado, no te preocupes. Con esta herramienta podr√°s volver a la versi√≥n anterior.

Conviértete en probador de betas: Puedes hacer que en las actualizaciones aparezcan las versiones beta lo cual no es recomendable si estás usando Elementor en una página que está online. Recuerda que las versiones beta pueden contener errores ya que no son versiones definitivas.

Modo de mantenimiento: Esta herramienta te permite colocar tu web en modo mantenimiento si tienes que realizar cualquier ajuste en ella. Se manejan dos opciones: código 200 para poco tiempo y código 503 para más tiempo.

Para comenzar a utilizar Elementor lo primero que debes hacer es crear o abrir la página en la que vas a trabajar y luego hacer clic sobre Editar con  Elementor.

La forma de trabajar con este maquetador es bastante sencilla, b√°sicamente debes arrastrar y soltar los diferentes elementos que se encuentran en la parte izquierda, los cuales describiremos con detalle m√°s adelante.

Si vas a trabajar en una p√°gina que ya has creado, los elementos que a√Īadas con Elementor se van a sumar al contenido que ya existe, el cual tambi√©n podr√°s editar.

La primera pantalla que verás al entrar en Elementor mostrará del lado izquierdo un panel dividido en tres partes y del lado derecho la zona que corresponde al espacio donde se colocan los distintos elementos que se arrastran hasta ella y donde verás cómo va quedando tu página.

Estos elementos son modificados desde el panel izquierdo. Este panel dijimos que está divido en tres partes: En la primera parte, ubicada en la zona superior, podemos ir a las opciones generales de configuración o cambiar a la vista Widgets.

En la parte central, dependiendo de la vista que hayamos seleccionado (configuraci√≥n general o Widgets) tendremos las diferentes opciones seg√ļn corresponda.

En la parte inferior est√°n ubicadas las opciones para cerrar Elementor y regresar al escritorio de WordPress, ver el dise√Īo en distintos tama√Īos de pantalla, ir a la documentaci√≥n del plugin, guardar el dise√Īo como una plantilla para utilizarla en otra p√°gina y guardar la p√°gina.

En la zona de trabajo o dise√Īo, vas a encontrar dos opciones: A√Īadir nueva secci√≥n y a√Īadir plantilla.

Las plantillas son modelos dise√Īados de manera profesional que puedes personalizar tanto como quieras. Son una buena opci√≥n para principiantes y para aquellos que quieran empezar de forma m√°s r√°pida.

Elementor contiene una buena cantidad de plantillas que pueden adaptarse perfectamente al tipo de proyecto que vas a realizar.

Al hacer clic en el bot√≥n¬†A√Īadir plantilla,¬†aparecer√° una ventana emergente con los diferentes tipos de plantillas disponibles.

Cuando tengas ubicada la que quieres utilizar, haz clic en Insertar, se cargará la plantilla y puedes comenzar a modificarla.

Para personalizar la plantilla sólo debes hacer clic sobre cada uno de los elementos y en el panel izquierdo aparecerán las opciones que les corresponda para configurarlo a tu gusto.

Si queremos empezar desde cero y hacer nuestro propio dise√Īo, veamos primero c√≥mo funcionan los dise√Īos de este maquetador.

Los dise√Īos se construyen utilizando b√°sicamente secciones, columnas y widgets.

Tambi√©n conocidas como bloques, las secciones son la parte b√°sica del dise√Īo en Elementor ya que es en ellas donde se colocar√°n el resto de los widgets.

Puedes a√Īadir nuevas secciones, duplicar una que te ha gustado para no volver a crear su dise√Īo y guardarla como plantilla para usarla posteriormente¬† en otra parte de tu p√°gina.

Se pueden insertar tantas secciones como se quiera en la p√°gina y dentro de cada una la cantidad de widgets que gustes.

Cuando haces clic en¬†A√Īadir nueva secci√≥n,¬†deber√°s elegir el tipo de estructura que quieras para la secci√≥n.

Una vez elegida puedes realizar los ajustes que consideres necesarios y posteriormente agregar los widgets que tu dise√Īo requiera.

Para ello haz clic en las tres líneas de la parte superior del panel izquierdo y tendrás acceso a las opciones de configuración de la sección.

Disposición: En esta parte puedes ajustar el ancho del contenido, establecer el espacio entre las columnas, la posición del contenido bien sea alto, medio o bajo, el alto de la sección y establecer etiquetas HTML .

Estilo: Esta parte de los ajustes está relacionado con los colores que quieras par el fondo, insertar una imagen, elegir un tipo de borde y determinar su ancho así como cambiar la tipografía.

Avanzado:¬†Puedes establecer efectos en movimiento, trabajar con los m√°rgenes y relleno, establecer elementos superpuestos y hacer uso de uno de los puntos m√°s fuertes del maquetador que es editar la versi√≥n m√≥vil, cambiando el tama√Īo de las secciones o evitando que se muestre lo que no se quiere para esta versi√≥n.

Manejar las secciones con este editor es realmente muy f√°cil y c√≥moda, adem√°s con el bot√≥n derecho del rat√≥n se puede copiar, duplicar, reestablecer estilos o borrar lo que agiliza en gran medida el dise√Īo de la p√°gina.

Las columnas son bloques que pueden a√Īadirse dentro de las secciones. Puedes crear la cantidad que quieras y dentro de ellas incluir¬† los elementos que consideres de los disponibles en el maquetador.

Al igual que pasa con las secciones, las columnas también pueden ajustarse desde los apartados disposición, estilos y avanzado que manejan más o menos los mismos campos.

Es así como en el apartado disposición se manejan todos los ajustes relacionados con la posición del contenido, el ancho y la extensión. En estilo, los colores, las capas de fondo, imágenes o formas para las columnas. Y en avanzado, los márgenes, rellenos y versión responsive para dispositivos.

Otra de las características muy apreciadas de Elementor es que haciendo clic puedes jugar con el ancho de las columnas sin tener que ir al panel de ajustes lo que puede resultar mucho más cómodo y rápido.

Los widgets son los distintos elementos con los que vas a construir tu p√°gina. A√Īadir un widget a una columna es muy sencillo, s√≥lo tienes que arrastrar y soltar. Notar√°s que cuando arrastras el widget aparece una l√≠nea azul.¬† ¬†Esta l√≠nea te indica el lugar donde se va a colocar.

Para muchos elementos se repiten algunas opciones de configuración como las relacionadas al fondo y los bordes por lo que no se explicarán para cada uno de ellos para no repetir la información, pero ya sabes que puedes ajustarlos.

C√≥mo se puede intuir con esta herramienta incluimos en nuestros dise√Īos los encabezados de p√°gina pudiendo crear t√≠tulos h1, h2, h3 etc.

Adem√°s se puede enlazar cada uno de los t√≠tulos a cualquier p√°gina que queramos, ajustar su tama√Īo, colores, tipograf√≠a, colocar bordes alrededor del t√≠tulo entre otras opciones.

Creo que no necesita mucha explicaci√≥n, pero aun as√≠ aclaremos que s√≥lo permite a√Īadir la imagen, no se puede a√Īadir texto sobre ella.

Puedes elegir cualquier imagen que tengas subida en WordPress.

El tama√Īo puede establecerse dependiendo del tema y de los plugins. Tienes las opciones de completo que har√° que ocupe todo el ancho disponible o personalizado en donde puedes establecer las dimensiones de forma manual.

La opción alineación te permite determinar si la imagen va a aparecer centrada, a la derecha o la izquierda.

Si deseas que alg√ļn texto aparezca debajo de la imagen puedes introducirlo en la opci√≥n leyenda.

En cuanto al estilo, puedes aplicar una escala a la imagen, establecer transparencia y hacer que al pasar el ratón por la imagen ocurra una animación.

Se utiliza principalmente para incluir textos de mediana y larga extensión en cualquier parte de la página usando el mismo editor de WordPress, lo que supone una ventaja para quienes ya están familiarizados con él.

Puedes elegir la posición del texto con total libertad dentro de las columnas o secciones donde lo hayas incluido.

Si quieres incluir un vídeo en tu página con esta herramienta podrás hacerlo muy fácilmente.

Incluye la url de un vídeo de YouTube o Vimeo y funcionará en la sección o columna donde lo hayas colocado.

Elementor te permite hacer ciertos ajustes como:

  • Elegir la proporci√≥n de tu v√≠deo ((16:9, 4:3 o 3:2).
  • Auto- reproducir el v√≠deo.
  • Establecer el tama√Īo del bot√≥n de Play.
  • Elegir si se mostrar√°n o no v√≠deos sugeridos al finalizar la reproducci√≥n
  • . Mostrar u ocultar los controles del reproductor.
  • Elegir una imagen de portada para el video

Los botones son elementos b√°sicos de toda p√°gina y con Elementor podr√°s tener muchas opciones para crearlos y ajustarlos de acuerdo al estilo del dise√Īo que tengas en mente.

Veamos cómo podemos trabajar con ellos y que ajustes se pueden hacer en sus diferentes opciones.

Tipo: Se pueden usar los dise√Īos establecidos. Fondo de color azul para informaci√≥n, fondo de color verde para √©xito, fondo de color naranja¬† para advertencia y fondo de color rojo para peligro.

Texto: Incluye el texto que quieras que aparezca en el botón.

Enlace: Especifica la página que debe abrirse al hacer clic en el botón.

Alineación: Alineación del botón en el lugar donde se haya colocado.

Tama√Īo: Puedes seleccionar diferentes tama√Īos dentro de los que se encuentran disponibles.

Icono: Si lo deseas es posible incluir un icono dentro del botón y configurar si va a aparecer antes o después del texto.

Puedes personalizar tus botones como gustes en la opción estilo.

Organiza tu página como quieras con tan sólo arrastrar este widget a la parte que desees. Puedes evitar que se vea todo muy junto, separando  con él diferentes secciones o títulos.

Se trata de una barra horizontal que puedes utilizar para dividir el contenido de tu p√°gina de una forma elegante y que luce muy bien.

Puedes escoger entre una línea sólida, doble, punteada o discontinua.

También puedes configurar el grosor que va a tener el separador, escoger el color y la alineación.

Con la opción brecha determinas el espacio que va a existir por encima y por debajo de la línea.

Aunque bien se sabe que trat√°ndose del dise√Īo de una p√°gina vale todo lo que la creatividad del dise√Īador pueda dar, se ha establecido una especie de t√°cito est√°ndar para los separadores ya que se adapta perfectamente a casi todos los dise√Īos y queda bastante bien con los siguientes par√°metros: estilo s√≥lido, peso 2, color #ccc, ancho 60 y alineaci√≥n centrada.

Su funci√≥n es la misma que la de los separadores con la diferencia que separa a√Īadiendo un espacio en blanco. Si bien puedes hacer esto mismo configurando los m√°rgenes, con este elemento es mucho m√°s r√°pido y sencillo.

Obviamente no tienes mucho que ajustarle salvo el espacio que quieres que tenga.

Elementor ha ganado más puntos de los que ya tenía hasta ahora con la facilidad de uso de este widget.

Completando los siguientes campos podr√°s a√Īadir un mapa de google de la forma m√°s sencilla que hayas podido imaginar.

Dirección: Escribe la dirección (bien especifica) que quieras que aparezca.

Nivel de zoom: Establece el nivel de zoom con el que quieres que se muestre la dirección, puede ser por ejemplo entre 17 y 18.

Alto: Como su nombre lo indica, en este campo configuras el alto del mapa. No es lo mismo que la altitud, ten cuidado con eso

Impedir scroll: Activando esta opción se impide la manipulación del mapa, es decir, no se puede hacer zoom ni navegar por él.

Los mapas son elementos muy importantes dentro de las páginas de empresas o negocios que poseen una tienda física, ya que permiten al usuario ubicarlos de una manera mucho más fácil.

Los iconos resultan siempre muy √ļtiles combin√°ndolos con otros elementos haciendo el dise√Īo mucho m√°s atractivo.

De este elemento podemos configurar lo siguiente:

Estilo del icono en la opci√≥n Ver: Con el valor predeterminado el icono aparecer√° solo. Con el valor Apilados el icono se muestra dentro de una forma y con alg√ļn relleno. Si seleccionas el valor Encuadrado, el icono tambi√©n aparecer√° dentro de una forma con bordes pero sin relleno.

Icono: Selecciona cual es el icono que quieres utilizar. Toma en cuenta que el buscador está en inglés. Tienes muchísimas opciones para elegir.

Forma: Esta opción aplica si escoges el valor Apilados o Encuadrado. Tienes dos formas entre las que elegir: círculo o cuadrado.

Enlace: Puedes escribir alguna dirección web convirtiendo el icono en un enlace con la opción de que el enlace se abra en una ventana nueva.

También puedes determinar la alineación del icono.

En cuanto al estilo tienes muchas nuevas opciones para personalizar a√ļn m√°s los iconos en cuanto a color, tama√Īo y rotaci√≥n as√≠ como efecto hover.

Todos los widgets que hemos revisado hasta ahora son los que puedes utilizar con la versión gratuita de Elementor. Cómo habrás visto, pues hacer cosas bien interesantes con ellos.

Sin embargo, la versi√≥n PRO ofrece otros widgets que te permiten aumentar el potencial de tu p√°gina y que puedes manejar tan f√°cilmente como los anteriores, obteniendo un resultado totalmente profesional sin necesidad de ser un experto dise√Īador o estar obligado a tener conocimientos sobre programaci√≥n web.

¬†Este elemento te permite mostrar las √ļltimas entradas de tu blog de muchas formas diferentes.

Elige que cantidad de posts quieres que aparezcan, si prefieres un cierto n√ļmero de entradas o todas ellas.

También puedes jugar con la posición de la imagen destacada de la entrada, colocándola  encima o a la izquierda del texto.

Determina si quieres que el contenido se muestre organizado por categor√≠a, autor, ordenado por fecha o por t√≠tulos, as√≠ como el n√ļmero de columnas, el tama√Īo de la imagen y la cantidad de palabras que se mostrar√°n como resumen.

En cuanto al estilo tienes la posibilidad de personalizar el color, la tipografía y el espaciado de los elementos de la vista previa del post como las imágenes, el título de la entrada, contenido y paginación.

Al igual que los otros widgets tienes la opción de establecer márgenes, usar fondos y modificar el responsive.

Es parecido al post con la diferencia que está orientado a mostrar el portafolio aunque también se utiliza para mostrar las entradas del blog en forma de cuadrícula.

La verdad es que es un atractivo sistema de fotograf√≠as con el que puedes ajustar el n√ļmero de columnas y entradas por p√°gina, las im√°genes de acuerdo al tama√Īo, elegir mostrar el t√≠tulo o no, seleccionar colores as√≠ como la tipograf√≠a.

Vuelve Elementor a sumar más puntos está vez en su versión PRO con la inclusión de este elemento que ha conseguido sea ligero afectando muy poco el tiempo de carga de la web, razón principal por la que no se recomendaba su uso.

Puedes seleccionar la cantidad de sliders que gustes, cada uno de ellos van a tener opciones para su personalización insertando textos o enlaces.

Elige la altura de la caja del slider.

Selecciona si quieres pausar la imagen, auto reproducir, la velocidad, bucle y la animación, ocultar o mostrar las flechas y puntos de navegación entre otros ajustes.

Además te permite elegir colores, estilos, tipografías, efecto hover y acercamiento.

En líneas generales se puede decir que está bien completo y que tratándose de que se ha logrado evitar que retrase tanto la carga de la página, pueden probarse a ver qué tal va.

Sin duda alguna las opciones que ofrece Elementor PRO en cuanto a los formularios son muy superiores a la del resto de los maquetadores que en su mayoría  estaban limitados a insertar sólo campos básicos con muchas restricciones de edición.

Con los formularios de Elementor se puede elegir los campos que se necesiten solo con un clic. Dentro de los campos disponibles est√°n: nombre, email, mensaje, n√ļmero, checkbox, reCaptcha, calendario (con fecha y hora).

Incluye adem√°s la √ļtil opci√≥n honeypot, un sistema de seguridad que incluye un campo oculto para protegerse de los hackers

Es posible cambiar el tama√Īo, columnas e icono de cada campo as√≠ como los textos, colores, mensajes, y tipograf√≠as.

En cuanto al estilo y opciones avanzadas se manejan características similares a la de los otros widgets.

Definitivamente otro aspecto en el que Elementor se luce y sigue convenciendo.

Muchas páginas requieren crear un acceso para usuarios y como todo lo anterior, podrás hacerlo de una manera increíblemente fácil.

Todos los usuarios de la p√°gina incluido el administrador¬† pueden acceder, registrarse si no lo han hecho y tambi√©n tiene la opci√≥n para recuperar la contrase√Īa.

Como ya sabr√°s, puedes personalizar muchos aspectos del elemento para adaptarlo al dise√Īo de tu p√°gina.

Muchas páginas requieren mostrar una lista de precios, el típico ejemplo son las webs de restaurantes que quieren incluir la carta con sus respectivos precios o bien empresas de servicio.

Se permite agregar la cantidad de elementos que gustes, adem√°s del t√≠tulo es posible a√Īadir una peque√Īa descripci√≥n e incluso alguna imagen.

Colores, tipograf√≠as, tama√Īo y otros aspectos referentes al estilo tambi√©n pueden ser personalizados tal y como ya nos hemos acostumbrados con este maquetador.

Siguiendo un poco la l√≠nea del elemento anterior, est√° opci√≥n es muy √ļtil cuando se desea mostrar diferentes opciones de precio para un mismo producto o servicio.

Debes crear una sección con tantas columnas como renglones vayas a necesitar. Cada uno de ellos puedes personalizarlos en cuanto al estilo.

Los precios se asignan en la moneda que corresponda, en la posición que más te guste y con la posibilidad de establecer el tipo de descuento.

Adem√°s puedes establecer etiquetas destacables, enlaces y muchos otros ajustes interesantes.

Realmente est√° muy completo y es una forma muy atractiva de mostrar diferentes planes de pago y ofertas.

Una de los aspectos que m√°s refuerzan la confianza de los usuarios son las experiencias y comentarios de personas que han utilizado el servicio o adquirido el producto que se ofrece en la p√°gina.

Elementor ofrece la posibilidad de incluir comentarios de clientes o de otros profesionales que han quedado satisfechos.

Este elemento es muy √ļtil cuando se desea centrar la atenci√≥n y recordar la fecha de un pr√≥ximo lanzamiento o evento.

Se trata de la típica cuenta atrás con los días que faltan para el día en que se realizará la actividad esperada.

Claro está que puedes cambiar el texto que se muestra, la tipografía, el color de fondo y otros aspectos del estilo.

Todos sabemos la importancia que tienen hoy en d√≠a las redes sociales y que la posibilidad de compartir en ellas informaci√≥n de nuestra p√°gina es vital, ya que entre otras cosas puede aumentar el tr√°nsito de nuestra web, adem√°s de acercarnos a nuestro p√ļblico objetivo.

Elementor incluye iconos que permiten compartir en las distintas redes alg√ļn art√≠culo o p√°gina al hacer clic sobre ellos.

Est√°n disponibles diferentes opciones de formas, colores y tama√Īos con los que se puede dar un enfoque personalizado.

El carrusel de im√°genes como podr√°s suponer se trata de un conjunto de im√°genes que resulta muy √ļtil para incluir logotipos de empresas con las que hayas trabajado o tambi√©n es una manera diferente de presentar cierto tipo de servicios. Todo depende del estilo de tu web y la forma en que quieras presentar la informaci√≥n.

Es posible incluir todas las im√°genes que se quieran, ajustar el tama√Īo, insertar una imagen o leyenda as√≠ como trabajar con los colores y opciones avanzadas.

Cuando describ√≠amos al principio de este tutorial la interfaz de Elementor dijimos que en la parte inferior del panel izquierdo se encuentra el icono para ver como luce nuestro dise√Īo en diferente dispositivos, es decir, en versiones de escritorio, tablets o m√≥viles.

He aquí una de las maravillas de Elementor que ha cautivado a más de un usuario.

Quizás te estés preguntado por qué, te diremos que se trata de algo más que un visualizador.

Estableciendo ciertas opciones el dise√Īo de tu p√°gina cambiar√° dependiendo del tama√Īo de la pantalla elegida.

No necesitarás tener conocimientos avanzados sobre media queries para adaptar el contenido de tu blog o página a dispositivos móviles.

Para que lo veas m√°s claro, puedes establecer para cualquier elemento del dise√Īo que tenga ciertos m√°rgenes para la versi√≥n de escritorio, otros si se trata de la versi√≥n para Tablet y por si fuese poco otro distinto si es para dispositivos m√≥viles.

Cabe destacar que ning√ļn otro plugin permite hacer esto, lo que hace que Elementor tenga una gran ventaja respecto a otros editores visuales.

Si has llegado hasta aquí,  lo más seguro es que no te haya quedado duda alguna de porque se considera a Elementor como el mejor maquetador hasta la fecha.

Pero si entre tanta información te has perdido un poco resumiremos lo tratado.

Es el maquetador m√°s completo seg√ļn la opini√≥n de muchos dise√Īadores.

Es sumamente intuitivo lo que hace que su manejo y aprendizaje sea sencillo y r√°pido.

Cuenta con un código limpio lo que favorece el posicionamiento web.

Incluye gran cantidad de funcionalidades gracias a las cuales no tienes que descargar otros plugins.

Se actualiza constantemente.

Sus bondades pueden verificarse con la gran cantidad de descargas.

Puedes consultar la información sobre los cambios y novedades en su canal de YouTube y blog oficial.

En esta guía hemos tratado de describir de la mejor manera posible las características de este potente maquetador pero como todo en la vida para que sepas realmente lo que es, debes probarlo y seguramente no querrás usar otro más.

Descrubre todo el potencial de Elementor Page Builder con esta mega guia.

CARACTER√ćSTICAS Y FUNCIONAMIENTO DE ELEMENTOR PAGE BUILDER

A continuación compartimos una guía con toda la información relacionada a Elementor Page Builder, que es un interesante maquetador visual que podría ser considerado en la actualidad uno de los mejores plugins desarrollados para WordPress  y  esto es por muchas razones.

Podemos mencionar a grandes rasgos, que dentro de sus características la carga de Elementor Page Buildor es mucho más veloz que la de otros editores visuales. Y no solo eso sino que también es rápido a la hora de ejecutarse y no da fallos ni se queda colgado.

Elementor además  es de código abierto lo que implica que puede ser mejorado por cualquier desarrollador de forma que surjan actualizaciones a futuro.

Por otro lado, una de las caracter√≠sticas¬† que m√°s destacan de este editor visual es que permite dise√Īos profesionales de forma r√°pida y efectiva sin necesidad de tocar el CSS.

Otra caracter√≠stica fundamental de Elementor es su facilidad de uso. El conjunto de elementos disponibles se encuentran en la barra de la izquierda. Y lo √ļnico que tiene usted que hacer para que se muestren en su sitio web es arrastrarlos hacia la derecha y soltarlos en la ubicaci√≥n que desee. M√°s sencillo que eso, no puede ser.

En Elementor, todo el proceso de dise√Īo de la p√°gina y de edici√≥n de los textos se hace directamente sobre la p√°gina, no en el editor de WordPress, as√≠ que a todos los cambios usted los ir√° viendo en tiempo real, algo que le va a ahorrar mucho tiempo.

Con Elementor se puede controlar una gran cantidad de parámetros CSS para darle  estilos a cualquier elemento que sea utilizado en un sitio web,  utilizando campos para rellenar, o elementos seleccionables con un clic de un mouse.

Con Elementor Page Builder se¬† controlan los Media Queries, vale decir el c√≥digo CSS que hace que el dise√Īo vaya cambiando seg√ļn la¬† funci√≥n del tama√Īo de pantalla del dispositivo) de manera totalmente visual.

Elementor Page Builder es adem√°s de todas sus cualidades un plugin gratuito aunque hay una versi√≥n de paga llamada Elementor Pro. En la versi√≥n gratuita se incluyen 30 widgets que le permitir√°n ejecutar dise√Īos de lo m√°s elaborados. En la versi√≥n Premium o de pago se agregan muchas otras funciones, pero aunque parezca irreal la versi√≥n sin coste de este plugin puede resultar m√°s potente que otros plugins de pago.

Elementor est√° traducido a muchos idiomas. Entre ellos el espa√Īol, lo que hace m√°s sencillo su uso. Elementor adem√°s es compatible con la plantilla Generate Press.

Elementor Page Builder tiene 3 a√Īos y es muy valorado por los usuarios que utilizan WordPress. Se lanz√≥ en junio del a√Īo¬† 2016 y en menos de un a√Īo y medio despu√©s ten√≠a m√°s de 300.000 instalaciones activas, unas enormes cifras que solo pocos plugins consiguen, y sobre todo en un tiempo tan corto Su valoraci√≥n media que tiene en el repositorio oficial de WordPress es de 5 sobre 5.¬† Desde que se lanz√≥ sus creadores sacan actualizaciones peri√≥dicas con nuevas funciones que cada d√≠a van mejorando el plugin.

Tambi√©n podemos se√Īalar como otra de las caracter√≠sticas de este plugin, es que cuenta con una configuraci√≥n pensada en el posicionamiento web y el SEO, ¬†cumpliendo con los principales est√°ndares recomendados por los principales buscadores como Google.

Se puede decir de este plugin que es muy completo, todo un creador de p√°ginas en vivo, sin l√≠mites de dise√Īo. Un generador de p√°ginas que ofrece dise√Īos de p√°ginas de gama alta y capacidades avanzadas para WordPress.

Tambi√©n podemos a√Īadir, que aparte de sus m√ļltiples funciones, Elementor¬† se distingue del resto de maquetadores visuales para WordPress que existen en la actualidad, porque se puede desinstalar el plugin o cambiar de plantilla sin dejar shortcodes en el c√≥digo fuente de las p√°ginas.

A continuación mencionamos con mayor especificidad, cada una de las principales  características con las que cuenta este plugin para WordPress llamado Elementor Page Builder y más adelante también los aspectos referidos a su funcionamiento.

 

DETALLE DE LAS CARACTER√ćSTICAS DE ELEMENTOR

ELEMENTOR ES MUY R√ĀPIDO

La rapidez del plugin es una de las caracter√≠sticas claves de Elementor. Adem√°s¬†¬† tiene un generador instant√°neo de arrastrar y soltar p√°ginas, edici√≥n instant√°nea en vivo, carga instant√°nea de p√°ginas. La velocidad de Elementor no se compara con ning√ļn otro creador de p√°ginas, ni gratuito ni de pago. Esto hace que la interfaz sea divertida y f√°cil de trabajar, adem√°s de reducir el tiempo de dise√Īo.

DISE√ĎO EN VIVO.

Nunca m√°s trabaje en el backend (conexi√≥n con el servidor) y descubra c√≥mo se ve el frontend (interacci√≥n con el usuario). Con Elementor Page Builder, usted edita la p√°gina y, al mismo tiempo, ve exactamente c√≥mo se ve en tiempo real. Elementor presenta dise√Īo en vivo y edici√≥n en l√≠nea, por lo que todo el proceso de escritura y dise√Īo se realiza directamente en la p√°gina, sin necesidad de presionar actualizar o ir al modo de vista previa. Tambi√©n funciona perfectamente con o sin Gutenberg.

FUNCIONES √öNICAS

Con las caracter√≠sticas √ļnicas de Elementor, puede crear sitios web que tengan ese ‚Äútoque de dise√Īo‚ÄĚ. Entre las funciones de este creador de p√°ginas se encuentran: Sombras de cuadro, Superposiciones de fondo, Efectos de desplazamiento, Efectos de titulares, Animaciones, Divisores de formas, Fondos degradados y mucho m√°s.

PLANTILLAS Y BLOQUES PRE-DISE√ĎADOS

Puede elegir entre más de 100 bellas plantillas de WordPress de página completa y personalízarlas para que tengan su toque particular. También puede construir su página eligiendo entre más de 300 Bloques.

Los bloques son plantillas de secci√≥n predise√Īadas que se pueden combinar f√°cilmente en cualquier p√°gina. Los bloques incluyen una variedad de categor√≠as: servicios, testimonios, llamada a la acci√≥n y m√°s. Con este plugin, se pueden guardar y reutilizar las plantillas de Elementor en diferentes p√°ginas, o tambi√©n se pueden exportar a un sitio web diferente con un clic.

CREADOR DE P√ĀGINAS M√ďVILES

Elementor Page Builder viene con un conjunto de herramientas exclusivo, que le permite crear un sitio web verdaderamente sensible de una manera totalmente nueva y visual. Desde el tama√Īo de fuente, el relleno y el margen por dispositivo, hasta el orden inverso de las columnas, este es el creador de p√°ginas m√≥viles m√°s poderoso para crear sitios web con una capacidad de respuesta perfecta.

FUNCIONES UNDO / REDO

El creador de p√°ginas incluye deshacer (undo) y rehacer¬† (redo) para cualquier acci√≥n que realice. Haga clic en Ctrl / Cmd + Z, o navegue por la lista completa de acciones. ¬ŅQuiere volver a lo anterior? Cambie a Revisiones para ver una lista completa de todas las versiones anteriores guardadas de la p√°gina.

MODO DE MANTENIMIENTO INCORPORADO Y EN CONSTRUCCI√ďN.

¬ŅNecesita que su sitio est√© fuera de l√≠nea para su mantenimiento? Use la funci√≥n de Modo de ‚ÄúMantenimiento! y ¬°Pr√≥ximamente‚ÄĚ del creador de p√°ginas Elementor para mostrar a sus visitantes una p√°gina en construcci√≥n / pr√≥ximamente.

ELEMENTOR PRO: EL MEJOR CONSTRUCTOR DE PAGINAS PARA WORDPRESS.

Elementor Pro mejora enormemente su flujo de trabajo de dise√Īo y le permite dise√Īar m√°s r√°pido y mejor que nunca. Con Elementor Pro, todo se hace visualmente y sin c√≥digo.

CAMBIAR EL THEME O PLANTILLA

Hacer cambios a tu tema no deber√≠a ser tan dif√≠cil. Codificaci√≥n sin fin, tratar con desarrolladores, cambiar temas. El Theme Builder en Elementor Pro hace que todo el proceso de creaci√≥n de sitios web de WordPress sea 100% visual, incluido el encabezado, pie de p√°gina, publicaci√≥n √ļnica y dise√Īo de la p√°gina de archivo de su sitio.

OTRAS CARACTER√ćSTICAS

Hay muchas otras características para ayudarle a construir mejores sitios web:

-Constructor de formas visuales e intuitivas.

-Automatización de marketing e integraciones de CRM.

-Fuentes personalizadas

-Gerente de roles

-Blog widget de dise√Īo de publicaci√≥n

-Imagen y video deslizadores

-WooCommerce (plugin de comercio electrónico)

-Widgets globales

-CSS personalizado

-Titulares animados

Y mucho m√°s.

WIDGETS Y CONDICIONES GRATIS

En Elementor se incluyen actualmente 30 de los widgets m√°s √ļtiles en su creador de p√°ginas para explorar al m√°ximo sus capacidades de dise√Īo.

Tenemos: 

-T√≠tulo. A√Īadir titulares llamativos.

-Imagen. Controla el tama√Īo, opacidad y otros ajustes de las im√°genes.

-Editor de texto. Un editor de texto WYSIWYG, al igual que el editor de WordPress.

-Vídeo. Agrega YouTube \ Vimeo a tu página.

-Bot√≥n. Controlando cada aspecto del dise√Īo del bot√≥n.

-Cuadro de imagen. Un cuadro que incluye imagen, título y texto.

-Testimonios Testimonios de clientes que muestran prueba social.

-Icono. Coloca uno o m√°s de 600 iconos disponibles.

-Caja de iconos. Funciona igual que el cuadro de imagen, solo con iconos.

-Iconos sociales. √ćconos a tus p√°ginas sociales como Facebook / Twitter.

-Galería de imágenes. Muestra tus imágenes en una cuadrícula alineada.

-Carrusel de imagen. Un carrusel giratorio o deslizador de im√°genes elegidas.

-Lista de iconos. Una lista de vi√Īetas con cualquier icono y texto elegidos.

-Mostrador. Mostrar estad√≠sticas y n√ļmeros de una manera creciente.

-Barra de progreso. Incluye una barra de progreso creciente.

-Pesta√Īas. Pesta√Īas verticales u horizontales que muestran diferentes piezas de contenido.

-Acordeón. Una pantalla plegable de contenido.

-Palanca. Como Accordion, para p√°ginas de preguntas frecuentes.

-Clasificaci√≥n de estrellas. A√Īadir alguna prueba social con una calificaci√≥n de estrellas de estilo.

-Alerta. Una caja de alerta coloreada para llamar la atención del visitante.

-HTML. Insertar código en la página.

-Código corto. Inserta fácilmente códigos cortos(shortcodes)de cualquier complemento en la página.

-Men√ļ ancla. Enlace cualquier men√ļ a esta ancla.

-‚ÄúLeer m√°s‚ÄĚ. Establezca el corte Leer m√°s para el extracto en las p√°ginas de archivo.

-Barra lateral A√Īada cualquier barra lateral a la p√°gina.

-Mapas de Google. Incrustar mapas en la p√°gina.

-SoundCloud. Agrega bits de audio desde SoundCloud.

-Divisor. Una línea que divide diferentes elementos en la página.

-Espaciador. Un espacio que divide los distintos elementos.

-Columnas Crear columnas internas dentro de la columna.

 

MULTILINGÜE Y  APOYO RTL.

Se ha integrado apoyo RTL (Right-to-left) y soporte multiling√ľe en el marco del creador de p√°ginas, por lo que obtiene un panel traducido de la caja, as√≠ como soporte de tipograf√≠a RTL y opciones de desarrollador para agregar a√ļn m√°s idiomas.

API DESARROLLADOR.

Elementor Page Builder es gratuito y de c√≥digo abierto. Es el complemento perfecto para la creaci√≥n de p√°ginas que se ampliar√° e integrar√° a√ļn m√°s. Fue creado pensando en la mente del ¬†desarrollador, y ya hemos visto algunos complementos realmente notables ya desarrollados.

Para ayudarlo a comenzar y aprender cómo integrarse con Elementor, se han  creado los Recursos Oficiales para Desarrolladores de Elementor y la Referencia de Código.

 

FUNCIONAMIENTO DE ELEMENTOR PAGE BUILDER

El funcionamiento de este plugin requiere una explicación paso a paso. A continuación dicha explicación:

1.- La instalación del Plugin

Primeramente se debe descargar el plugin para luego empezar con la instalación y activación. La descarga gratuita se realiza desde la misma página oficial de  WordPress.

Debemos de todos modos  informar que si bien Elementor Page Builder es gratuito,o existe una versión de paga que ofrece opciones adicionales y soporte.

2.- Haga que su plantilla o theme sea compatible con Elementor Page Builder

Si bien actualmente Elementor es compatible con un gran n√ļmero de themes actuales, incluso Genesis, de todos modos es importante saber que es requisito fundamental que el theme que est√° utilizando lleve definida una o varias plantillas de ancho completo, ya que de no ser as√≠, podr√≠a no funcionarle bien el plugin.

Solucionar este paso es muy simple y puede hacerlo de cualquiera de las siguientes dos formas:

-Descargue  la versión modificada de la plantilla TwentySexteen desarrollada por los creadores de Elementor.

-Instaler otro plugin, denominado Page Templater For Elementor¬† que a√Īadir√° dos plantillas de p√°gina a su theme actual.

3.- A√Īada funciones adicionales a Elementor Page Builder

Si estás pensado en usar la versión gratuita es una buena opción, sin embargo, toma en cuenta que si bien esta versión de Elementor trae diversos widgets que se pueden utilizar sin inconveniente,  si quieres tener un paquete  más completo, hay distintos widgets que solo estarán disponibles en la versión de paga o Premium de este plugin.

De cualquier forma, una de las ventajas de Elementor es que se trata de un plugin de código abierto, lo que permite a otros desarrolladores a crear nuevas extensiones, funcionalidades o addons para Elementor.

Por ejemplo, se puede descargar del repositorio oficial de WordPress AddOns como estos:

Contact Form7 Widget For Elementor Page Builder

 Que le servirá para insertar formularios de contacto a su sitio.

Este complemento agrega adem√°s un nuevo widget a Elementor Page Builder que le ayuda a arrastrar y soltar f√°cilmente formularios de contacto 7 desde una lista desplegable. No es necesario ir a cf7 y copiar el shortcode y agregarlo al widget de shortcode de Elementor

‚Äď Ahora solo arrastre y suelte el widget dentro de elementor builder y elija su formulario de contacto

‚Äď Si desea definir el estilo para entrada, etiqueta, bot√≥n de env√≠o, √©xito, este ¬†plugin le permitir√° hacer eso directamente desde la pantalla de Elementor.

-Si desea agregar una página personalizada para redirigir cuando se envía el formulario, Eso también es posible ahora.  Sin embargo, esto es solo un complemento para usuarios simples.

‚Äď Lo m√°s interesante es que puede tener varias formas respecto del formulario de contacto 7 con diferentes reglas y dise√Īo con esta en la misma p√°gina.

Elementor Addon Elements

Que le integrará nuevos widgets como textos animados, separadores, listados de artículos entre otros.

Este complemento agrega nuevos widgets a Elementor Page Builder tales como:

Elementos complementarios actuales:

Barra de progreso (nuevo)

Botón doble (nuevo)

Color de fondo animado (nuevo)

Línea de tiempo (nueva)

Info Círculo (nuevo)

Tabla de comparación (nueva)

Info Círculo (nuevo)

Control deslizante de fondo

Ventana emergente modal

Flip Box

Separador de texto

Lista de precios

Lista de publicaciones

Texto animado

Después / Antes Comparar imagen

Dividir texto

Google Map (con la capacidad de agregar estilos desde Snazzy Maps)

Twitter (Mostrar la línea de tiempo del perfil, el hashtag feed, tweet, seguir y el botón de hashtag)

Separador de formas (en desuso … use el separador de formas disponible con Elementor)

 

Tables For Elementor

Que es de mucha utilidad para elaborar tablas.

Las tablas para Elementor es un complemento adicional para el dise√Īo de p√°ginas de arrastrar y soltar m√°s avanzado para el frontend (interacci√≥n con usuarios). Cree tablas ricas en funciones y personal√≠celas dentro del generador de p√°ginas.

Addon Widgets For Elementor

Que agrega varios widgets con opciones de WooCommerce (plugin de comercio electrónico)

Agregue nuevos complementos y widgets que est√°n dise√Īados espec√≠ficamente para ser utilizados junto con Elementor Page Builder.

La versión inicial contiene 6 (+2) widgets, más por venir.

* 1: Categorías de producto de WooCommerce

* 2: Productos recientes de WooCommerce

* 3: Los productos m√°s vendidos de WooCommerce

* 4: Productos destacados de WooCommerce

* 5: WooCommerce en venta de productos

* 6: Productos populares de WooCommerce

* 7: Nuevo: EAW: Elementor Widget Mensajes recientes

* 8: Nuevo: EAW: Elementor Posts By Category

Widgets nativos de Elementor.

* 9: Nuevo: Cuadrícula EAW.

* 10: Nuevo: Tabla de precios de EAW

* 11: Nuevo: Servicios EAW  (Elementor Addons & Widgets)

4.- Cree una p√°gina o sitio web con Elementor Page Builder

Una vez que ya complet√≥ los dos pasos anteriores, se est√° listo para crear una p√°gina. Primero debe ir a P√°ginas > A√Īadir Nueva

Luego ver√° que se le ha activado un bot√≥n nuevo llamado ¬ęEditar con Elementor¬Ľ. Antes de hacer clic a ese bot√≥n es fundamental que en la barra lateral vaya a la caja de atributos de p√°gina y en el desplegable, cambie el tipo de plantilla y elija una que sea de ancho completo ¬ęFullwidth¬Ľ.

Ojo que si ha omitido este paso, Elementor no va a funcionar, por lo que deber√° regresar atr√°s, seleccionar el tipo de p√°gina, guardar y volver a editar.

Si todo est√° correcto y no ha omitido ning√ļn paso, se abrir√° la p√°gina en Elementor para su edici√≥n, all√≠ puede ir y hacer clic en el icono de la carpeta de¬†A√Īadir Plantilla.

A√Īadir plantilla

Se nos va a abrir una pantalla de Elementor en el que podremos seleccionar la plantilla que deseamos  instalar. Finalmente lo haremos pulsando en Insertar plantilla.

Automáticamente se van a cargar todos los bloques necesarios así como archivos multimedia. Ahora podrá editar los textos que le sean necesarios, cargar sus  imágenes y, finalmente darle el toque personal a su sitio web.

LA ESTRUCTURA B√ĀSICA DE ELEMENTOR

Secciones y Columnas

Las secciones o bloques son la parte b√°sica del dise√Īo con Elementor. Puede insertar tantos bloques como usted desee¬† dentro de su p√°gina y dentro de cada bloque puede insertar tantos widgets como quiera.

Al hacer clic en ¬ęAgregar nueva secci√≥n¬Ľ se le pedir√° que elija una estructura, donde aparecer√°n distintos dise√Īos con algunas columnas distribuidas en el bloque.

Una vez que usted eligi√≥ la estructura, estar√° listo para arrastrar y soltar los widgets del men√ļ izquierdo dentro de cada columna, y configurarlos a su gusto.

Configurar Elementor

Una vez que tenga abierto Elementor y est√© en la edici√≥n de la p√°gina, puede hacer clic sobre el icono que le aparece arriba¬† la izquierda, compuesto por tres l√≠neas, y acceder√° al men√ļ de configuraci√≥n.

Desde dicho men√ļ podr√° configurar diversos par√°metros tales como:

-Colores que se aplicar√°n por defecto en los elementos que incluya en su dise√Īo, independientemente de los que use su plantilla o theme.

-Fuentes que se usar√°n en las cabeceras de su dise√Īo o en el texto del cuerpo, independientemente de las que su plantilla o theme tenga establecidas en su hoja de estilos.

-Historial de revisiones, con lo que usted podr√° volver a una versi√≥n anterior para ver alguna modificaci√≥n que haya realizado en el dise√Īo

-Configuración de la página, que  le permitirá escoger la opción de mostrar u ocultar el título, elegir el tipo de plantilla a aplicar a la página y publicarla o guardarla como borrador.

-Eliminar todo el contenido le permitir√° empezar de cero el dise√Īo de la p√°gina.

-Desde la opción de configuración de Elementor, accederá a la sección de ajustes del Escritorio de WordPress, donde podrá, entre otras cosas, escoger para qué tipo de entradas quiere tener disponible el maquetador, los roles de usuario que no quiere que tengan acceso a él, consultar su biblioteca de plantillas, importar otras, sincronizar las plantillas o themes existentes, etc.…

RECOMENDACI√ďN DE USO PARA ELEMENTOR

Se debe utilizar este maquetador visual para crear cierto tipo de p√°ginas est√°ticas como lo pueden ser una homepage, una landing page o p√°gina de aterrizaje, una p√°gina de contacto, p√°gina acerca del autor, etc.

Obviamente no sería recomendable aplicarla en las entradas o posts pues se trata de páginas que pueden variar de acuerdo con el texto ya que son de  contenido dinámico.

 

CONCLUSIONES FINALES

-Elementor Page Builder m√°s conocido actualmente como Elementor se presenta como un¬† plugin que soluciona muchos problemas a los usuarios¬† a la hora del dise√Īo. Es perfecto para aquellos usuarios que no tienen conocimientos de lenguaje de programaci√≥n y que reci√©n empiezan¬† en el entorno WordPress.

-Elementor dicho en forma simple, es un plugin gratuito que ha sido dise√Īado de para que el usuario arrastre y suelte bloques de contenido y cree una p√°gina en cuesti√≥n de minutos y con muchas opciones de personalizaci√≥n.

-Sea que el usuario sea nuevo o tenga experiencia en este tipo de plugins, Elementor se presenta como una alternativa √ļnica en el mercado¬† respecto de otros plugins. Eso se debe a sus caracter√≠sticas y funcionalidades muy particulares.

Leave a Replay

Elementor Page Builder

Descarga el maquetador numero #1 para WordPress y empieza a dise√Īar tu pagina web hoy mismo.

© All rights Reserved for BEN PINES - CEO POJO.ME

Headphones Logo.png

50% off

today

Compartir
Twittear
Pin