Introducción a Elementor Page Builder

¿Aún no conoces Elementor? Pues no te preocupes. A partir de este momento vas a comenzar a experimentar una nueva forma de diseñar sitios web realmente profesionales, de una manera muy sencilla y agradable.

Elementor es un plugin. No tiene más historias. Su principal función es como Editor de Contenidos. Pero no cualquier editor ya que de esos hay muchos por ahí.

Un potente editor de contenidos con el cual seremos capaces de crear sitios web realmente impresionantes. Algo que quizás nunca hayas visto. Pues a partir de ahora lo vas a hacer.

1. Instalar Elementor

  • El plugin Elementor (Lite) es la versión gratuita y viene con una serie de opciones básicas para comenzar. Se puede instalar desde el repositorio de plugins de WordPress.
  • Elementor PRO. Es la versión profesional que incluye el resto de funciones PREMIUM con las cuales se logran crear diseños web muy profesionales. A partir del capítulo 06 comenzaremos a trabajar en este curso con la versión PRO.

Para instalar el plugin:

  1. Dirígete al apartado Plugins >> Añadir nuevo.
  2. En el campo de búsqueda escribe Elementor.
  3. Haz clic en Instalar ahora y seguidamente en Activar.

Ahora nos aparece Elementor como parte del menú principal de WordPress con una serie de opciones para configurar el plugin.

2. Configuración de Elementor

En realidad Elementor no necesita mucha configuración para comenzar a utilizarlo. Dependerá mayormente del tema WordPress con el que estemos trabajando.

A continuación, vamos a ver algunas de las opciones más relevantes de este plugin:

2.1 Ajustes

Dirígete al apartado Elementor >> Ajustes. En la pestaña General podemos ver las siguientes opciones:

  • Tipos de contenido. Por defecto, WordPress habilita las páginas y las entradas y Elementor las reconoce. Al estar activadas estas casillas, podremos editar tanto páginas como entradas con Elementor.
  • Desactivar colores y fuentes por defecto. Elementor viene con unos colores y fuentes por defecto cuando lo instalamos. Si marcamos estas casillas, Elementor heredará las fuentes y colores del tema que estemos utilizando.

En la pestaña Avanzado, cambiamos la opción Cargar compatibilidad con Font Awesome 4 por Sí y hacemos clic en Guardar cambios. De esta manera nos aseguramos que se muestren correctamente todos los iconos que utilicemos con Elementor.

Las opciones por defecto de la pestaña Estilo son suficientes para trabajar con Elementor sin complicaciones.

En este apartado, cuando instalamos Elementor PRO, se activa una pestaña llamada Integraciones.

En esta pestaña podremos indicar claves y APIs de algunas de las aplicaciones más conocidas como reCAPTCHA (para evitar el SPAM en los formularios), Facebook SDK (para integrar comentarios o botones de Facebook en nuestro sitio web) o Mailchimp (para los newsletters), entre otras.

Todas estas aplicaciones se pueden integrar con Elementor de una manera muy sencilla sin necesidad de instalar plugins adicionales. Esta pestaña la conoceremos más adelante cuanto comencemos a trabajar con Elementor PRO.

2.2 Herramientas

Aunque en este apartado no hay que hacer nada de momento para configurar Elementor, es muy importante que lo tengas en cuenta ya que te podrá ayudar a solventar algunos fallos que se presenten en un futuro.

I. General

  • Regenerar CSS. Permite cargar nuevamente los archivos CSS que crea Elementor si alguna parte de nuestro sitio web no se visualiza correctamente.
  • Sincronizar la biblioteca. Aunque la biblioteca se suele actualizar de forma automática, puede que alguna vez necesitemos hacerlo de forma manual por si alguna plantilla no carga correctamente.
  • Modo seguro. El modo seguro nos permite diagnosticar problemas cargando solo el editor, sin cargar el tema ni ningún otro plugin.
  • Barra de depuración. La barra de depuración añade un menú a la barra de administración que lista todas las plantillas que se están usando en la página que se está mostrando.

II. Reemplazar URL

Este es una de las funciones más importantes que ofrece Elementor y se suele utilizar cuando migramos nuestro sitio web de dominio o activamos el cretificado SSL (HTTP → HTTPS).

Lo que hace esta herramienta es modificar todas las URLs antiguas por las URLs nuevas en la base de datos de manera que vuelva a funcionar todo correctamente con Elementor.

III. Control de versiones

En esta pestaña, Elementor nos ofrece la opción de reinstalar una versión “estable” del plugin anterior a la que estamos usando por si esta presenta algún problema de funcionamiento.

Al instalar Elementor PRO, también nos ofrece la opción para este plugin.

IV. Control de versiones

El modo de mantenimiento nos permite configurar la típica página de “Sitio web en construcción”.

Ofrece 2 opciones:

  • Próximamente. Podemos crear una página indicándole a nuestros usuarios que nuestro sitio web está en construcción y en breve estará listo. Es una opción muy útil cuando trabajamos con nuestro sitio web online y no queremos que nadie vea lo que estamos haciendo.
  • Mantenimiento. Esta opción es más utilizada cuando ya tenemos un sitio web en producción y estamos realizando un rediseño.

Para poner en marcha esta opción tenemos que crear previamente una Plantilla. En la lección, plantillas con Elementor, veremos que son las plantillas y cómo crearlas con Elementor.

3. Gestor de perfiles

En el apartado Elementor >> Gestor de perfiles, el plugin ofrece la opción de limitar el acceso según los perfiles que hayamos creado en nuestro sitio web.

Esto es muy útil, si por ejemplo, tenemos un periódico digital y no queremos que algunos redactores tengan acceso a ciertos apartados de Elementor pero si al contenido.

4. Información del sistema

En este apartado, Elementor nos ofrece un resumen de todos los detalles técnicos de nuestro sitio web como datos del servidor, temas y plugins instalados entre otros.

5. Resto de opciones

Los apartados fuentes personalizadas e iconos personalizados solo están disponibles con Elementor PRO. En futuras lecciones veremos cómo añadir fuentes e iconos personalizados, a nuestro sitio web, con Elementor.

 

Comparte:
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on skype
Skype
Share on email
Email

Te puede interesar:

Deja un comentario

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