El plugin Elementor es el preferido por los usuarios, y en este artículo ya hablamos de sus virtudes y que facilita la vida a los usuarios a la hora de afrontar el diseño de una web o landing page.
En este artículo encontrarás un manual básico de Elementor para ayudarte a dar los primeros pasos con este fantástico builder.
Como ya sabrás, Elementor tiene dos versiones, la gratuita, con la que tienes las suficientes opciones como para poder crear una web sin problemas y la versión PRO de pago, que añade un buen número de funcionalidades extra, además de plantillas preconfiguradas.
En esta guía vamos a ver la versión gratuita, que es la que utiliza la mayoría de los usuarios. Si luego necesitas pasar a la versión PRO, el manual te servirá ya que conocerás cómo se trabaja con Elementor, aunque las funcionalidades PRO no estén incluidas en él.
Antes de usar Elementor hay que instalarlo y activarlo en tu WordPress, pero es muy sencillo, ya que como estamos hablando de la versión gratuita, se instala como otro plugins cualquiera.
Sólo tienes acceder al panel de administración de WordPress > Plugins > Añadir uno nuevo y hacer una búsqueda. Sólo tienes que instalarlo, activarlo y listo, ya podrás empezar a usar Elementor.
Una vez activado el plugin, encontrarás dos nuevos menús en tu WordPress:
Desde el menú Elementor, encontrarás algunas configuraciones generales que puedes modificar al gusto de tus necesidades.
Hay cosas muy interesantes, como la opción de añadir la API de Google Maps, reemplazar URL o activar un modo de mantenimiento desde el propio plugin.
Las opciones son las siguientes:
Las plantillas son muy importantes en Elementor, ya que permite incorporar un diseño predeterminado en cualquier momento y sitio de nuestro proyecto WordPress.
Hay un menú de plantillas en lo que puedes encontrar lo siguiente:
Plantillas guardadas Aquí encontrarás todas las plantillas que vayas creando con Elementor.
Maquetador de temas Diseños por partes de sitios preparados. Sólo para la versión PRO.
Páginas de destino
Si eres un habitual des Landing Pages, aquí encontrarás todas las que vayas creando con Elementor.
Biblioteca de Kits Diseños que puedes usar para crear tus proyectos. Sólo para la versión PRO.
Ventanas emergentes Diseñador de los famosos popups. Sólo para la versión PRO.
Añadir nueva Un enlace directo para crear una plantillas.
Categorías Un sistema de categorías para las plantillas de Elementor.
Ahora que hemos visto lo más básico del plugin Elementor, vamos a empezar a ver qué lo que estarás buscando de verdad cómo editar un sitio con Elementor.
Con Elementor puedes editar una página en blanco, desde cero y tú ir añadiendo los elementos que quieras o también puedes editar una página que ya esté creada.
También existen themes que son compatibles con Elementor, para que puedas crear el sitio de cero, pero con una plantilla compatible.
Esto lo tienes que decidir tú, ya que se trata de una decisión que depende del proyecto web que quieras crear.
Lo que si te vamos a explicar, es cómo realizar cada acción que permite Elementor, aunque sea de una forma básica, para que puedas empezar a editar tus proyectos en Elementor con algo de información al respecto.
Cuando quieras editar algo con Elementor, sólo tienes que pulsar en el botón de Editar con Elementor, ya te encentres editando una web, una entrada, en el editar clásico o en el de bloques. Sólo busca la opción.
Cuando accedas al editor de Elementor verás la página que quieres editar, como si la estuvieras visitando con un navegador, pero con algunas diferencias.
En la parte izquierda de la pantalla encontrarás un menú en el que podrás ver todos los elementos que puedes utilizar para crear la web y a la derecha una especie de navegador para saber de qué elemento se trata.
Como verás todo es muy visual, si pasas el ratón por algún elemento de la pantalla, en seguida reaccionará para invitarte a editarlo, pero veámoslo por partes.
El menú izquierdo de Elementor es la parte más importante, ya que es desde aquí donde podemos controlar todos los aspectos de los elementos disponibles y del propio plugin.
En la parte superior, a los lados de la palabra elementor tenemos dos botones, el de la izquierda (botón hamburguesa) y el de la derecha (botón cuadrados).
El botón de la izquierda nos lleva a los ajustes del sitio y a las preferencias del usuario, además del acceso al maquetador de temas, pero esta última opción sólo está disponible en las versiones PRO.
El menú de los cuadrados nos lleva a los elementos o widgets que podemos usar con el plugin.
Justo debajo de estas opciones tenemos un submenú en el que podemos seleccionar entre elementos y global, pero la opción de global sólo es para versiones PRO, por lo que no la usaremos en esta guía.
Y debajo del submenú tendremos un buscador, con el que podemos buscar el widget que queramos rápidamente, algo muy útil cuándo ya tengas soltura con el maquetador.
Si seguimos en el apartadlo de los elementos, verás que debajo encontramos los widgets que puedes utilizar en la web.
Dependiendo del tema que estés usando o los plugins que tengas instalados en tu WordPress, es posible que tengas más o menos elementos que puedas utilizar, pero básicamente tendrás:
Obviamente, los widgets PRO no podrás usarlos en la versión gratuita, podrás usar los widgets que encontrarás en Básico y General, aunque como decimos, dependerá de cada instalación de WordPress.
En cada uno de los módulos, encontrarás los distintos widgets que puedes usar
Sección Interior Se utiliza para crear secciones de columnas para añadir en la sección principal.
Encabezado Para añadir los H1, H2, etc…
Imagen Para añadir una imagen en cualquier parte de la web.
Editor de texto Un bloque para añadir texto. También puedes añadir negritas, cursivas, enlaces, etc…
Vídeo
Para añadir un vídeo. Puedes añadir un enlace de YouTube, Vimeo, Dalymotion o alojado en el propio servidor.
Botón Si quieres añadir un botón, con este widget no tendrás problemas para hacerlo.
Separador Añade una línea divisoria, aunque tiene muchas más opciones que una simple línea.
Espaciador Un espacio en blanco, sencillo pero necesario algunas veces.
Google Maps
Para añadir los mapas de Google en la web de una manera sencilla.
Icono Con este widget puedes añadir un icono de los muchos que incorpora Elementor.
Cuadro de imagen Una forma de añadir una imagen con un título y un texto. Puedes elegir entre H1, H2, etc… y añadir un link en la imagen.
Caja de icono Si quieres hacer lo mismo que la opción Cuadro de imagen, pero usando uno de los iconos disponibles.
Valoración de estrellas Si quieres añadir las típicas estrellas de valoración, puedes hacerlo con este widget.
Carrusel de imágenes Con el carrusel de imágenes puedes añadir las imágenes que necesites para que vayan rotando.
Galería básica Para añadir una galería con todas las imágenes que necesites.
Listado de iconos Puedes crear un listado con distintos iconos y añadir enlaces y texto al gusto.
Contador Como su nombre dice, un contador. Puedes elegir en número de inicio y fin y se muestra a modo de animación.
Barra de progreso Una barra de progreso definida por un porcentaje mostrado con una animación.
Recomendación Puedes crear cometarios de clientes a modo de testimonio, con un texto, nombre, foto, etc…
Pestañas Se añade una caja con un sistema de pestañas para añadir el contenido que necesites.
Acordeón Un listado que se extiende al hacer click en el texto, en forma de acordeón, parea mostrar el resto del contenido.
Conmutador Es parecido al acordeón, pero sólo puedes mantener uno de lis listados abiertos. Al hacer click en la siguiente opción, esta «conmuta» y cierra el primer contenido.
Iconos sociales Para añadir los distintos iconos sociales.
Alerta Se muestra una caja de texto con un color de fondo distinto en modo de aviso para mostrar el texto que necesites.
SoundCloud Puedes añadir audios alojados en el servicio de SoundCloud directamente con este widget.
Shortcode Los shortcodes (códigos cortos) son muy utilizados por distintos plugins y themes. Con este elemento puedes añadirlos donde quieras.
HTML Puedes introducir código HTML en cualquier parte de la web con este plugin. No mostrará el código en si, mostrara el resultado de dicho código.
Ancla de menú Los menús de ancla son útiles para crear una tabla de contenidos y enlazar los elementos del índice con las secciones de la web.
Barra lateral Puedes añadir el contenido que tengas añadido en los distintos sidebar en cualquier parte de la web.
Leer más Para mostrar el resto del contenido, pero solo es compatible con los themes que usen the_content.
Ahora que hemos visto lo que puede hacer Elementor, vamos a ver cómo hacerlo, aunque verás que es muy sencillo, ya que es una de las grandes ventajas de usar este maquetador tan visual.
Si quieres editar algo que ya está creado, com por ejemplo un texto o una imagen, sólo tienes que hacer click en el elemento que deseas modificar.
Al hacer esto, se seleccionará y en el menú de la izquierda verás todas las opciones que tienes disponibles.
Ahora es tan fácil como cambiar el texto por el que quieras, puedes hacerlo tanto desde el menú, como desde la web.
Con las imágenes lo mismo, sólo tienes que seleccionarla y buscar la imagen que quieras añadir.
Cuando seleccionas cualquier elemento, verás que tienes tres pestañas disponibles en el menú, que son:
Las opciones que tienes en estas pestañas pueden variar dependiendo del elemento deseado, pero tienes muchas opciones y muy interesantes, como los efectos de movimiento.
Si lo que quieres es añadir un nuevo elemento o widget, es realmente fácil, sólo tienes que hacer click con el ratón sobre él y arrastrarlo al sitio donde quieras añadirlo.
Si lo que quieres es añadir una de las plantilla que hayas creado, puedes hacerlo desde el botón de la caja de widgets.
Como puedes ver, Elementor tiene un montón de opciones pero su funcionamiento es muy sencillo, obviamente, se necesita de cierto tiempo de aprendizaje, pero con un poco de tiempo, se pueden conseguir resultados profesionales en tu WordPress.
Lo más importante es que no necesitas conocimientos previos, sólo conocer cómo funciona Elementor y un poco de esfuerzo para hacer tu web.
Si estás pensando en usar Elementor en WordPress, te recomendamos que utilices un hosting capaz de mover el plugins con soltura, ya que se trata de un plugin que consume bastantes recursos.
Nuestros planes de hosting WordPress, cuentan con discos SSD y servidor web LiteSpeed, para que la web cargue tan rápido como sea posible.
Además, tendrás certificados SSL gratuitos, panel de control cPanel y un soporte técnico especializado en la plataforma y atendido desde España, por teléfono y email.