Si estás en pleno proceso de construcción de tu plataforma de emprendimiento digital, pero, al escuchar el término Elementor te suena a nombre de villano de película de acción ??♂️, debes saber que te estás perdiendo de una de las mejores herramientas para construir tu web de marca personal, ya que es, por demás, de fácil manejo y gran potencial visual.
Esta aplicación te permitirá crear el diseño de tus páginas webs, tiendas online, landing pages y academias online y gestionar contenidos así no sepas de programación, obteniendo una excelente maquetación y diseños diversos. Solo se requiere un poquitín sentido común y unos minutos práctica para hacer diseños impresionantes.
Te lo explicamos paso a paso y es gratuito: https://academy.nuvolabstudio.com/programas/reto-crea-tu-web-en-7-dias/
¿Qué es Elementor y por qué es tan conocido en el mundo del diseño web?
Elementor es una plugin orientado a WordPress que permite maquetar las estructuras de los sitios webs y editar contenidos internos.
Le facilita la vida tanto a diseñadores web profesionales como a usuarios finales o administradores que no sepan nada de programación, haciendo posible que la página funcione sin tener que acudir constantemente al creador del sitio.
En principio, WordPress viene con un editor básico que puede ser sustituido por otros. Ciertamente, no es la única herramienta con este propósito, pero vaya que es de las mejores en cuanto a capacidad gráfica, utilidad y maniobrabilidad.
Cuenta con varios widgets orientados a la creación de bloques de contenidos (escritos o visuales), resultando en páginas de excelente estética.
¿Cuáles ventajas ofrece Elementor para crear una web personal?
- Fácil de instalar: se instala como un plugin directamente en el navegador y permite trabajar de inmediato sobre el hosting que hayas escogido para alojar tus contenidos.
- Compatibilidad: es compatible con la mayoría de los temas de WordPress.
- Costo: Tiene una versión gratuita, poco restrictiva.
- Balanceado: tiene buena potencia, excelente organización de la interfaz, diversidad de plantillas y herramientas, buena accesibilidad; todo sin hacer que el programa sea muy pesado.
- Fácil de manejar: Permite trabajar desde un enfoque práctico/visual e ir revisando cómo va quedando todo el contenido sin tener que preocuparte por errores en líneas de códigos (como en los programas convencionales).
- Edición fácil: Podrás hacer, corregir y rehacer tus creaciones (como es típico en todo proceso creativo) sin tener dolores de cabeza.
- Intuitiva: La interfaz es fácil de entender, incluso, podrás comprenderla de buenas a primeras si solo sabes manejar WordPress o programas básicos de textos como Word.
- Mayor accesibilidad: Tiene que un buscador interno para hallar la herramienta exacta que necesitas sin tener que perder mucho tiempo (en caso de que no esté a simple vista)
¿Cómo utilizar Elementor para crear mi web sencilla de marca personal?
Se basa en elegir, arrastrar y soltar elementos gráficos, textos, imágenes y bloques de contenidos dentro espacio de trabajo de la web que su vez se distribuye en columnas y secciones. La idea es construir un entorno web diseñado a tu medida y coherente con los propósitos estéticos y funcionales de tu marca.
Por eso, lo primero con lo que tendrás que familiarizarte al trabajar con este editor, es con la distribución del lienzo de creación. En este caso, la página “en blanco” se distribuye en secciones y comunas.
Las secciones son los apartados horizontales que conforman la página y, por lo general, cada uno tiene un bloque conceptual o un objetivo comunicacional distinto. Son algo así como las páginas de un libro que verán en la medida en que se baja el scroll de la web.
Las columnas refieren a los cortes verticales del lienzo, como especies de pilares de construcción.
En resumen, el espacio de trabajo estará compuesto por varios recuadros invisibles (unidades mínimas organizativas) que pueden ser rellenadas con información, color, imágenes y cuadros con textos.
Estos cuadros permiten la simetría del diseño. En un ejemplo osado, podríamos compararlo con una especie de hoja de cálculo, pero con fines artísticos.
Aun así, ten en cuenta que:
? El tamaño de filas y las columnas pueden ser modificados a voluntad.
? Las celdas pueden ser de distintas dimensiones dependiendo del contenido que se vaya a colocar.
?️Se pueden incrustar o crear nuevas celdas y columnas, incluso, después de haber trabajado sobre ella.
Widgets: ¿Cómo configurar mi blog con Elementor?
En la versión gratuita contarás con muchísimas herramientas, siendo 10 de ellas esenciales. Una vez que configures las entradas al blog en el menú de WordPress mediante la opción “ajuste / ajustes de lectura”, podrás arrancar con el trabajo.
Los widgets más importantes son:
- Sección interior ??
Con esta herramienta podrás crear secciones dentro de una sección más grande. Es útil cuando se quiere incorporar varios elementos pequeños dentro de una misma sección. Sólo ten en cuenta que agrega mayor peso a la página, por lo que solo debe usarse cuando sea estrictamente necesario.
En cada sección (interior o principal) se puede cambiar el color de fondo, el contorno, bordes y ajustar el tamaño.
- Encabezado ?✍?
Permite crear títulos y subtítulos, con la opción de configurar los hipervínculos, las jerarquías de título, distintas opciones para las fuentes (tipo, tamaño y color), la alineación.
- Imagen ?️?
Con este widget podrás añadir imágenes al diseño de tu sitio web. Con sólo soltar y pegar, se habilitará un campo para poner una foto o una serie de fotos. Podrá configurar la opacidad, los filtros y los bordes. También cuenta con pequeño menú de mejoras a la imagen.
- Editor de texto ?️?
Podrás introducir bloques de texto, mediante recuadros de contenido. Hay varias opciones que aplican para los caracteres; por ejemplo, se puede cambiar el tamaño, la dirección, alineación, configuración de fuentes, capitalizar, configurar espacios, manipular el radio de los bordes y otros detalles.
- Video ?️?
Puedes enlazar videos desde YouTube, Vimeo, Dailymotion o desde el servidor. Podrás hacer que el video inicie o culmine en un punto específico, autorreproducirse, configurar el formato y resolución, silenciarlo, ponerlo en bucle, mostrar o esconder comentarios externos y visibilizar un menú de estadísticas de reproducción.
Recuerda que se puede diferir la carga del video para que la página no se ponga tan pesada al cargarse. También se puede poner imágenes como portada para los videos. En este caso, sólo se reproducirá en el momento que el usuario quiera, de forma directa o como una pestaña emergente.
- Botón ?️???
Los botones permiten hacer llamados de acción o re-direccionar a los usuarios a otras secciones de la web. Se busca que los botones resalten en comparación a los encabezados y del texto común, pero, sobre todo, que el usuario tenga una idea clara de su propósito.
Para lograr aquello se puede cambiar el color del texto, fondos, el borde, el ícono, transiciones y las fuentes para darle una apariencia personalizada.
- Separador ?♀️ / ??
Esta herramienta podría sonar banal, pero se utiliza seguido. Permite organizar visualmente el contenido a través de líneas divisorias para que no queden revueltos.
Hay diferentes modelos de línea que pueden personalizarse con la inserción de —-textos —– e íconos — ?️— en medio en la trayectoria de la línea.
- Espaciador ?♀️ ??
Permite poner huecos en blanco en partes específicas del diseño. Tiene una función parecida al separador y no requiere mayor explicación.
- Google Maps ?️?
Muy útil si quieres ingresar la dirección de tu negocio, de las oficinas comerciales, administrativas o de atención al público de tu empresa, y otros sitios de interés. Al estar enlazado con Google Maps, los clientes tendrán una visión estandarizada y digital de las localizaciones.
- Icono ???
Por último, te recordamos que esta aplicación cuenta con un repositorio de íconos bastante completo que pueden colocarse en cualquier parte de la web. Se pueden personalizar las figuras, los fondos, los elementos contrastantes de la imagen o las transiciones.
Si quieres montar un ícono propio, no hay ningún problema, puedes cargarla de la web como un vector escalable (formato SVG).
¿Cómo hacer un Formulario de Contacto con Elementor?
Sabemos que es importante que en tu página haya un apartado para establecer a través de los medios digitales. Por esa razón, una buena sección de formularios busca promover el contacto bidireccional.
Por un lado, debe aparecer el email, teléfono, WhatsApp, Telegram y cualquier otro medio que creas conveniente para que el usuario se comunique con una empresa y, por otro lado, deben habilitarse los campos para que el usuario pueda preguntar, hacer comentarios o dejar sus datos de contacto.
En la versión PRO, basta con utilizar el widget “Form” donde ya aparece una plantilla muy completa para hacer formularios con estos ítems. Pero en la versión gratis, se puede usar el plugin “Contact form 7” para darle mejor apariencia y adaptarlos a la política de protección de datos.
¿Se puede hacer pop ups con Elementor?
Algunas informaciones pueden ponerse en recuadros emergentes para que sobresalgan al más puro estilo de un aviso clásico.
Este recurso no debe usarse a la ligera, ya que podría ser fastidioso para los usuarios; aunque, usado de la manera correcta, constituye una herramienta efectiva para llamar al cliente al consumo de nuestros productos. Para colocar pop ups con Elementor has lo siguiente:
- Busca la opción “Plantillas” en el menú principal de WordPress y selecciona la opción “Popups”.
- Selecciona la plantilla que más se ajuste a tu necesidad.
- Utiliza las herramientas de Elementor para cambiar los contenidos y dimensiones de los contenidos.
- Elige cuando quieres que aparezca el aviso. Podrás jugar con el tiempo y con las acciones que realice el usuario.
También puedes ver este video en el que nuestra CEO nos lo explica mejor como configurar el pop up y sobre todo, sus funciones de visualización:
