Instalación y configuración de Elementor

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Básico

Instalación y configuración de Elementor

En la lección anterior, editores de contenido, hemos hablade de los editores de contenido para WordPress más populares. En este curso vamos trabajar con el plugin Elementor que destaca por su sencillez y facilidad de uso.

Otra ventaja de utilizar este editor de contenido es la compatibilidad con muchas plantillas WordPress incluyendo Astra, la plantilla que hemos elegido para el desarrollo de este curso de WordPress.

1. Instalando Elementor

Elementor es un plugin que se instala desde el repositorio de plugins de WordPress y se integra con "casi" cualquier plantilla en un sitio web.

Para instalar Elementor:

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

Instalación del plugin Elementor

Una vez activo, el plugin te llevará a una página de bienvenida, con un vídeo introductorio, para que comiences a trabajar en tu sitio web.

Si no lo tienes a mano, puedes ver el vídeo al final de la lección (punto 5).

Instalación y configuración de Elementor

Página de bienvenida de Elementor

2. Instalando Elementor PRO

Elementor PRO es un plugin que añade opciones adicionales a Elementor. Para poder utilizarlo, es necesario instalar inicialmente la versión Lite (gratis) de Elementor.

2.1 Primer paso

Lo primero que tienes que hacer es borrar las cookies del navegador que sueles utilizar (preferiblemente Chrome, Firefox o Safari).

¿Por qué te pido esto?

Es un favor que te pido ya que, cuando cuando contrates el recurso, esta empresa me paga a mi una comisión con la que puedo hacer frente a los gastos que genera este {blog}: dominio, hosting y mantenimiento. Esto se llama marketing de afiliación.

Tu contratas un "excelente plugin" y yo me llevo a cambio una pequeña comisión que saldrá del bolsillo de la empresa. Si quieres puedes saltarte este paso pero confío en tu buen corazón y no te llevará más de 1 minuto hacerlo.

Como ayuda, te indico los enlaces donde puedes encontrar más información para borrar las cookies de los principales navegadores:

2.2 Segundo paso

  1. Para contratar Elementor PRO, haz clic en el siguiente botón: CONSIGUE ELEMENTOR PRO.
Elementor

Aunque la versión Lite (gratis) de Elementor te permitirá desarrollar un sitio web, para el desarrollo de este curso, vamos a utilizar la versión PRO para sacar el máximo provecho y conseguir un diseño profesional.

  1. Accederás a la página principal de Elementor. En el menú principal, haz clic en Pricing para ver los paquetes que ofrecen.
Instalación y configuración de Elementor

Paquetes de Elementor PRO

La diferencia principal entre cada uno de los paquetes es la cantidad de sitios web donde puedes usar el plugin.

Las principales ventajas que ofrece la versión PRO de Elementor son:

  • Más de 50 widgets adicionales.
  • Más de 300 plantillas.
  • Constructor de temas.
  • Personalizar plantillas para WooCommerce.
  • Constructor de popups.
  • Fuentes personalizadas.
  • CSS personalizado en cada página, entrada y producto.
  1. Para continuar con el proceso, haz clic en el botón BUY NOW y finaliza con el proceso de compra.
  2. Una vez hayas finalizado el proceso, descarga el plugin Elementor PRO desde el panel de control de tu cuenta.
  3. Regresa a WordPress. Instala y activa el plugin.

En la lección, plugins para WordPress, puedes encontrar información actualizada para instalar un plugin en WordPress (punto 3.2 para plugins externos).

3. Configurando Elementor

Cuando instalas Elementor, en el menú principal de WordPress, se crea un elemento de menú llamado Elementor con una serie de apartados en los que se puede configurar el plugin a nivel avanzado.

En realidad no hace falta realizar ningún cambio. Solo te hablaré de 3 apartados que pueden resultar interesantes:

3.1 Ajustes: General

En el apartado Elementor >> Ajustes, en la pestaña General, verás las siguientes opciones:

  • Tipos de contenido.
    Son los tipos de contenido (entradas, páginas y productos) donde se puede utilizar el plugin. Vienen marcados por defecto pero puedes desmarcarlos si no quieres utilizar el plugin en alguno de ellos.
  • Desactivar colores por defecto.
    Con Elementor puedes configurar una paleta de colores "base" para utilizarlos en tu sitio web: color primario y secundario, color del texto y color de los enlaces.
  • Desactivar fuentes por defecto.
    Elementor cuenta con una extensa librería de fuentes, incluyendo las fuentes de Google, para configurar las fuentes predeterminadas del sitio web.

