En este post voy a enseñarte a instalar, activar y configurar el plugin Elementor, tanto en su versión free como en la premium.
Elementor es el mejor maquetador visual para el diseño de páginas web y una vez que lo conozcas, será tu mejor aliado.
El propio Elementor ya es de por sí una herramienta brutal, pero es importante que sepas, si no lo sabes ya, que existen un montón de plugins de addons para Elementor de otros desarrolladores que harán de este maquetador un arma de destrucción masiva.
Vamos al proceso que has venido a buscar…
Instalación y activación de Elementor
Para instalar Elementor, solo tienes que seguir los siguientes pasos:
- Ve al Plugins > Añadir nuevo y busca Elementor en el buscador de plugins.
- Haz click en Instalar y después en Activar.
Listo, ya tienes Elementor free instalado. Sencillo.
Ahora, si lo que quieres es instalar Elementor Pro, tendrás que comprar una licencia y subirla desde la misma página de plugins de tu WordPress.
Configuración de Elementor
Una vez tienes Elementor instalado, vamos a ver cómo configurarlo.
Dependiendo si instalas únicamente la versión FREE o la FREE + PRO, en el menú de WordPress te aparecerán diferentes opciones para configurar tu Elementor.
Te voy a contar cómo configurar cada pestaña a continuación y en cada una de ellas te diré si esa opción pertenece a una versión u otra.
Ajustes
En la subsección de ‘Ajustes’ te aparecerán 4 pestañas, y en cada una de ellas podrás configurar diversas cosillas:
- General
- Integraciones
- Avanzado
- Experimentos
General
Configura desde aquí algunas opciones generales, como el título indica.
- Tipos de contenido: aquí podrás determinar si activas Elementor para las Entradas, Páginas, Productos de Woocommerce (si tienes una tienda) y otros tipos de contenido que tengas en tu web.
- Desactivar colores por defecto: si marcas esta opción, Elementor cogerá los colores por defecto del tema.
- Desactivar fuentes por defecto: lo mismo que con los colores, pues para las tipografías.
- Compartir datos de uso: si quieres colaborar con los desarrolladores de Elementor en la mejora del plugin, marca esta opción y se enviarán de manera anónima datos sobre su rendimiento en tu web.
Pestaña ‘Integraciones’
En esta pestaña podrás añadir las llaves de integración (API) de un puñado de herramientas bien conocidas, como el reCaptcha de Google en varias versiones, Facebook SDK, Mailchimp, ActiveCampaign, WooCommerce y otras.
Pestaña ‘Avanzado’
Aquí podrás cambiar algunos parámetros algo más serios…
Estos son:
- Método de impresión de CSS: escoge si quieres guardar tu código CSS en un archivo externo o que sea ‘Inline’. Te recomiendo que sea externo.
- Cambio de método de carga del editor: esto sirve para diagnosticar problemas de conflicto de configuración con el servidor. Por defecto viene desactivado y yo ni lo toco.
- Permitira la subida de archivos sin filtrar: si activas esta opción podrás subir archivos SVG a Elementor, algo que WordPress por defecto no permite. Ten en cuenta que los archivos SVG pueden contener código malicioso, pues son imágenes con contenido insertado en código XML. Sube solo estos archivos si estás seguro de su procedencia y seguridad.
- Carga de Google Fonts: aquí podrás configura el método de carga de las fuentes de Google Fonts en tu web.
- Cargar compatibilidad con Font Awesome 4: esta opción hará que los iconos de Font Awesome 4 que hayas utilizado previamente en Elementor sean compatibles con la versión Font Awesome 5.
Pestaña ‘Experimentos’
En este apartado podrás probar nuevas características e implementaciones que el equipo de desarrollo del plugin está realizando antes de lanzarlas oficialmente en un update.
Algunas de estas opciones están en versión Beta o Alfa, así que ten cuidado al activarlas en un sitio web activo, porque se puede romper algo. Haz esto con cuidado y, si puedes, en una web de pruebas.
Pestaña ‘Estilo’ (obsoleta)
Hace tiempo, había una pestaña llamada Estilo en la que podías configurar aspectos generales del diseño de la web, pero ahora esas opciones están ya integradas en una sección del área de trabajo de Elementor.
Estas eran las opciones que se podían configurar:
- Fuentes genéricas predeterminadas: Elementor utilizará un listado de tipografías predeterminadas que se cargan si la que tú has configurado no se cargase correctamente en algún momento. Un plan B tipográfico, vaya.
- Ancho del contenido: por defecto Elementor muestra sus secciones a 1140px de ancho para la versión escritorio. Aquí puedes cambiar esos pixels.
- Espacio entre widgets: por defecto Elementor asigna 20px de separación entre los widgets que utilices para diseñar. Aquí puedes cambiar ese parámetro.
- Extender hasta ajustar sección: cuando pongas una sección de Elementor a todo lo ancho, por defecto se ajusta al ancho del ‘body’. Si deseas que se ajuste a otro selector CSS, puedes indicarlo aquí.
- Selector de título de página: si deseas ocultar un título de página H1 con Elementor, el identificador y clase por defecto suele ser ‘h1.entry-title’, pero si tu tema utiliza otra clase diferente, deberías indicarla aquí, sino Elementor no sabrá cuál es para ocultarla.
- Punto de ruptura en tableta: aquí podrás poner la resolución a la que la web salta a la versión tablet. Por defecto son 1025px.
- Punto de ruptura en móvil: al igual que en el punto anterior, aquí podrás determinar a qué pixels saltaría la versión móvil. Por defecto está a 768px.
- Caja de luz de imagen: con esta opción, todas las imágenes que se abran a través de un link, se abrirán en una caja de luz o lightbox. ¡OJO!, porque a veces puede ser generar incompatibilidades con el tema si este también tiene esa opción.
Envíos (PRO)
Si empleas formularios de Elementor en tu web, tendrás la opción de añadir diferentes acciones que se ejecutarán una vez el usuario clique el botón ENVIA. Una de ellas permite guardar el registro de usuarios que han enviado el formulario.
Esos datos, se recogen en este apartado llamado Envíos.
Fuentes personalizadas (PRO)
Este apartado es de la versión PRO y en él podrás cargar tus propias tipografías desde tu disco duro con diferentes formatos.
Estos son los formatos que podrás subir:
- WOFF
- WOFF2
- TTF
- SVG
- EOT
Custom icons (PRO)
En esta sección podrás subir tu propio pack de iconos comprimidos en un ZIP y descargados desde las varias plataformas de iconos.
Las plataformas son estas:
Código personalizado (PRO)
Una opción que la gente de Elementor añadió en la versión Pro 3.1 es la de añadir código personalizado a tu web.
Gracias a este nuevo apartado, podrás añadir aquí directamente sin utilizar plugins adicionales: píxeles de Facebook o Google Ads, metaetiquetas y cualquier otro script (como Google Analytics).
Además, podrás indicar dónde se tiene que cargar el código: cabecera, body o pie de página, así como su orden de prioridad.
También podrás añadir condiciones de visualización.
Básicamente es lo mismo que el apartado Hooks que viene con algunos mejores temas para WordPress.
Gestor de perfiles
Si existen varios usuarios con acceso al WordPress de tu web y quieres limitar el uso que hacen de Elementor, podrás hacerlo aquí.
Los roles principales existentes son (pueden incrementarse por ejemplo al añadir WooCommerce):
- Editor
- Autor
- Colaborador
- Suscriptor
Y las opciones de limitación que puedes personalizar para cada perfil son:
- Sin acceso al editor: de esta forma no podrán ni entrar en Elementor.
- Acceso solo al contenido editable: con esta opción, solo se podrán modificar textos, imágenes, links… pero nunca tocar el diseño ni la maquetación.
Si no marcas nada, tendrán acceso a todo.
Herramientas
En este apartado podrás realizar diversas acciones sobre el comportamiento del plugin.
Pestaña ‘General’
- Regenerar CSS y datos: podrás regenerar tu código CSS para que se adapte a los últimos estándares que se lancen al mercado.
- Sincronizar la biblioteca: aunque Elementor sincroniza su biblioteca de elementos diariamente de manera automática, también puedes hacerlo manualmente aquí.
- Modo seguro: para poder detectar posibles problemas de funcionamiento, puedes activar el modo seguro, el cual te desactivará el tema y otros plugins para trabajar solo con Elementor.
- Barra de depuración: esta opción, si está activada, habilita en la barra de administración de WordPress una opción de Elementor para ver qué plantilla de WP o archivo del tema se está cargando, para determinar si puede haber algún conflicto.
Pestaña ‘Reemplazar URL’
Si necesitas hacer un reemplazo completo del dominio de la web o pasar de HTTP a HTTPS (técnicamente llamado ‘Redireccionamientos 301’), podrás hacerlo desde esta pestaña.
Pestaña ‘Control de versiones’
- Revertir a la versión anterior: hay ocasiones en las que Elementor casca, peta o como quieras llamarlo al realizar una actualización del plugin. Si te pasa esto, podrás volver a la versión anterior mientras no salga otra actualización con el problema resuelto. Podrás hacerlo tanto con la versión FREE como la PRO.
- Conviértete en probador de betas: si quieres ser probador de versiones Beta de Elementor, puedes activar esta opción aquí.
Pestaña ‘Modo de mantenimiento’
- Escoge modo: aquí podrás decidir si quieres poner la web en modo ‘En construcción’ o en modo ‘Mantenimiento’.
- Quién puede acceder: en esta opción podrás decidir qué roles de WordPress tienen acceso al backend estando la web en construcción o en mantenimiento.
- Escoger plantilla: diseña con Elementor una página de ‘En construcción’ o ‘Mantenimiento’ y escógela aquí.
Pestaña ‘Importar/Exportar kit’
Si tienes una web de Elementor ya configurada a nivel plantillas, contenido y ajustes, puedes importar esos ajustes entre diferentes webs gracias a esta opción.
Información del sistema
En este apartado aparecen un montón de datos técnicos que podrían solicitarte desde Elementor si tienes algún problema que no consigues solucionar.
Primeros pasos
Si acabas de descubrir Elementor o estás empezando a utilizarlo, pásate por este apartado para echar un ojo a la cantidad de material formativo que tienen para sacarle jugo.
Obtener ayuda
Si tienes cualquier consulta o problema con Elementor, a través de esta opción llegarás a la sección de soporte de su página web: https://elementor.com/support/
Licencia (PRO)
Esta opción solo aparecerá si tienes la versión de pago. Si tu versión es la FREE, la sección pasará a llamarse “Ir a la versión PRO”, que te redirigirá directamente a la sección de la web oficial de Elementor Page Builder donde podrás pasar por caja para hacerte con ella.
Conclusión
Elementor es una herramienta muy potente que te ofrece un sinfín de posibilidades de configuración y personalización, pero hay que hacerlo bien para que todo quede fino Filipino.
Espero haberte ayudado a configurar correctamente todas las opciones para que le saques el máximo partido.
Ahora, si el contenido te ha gustado, déjame un comentario, 5 estrellitas y ya si te veo, te invito a una 1906 bien fresquita!!!!
Ciao, ciao, ciaoooooo!!!!!
Muy buen artículos compañero y gracias por los tips!
Saludos
Gracias a ti por intentar meter el link, pero Google no lo tiene en cuenta 😉