Cómo instalar y configurar Elementor

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:

  1. Ve al Plugins > Añadir nuevo y busca Elementor en el buscador de plugins.
  2. Haz click en Instalar y después en Activar.

Listo, ya tienes Elementor free instalado. Sencillo.

como instalar elementor

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

elementor ajustes

General

Configura desde aquí algunas opciones generales, como el título indica.

elementor ajustes general

  • 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.

elementor ajustes integraciones

Pestaña ‘Avanzado’

Aquí podrás cambiar algunos parámetros algo más serios…

elementor ajustes avanzado

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.

elementor ajustes experimentos

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.

elementor envios

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.

elementor tipografias personalizadas

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.

elementor custom code

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í.

elementor gestor perfiles

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’

elementor herramientas 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.

elementor herramientas reemplazar url

Pestaña ‘Control de versiones’

elementor herramientas control 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’

elementor herramientas modo 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.

elementor-herramientas importar exportar kit

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!!!!!

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 5)

2 comentarios en “Cómo instalar y configurar Elementor”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.