Lección 03

Panel de edición de Elementor

En la lección, introducción a Elementor, vimos como en el apartado Elementor >> Ajustes se pueden seleccionar todos los tipos de contenido en los cuales podemos trabajar con Elementor.

Elementor selecciona las páginas y entradas que son los tipos de contenido que vienen por defecto cuando instalamos WordPress.

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

    1. Acceder al panel de edición de Elementor

    Comencemos a trabajar con las páginas. Para acceder al panel de edición de Elementor de una página tenemos que dirigirnos al apartado Páginas y accedemos a cualquier página que queramos editar.

    En el editor de la página, veremos el botón Editar con Elementor en la parte superior de la página. Hacemos clic en este botón para acceder al editor de Elementor. Ten en cuenta que cada página o entrada tendrá su propio panel de edición.

    Editando una página con Elementor
    Editando una página con Elementor

    Otra forma de acceder al panel de edición de Elementor es directamente desde el apartado Páginas (o Entradas). Para esto es necesario haber accedido, al menos una vez, a la página o entrada.

    Al acceder a una página (o entrada) con Elementor, se creará en el título de la página o entrada una etiqueta (Elementor) y un enlace adicional (Editar con Elementor) desde el cual podemos acceder al panel de edición de Elementor sin necesidad de acceder primero a la página o entrada.

    Acceder a una página con Elementor
    Acceder a una página con Elementor

    Haciendo clic en el enlace Editar con Elementor accederemos directamente al panel de edición de la página o entrada.

    Anuncio publicitario

    2. Opciones del panel de edición de Elementor

    Elementor se compone de 2 apartados principales:

    1. Panel de Elementor: se encuentra ubicado al lado izquierdo de la pantalla. Contiene los widgets y las opciones de configuración de toda la página o entrada.
    2. Área de contenido: se encuentra ubicado al lado derecho de la pantalla y es donde se ubicará el contenido de la página o entrada mediante secciones, columnas y widgets.

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

    2.1 Elementos (widgets)

    En esta pestaña se encuentran todos los elementos que podemos utilizar en el área de contenido. Estos elementos también se conocen como widgets y así les llamaremos a partir de ahora durante todo el desarrollo del curso.

    Una de las características que ha hecho a Elementor tan popular, es que los widgets son de arrastrar y soltar (lo que se conoce como Drag & Drop) convirtiéndolo en un plugin bastante versátil y fácil de utilizar.

    Es muy importante que te familiarices con el término WIDGETS ya que es la forma como se conocen en Internet en foros, grupos de Facebook y en cualquier lugar que se hable de Elementor.

    Haciendo clic en el icono superior derecho  podemos acceder siempre a esta pestaña para utilizar los widgets.

    Los widgets que actualmente componen Elementor son:

    Curso de WordPress

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

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

    Widgets en Elementor
    Widgets en Elementor

    2.2 Global

    En esta pestaña, disponible solo con Elementor PRO, podemos crear widgets personalizados, guardarlos y luego utilizarlos en otra página o entrada.

    Esta característica es muy útil cuando queremos que un widget se repita en todo el sitio web. Por ejemplo: un botón personalizado, un formulario de contacto o cualquier widget que queramos utilizar.

    En la lección, widget global en Elementor, veremos con más detalle cómo se crean estos widgets.

    2.3 Menú principal

    Podemos acceder al menú principal desde el icono superior izquierdo . Desde este apartado podemos configurar las opciones generales de Elementor en cada página o entrada.
    Menú principal de Elementor
    Menú principal de Elementor

    2.3.1 Menú principal

    En el apartado Elementor >> Ajustes, pestaña General, Elementor nos da la opción de mantener los colores y fuentes por defecto que podemos encontrar en este apartado. Podríamos usar estas opciones del estilo global pero son muy limitadas por lo que ya no es recomendable su uso.

    Actualmente Elementor ha incorporado el kit por defecto al que podemos acceder desde la opción Estilo del tema para configurar los estilos generales que vamos a utilizar en nuestro sitio web.

    En la lección, kit por defecto de Elementor, veremos con más detalles cómo hacerlo.

    Otra opción interesante que ofrece Elementor es el Buscador. Con este buscador podemos buscar cualquier cosa dentro de nuestro sitio web como páginas, entradas, plantillas o cualquier tipo de contenido que se pueda editar con Elementor.

    Buscador en Elementor
    Buscador en Elementor

    2.4 Herramientas adicionales

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

    Herramientas adicionales de Elementor
    Herramientas adicionales de Elementor

    Algo muy interesante que podemos encontrar en este apartado (Ajustes) son las 3 plantillas de la Estructura de página. En la lección, estructura de página en Elementor, veremos con más detalle esta grandiosa herramienta.

    Navigator en Elementor
    Navigator en Elementor

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

    Al activar Navigator, Elementor nos muestra un "arbol" de todos los widgets y sus contenedores en orden jerárquico.

    Esta herramienta es muy útil cuando tenemos una página con muchos widgets. Es mucho más sencillo navegar con el Navigator que hacer scroll por toda la página.

    Modo adaptable en Elementor
    Modo adaptable en Elementor

    Esta característica de Elementor es realmente impresionante ya que permite realizar 3 diseños diferentes del mismo sitio web.

    Un ejemplo de esto podría ser una imagen. En versión PC (Escritorio) el tamaño de la imagen podría ser 800px. Al cambiar a la versión Tableta se puede asignar un valor de 400px sin alterar el valor asignado a la versión PC.

    Lo mismo sucede con la versión Móvil donde se podría asignar un valor de 150px a la misma imagen sin alterar los valores de las otras versiones.

    En la lección, modo adaptable en Elementor, veremos con más detalles cómo utilizar esta herramienta.

    • Guardar borrador.
      Solo es útil cuando la página o entrada aún no se encuentra publicada. Si no hemos finalizado el diseño, podemos guardar un borrador y luego continuar actualizando el contenido.
    • Guardar como plantilla.
      Si hemos finalizado el contenido de la página o entrada, podemos guardarlo como una plantilla y luego cargar todo el contenido en otra página o entrada.
    • Publicar/Actualizar.
      Con esta opción, podemos publicar los cambios (si es una página o entrada nueva) o actualizar los cambios (si ya existe).
    Publicar una página o entrada en Elementor
    Publicar una página o entrada en Elementor
    Actualizar una página o entrada en Elementor
    Actualizar una página o entrada en Elementor

    2.5 Área de contenido

    Para añadir nuevos widgets o plantillas con Elementor, en el área de contenido, veremos un recuadro con el texto Arrastra aquí el widget.

    Añadir widget en Elementor
    Añadir widget en Elementor

    Simplemente seleccionamos el widget que queramos y lo arrastramos al recuadro. Se añadirá el nuevo widget al área de contenido y, en el panel principal, podremos configurar todas las opciones del widget.

    De esta forma se añadirá el widget en 1 sección con 1 columna y se irán ubicando verticalmente en el área de contenido. Pero, ¿que pasa si queremos añadir widgets horizontalmente?

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

    Veremos lo siguiente:

    Estructuras en Elementor
    Estructuras en Elementor

    En la imagen anterior podemos apreciar las estructuras de una sección que Elementor ofrece por defecto.

    Al seleccionar una estructura, Elementor añadirá una nueva sección divida en varias columnas (según la configuración que hayamos elegido) y, en cada columna, podremos añadir widgets en formato horizontal.

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

    2.6 Biblioteca de Elementor

    Una de las grandes bondades que posee Elementor, es su biblioteca de recursos. Esto es algo por lo que ha ganado tanta popularidad y es el editor de contenidos favorito de muchos desarrolladores (el mío sin duda ).

    Para acceder a este apartado, hacemos clic en el icono  ubicado en el recuadro Arrastra aquí el widget del área de contenido.

    Biblioteca de Elementor
    Biblioteca de Elementor

    La biblioteca está dividida en 3 apartados:

    En la lección, plantillas en Elementor, veremos con más detalle cómo crearlas e insertarlas en nuestras páginas y entradas.

    3. Interfaz de usuario del tema (Dark Mode)

    Una de las características más interesantes que incluye Elementor en su panel de edición es el modo oscuro (dark mode).

    Modo oscuro en Elementor
    Modo oscuro en Elementor

    Con esta característica, podemos tener el panel de edición con fondo oscuro lo que puede resultar más cómodo para trabajar.

    Para activarlo:

    • Nos dirigimos al menú principal haciendo clic en el icono superior izquierdo .
    • En el apartado MAS, hacemos clic en la opción Preferencias.
    • En Interfaz de usuario del tema seleccionamos Oscuro.
    Activando el modo oscuro en Elementor
    Activando el modo oscuro en Elementor

    Anuncio publicitario

    4. Conclusión

    En esta lección hemos visto a "grosso modo" todas y cada una de las opciones que ofrece el panel de edición de Elementor en una página (o entrada). A medida que avancemos en este curso, iremos viendo como se utilizan cada una de estas opciones.

    Adicionalmente existen otras opciones en el panel de edición de Elementor que se aplican a las secciones, columnas y widgets individualmente las cuales iremos conociendo en las siguientes lecciones.

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

    (6 votos, promedio: 5 de 5)

    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.