Instalar y Configurar Elementor

En este post vamos a ver como instalar Elementor (la versión gratuita) y repasaremos todas sus opciones de configuración.

Elementor es uno de los maquetadores visuales con más éxito actualmente y con mayor crecimiento durante los últimos dos años. Nosotros usamos la combinación del tema GeneratePress Pro y Elementor Pro para crear nuestras páginas con Wordpress.

Versiones de Elementor

Elementor tiene dos versiones o partes. La primera parte es la básica que instala en tu página las partes básicas de Elementor. Es gratuita, y la puedes instalar desde el repositorio de plugins.

La segunda parte es la denominada Elementor Pro. Este segundo plugin añadirá las funcionalidades más potentes del maquetador y un conjunto de widgets adicionales.

Como podéis imaginar, esta segunda parte es de pago.

Instalación

Lo instalamos desde el repositorio de plugins de Wordpress:

1. En el menú lateral pulsamos “Añadir nuevo”.
2. Ponemos Elementor en la caja de búsqueda.
3. Pulsamos en “Instalar ahora” y luego en “Activar”.

Opciones de configuración deElementor

Tras activar Elementor, nos aparece una nueva entrada en el menú lateral con varias opciones. Vamos a repasarlas todas.

Ajustes

En la primera pestaña, “General”, podemos configurar:

1. Tipos de contenido: Que componente de Wordpress podemos editar con Elementor. Por defecto señalamos entradas y páginas. Esto no significa que tengamos que crear todas las páginas o entradas que creemos con Elementor, tan solo nos da la opción de poder crearlas con el maquetador.
2. Desactivar colores por defecto: La marcamos (importante) para que Elementor use los colores definidos en nuestro tema. De esta forma evitamos añadir código y elementos innecesarios.
3. Desactivar fuentes por defecto: La marcamos (importante) para que Elementor use las fuentes definidas en nuestro tema. De esta forma evitamos añadir código y elementos innecesarios.
4. Seguimiento de datos de uso: Si marcamos esta opción, enviamos datos de nuestro uso de forma anónima a Elementor para ayudarles a mejorar el plugin. Tu decides lo que haces con esta opción.

En la siguiente pestaña, “Estilo” configuramos:

1. Fuentes genéricas predeterminadas: La fuente que cargaremos si las predefinidas no funcionan.
2. Ancho del contenido: Ancho por defecto de la página. Es importante que lo ajustes a la misma cifra que has usado en tu tema.
3. Espacio entre widgets: Espacio por defecto entre los widgets de Elementor. Lo dejamos a 20 pixels. Podemos modificarlo de forma individual cuando maquetamos páginas o entradas.
4. Extender hasta ajustar sección: El ancho de las secciones se ajustarán al elemento CSS indicado aquí. Por defecto dejamos Body.
5. Selector de título de página: Para ocultar el título de página necesitamos indicar el selector. Por defecto dejamos el que nos muestra Elementor. Si tu tema usa otro, tienes que indicarlo aquí.
6. Punto de ruptura en tableta: Por debajo de los pixeles indicados de ancho, la página se configurará como vista en tableta.
7. Punto de ruptura en móvil: Por debajo de los pixeles indicados de ancho, la página se configurará como vista en tableta.
8. Caja de luz de imagen: Si marcamos esta opción, las imágenes que se abran a través de un link se abrirán en una caja de luz.

En la última pestaña, “Avanzado” tenemos estas opciones:

1. Métodos de impresión de CSS: Donde guardamos el código CSS generado. Lo recomendable es en un fichero externo.
2. Cambio del método de carga del editor: Por defecto de dejamos en Desactivar, pero lo podemos activar cuando no nos carga el editor de Elementor.
3. Controladores de edición: Activando esta opción, simplemente con pasar el cursor del ratón por un widget se desplegarán las opciones de ese widget. Tu decides cual es la opción más cómoda para ti.
4. Activar subidas de SVG: Si activamos esta opción, Elementor nos permitirá subir ficheros tipo SVG(http://multimedia.uoc.edu/blogs/labeines/es/introduccio/format-svg-i-exportacio-des-de-diferents-programes/). Recomendamos no activarla por motivos de seguridad.
5. Cargar compatibilidad con Font Awesome 4: Si usas este tipo de iconos, activa esta opción.

Por último, pulsamos en “Guardar cambios” para no perder los cambios que hemos hecho.

Gestor de perfiles

En esta opción, definimos que perfiles de Wordpress no tienen acceso al editor de Elementor. Para quitar el acceso, seleccionamos el perfil, desplegamos y marcamos la opción “Sin acceso al editor”. Pulsamos en “Guardar cambios”.

Herramientas

En la pestaña “General” tenemos estas opciones:

1. Regenerar CSS: Nos permite actualizar el código CSS generado por Elementor.
2. Sincronizar la biblioteca: Esta opción no la hemos usado nunca. Actualiza la biblioteca de elementos y plantillas de Elementor. Esto se realiza automáticamente todos los días, por lo que no usamos esta opción.
3. Modo seguro: Es una opción muy interesante que sólo usaremos si tenemos problemas. Cuando la activamos, desactiva los plugins y el tema de la página, cargando sólo Elementor, para poder analizar mejor el error.
4. Barra de depuración: Activa una opción en la barra de administración de Wordpress con información de los archivos que se están cargando para darnos más información en caso de problemas. Como la opción anterior, sólo la activamos cuando tengamos problemas y las desactivamos una vez solucionados estos.

La opción de “Reemplazar URL” nos permite cambiar el dominio de la página (o pasar de http a https). Preferimos otras formas de hacer este cambio. Si la usas, haz una copia de seguridad primero.

En la pestaña de “Control de versiones” encontramos dos opciones muy interesantes.

“Revertir versiones” nos permite, después de actualizar Elementor, volver a una versión anterior. Es muy interesante cuando detectamos problemas graves después de una actualización. Seleccionamos la versión que queremos instalar y pulsamos el botón Reinstalar VX.X.X (donde X.X.X es el número de versión que hemos seleccionado). Muy importante: haz copia de seguridad antes por si algo sale mal.

La otra opción es “Pruebas beta” que nos permite actualizar a versiones futuras de Elementor que están en pruebas. Desaconsejamos completamente usar esta opción para una página en producción. Sin embargo, es muy recomendable para probar futuros desarrollos de Elementor en una copia de pruebas de nuestra página.

La última pestaña de esta sección es la “Modo de mantenimiento.

Como indica el nombre, es para poner nuestra página web en modo de mantenimiento avisando a nuestros posibles usuarios. Tenemos que indicar:

1. Si estamos en modo “próximamente” o modo “mantenimiento”. El primer caso es para páginas que estamos desarrollando y tendremos terminadas en el futuro mientras el segundo modo es para cambios en la página (o actualizaciones) estando esta nuevamente operativa en un corto espacio de tiempo (horas o un día).
2. Quién puede acceder: Indicamos los perfiles de usuario de Wordpress que pueden acceder al backend de la página mientras esta en este modo.
3. Escoger plantilla: Seleccionamos la plantilla de Elementor que queremos mostrar para informar a nuestros usuarios del estado de la página.

Información del Sistema

Nos muestra la configuración del servidor y del Wordpress de nuestra página. Es una opción muy interesante si tenemos problemas con Elementor, ya que muchos de los problemas habituales están relacionados con alguna característica que necesita Elementor y no cumple nuestra página (por ejemplo, la versión de PHP o el límite de memoria).

Primeros Pasos

Nos muestra un video de introducción a Elementor.

Obtener ayuda

Nos lleva a la página de ayuda de Elementor.

Fuentes Personalizadas

Opción sólo disponible para Elementor Pro.

Ya tenemos preparado Elementor para crear nuestra primera página. Sencillo, ¿verdad?