En la lección, instalación de 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.
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.
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.
Haciendo clic en el enlace Editar con Elementor accederemos directamente al panel de edición de la página o entrada.
Anuncio publicitario
Elementor se compone de 2 apartados principales:
Veamos los apartados más importantes que componen el panel de Elementor:
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:
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.
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.
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.
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.
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.
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.
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.
Para añadir nuevos widgets o plantillas con Elementor, en el área de contenido, veremos un recuadro con el texto Arrastra aquí el widget.
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:
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.
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.
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.
Una de las características más interesantes que incluye Elementor en su panel de edición es el modo oscuro (dark mode).
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:
Anuncio publicitario
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.
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.
Copyright © 2024 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
