Lección 01

Introducción a Elementor

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

Con este potente editor de contenidos seremos capaces de crear sitios web realmente impresionantes. Es algo que quizá nunca hayas visto. Pues a partir de ahora lo vas a hacer.

En esta entrada, Elementor Page Builder, puedes encontrar una breve reseña de la historia de Elementor y de lo que ha llegado a ser hoy en día en el "mundo WordPress".

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

    1. Vamos a instalar Elementor

    Una aclaración inicial...

    Para el desarrollo de las primeras lecciones, voy a trabajar con el tema Astra solo como ejemplo. Al ser un tema bastante limpio y bien estructurado, podrás apreciar mejor las imágenes del desarrollo con Elementor.

    Puedes usar el tema que quieras aunque, la finalidad de este curso, es aprender a trabajar única y exclusivamente con Elementor sin depender de ningún tema.

    Por si aún no lo sabes, Elementor se distribuye en 2 presentaciones:

    • 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 04 comenzaremos a trabajar en este curso con la versión PRO.
    Curso de WordPress

    Si aún no tienes Elementor PRO este es el momento para que te hagas con este fantástico editor de contenidos.

    Va a ser parte importante de este curso ya que desarrollaremos muchas lecciones con este plugin para que aprendas a utilizarlo en su totalidad y sacarle el máximo provecho para el desarrollo de sitios web 100% profesionales.

    Para instalar Elementor es necesario haber instalado WordPress. Si necesitas afinar tus conocimientos sobre WordPress para compatibilizarlos con Elementor, aquí tienes el curso de 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.

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

    Anuncio publicitario

    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 fuentes y colores por defecto. Elementor viene con unas fuentes y colores por defecto cuando lo instalamos. Si marcamos estas casillas, Elementor heredará las fuentes y colores del tema que estemos utilizando.

    En futuras lecciones vamos a instalar el tema oficial de Elementor, Hello Theme, que se integra perfectamente con Elementor PRO y veremos como sacar provecho a las fuentes y colores con Elementor.

    En la pestaña Avanzado, cambiamos la opción Cargar compatibilidad con Font Awesome 4 por  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.

    Cargar compatibilidad con Font Awesome en Elementor
    Cargar compatibilidad con Font Awesome en Elementor

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

    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 instalemos 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 te presente 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.
    Herramientas en Elementor: General
    Herramientas en Elementor: General

    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.

    Herramientas en Elementor: Remplazar URL
    Herramientas en Elementor: Remplazar URL

    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 esta versión.

    Herramientas en Elementor: Control de versiones
    Herramientas en Elementor: Control de versiones

    IV. Modo de mantenimiento

    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. A partir del capítulo 05, veremos que son las plantillas y cómo crearlas con Elementor.

    Herramientas en Elementor: Modo de mantenimiento
    Herramientas en Elementor: Modo de mantenimiento

    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 tengamos configurados 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.

    En la lección del curso de WordPress, perfiles en WordPress, puedes encontrar información actualizada sobre la creación y gestión de usuarios y perfiles en un sitio web.

    Gestor de perfiles en Elementor
    Gestor de perfiles en Elementor

    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.

    Anuncio publicitario

    5. Conclusión

    Ahora que ya has instalado Elementor y conoces a "grosso modo" lo que es capaz de hacer, comenzamos este fantástico curso con buen pié y con muchos ánimos.

    Nuevamente te recuerdo que vas a necesitar la versión PRO de Elementor. La puedes conseguir haciendo clic en este enlace: Elementor PRO, para aprovechar todo el contenido del curso.

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

    1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
    (1 votos, promedio: 5,00 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 Elementor desde cero.

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

    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.