fbpx

+562 289-77100

Lun-Vie de 9:00 a 19:00 Hrs.

Tutorial elementor page builder

Contenidos

Primero…¿Qué es Elementor?

Elementor es un maquetador visual que te permite crear páginas web autoadministrables de forma fácil e intuitiva, sin necesidad de tener conocimientos en programación web. Elementor fue creado e 2016  y desde entonces ha sido instalado más de 3,000,000 de veces en diferentes sitios Web de freelancers, bloggers, emprendedores, vendedores, empresas, startups y todo tipo de proyectos y personas.

Aparte de elementor existe otro maquetadores de sitios web para wordpres  como:

  • Divi
  • Backery (Visual Compouser)
  • Beaver Builder
  • Thrive Architect
  • Entre otros.

Elementor se instala desde la sección de plugin de nuestro panel de wordpress y existen 2 versiones:

  • Elementor gratis
  • Elementor versión PRO

Funcionamiento y beneficios

Como ya vimos, Elementor es un page builder, (maquetador), que nos da una interfaz completamente independiente al template que estés utilizando en WordPress y que te facilitará al ciento por uno tu proyecto. 

Algunos de las funciones y beneficios más destacados de Elementor son:

  • Permite crear páginas, entradas y custom post types con la interfaz y UI del plugin, la cual incluye diferentes widgets, opciones de diseño y de estructura.
  • Es un editor visual, es decir, editas en tiempo real en el front end y al mismo tiempo ves cómo va quedando la página.
  • Sin importar cual template estés utilizando, te permite crear cualquier tipo de estructura, layout que puedas imaginar. No hay límites.
  • Es compatible con el 99% de los templates de WordPress
  • No requiere que tengas conocimientos previos de programación ni desarrollo Web.
  • Los diseños que puedes crear con Elementor son realmente impactantes en cuestión visual.

tutorial de Elementor Page Builder

Para empezar, vamos revisar a la interfaz inicial que nos aparece nada más abrir el editor.

Por defecto, lo primero que aparece son todas las herramientas de diseño que Elementor Page Builder pone a nuestra disposición, las cuáles vamos a repasar una por una a continuación.

Antes de eso, únicamente aclararte que siempre podrás acceder a este panel de herramientas haciendo click en el icono de la parte superior derecha del panel de control de Elementor (te lo marco en la siguiente imagen con un cuadrado azul para que quede más claro).

Herramientas de diseño incluidas en Elementor

elementor-wordpress

Secciones

Para agregar secciones  solo has clic en boton «+» de color rojizo y elije la estructura quequieres que tenga, 1,2,3,4 o las columnas que desees y de ancho que desees. se puede hacerse seleccionando la estructura “limpia” para la sección (con una sola columna) marcando la opción “Stretch Section” o seleccionando “Ancho completo”  en la opción “Ancho de contenido” que se encuentra dentro de la sección “Disposición” que configura dicha sección.

Columnas

El generador de columnas es una de las herramientas más básicas y útiles a la hora de realizar cualquier diseño.

Nada más incluir un elemento de columna en nuestro diseño, aquí ya se ve una novedad importante respecto a maquetadores de diseño web: podemos incluir cualquier número de columnas que queramos en una misma fila con cualquier proporción de ancho para cada una de ellas.

No sólo eso, podemos adaptar el tamaño de las columnas únicamente posicionándonos entre dos de ellas y reduciéndolas o ampliándolas haciendo click y arrastrando el ratón de nuestra computadora.

Encabezado

Esta herramienta será la encargada de incluir en tus diseños los encabezados de página pertinentes, pudiendo modificar en ella tanto su etiqueta html correspondiente (h1, h2, h3, etc.) como las características de su diseño.

También podrás enlazar los títulos a cualquier página que te interese, indicar los márgenes y relleno (padding) que te plazca, establecer imágenes o colores de fondo, dar clases  CSS determinadas, poner bordes alrededor del título con la anchura o forma (radio del borde) que tú quieras para el mismo, establecer sus opciones responsive por si quieres esconderlos en escritorio, móviles o tablets…