La plantilla Astra PRO incluye su propia librería de fuentes y opciones de colores por lo que no será necesario utilizar estas opciones del plugin.

Marca las casillas para desactivar estas opciones.

Instalación y configuración de Elementor

Ajustes de Elementor: General

3.2 Ajustes: Integraciones

En el apartado Elementor >> Ajustes, en la pestaña Integraciones, Elementor ofrece la posibilidad e integrar servicios de terceros como Google reCAPTCHA, Facebook, MailCchimp entre otros, para mejorar el funcionamiento del sitio web.

Es una característica muy útil ya que evitas instalar plugins adicionales para utilizar este tipo de servicios. Más de 10 integraciones en un mismo plugin.

3.3 Fuentes personalizadas

En el apartado, Elementor >> Custom Fonts, la versión PRO ofrece la posibilidad de integrar fuentes personalizadas que no se encuentran, por defecto, en la librería del plugin.

Estas fuentes suelen ser gratis o de pago y se pueden conseguir en sitios web especializados. Es una buena opción cuando se trabaja con una plantilla que no ofrece esta opción.

La plantilla Astra permite instalar un plugin con el cual añadir fuentes personalizadas a nuestro sitio web mientras que con Elementor PRO no hace falta instalar un plugin adicional.

Sea cual sea la opción que elijamos para añadir fuentes personalizadas a nuestro sitio web, el resultado será el mismo.

En futuras lecciones veremos como añadir fuentes personalizadas tanto con Astra como con Elementor.

4. Elementor en una página y entrada

Una vez instalado Elementor, vamos a ver cómo se comporta en una página o entrada.

A partir de la versión 5.0 de WordPress, el editor clásico ha sido sustituido por el editor de contenidos Gutenberg.

Para habilitar el editor clásico de WordPress y comenzar a trabajar con Elementor, instala el plugin Editor Clásico que podrás encontrar en el repositorio de plugins de WordPress.

Dirígete al apartado Páginas y accede a la página de Inicio (o a cualquier otra) y haz clic en Editar con Elementor.

Instalación y configuración de Elementor

Editando una página con Elementor

Aunque Elementor puede controlar casi todas las secciones de una página, si estás trabajando con una plantilla como Astra PRO, lo ideal es que se utilice únicamente para el diseño del contenido mediante bloques.

La cabecera (header), pie de página (footer) y barra lateral (sidebar) se podrán modificar desde los ajustes de la plantilla, ajustes de página/entrada y desde el apartado widgets en WordPress.

Veamos los apartados más importantes que componen el panel de Elementor:

Instalación y configuración de Elementor

Panel principal de Elementor

4.1 Elementos

En esta pestaña se encuentran todos los elementos que podrás utilizar en el contenido de la página.

Haciendo clic en el icono superior derecho podrás acceder a esta pestaña con todos los elementos.

Los elementos BÁSICO, GENERAL Y WORDPRESS vienen por defecto con la versión Lite de Elementor.

Los elementos PRO, SITIO, INDIVIDUAL y WOOCOMMERCE son elementos adicionales que se integran con la versión PRO de Elementor.

4.1.1 BÁSICO

Son los elementos básicos de un sitio web: encabezados, editor de texto, imagen, vídeo entre otros.

Instalación y configuración de Elementor

BÁSICO: widgets de Elementor

4.1.2 PRO

Son los elementos avanzados de la versión PRO: portfolio, sliders, tablas de precios, llamadas a la acción entre otros.

Instalación y configuración de Elementor

PRO: widgets de Elementor

4.1.3 GENERAL

Son otros elementos avanzados de Elementor: galería y carrusel de imágenes, pestañas, acordeón entre otros.

Instalación y configuración de Elementor

GENERAL: widgets de Elementor

4.1.4 SITIO

Son elementos para personalizar la cabecera del sitio web. Estas opciones son muy interesantes ya que se pueden crear cabeceras personalizadas en cada página individual.

Instalación y configuración de Elementor

SITIO: widgets de Elementor

4.1.5 INDIVIDUAL

Son elementos con los que podrás personalizar entradas del blog de tu sitio web.

Instalación y configuración de Elementor

INDIVIDUAL: widgets de Elementor

4.1.6 WOOCOMMERCE

Son elementos con los que podrás personalizar páginas con funciones de una tienda online.

Instalación y configuración de Elementor

WOOCOMMERCE: widgets de Elementor

4.1.7 WORDPRESS

Con estos elementos puedes insertar widgets de WordPress dentro del contenido de la página.

Instalación y configuración de Elementor

WORDPRESS: widgets de Elementor

4.2 Global

En esta pestaña, solo disponible en la versión de Elementor PRO, puedes crear un widget personalizado, guardarlo y luego utilizarlo en otra página.

Esta características es muy útil cuando queremos que una parte del contenido se repita en todo el sitio web. Por ejemplo: una llamada a la acción, un formulario de contacto o un footer personalizado.

En futuras lecciones veremos como utilizar esta peculiar característica de Elementor PRO.

4.3 Menú principal

Para acceder a este apartado haz clic en el icono .

Desde este apartado puedes configurar las opciones generales de cada página.

Instalación y configuración de Elementor

Menú principal de Elementor

4.3.1 Estilo

  • Colores por defecto.
    Se encuentra una combinación de paletas de colores "base" que podrás utilizar en tu sitio web.
  • Fuentes predeterminadas.
    Puedes elegir las fuentes que vas a utilizar en tu sitio web.
  • Selector de color.
    Puedes crear otras paletas de colores personalizadas para utilizar en tu sitio web.

La plantilla Astra PRO incluye su propia librería de fuentes y opciones de colores por lo que no será necesario utilizar estas opciones del plugin.

Por esta razón hemos desactivado las casillas en los ajustes de Elementor (punto 3.1).

4.3.2 Ajustes

  • Ajustes globales.
    Se encuentran los ajustes globales del plugin.
  • Ajustes en el escritorio.
    Redirige al apartado Elementor >> Ajustes.
  • Sobre Elementor.
    Redirige al sitio web de Elementor.

Es recomendable que no toques nada en estos ajustes si no tienes un nivel avanzado de desarrollo web.

4.3.3 Ir a

  • Buscador.
    Con esta potente herramienta podrás buscar cualquier cosa en todo tu sitio web.
  • Ver página.
    Abrirá una nueva pestaña en el navegador con la URL de la página. No se recomienda su uso ya que, si aún no has publicado la página, no mostrará nada. En su lugar, se recomienda utilizar la herramienta previsualizar cambios (punto 4.5.5).
  • Salir al escritorio.
    Redirige a la vista de página en WordPress. Si no has guardado los cambios que hayas hecho, tendrás que hacerlo antes de salir de Elementor o si no los perderás.

4.4 Nuevo widget

Instalación y configuración de Elementor

Añadir widget en Elementor

Cuando comienzas a crear una nueva página (o entrada) con Elementor, en el cuerpo de la página, verás un recuadro con el texto Arrastra aquí el widget.

Un widget es un elemento. Simplemente haz clic sobre el elemento que quieras y arrástralo al recuadro.

Verás como se añade el nuevo elemento al cuerpo de la página y, en el panel principal, podrás configurar el contenido, estilos y opciones adicionales del elemento.

De esta manera, podrás añadir todos los elementos que quieras. Estos se irán ubicando uno sobre el otro en vertical.

¿Y si queremos insertar 3 elementos en horizontal?

Para hacerlo, tenemos que elegir primero una estructura. En el recuadro Arrastra aquí el widget, haz clic en el botón .

Verás lo siguiente:

Instalación y configuración de Elementor

Estructuras en Elementor

Elige la estructura que más gustes. Lo que hará Elementor es añadir una nueva fila divida en varias columnas (según la configuración que hayas elegido) y, en cada división, podrás añadir elementos en formato horizontal.

Gracias a esta segmentación de columnas es que se consigue un diseño responsivo del sitio web.

4.5 Herramientas adicionales

Las herramientas adicionales se encuentran en la parte inferior del panel de Elementor. Estas herramientas te ayudarán en el diseño y configuración de la página.

Instalación y configuración de Elementor

Herramientas adicionales en Elementor

4.5.1 Ajustes de página

Para acceder a este apartado haz clic en el icono .

Desde este apartado puedes configurar las opciones generales de la página como si lo hicieras desde la vista de página en WordPress:

  • Modificar y ocultar el título principal.
  • Asignar una imagen destacada.
  • Estructura de la página.
  • Estilo de la página entre otras.
Instalación y configuración de Elementor

Ajustes de página en Elementor

4.5.2 Navigator

Para activar esta herramienta haz clic en el icono .

Esta característica de Elementor resulta muy interesante ya que mostrará un menú, en capas, de todos los elementos que se encuentran configurados en la página.

Instalación y configuración de Elementor

Navigator en Elementor

