¿Quieres aprender cómo usar Elementor en WordPress? Pues has llegado al lugar indicado. Quédate aquí porque lo que vas a ver hoy aquí va a cambiar tu percepción de lo difícil o fácil que es crear una web para tu negocio. Nunca más volverás a ver el diseño, desarrollo o edición web de la misma manera.
¡Vamos al lío!
Índice de contenidos
Cómo usar Elementor: conoce su interfaz
Lo que hoy voy a hacer va a ser explicarte el funcionamiento general de Elementor así como todo lo relativo a su interfaz para que siempre tengas presente en todo momento unas nociones generales de dónde puedes encontrar esa opción o herramienta que estás buscando durante el proceso de creación de tu web.
Vas a ver que, con unos pequeños conceptos generales muy claros, todo es mucho más fácil de lo que parece a simple vista al encontrarte por primera vez con todas esas herramientas, botones, opciones, etc.
Podríamos decir que si quieres saber cómo usar Elementor como un profesional, lo primero que tienes que tener muy claro es la distribución de su interfaz.
La interfaz de Elementor se divide en 3 zonas muy bien diferenciadas:
- Barra principal (Ajustes y herramientas)
- Zona de herramientas de diseño web.
- Barra de trabajo y guardado.
A continuación, voy a detallarte qué podrás encontrar en cada zona de forma más concreta.
Barra principal (ajustes y herramientas)
La barra principal a la que hago referencia es la que encontrarás en la siguiente imagen y que cuenta con dos iconos.
El primer icono que se encuentra a la izquierda te muestra todas las opciones globales de tu diseño web.
Estas opciones globales son algunos ajustes del sitio en los que podrás establecer estilos generales que aplicar a tu sitio web tales como colores por defecto, fuentes predeterminadas de títulos, textos, estilos del tema, etc., de tal modo que no tengas que aplicar estos estilos uno por uno en cada título, texto o elemento que incluyas en tu diseño.
Del mismo modo, también puedes encontrar un acceso directo al maquetador de temas (en el caso de que cuentes con la versión Pro de la herramienta) y otras preferencias de usuario que pueden modificar la propia interfaz de Elementor (como por ejemplo, pasar que dicha interfaz tenga un tema oscuro en vez de uno claro).
También aquí encontrarás, en el caso de que tengas instalado el plugin Yoast SEO, las opciones SEO on page de la página que estás creando.
Incluso podrás utilizar un buscador desarrollado por el propio Elementor para que directamente consultes ahí tus dudas acerca de cualquier proceso o herramienta que el maquetador web incluye.
El segundo icono que se encuentra en la parte de la derecha es el que te va a mostrar en pantalla todas las herramientas (o widgets) de diseño web que tiene Elementor y que puedes utilizar para crear tu proyecto.
Precisamente, esto es lo que vamos a ver en la siguiente zona de trabajo: la zona de herramientas de diseño web.
Cómo utilizar Elementor y sus herramientas de diseño web
Esta es, sin duda, la zona «fuerte» de la herramienta y la que más vas a utilizar a la hora de crear un sitio web.
La zona de herramientas es esta que aparece en la siguiente imagen:
No es el objetivo de este post que conozcas que hace cada una de las herramientas. Aunque esta cuestión sí puedes resolverla en el artículo de la review completa sobre Elementor Page Builder.
El objetivo realmente es que entiendas de modo general cómo usar Elementor y cómo está todo dispuesto en cualquiera de las herramientas que componen Elementor para que consigas encontrar de forma fácil lo que andas buscando.
Es decir, todas estas herramientas siguen un mismo patrón a la hora de utilizarlas y configurarlas. Y ese patrón, que es similar en todas ellas, es el que quiero que comprendas aquí.
Al utilizar cualquiera de estas herramientas de diseño web que incluye Elementor (arrastrando y soltando en tu diseño web que se encuentra en la parte de la derecha de la pantalla) te vas a topar siempre con 3 pestañas:
- Pestaña de contenido
- Pestaña de estilo
- Pestaña Avanzado
¿Qué puedes esperar encontrar en cada una de estas pestañas independientemente de la herramienta que estés utilizando? Vamos a verlo a continuación.
Pestaña Contenido
La pestaña «Contenido» controla todo lo relativo al contenido puro y duro. O lo que es lo mismo, qué estás poniendo en la web en cuanto al contenido.
En otras palabras, con la pestaña «Contenido» vas a establecer todo lo relativo al texto que quiero poner, a qué imagen quieres publicar…pero no vas a controlar nada referente a su apariencia o estética.
Pestaña Estilo
Aquí sí.
Aquí en esta pestaña vas a poder controlar todo lo relativo a la estética o aparencia de lo que has publicado en tu sitio web (textos, imágenes, encabezados…lo que sea).
Con estética y apariencia, quiero decir que podrás modificar colores, colores o imagenes de fondo, tipografías, tamaños de letra, estilos de letra, sombreados, filtros CSS predeterminados, modos de fusión, etc.
Con todo lo que encontrarás en esta pestaña vas a poder hacer ya muchísimas cosas a nivel estético. Pero si quieres dar un pequeño salto más o tener un control mayor sobre todo…para eso tienes la siguiente pestaña.
Pestaña Avanzado
Esta pestaña se puede decir que es la que vas a utilizar sí o sí si eres un diseñador o desarrollador web profesional en toda regla para trabajar 100% en condiciones como tal.
Se puede decir que aquí encontrarás opciones que cualquier diseñador web wordpress profesional utiliza en su día a día tales como establecimiento de márgenes, rellenos, establecimientos de clases o identificadores CSS, implementación de estilos CSS personalizados mediante código, animaciones, opciones responsive de adaptabilidad, etc.
La pestaña Avanzado, si eres un usuario con conocimientos medios/bajos, es bastante probable que la utilices poco. Pero si eres de los que le gusta mejorar y aprender más sobre cómo usar Elementor de forma más avanzada, échale un vistazo con detenimiento porque merece la pena todo lo que en ella vas a poder encontrar.
Ahora que ya sabes qué puedes encontrar en cada una de estas pestañas correspondientes a las herramientas de diseño web de Elementor, es la hora de darse una vuelta por la última zona de la interfaz.
Barra de trabajo y guardado
La barra de trabajo y guardado la encontrarás justo en la parte inferior de la interfaz de Elementor.
Esta barra de trabajo cuenta concretamente con 5 herramientas o botones:
Ajustes de página: aquí podrás establecer qué nombre tendrá esta página dentro de WordPress, su estado de publicación o la plantilla predeterminada para esa página (si es que estuvieses utilizando alguna o tu tema tuviese alguna disponible).
Navigator: al pulsar en esta opción, se te abrirá un pequeño navegador con el que podrás ver todo lo que hay en esa página para que puedas controlar el orden de secciones y columnas de la misma, así como pulsar en cualquiera de los elementos del diseño para ir a sus opciones particulares (opciones incluidas, ya sabes, en las 3 pestañas que hemos visto anteriormente particulares de esa herramienta o widget).
Historial: gracias a él, podrás volver a un punto anterior por si te has equivocado o has hecho algo que no debías. Incluso, podrás volver al punto de inicio de cuando abriste la página o a una revisión del día anterior (o del último día que hubieses guardado) si fuese necesario.
Modo adaptable: te muestra el diseño de la web en los diferentes formatos para que puedas trabajar y adaptar tu web en sus versiones de escritorio, tablet y/o móvil.
Previsualizar cambios: te permite ver los cambios que has realizado en la página en una vista previa sin guardarlos y sin que se publiquen en la parte pública del sitio web.
Botón guardar / actualizar: al pulsarlo, cualquier cambio que hayas realizado en el diseño de la web se guardará y se hará público en la misma.
Este botón tiene en la parte de la derecha una pequeña flechita que, si la pulsas, te permite grabar esa página como un borrador y/o una plantilla de Elementor (en la versión Pro) para que puedas reutilizar cualquier diseño web que hayas creado en otras páginas o sitios.
¡Ya sabes cómo usar Elementor en WordPress!
Ahora conoces a fondo la herramienta, conoces donde puedes encontrar cada opción, para qué sirve cada apartado.
Por tanto, ha llegado la hora de empezar cómo diseñar con Elementor tu web conociendo las herramientas básicas de la herramienta.
Pero eso será en el siguiente artículo de este blog.
¿Dudas, comentarios? ¡Te espero abajo!