Decir que la mayoría de estas opciones también las encuentras en cualquiera de los elementos que vamos a ver, con lo que una vez más los límites de lo que vayas a crear sólo los va a poner tu creatividad e imaginación

Encabezado

Con ella podrás incluir imágenes en los lugares que te plazca, pudiendo establecer también multitud de opciones como su tamaño, alineación, opacidad, animaciones al pasar el ratón, borde, leyenda, márgenes, fondos etc.

Editor de texto

Permite introducir textos simples en cualquier parte de tu diseño, pudiendo controlar todas sus opciones de edición y visualización desde un mini editor similar al de WordPress que aparece en la parte lateral.

Esto me parece otro punto a destacar, ya que los que estén acostumbrados al editor nativo de WordPress podrán seguir utilizándolo fácilmente dentro de la herramienta para crear sus textos, con lo que en este sentido les facilita la vida al no tener que aprender nada nuevo.

Además de todo esto, puedes elegir la posición del contenido a tu voluntad dentro de las columnas o secciones donde lo hayas creado, otorgando una flexibilidad total a la hora de maquetar de tus textos que te permite ponerlos prácticamente donde quieras a voluntad.

Vídeo

Te facilita la inclusión de vídeos responsive dentro del diseño de tu blog o tu web que se encuentre subido en Youtube o Vimeo.

Esta opción si que es bastante similar a Thrive Content Builder, ya que incluye la posiblidad de autoreproducir el vídeo, mostrar u ocultar el control de reproducción, los vídeos sugeridos o el título y acción del reproductor.

Sin embargo, Elementor incluye además la posibilidad de que puedas elegir la proporción de tu vídeo (16:9, 4:3 o 3:2), establecer una imagen de cubierta personalizada que a ti te interese mostrar antes de que el usuario pulse el botón “Play” para reproducir el vídeo, animaciones de entrada, establecer fondos o controlar en que dispositivos quieres que se cargue la visualización de dicho vídeo.

Esto me parece otro punto a destacar, ya que los que estén acostumbrados al editor nativo de WordPress podrán seguir utilizándolo fácilmente dentro de la herramienta para crear sus textos, con lo que en este sentido les facilita la vida al no tener que aprender nada nuevo.

Además de todo esto, puedes elegir la posición del contenido a tu voluntad dentro de las columnas o secciones donde lo hayas creado, otorgando una flexibilidad total a la hora de maquetar de tus textos que te permite ponerlos prácticamente donde quieras a voluntad.

Botón

Agrega un botón de forma fácil e intuitiva y enlazarlo con el contenido que tu quieras o bien configuralo para que sea un botón de descarga de algún tipo de documento. Además puedes darle e diseño que tu quieras y agregar colores e icono.

Separador

El elemento separador incluye líneas que pueden separar diferentes secciones o, por ejemplo, los títulos del contenido. 

Además configura su ancho, largo, color y tipo.

Espaciador

Genera espacios en blanco del tamaño que tú decidas para separar otros elementos del diseño.

Google Maps

Agrega un mapa geolocalizado de google fácil mente, solo arrastra el mapa al lugar que quieres, abre su configuración, ingresa tu dirección y ya esta. ¿Fácil no?

Icono

Agrega un icono y dale el color y tamaño que tu quieras. puedes colocar Font Awesome también.

Cuadro de imagen

Esta herramienta es una manera cómoda y sencilla de incluir una imagen que cuente directamente debajo con un título y una descripción de la misma.

Naturalmente, como ocurre con todo en Elementor, puedes controlar todos los parametros referentes a tamaños, colores, fondos, etiquetas de título, márgenes etc.tanto de la imagen en sí como del encabezado o el texto.

Caja de icono

Esta herramienta permite, colocar una imagen con un titulo y un texto. También te permite alinearlo como tu desees.

Si deseas que un experto en wordpress y elementor se haga cargo de tu proyecto web cotiza nuestros servicios en nuestra agencia de marketing digital para pymes