Elementor WordPress: guía-tutorial-vídeo demostrativo

Elementor Wordpress el maquetador visual definitivo

Elementor es un page builder, constructor o maquetador visual que, con su versión gratuita, te permitirá dar el aspecto y la estructura deseadas a tus páginas o entradas de WordPress.

También te permitirá configurar el aspecto de tu tienda y tus productos en Woocommerce.

Con este maravilloso plugin podrás crear la estructura que desees y distribuir los elementos de tus páginas a tu antojo.

Podrás añadir todo tipo de iconos, imágenes, carruseles, acordeones, títulos, separadores, barras de progreso, mapas Google… de una manera sencilla, visual y sin necesidad de poseer conocimientos de programación.

Además de su completa versión gratuita Elementor dispone de una versión Pro con multitud de funcionalidades extras como cabeceras animadas, cuestionarios de suscripción, tablas de precios o llamadas a la acción.

Aquí tienes toda la información sobre Elementor.

Voy a explicarte todas las características y funcionalidades de este plugin y al final del post tienes un vídeo para que puedas practicar con él.

Empezamos!!

¿Quieres ayuda para subir tu negocio a internet?

tienda online woocommerce

Qué es Elementor

Elementor es un plugin, una extensión de WordPress, que te permite diseñar a tu gusto páginas y entradas para darle el aspecto que deseas a tu sitio Web. Es lo que se conoce como un constructor de páginas.

Elementor está traducido a 32 idiomas, incluido el castellano.

Este constructor te permite ir definiendo cada una de las partes de tu sitio de una manera visual, arrastrando y soltando bloques o widgets y comprobando el resultado de tu diseño en tiempo real.

Es apto para todo tipo de usuarios ya que su funcionamiento es muy sencillo, permitiéndote crear cualquier tipo de página en muy poco tiempo.

Posee además plantillas ya diseñadas que puedes adaptar en unos cuantos clics a tus necesidades, facilitándote de esta manera el trabajo de creación de tu sitio web.

Algunas de las características más destacadas de Elementor son las siguientes:

  • Diseño en tiempo real. Irás viendo el resultado de tus diseños sin tener que esperar para ver los resultados.
  • Facilidad de uso. Es un plugin muy fácil de utilizar e intuitivo.
  • Código libre. Permite modificar su código fuente y adaptarlo a tus necesidades.
  • Compatible con la gran mayoría de los temas o plantillas. Podrás utilizarlo con cualquier tema como por ejemplo GeneratePress, sin necesidad de comprar plantillas de la empresa (como pasa con otros maquetadores).
  • Podrás crear tus propias plantillas, guardarlas y reutilizarlas. Te permite hacer plantillas de toda una página o de determinadas partes de la misma para que puedas utilizarlas cuando quieras.
  • Exportar / Importar plantillas. Podrás importar plantillas o exportarlas para utilizarlas en diferentes sitios.
  • Totalmente personalizable. A través de sus diferentes recursos y widgets podrás crear el diseño que se tengas en mente, dándole un aspecto profesional a tu sitio.
  • Versión gratis muy potente. En la mayoría de los casos la versión gratuita basta para obtener los resultados deseados.

Versiones de Elementor

Elementor es un maquetador visual Freemium, es decir, tiene una versión gratuita y una versión pro (de pago).

Versión gratuita de Elementor

Podrás encontrarla y descargarla en el repositorio de plugins de WordPress.

La versión gratuita es muy completa y, si únicamente quieres dar un aspecto excepcional a tu sitio web, con ella tendrás herramientas más que suficientes.

widgets elementor wordpress

Los recursos o widgets que puedes encontrar en la versión gratuita son los siguientes:

  • Cabecera. Añade titulares llamativos.
  • Imagen. Controla el tamaño, la opacidad y todos los ajustes de las imágenes que subas a tu web.
  • Editor de texto. Dispone de un editor de texto WYSIWYG (visual) mucho más completo que el editor de WordPress.
  • Vídeo. Puedes añadir vídeos desde una url, tu servidor, YouTube o Vimeo a tu página.
  • Botón. Añade botones y configura su apariencia y funcionalidades.
  • Caja de imagen. Una caja que incluye imagen, título y texto.
  • Referencias. Puedes añadir testimonios de clientes que han adquirido tus productos o servicios.
  • Icono. Incluye más de 600 iconos.
  • Caja de iconos. Funciona igual que la caja de imagen pero con iconos.
  • Iconos Sociales . Para enlazar tus páginas con tus redes sociales (Facebook, Twitter, YouTube, LinkedIn…)..
  • Galería de imágenes . Muestra las imágenes en una cuadrícula alineada. Tiene diversas funciones para su configuración.
  • Carrusel de imágenes. Podrás subir presentar tus imágenes en un carrusel giratorio o deslizante.
  • Icono de la Lista. Puedes crear listas de viñetas con cualquier icono elegido.
  • Contador. Muestra estadísticas y números de una manera escalada (número de visitas, descargas, tiempo de visualización…).
  • Barra de progreso. Incluye una barra de progreso en escala.
  • Pestañas. Puedes crear pestañas verticales u horizontales que muestran diferentes tipos de contenido.
  • Acordeón. Incluye una pantalla plegable de contenido. Muy útil para índices de libros, temarios o contenidos de un curso.
  • Cambiar. Es como el acordeón para páginas de preguntas frecuentes.
  • Puntuación de estrellas. Añade a tus post o productos una puntuación de estrellas con diferentes estilos.
  • Alerta. Podrás insertar un cuadro de alerta con diferentes colores para llamar la atención de tus visitantes.
  • HTML. Te permite insertar trozos de código en tu página.
  • Shortcode. Inserta fácilmente códigos cortos desde cualquier plugin en la página.
  • Anclas de menú. Enlaza cualquier elemento a tu ancla.
  • Leer más. Establece el límite de para el extracto en las páginas de archivo.
  • Barra lateral. Añade cualquier barra lateral a la página.
  • Google Maps. Incrusta mapas de Google en tu página.
  • SoundCloud. Añade audios en tu sitio de SoundCloud.
  • Divisor. Podrás insertar líneas que dividan las diferentes partes de tu página.
  • Espaciador. Sirve para dividir y dar un determinado espacio a los elementos de tu página.
  • Columnas. Crea columnas internas dentro de la columna.

