Curso Básico de Elementor – Clase 3: Elementos Básicos

En la tercera clase del curso básico de Elementor, vamos a ver los distintos widgets que podemos incorporar cuando diseñemos una página en nuestra web.

Como vamos a ver a continuación, debido a su facilidad de arrastrar y soltar los elementos, este plugin es una gran opción para aquellas personas que estén empezando hacer su propia página y no estén familiarizados con el código.

Resultado de imagen de gif elementor

Elementos Básicos

elementos básicos elementor page builder

Como puedes ver, en este primer bloque, tenemos varias opciones básicas a incorporar en nuestra landing:

  • Columnas: podemos insertar tantas columnas como queramos dentro de una sección e incluso otra columna.
  • Encabezado: para poner títulos y resaltar contenidos.
  • Imagen: te permite añadir la imagen que quieras en cualquier lugar.
  • Editor de Texto: aquí podrás exponer textos explicando el tema a tratar en la página en cuestión. Lo bueno es que es el mismo editor que tiene WordPress para editar páginas y entradas, por lo que te será muy fácil usarlo.
  • Vídeo: al igual que las fotos, puedes insertar vídeos en columnas y secciones.
  • Botón: puedes diseñar el estilo de tu botón y hacer que enlace a cualquier url que le indiques.
  • Separador: esto es genial para separar secciones o bloques a través de una línea que tu mismo puedes personalizar en tamaño y color.
  • Espaciador: perfecto para establecer espacios entre los distintos elementos para que transpiren y den limpieza a tu diseño.
  • Google Maps: puedes incorporar la localización de tu negocio gracias a este widget.
  • Icono: añade donde quieras un icono de Font Awesome, incluso pudiendo insertar una url.

Elementos Generales

elementos generales elementor page builder

Aquí voy a explicarte los los widgets generales que incorpora Elementor en su segundo bloque:

  • Cuadro de imagen: con esta opción podrás añadir un bloque con una imagen, un encabezado y un párrafo.
  • Caja de icono: aquí podrás incluir un bloque con un icono, más un título y un párrafo.
  • Galería de imágenes: como su nombre lo indica, con este widget podrás añadir galerías de imágenes en tu landing. Puede ser perfecto para un portfolio, por ejemplo.
  • Carrusel de imágenes: este es el famoso slider. No te lo recomiendo, pero si necesitas incorporar fotografías que se van pasando tras varios segundos, este es tu widget.
  • Listado de iconos: perfecto para enumerar características de tu contenido en cualquier sección o columna.
  • Contador: este widget muestra el conteo de un número; es decir, si ponemos por ejemplo el 100, aparecerá una breve animación que irá desde el cero hasta ese número, incluyendo un título.
  • Barra de progreso: esto es muy típico para mostrar habilidades. Incluye una barra que aumentará hasta el porcentaje que establezcas.
  • Recomendación: ideal para incluir testimonios de tus clientes o lectores en tu web o blog para mostrar confianza.
  • Pestañas: aquí puedes exponer distintos textos a través de varias pestañas. Puedes añadir todas las que necesites.
  • Acordeón: parecido al widget anterior, sólo que aquí la información no se muestra hasta que no despleguemos el acordeón, que vendrá señalado con el símbolo +.
  • Alternar: es casi lo mismo que el acordeón, sólo que el desplegable es una pequeña flechita.
  • Iconos sociales: perfecto para incorporar tus redes sociales vinculadas a tu proyecto. Incluye las url de cada uno de tus redes y tus lectores podrán visitarte fácilmente.
  • Alerta: puedes añadir información relevante para resaltar dentro de la página que estés diseñando. Te da opción de incluir el título, una descripción e incluso la opción de poder cerrarlo.
  • SoundCloud: para incorporar sonidos en partes de tu web. Sólo tienes que insertar la url de la localización de tu audio y listo. Esto es muy bueno para añadir podcast en cualquier lugar.
  • Shortcode: con este widget puedes añadir «shortcode». Por ejemplo, si instalar el plugin de Contact Form 7, a través de su código, podrás insertar formularios de contacto donde quieras.
  • HTML: para incorporar líneas de código html.
  • Ancla de Menú: esto es muy bueno, ya que si haces clic en alguna parte de tu página, te redirigirá a la zona de información donde tu le señales.
  • Barra Lateral: para incluir sidebar en columnas o secciones.

Elementos propios de WordPress

Elementos WordPress elementor page builder

Por último, con este tercer bloque, los chicos de Elementor nos permiten añadir los propios widgets que vienen por defecto en WordPress. También te aparecerán los widgets de los plugins que instalemos e integren dicha funcionalidad:

  • Páginas: para insertar las páginas que hayas creado previamente en tu WP. Puedes poner un título, excluir las que tu quieras, cambiarles el orden…
  • Calendario: aquí puedes añadir un calendario con un título y personalizado a tu gusto.
  • Archivos: este widget te va mostrar una lista de tus archivos o un desplegable por meses de las entradas de tu  blog.
  • Audio: puedes subir audios que ya tengas almacenados previamente en tu ordenador o en tu WP o a través de una url.
  • Imagen: al igual que antes, también puedes insertar imágenes.
  • Vídeo: para subir vídeos desde tu WP o url.
  • Meta: con este widget puedes hacer que aparezcan enlaces a RSS, comentarios, así como conectar con WordPress.org. No lo uso y tampoco te lo recomiendo.
  • Buscar: para añadir un widget de búsqueda en tu página para facilitarle a tus lectores la localización de tus contenidos.
  • Texto: incluye contenido como si del editor de texto propio de WordPress se tratara. A diferencia del elemento básico de nuestro maquetador, no te da la opción de personalizar los estilos.
  • Categorías: para incorporar las distintas categorías que tengas creadas para tus entradas del blog.
  • Entradas recientes: puedes añadir tus últimos post con este widget.
  • Comentarios recientes: también puedes mostrar los últimos comentarios en los artículos de tu blog.
  • RSS: para añadir la url de tu feed.
  • Nube de etiquetas: para mostrar una lista de palabras claves para identificar un determinado artículo.
  • Menú personalizado: puedes volver a incluir el menú que hayas creado en tu escritorio WordPress a modo de lista.
  • HTML personalizado: aquí puedes volver a incorporar texto HTML.

Espero que este pequeño repaso te haya servido para ver las distintas opciones que dispone Elementor para incorporar en el diseño de tu web.

En la siguiente clase haremos una página de inicio a modo de ejemplo para insertar los elementos que hemos visto hoy.

¡¡Nos vemos en la próxima clase!! 🙂

5 (100%) 1 vote[s]

Deja un comentario

Responsable>>> Jessica Berraquero Lara.
Finalidad>>> Gestionar el comentario que dejes aquí después de leer el post.
Legitimación>>> Consentimiento del usuario.
Destinatario>> Los datos que me vas a facilitar a través de este formulario de contacto, van a ser almacenados en los servidores de Siteground, mi proveedor de email y hosting, que también cumple con la ley RGPD. Ver política de privacidad de Siteground > https://www.siteground.es/privacidad.htm
Derechos>>> Podrás acceder, rectificar, limitar y suprimir tus datos personales escribiéndome a hola@jessicaberlar.com.