Última actualización: abril 23, 2023
Elementor – Curso para Principiantes [2020]
Hoy es posible construir páginas web increíbles sin código ni programación.
Todo gracias a Elementor, un potente constructor de páginas para WordPress.
En Nodstrike, hemos preparado esta guía para principiantes. Con el objetivo final de brindarte un panorama amplio sobre las potentes herramientas detrás de Elementor, y cómo puede convertirse en un pilar importante dentro de tu estrategia de Marketing.
Porque al final, ¿Quién quiere un sitio web si no produce dinero?
Así que iniciemos este curso gratuito sobre Elementor.
Elementor es un constructor de páginas para la plataforma de contenidos WordPress. En comparación a la competencia, es un constructor relativamente nuevo que vino a revolucionar la forma en que construimos páginas web en WordPress.
Elementor es una herramienta que te permite diseñar y crear páginas web sin necesidad de código ni programación; Lo que lo vuelve ideal para diseñadores, marketeros, dueños de negocio y entusiastas que desean crear sitios sin la necesidad de conocimientos técnicos.
El término page builder hace alusión a la creación de páginas estáticas. Es decir, páginas que suelen estar sujetos a cambios constantes que dependen de una base de datos.
Sin embargo, Elementor ha desarrollado una serie de nuevas funcionalidades que te permiten crear sitios en su totalidad. Es lo que Elementor ha llamado oficialmente como un theme builder.
Como constructor de temas, ahora eres capaz de diseñar y crear tus propios menús de navegación, pies de página, páginas de archivo e incluso páginas de entrada como lo puede ser un blog o un custom post type de recetas de cocina.
Este motor de theme builder sólo está disponible en la versión Pro de Elementor, junto con otros widgets muy útiles como formularios de contacto y anuncios pop-up. Puedes adquirir Elementor con un precio de descuento AQUÍ.
Ya sabes que en Nodstrike amamos las jerarquías. Comprender la estructura que rige las plataformas es una forma muy sencilla de aprender a usarlas de manera rápida y efectiva.
Elementor es una herramienta de diseño “fácil” de usar; Pero hace uso de un sistema muy sofisticado que es importante entender para agilizar nuestra incursión en la herramienta.
Básicamente tenemos que entender los conceptos de sección, columna, margen, relleno, widget, plantilla, funcionalidad y estilos. ¡Así que comencemos!
Una sección es una suerte de contenedor, capaz de alojar dentro de sí columnas y widgets.
Cuando construimos una página, básicamente estamos apilando una serie de secciones (contenedores), cada uno con un propósito específico. Por ejemplo: Una sección de bienvenida, una de introducción, una sección de beneficios y otra de contacto.
Las columnas son contenedores dentro de una sección y son las encargadas de alojar a los widgets. El ancho de las columnas está condicionado por el ancho que se marca a nivel de sección, esta puede ser predeterminada, completa o personalizada.
Elementor te permite crear estructuras anidadas, es decir, contener una columna dentro de otra columna; Una función muy útil para algunos diseños muy específicos. Puedes hacer uso de esta función a través del widget Columnas Internas.
El margen es una característica especial que nos permite delimitar el espacio existente entre un elemento y otro. Esto nos permite crear diseños limpios, dar la sensación de plenitud y no saturar la vista de nuestros usuarios con muchos elementos a la vez.
Elementor nos permite manejar el margen a nivel de sección, columna y widget.
El relleno es el espacio dentro de un elemento en sí mismo.
Por ejemplo: Una columna sin relleno tendría los bordes pegados a los elementos dentro de ella. En cambio, cuando aplicamos un relleno, permitimos a los elementos respirar dentro de la columna; Lo que nos permite proyectar una imagen más atractiva.
Elementor nos permite manejar el relleno a nivel de sección, columna y widget.
Un widget es un componente individual que cumple una función específica.
En Elementor cada widget tiene su propio panel de funcionalidad y estilos. Puedes encontrar la lista de widgets disponibles en la barra lateral izquierda del editor.
Una plantilla es una sección o conjunto de secciones personalizadas.
Esta puede ser guarda para reutilizarse dentro del mismo sitio. O bien, puede ser exportada para compartir con otros usuarios e incluso venderlas.
Cada componente dentro de Elementor viene acompañado de su panel de personalización.
Este panel se compone de tres pestañas que nos permitirán manipular cada componente de manera increíble. Vamos a echar un vistazo a las propiedades de cada pestaña.
Este primer panel suele ser donde realizamos las configuraciones iniciales de nuestro componente, según el que este sea. Por ejemplo, cuando hablamos de una sección, es en esta pestaña donde delimitamos el ancho y alto de la sección.
En el caso de un widget, esta suele ser la sección donde añadimos el contenido de nuestro widget. Por ejemplo, si usamos el widget de Encabezado, será en esta pestaña donde ingresamos el texto de nuestro widget, así como definir la alineación del texto.
La pestaña de diseño, es una de las secciones más divertidas dentro del panel de personalización. Es aquí donde podremos añadir colores a nuestros componentes, así como sobrecapas e incluso degradados.
También, en el caso de las secciones y columnas; Tenemos la opción de personalizar los bordes e incluso añadir sombreados. En el caso de los widgets, estas opciones se encuentran la pestaña de “Avanzados”.
Una pestaña muy poderosa que no debe tomarse a la ligera. Es aquí donde se encuentra una pequeña porción del inmenso poder detrás de Elementor.
En la pestaña de avanzados, en primer, podremos configurar en margen y relleno de nuestros componentes. Esto a nivel responsivo, es decir, con propiedades variables según el dispositivo de visualización: Computadora, Tablet y Celular.
También tenemos una sección de adaptabilidad. Que básicamente nos permite cambiar la posición de las columnas de manera responsiva, e incluso esconder columnas por dispositivo.
También tenemos la opción de añadir código CSS. Por supuesto, esta opción es para usuarios más avanzados, pero existen algunos trucos que se pueden aplicar.
¿Te gustan los sitios dinámicos? En esta pestaña encontrarás la opción de animaciones. Así podrás definir el estilo de entrada de los componentes. Las animaciones se pueden aplicar a nivel de sección, columna y widget.
Vamos a iniciar construyendo nuestra primer página con Elementor. Para ello es necesario que vayamos a la pestaña “Páginas” y demos click en “Añadir Nueva Página”.
Como te mencionaba anteriormente, definir el ancho de contenido de nuestro sitio es importante para evitar inconsistencias y confusiones en el diseño de nuestro sitio.
Por defecto, WordPress se sirve de las configuraciones de nuestro tema para mostrar un ancho de contenido. Esta opción puede ser encontrada en el customizer de WordPress.
Para acceder a él tienes que hacer lo siguiente:
Es importante aclarar la diferencia entre ancho de contenido y el ancho total.
El ancho total suele estar definido por la pantalla en la que se visualiza el sitio. Donde el ancho de contenido es una medida exacta que nuestro sitio debe respetar sin importar el tamaño de resolución y/o pantalla.
Cuando hayas configurado el ancho de tu sitio a nivel de tema, ha llegado el momento de hacerlo a nivel de Elementor. Para lograr esto haz lo siguiente:
Nuevamente, queremos evitar incongruencias entre nuestro tema y Elementor al máximo. Por esa razón, y aprovechando que ya hemos visitado el panel de ajustes; Te invito a desactivar los estilos propios de Elementor marcando las casillas en la pestaña “General”.
Con estos pasos listos; Hemos evitado futuras confusiones. Ahora estás seguro que las opciones de tu tema son y serán las únicas que determinan los estilos de tu tipografía, y que tanto Elementor como tu tema manejan el mismo ancho de contenido.
Es momento de entrar a construir nuestra primer página con Elementor y descubrir de que va esta potente herramienta. ¡Comencemos!
En este punto, lo primero que debemos hacer es configurar nuestra página para acoplarse de manera adecuada a nuestro diseño con Elementor. Configura tu página así:
Elementor tiene una plantilla que funciona con cualquier tema y que te permitirá diseñar páginas sin ningún tipo de distracción o estilos de tu tema. Esta plantilla se llama Elementor Canvas y puede ser seleccionada en el panel de atributos de páginas.
Habiendo realizado esta configuración, da click en guardar o actualizar página.
Ahora selecciona “Editar con Elementor”. Estamos listos para diseñar nuestra página.