Versión Pro de Elementor

La diferencia entre la versión Pro y la gratuita consiste en los widgets y plantillas que ofrece.

La versión Pro es de pago. Existen 3 planes de precios diferentes en función del número de licencias que quieras contratar. Todos los planes tienen una duración de 1 año.

planes de precios elementor wordpress
planes de precios elementor wordpress

La versión Pro, además de todos los widgets de la versión gratuita, incluye:

Popup Builder (Constructor de Popups)

Te permite insertar en cualquier parte de tu sitio los famosos anuncios o llamadas a la acción popup y definir su comportamiento.

Theme Builder (Constructor de tema)

Podrás editar cada una de las partes de la plantilla que utilices.

WooCommerce Builder (Constructor de WooCommerce)

Para editar WooCommerce.

Global Widget

Para guardar tus configuraciones de widgets y reutilizarlas cuando quieras.

Motion Effects (Efectos animados)

Te permite añadir a tu sitio efectos de ratón y de scroll.

Widget de Formulario

Creo que es la mejor excusa para comprar el plugin. Te permitirá crear formularios de suscripción a tu sitio de una manera muy intuitiva. Es además muy personalizable con lo que podrás darle el aspecto que desees.

Action Links (Links de acción)

Para conectar con tu audiencia con diferentes apps como WhatsApp, Waze o Google Calendar.

Countdown (Cuenta atrás)

Con este widget podrás añadir una cuenta atrás para alguna oferta o promoción de tiempo limitado.

Custom Fonts (Fuentes personalizadas)

Añade tus propias fuentes.

Search Results Page (Página de resultados de búsqueda)

Podrás personalizar esta página para que tus visitantes tengan una mejor experiencia.

Posts (Artículos)

Con este widget podrás colocar las últimas entradas de tu blog en página de inicio o en cualquier otra parte página de tu web.

Card Skins

Te permite añadir este estilo al widget de posts. Es un estilo muy visual con diversos ajustes para personalizar el estilo de tus Card Skins como:

  • Ratio y tamaño de la imagen.
  • Radio del borde
  • Color y tipografía de cada elemento.
  • Mostrar o ocultar cada elemento
  • Alineación.

Portfolio

Te permite mostrar un portafolio con tus proyectos o trabajos realizados pudiéndolos filtrar por categorías, tags, formatos…

Price Table (Tablas de precios)

Podrás mostrar tablas de precios de tus diferentes productos o servicios y destacar los planes que más te interesen.

Price List (Listas de precios)

Es una alternativa a la tabla de precios

Flip Box

Caja de contenido con dos caras que al pasar el ratón realiza alguna animación. En las cajas puedes usar texto, botones, imágenes, iconos… y hay varias animaciones a elegir.

Woo widgets

Multitud de widgets para WooCommerce: para definir página de productos, página de tienda o página de carrito, entre otras muchas.

Contact Forms (Formularios de contacto)

Para crear formularios y ponerlos a disposición de tus visitantes para que se comuniquen contigo.

Facebook widgets

Diferentes widgets para integrar Facebook con tu sitio.

Blockquote

Para insertar las típicas cajas con algún texto destacado para compartir en Twitter.

blocquote elementor

Menú de navegación

Con este widget podrás sustituir completamente el menú de tu plantilla.

Integraciones

Podrás conectar tu sitio con diversos servicios externos como mailchimp, Activecampaign, Facebook SDK y otros muchos.

Etcétera, etcétera, etcétera.

Las opciones son abrumadoras y además van añadiendo nuevos widgets continuamente, por lo que lo mejor es que mires todos y cada uno de ellos en su sitio web.

Instalación de Elementor

