Lección 03

Instalación y configuración de Elementor

En la lección anterior, editores de contenido, hemos visto algunos de los editores de contenido para WordPress más populares.

Para el desarrollo de este curso de WordPress, vamos a trabajar con Elementor ya que es muy fácil de usar y es 100% compatible con Astra, el tema que utilizaremos también en el desarrollo de este curso.

Índice del contenido
    Add a header to begin generating the table of contents

    1. Instalando Elementor

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

    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.

    Una vez activo el plugin, nos encontraremos con una página de bienvenida con un vídeo introductorio, para que comencemos a trabajar en nuestro sitio web.

    Página de bienvenida de Elementor
    Página de bienvenida de Elementor

    Anuncio publicitario

    2. Configuración de Elementor

    Al instalar Elementor se crea un elemento de menú llamado Elementor, en el menú principal de WordPresscon una serie de apartados donde se puede configurar el plugin.

    Vamos a ver solo los apartados en los que necesitamos hacer cambios. El resto se pueden dejar como están.

    2.1 Ajustes: General

    Dirígete al apartado Elementor >> Ajustes y, en la pestaña General, verás las siguientes opciones:

    • Tipos de contenido
      Son los tipos de contenido (entradas y páginas) 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 como se hace con los temas.
    • 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.

    Elementor es un plugin tan potente que podríamos diseñar un sitio web, con este plugin, sin necesidad de instalar un tema.

    Sin embargo, como es obligatorio tener un tema activo en WordPress, vamos a aprovechar el potencial tanto del tema (en este caso Astra) como de Elementor para conseguir excelentes resultados.

    Astra 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 y haz clic en Guardar cambios.

    Ajustes de Elementor: General
    Ajustes de Elementor: General

    2.2 Ajustes: Estilo

    • Ancho del contenido
      En este campo tenemos que indicar el mismo valor que tendrá nuestro tema.

    En la lección, personalizar Astra, vamos a conocer el personalizador de este tema. En la opción Global >> Contenedor hay que indicar el valor del ancho del contenido en el campo Anchura.

    Este será el tamaño máximo que habrá, de izquierda a derecha, para alojar el contenido de nuestro sitio web. Por defecto Astra asigna 1200px. En este caso, deberás asignar este mismo valor en el campo Ancho del contenido en Elementor de manera que, el contenido creado con Elementor, se adapte al espacio máximo permitido por el tema.

    Indica el valor del Ancho del contenido y haz clic en Guardar cambios.

    Ajustes de Elementor: Estilo
    Ajustes de Elementor: Estilo

    3. Panel de edición de Elementor

    Una vez instalado y configurado Elementor, podemos comenzar a editar nuestras páginas y entradas.

    Lectura recomendada...

    En la lección del curso de Elementor, panel de Elementor, puedes encontrar información actualizada sobre todas las opciones de edición de este editor de contenidos.

    4. Plantillas con Elementor

    Otra de las grandes bondades que ofrece Elementor es que se pueden diseñar plantillas para luego importarlas en nuestro sitio web. La finalidad de crear plantillas en Elementor es la de ahorrar tiempo y mantener un diseño estandar.

    Los tipos de plantillas que podemos crear con Elementor son:

    • Página
      Aunque Elementor le llame Página en realidad es una plantilla que puede ser utilizada tanto en páginas como en entradas de nuestro sitio web. La finalidad es diseñar 1 plantilla con el contenido, pulir todos los detalles y luego importarla dónde la necesitemos.

    Para que entiendas el uso de las "Páginas" en Elementor, veamos un ejemplo:

    El proyecto con el que estamos trabajando en este curso de WordPress es crear el sitio web de un Gimnasio. En nuestro sitio web vamos a ofrecer 4 servicios: Spinning, CrossFit, Pesas y Pilates.

    Cada uno de estos servicios tendrá su propia página individual con el mismo formato (imagen principal, título, texto, iconos y formulario de contacto) y solo se diferencian en la imagen principal, el título y el texto. El resto de elementos (iconos y formulario de contacto) serán los mismos para todos.

    Lo que tenemos que hacer es crear una plantilla en Elementor del tipo "Página", una sola vez, y la importamos en cada uno de los servicios. Luego modificamos solamente lo que nos interesa (imagen principal, el título y el texto) en cada servicio.

    De esta forma no tenemos que repetir el trabajo 4 veces y nos ahorramos tiempo que siempre se traduce en dinero.

    • Sección
      Una Sección en Elementor es un bloque, compuesto por columnas y widgets, que se añade a una página o entrada y que se repite varias veces en el sitio web. Al igual que las Páginas, las secciones también se pueden importar.

    Para crear una plantilla en Elementor, dirígete al apartado Plantillas >> Añadir nueva.

    Crear una plantilla con Elementor
    Crear una plantilla con Elementor

    Se abrirá una ventana donde tendrás que seleccionar el tipo de plantilla, Página o Sección, escribir el nombre de la plantilla y crearla. Luego, en el apartado Plantillas >> Plantillas guardadas, puedes ver el listado de plantillas que hayas creado.

    Listado de plantillas en Elementor
    Listado de plantillas en Elementor

    5. Insertar plantillas en Elementor

    Una vez hayas creado una plantilla, lo siguiente será insertarla en una página o entrada.

    Dirígete al apartado Páginas. Verás el listado de páginas existentes en WordPress pero algo diferentes que al principio.

    Editar una página o entrada con Elementor
    Editar una página o entrada con Elementor

    Cuando editas una página o entrada por primera vez con Elementor (como lo hicimos en el punto 3), Elementor añade un aviso y un enlace directo a cada página o entrada que será visible en el listado de páginas o entradas.

    Como puedes apreciar en la imagen anterior, se ha añadido el mensaje Elementor en el título de la página y el enlace Editar con Elementor en el menú de la página.

    De esta manera puedes editar la página directamente con Elementor sin tener que entrar primero en la página.

    Haz clic en el enlace Editar con Elementor. Una vez dentro, accede a la biblioteca de Elementor haciendo clic en el icono  ubicado en el recuadro Arrastra aquí el widget del área de contenido.

    En la ventana BIBLIOTECA, haz clic en la pestaña Mis plantillas. Verás un listado de las plantillas creadas.

    Insertar plantillas en una página o entrada con Elementor
    Insertar plantillas en una página o entrada con Elementor
    • Nombre
      Es el nombre que has dado a la plantilla. Intenta ser muy específico para que sea fácil ubicarla en el listado.
    • Tipo
      Es el tipo de plantilla que has creado: Página o Sección. Esta información es muy útil por si has creado una plantilla tipo "Página" y otra tipo "Sección" con el mismo nombre.
    • Acciones
      Puedes realizar 4 acciones con la plantilla: Previsualizarla, insertarla, borrarla o exportarla. Esta última acción, Exportar, es muy útil si quieres utilizar esta plantilla en otro sitio web.

    Haz clic en Insertar para insertar la plantilla en la página o entrada.

    En la lección del curso de Elementor, plantillas con Elementor, podrás encontrar información más detallada para crearlas e insertarlas en las páginas y entradas.

    6. Versión PRO de Elementor

    Como habrás podido apreciar en los puntos anteriores, Elementor es el editor de contenidos perfecto para diseñar sitios web con WordPress. Es 100% compatible con Astra y ofrece una interfaz agradable de trabajo.

    Aunque la versión Lite de Elementor (gratis) ofrece widgets suficientes para crear sitios web "sencillos", desde mi punto de vista, el plugin carece de algunas funciones que solo se podrían conseguir con la versión PRO.

    Esto no quiere decir que el plugin no funcione bien. Ten en cuenta que, al ser un plugin FREEMIUM, ofrece una versión Lite para que lo probemos y podamos adquirir la versión PRO si cumple nuestras expectativas; algo con lo que estoy de acuerdo.

    Te voy a contar una anécdota que me pasó con Elementor:

    En el sitio web de un cliente (muy exigente por cierto) tenía instalados 21 plugins que necesitaba para poder hacer todo lo que mi cliente me pedía y el sitio web estaba cargando muy lento.

    Aunque es una cantidad razonable de plugins, después de conocer Elementor, me di cuenta que podía prescindir de 9 de ellos ya que Elementor (versión PRO) era capaz de realizar el mismo trabajo de todos estos plugins y hasta mucho mejor.

    Simplemente le planteé a mi cliente la opción de hacer un rediseño de su sitio web con Elementor y, la mejora del diseño, funcionalidad y velocidad de carga fué brutal además de reducir el tiempo de trabajo.

    Los plugins que eliminamos al instalar Elementor PRO fueron:

    • Contact Form 7.
    • Contact Form 7 Extension For Mailchimp.
    • Popup Maker.
    • Slider Revolution.
    • Social Warfare.
    • Templatera.
    • Ultimate Addons for WPBakery Page Builder.
    • Who Stole the Text Justify Button.
    • WPBakery Page Builder.

    Elementor PRO fue capaz de hacer y mejorar todo el trabajo que hacían estos plugins incluyendo la opción de integrar Mailchimp en los formularios de contacto y suscripción.

    Además de esto, la versión PRO de Elementor ofrece más funciones para el desarrollo de sitios web profesionales:

    • +30 widgets adicionales.
    • Contenido dinámico en los widgets.
    • Posibilidad de añadir código CSS por página o en cada widget.
    • Más plantillas (bloques y páginas) profesionales en la biblioteca.
    • Un maquetador de temas para diseñar cabeceras, pie de páginas, archivos y apartados de WooCommerce personalizados.
    • Creador de ilimitados popups en el sitio web.
    • Creación de un shortcode único al crear plantillas.

    Y muchas funciones más que nos permitirán construir un sitio web realmente profesional ahorrándonos tiempo y dinero.

    Aunque para el desarrollo de este curso vamos a utilizar la versión Lite (gratuita), vale la pena invertir en la versión PRO ya que todo son ventajas: tienes la opción de realizar diseños más profesionales, mejora la velocidad de carga de tu sitio web al no tener que instalar tantos plugins, entre otras.

    Curso de WordPress

    Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.

    7. Widgets adicionales para Elementor

    Elementor PRO ofrece una completa variedad de widgets y funciones más que suficientes para diseñar sitios web profesionales por lo que no haría falta instalar más plugins en tu sitio web.

    Sin embargo, muchos usuarios no tienen la posibilidad económica de comprar la versión PRO del plugin, lo cual es una pena. Si eres uno de estos usuarios, no te desanimes.

    Aunque Elementor es el plugin oficial (el sitio web oficial es elementor.com), existen otras empresas que desarrollan plugins para Elementor. Estos plugins suelen ser FREEMIUM o PREMIUM y, muchos de los widgets que ofrecen en la versión Lite (gratis), no se encuentran en la versión Lite de Elementor y funcionan como complemento del plugin.

    Muchos de estos plugins se pueden encontrar en el respositorio de plugins de WordPress.

    Anuncio publicitario

    8. Conclusión

    Ha sido tan excitante crear esta lección que no sabría como concluirla. Sonará repetitivo decir otra vez que Elementor es un potente editor de contenidos con el que se puede desarrollar infinidad de sitios web con una apariencia profesional.

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

    ¿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 curso de WordPress y ayudas a otras personas que desean aprender.

    1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
    (11 votos, promedio: 4,55 de 5)

    Cargando…
    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.