Como puedes apreciar en la imagen, cada elemento que se añade con Elementor, se encuentra en una columna y esta, a su vez en una sección.

Cuando activamos Navigator, Elementor nos muestra un "arbol" de todos los elementos y sus contenedores en orden jerárquico.

Esta herramienta es muy útil cuando tenemos una página con muchos elementos. De esta manera es más sencillo navegar por Navigator que hacer scroll por toda la página.

4.5.3 Historial

Para acceder a este apartado haz clic en el icono .

Con esta herramienta puedes regresar un paso atrás si te has equivocado haciendo algún cambio. Por ejemplo, si has borrado un elemento y ha sido por error, accedes al historial y restauras el elemento.

4.5.4 Modo adaptable

Para acceder a este apartado haz clic en el icono .

Con esta herramienta, Elementor muestra una vista previa de la página en cualquier tipo de dispositivo: escritorio (PC), tableta y móvil.

Instalación y configuración de Elementor

Modo adaptable en Elementor

4.5.5 Previsualizar cambios

Para activar esta herramienta haz clic en el icono .

Muestra una vista previa de los cambios antes de actualizar la página. Es una herramienta muy útil cuando estás trabajando en borrador y quieres ver cómo está quedando el diseño antes de guardar los cambios.

4.5.6 Publicar/Actualizar

Una vez finalices todos los cambios en la página tendrás que guardarlos. Elementor te ofrece 3 opciones:

  • Guardar borrador.
    Si la página aún no se encuentra publicada, puedes guardar un borrador y luego continuar actualizando el contenido.
  • Guardar como plantilla.
    Si has finalizado el contenido de la página, puedes guardarlo como una plantilla y luego cargar todo el contenido en otra página.
  • Publicar/Actualizar.
    Con esta opción, publicas los cambios (si es una página/entrada nueva) o actualizas los cambios (si ya existe).
Instalación y configuración de Elementor

Publicar en Elementor

Instalación y configuración de Elementor

Actualizar en Elementor

4.6 Biblioteca de Elementor

Una de las características más interesantes que posee Elementor, es su biblioteca de recursos. Esto es algo por lo que ha ganado tanta popularidad y es el favorito de la mayoría de desarrolladores.

Para acceder a este apartado, haz clic en el icono ubicado en el recuadro Arrastra aquí el widget en el cuerpo de la página.

Instalación y configuración de Elementor

Estructuras en Elementor

La biblioteca está dividida en 3 secciones:

  • Bloques.
    Son secciones prediseñadas, con elementos y columnas, tales como llamadas a la acción, preguntas frecuentes, portadas, contacto entre otros para utilizarlas en tu sitio web. Una vez las cargues, modificas el texto e imágenes y listo.
  • Páginas.
    Son una serie de plantillas prediseñadas (algo así como demos) que puedes cargar en cada una de tus páginas. Una vez las cargues, modificas el texto e imágenes y listo.
  • Mis plantillas.
    En esta sección es donde se guardan tus plantillas para luego ser reutilizadas.

La finalidad de utilizar las plantillas prediseñadas de Elementor es facilitar el trabajo. De esta manera no hay que realizar un diseño desde cero.

Sin embargo, si no estás familiarizad@ con los editores de contenido, no es recomendable trabajar sobre una plantilla prediseñada ya que el proceso es más complejo y, de esa forma, será más difícil que aprendas a trabajar con un sitio web.

5. Conociendo a Elementor

Hasta aquí, básicamente lo que hemos visto es una breve descripción de Elementor.

Si aún no lo has hecho, te invito a que veas el vídeo introductorio de Elementor. Es un vídeo bastante práctico y, con lo que has leído, te ayudará a conocer el funcionamiento del plugin mucho mejor.

El vídeo está en inglés y, aunque es muy intuitivo, puedes activar los subtítulos del vídeo para que puedas entender mejor el uso de Elementor.

Introducción a Elementor

En esta lección hemos completado el equipo perfecto para desarrollar nuestro sitio web: Astra PRO + Elementor. A partir de ahora, solo tienes que dar rienda suelta a tu imaginación para construir un fantástico sitio web.

Los editores de contenido son excelentes herramientas que facilitan el desarrollo de un sitio web. Todos ellos ofrecen características muy similares y solo varían en el propio diseño y facilidad o complejidad de uso.

Elementor destaca del resto de editores de contenido por su sencillez, facilidad de uso y, en su versión gratuita, posee suficientes elementos para desarrollar un sitio web muy profesional.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(4 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.