Una vez que estés en tu escritorio de WordPress tendrás que instalarlo como cualquier plugin: Plugins – añadir nuevo – introducimos su nombre en el buscador de la derecha – pulsamos en instalar y pulsamos en activar.

instalar elementor

Para usar Elementor sólo tienes que crear o editar una página o entrada y hacer clic en el botón Editar con Elementor.

editar pagina con elementor

Ya podrías darle forma a esa página.

Cómo utilizar elementor

En primer lugar, puedes utilizar plantillas preconfiguradas que el programa trae por defecto pulsando en añadir plantillas.

diseño de pagina con elementor

Podrás previsualizarlas y utilizarlas cambiando únicamente textos e imágenes.

plantillas elementor

Tienes la opción de mover cualquier sección, duplicarla, crear una nueva, guardarla en tu biblioteca o eliminarla.

También podrás mover, duplicar, crear o eliminar cualquier elemento que esté dentro de cada sección y los widgets que hay dentro de los elementos.

El funcionamiento es muy intuitivo ya que sólo tienes que arrastrar y soltar los widgets que te encuentras a la parte izquierda de forma rápida y sencilla en los diferentes espacios de las distintas secciones.

Para insertar una sección pulsa el botón de agregar nueva sección.

agregar sección

Cuando pulses te dará la opción de definir la estructura que quieres crear.

secciones elementor

Una vez seleccionada la estructura arrastra un widget de la izquierda (en este caso un encabezado).

agregar widgets elementor

En la parte izquierda podrás configurar ese elemento con todas las posibilidades que te da el programa.

opciones widgets elementor

Elementor tiene dos menús:

opciones menu elementor

El botón de la izquierda (icono de tres líneas) muestra un menú general en el que tendrás opciones a paletas de colores, cambiar las tipografía definidas por defecto en la plantilla, ajustes globales de página, ajustes del escritorio y salir al escritorio.

En el botón de la derecha encontrarás diferentes opciones para introducir widgets en los diferentes espacios de las secciones de la página o entrada.

Trabajar con secciones y Widgets

En primer lugar, inserta una sección y elige su estructura.  La Sección es la parte principal encargada del diseño en Elementor en la que se irán insertando el resto de widgets.

Una vez insertada tienes tres apartados a tu izquierda para configurar la sección: disposición, estilo y avanzado.

Una vez insertada tienes tres apartados a tu izquierda para configurar la sección: disposición, estilo y avanzado.

Disposición

Podrás:

  • Establecer el ancho del contenido (caja o ancho completo).
  • Establecer espacios entre columnas
  • Delimitar el alto de las columnas con un desplazador.
  • Posición del contenido (alto medio o bajo).
  • Html. Podrás escoger que etiquetas quieres para establecer una estructura de la web.

Estilo

Fondo

Podrás elegir el color de fondo, insertar una imagen …

Capa de Fondo

Podrás definir un determinado color y opacidad para la imagen.

capa de fondo elementor

Borde

Elige tipo de borde, ancho, sombra de la caja…

Forma de divisor

Esta opción da un efecto visual (efecto olas, pirámides…)

divisor elementor

Tipografía

Podrás cambiar la tipografía independiente de las que tengas marcadas por defecto en tu plantilla.

Avanzado

Márgenes y rellenos. Ajusta la sección a tu antojo usando los padding y ajustando los px como quieras. Puedes reajustar en automático todas a la vez o según quieras más a la derecha, izquierda, etc.

Z-index. Puedes establecer elementos superpuestos. Es útil para destacar una caja de precios, por ejemplo.

Animaciones. Puedes establecer todo tipo de efectos en movimiento para cada sección.

Id CSS y Clases CSS. Para modificar a tu gusto la sección con código css.

Responsive. Podrás configurar algunos elementos para mostrarlos en el móvil como cambiar el orden, tamaños de las secciones o directamente evitando que se muestren.

Custom CSS. te permite ver las modificaciones que hagas en CSS sin modificar nada.

Aquí acaba el tema de configuración de la sección. Una vez configurada tendrás que añadir widgets a la misma y configurar cada uno de ellos hasta que obtengas el diseño que deseas.

Para configurar cada widget tendrás generalmente los elementos que hemos visto (disposición, estilo y avanzado), aunque algunos widgets no tienen los tres y otros tienen diversos elementos en función de la naturaleza del mismo.

Botones inferiores

En el margen inferior tienes cuatro botones y actualizar.

botones elementor

La rueda sirve para configurar la página, tanto en aspecto como para posteriormente guardarla o publicarla.

La pantalla te mostrará la página en diversos tamaños de dispositivos.

La flecha sirve para deshacer algún cambio.

El ojo para previsualizar los cambios y actualizar para guardarlos.

Si pulsas en actualizar se guardarán todos los cambios que hayas realizado en tu página. A la derecha, si pulsas en la flecha, podrás guardar la página o una parte de ella como plantilla o como borrador.

Aprenderás a utilizar el programa rápidamente una vez te pongas a trastear con él.

En el vídeo te enseño a hacerlo.

Vídeo

Deja un comentario

error: