Cómo usar Elementor: una manera fácil de comenzar

Publicado: 2019-09-14

El concepto de 'Crear un sitio web sin saber programar ni codificar' se hizo popular en WordPress en los últimos años.

Elementor Page Builder hace que esta noción se amplíe con una opción fácil de arrastrar y soltar que le brinda una vista previa en vivo. Ahora, puedes desarrollar tu sitio web personal o de empresa con Elementor y darle un aspecto elegante sin gastar dinero en profesionales.

En este artículo, le mostraremos cómo comenzar con Elementor paso a paso y garantizar sus mejores prácticas.

Elementor: el mejor generador de páginas de WordPress para diseñar el sitio web de sus sueños

how-to-use-Elementor-page-builder

El creador de páginas de Elementor funciona como una bendición para las personas que no son expertas en tecnología.

Incorpora más de 400 plantillas y bloques prediseñados que le permiten hacer una combinación de diseño infinita para obtener un sitio web funcional avanzado y de alta gama. Hace que todo el proceso de creación de un sitio web sea muy fácil.

Elementor te permite construir cualquier cosa que puedas imaginar.

Obtendrá una interfaz 100% visual para presenciar todos los cambios instantáneos que realice con respecto al diseño del sitio. Además, Elementor ofrece más de 30 widgets increíbles para llevar su sitio a una altura notable completamente gratis.

Además, puede ampliar la capacidad de este creador de páginas hasta el infinito suscribiéndose a Elementor Pro a un precio asequible. Con widgets ilimitados de Elementor, puedes diseñar todo tipo de sitio web.

Profundicemos y exploremos cómo comenzar a trabajar con Elementor de manera efectiva.

Cómo instalar Elementor

Supongamos que ya tiene un sitio de WordPress. Si no, puede construir su sitio con WordPress en 10 minutos. Puede elegir un alojamiento compatible con Elementor para ejecutar su sitio sin problemas.

Ahora, veamos cómo instalar Elementor. Y hay 2 formas . A ver el primero.

Paso 1 : Instalar y activar

Al principio, inicie sesión en su panel de WordPress. Vaya a la sección de complementos y haga clic en Agregar nuevo.

wordpress-plugin
Agregar nuevo complemento

Paso 2 : luego, busque "Elementor" y seleccione " Instalar ahora ".

how-to-use-Elementor-installation
Busque e instale Elementor Page Builder

Paso 3 : Ahora, continúa y haz clic en " Activar " para activar Elementor en tu sitio.

how-to-use-Elementor-activation
Activa tu Elementor

¡Genial! Ha instalado el generador de páginas con éxito.

Ahora, veamos la segunda forma.

Alternativamente, puede descargar Elementor manualmente y cargar el archivo usando la opción Cargar complemento .

how-to-use-Elementor-upload-plugin
Cargar complemento
  • Haga clic en Elegir archivo y lo redirigirá a las carpetas de su escritorio. Seleccione el archivo.
choose-file-from-plugin
  • Después de cargar el archivo, haga clic en Instalar ahora.
how-to-use-Elementor-installation

Una vez que el complemento esté instalado, haga clic en la opción 'Activar complemento' para activar Elementor.

how-to-use-Elementor-activation

Por lo tanto, puede instalar Elementor Pro de la misma manera después de obtener la suscripción de elementor.com.

Nota : primero debe activar la versión gratuita de Elementor para que el complemento funcione.

Ahora, puede crear un hermoso sitio al obtener un tema de WordPress incorporado al instante. Puede elegir el adecuado para su negocio de una amplia variedad de galerías de temas compatibles con Elementor. ¿Puedes usar Elementor con cualquier tema?

Si casi. Aquí hay una lista para ti. Dar un cheque y-

Elija sabiamente el tema que funciona mejor con Elementor de acuerdo con la voz de su marca.

Primeros pasos con Elementor

Bueno, para diseñar su sitio desde cero con Elementor, simplemente vaya a Panel de WordPress>Páginas>Agregar nuevo.

Luego, ingrese un título de página y seleccione la opción Elementor Canvas en el menú desplegable de la plantilla del lado derecho.

Finalmente, haga clic en el botón "Editar con Elementor" y comience a trabajar con el creador de páginas más poderoso.

how-to-use-elementor-canvas

Sin embargo, si desea editar una página emocionante con Elementor, vaya a Todas las páginas> Pasar el cursor sobre una página.

Luego aparecerá un botón “Editar con Elementor”. Ahora, haga clic en el botón y comience a editar su página.

edit-with-elementor

Una descripción general rápida del editor de Elementor

A medida que se carga este creador de páginas, obtendrá una interfaz donde puede ensamblar el contenido de su página.

Antes de continuar, permítanos presentarle la configuración básica y los elementos de este creador de páginas para facilitar el desarrollo de su sitio.

how-to-use-elementor-interface

Esta es la interfaz donde puede diseñar su página con elementos de arrastrar y soltar y ver la vista previa en vivo de su sitio.

  • En la parte superior izquierda encontrará un ícono de hamburguesa para algunas configuraciones predeterminadas y globales.
  • En la parte superior derecha, encontrará un botón de marcación para volver al panel principal
  • Después de eso, aparece un cuadro de búsqueda para encontrar rápidamente los widgets enumerados y requeridos
  • Encontrará todos los módulos útiles en el panel izquierdo
  • En la parte inferior, encontrará algunos iconos útiles para la configuración de la página, la navegación rápida, el historial, el modo receptivo y la vista previa.
  • También aquí obtendrá un botón Publicar para vivir su página o guardar borrador/plantilla para usar más tarde.

Además, puede hacer que el panel del módulo desaparezca haciendo clic en el signo de flecha que aparece en el lado derecho del panel.

De esta manera, obtendrá una vista previa completa de su página.

Configuración de página predeterminada y global

De forma predeterminada, este creador de páginas adapta el color y la fuente de su tema en la configuración predeterminada y le permite diseñar en consecuencia.

Sin embargo, puede establecer el estilo predeterminado y la configuración global haciendo clic en el logotipo de la hamburguesa en la esquina superior izquierda.

how-to-use-elementor-setting

Le permite establecer el color predeterminado de la paleta de colores diferente que los módulos de Elementor usarán cuando comience a arrastrarlos y soltarlos en su página.

Además, aquí puede configurar la familia de fuentes y el tamaño para el encabezado, el cuerpo del texto y el acento. Además, puede elegir del Selector de color una paleta de colores predeterminada que incluye una ranura de seis u ocho colores que puede usar más adelante.

Cuando seleccione un color, aparecerá un selector de color en la parte inferior con ranuras de color. Puede seleccionar el color de esas ranuras desde aquí.

En la Configuración global, puede establecer una fuente genérica para las páginas, el ancho del área de contenido de su página y varios elementos de espaciado. Además, puede cambiar a la configuración del tablero aquí mismo.

Cuando haya terminado en una página, puede hacer clic en Salir al panel para volver al Panel de WordPress

Biblioteca de plantillas de Elementor prediseñadas

Bueno, puede agregar plantillas o bloques prediseñados de la biblioteca de plantillas con solo unos pocos clics. Simplemente haga clic en el botón Agregar plantilla y lo llevará a la rica biblioteca de plantillas de Elementor.

how-to-use-elementor-add-template

Aquí encontrará bloques, páginas y plantillas prediseñadas que puede insertar fácilmente en su sitio.

how-to-use-elementor-template-library
Biblioteca de plantillas de Elementor

En la sección de bloques, encontrarás amplias opciones para elegir por categorías para diferentes propósitos. Puede seleccionar el botón del corazón para agregarlo a su sección de Favoritos.

block-section-template-library

Para agregar un bloque a su sitio, simplemente desplace el cursor sobre él y haga clic en el botón Insertar. Se descargará e insertará directamente en su diseño al instante.

Del mismo modo, puede insertar todo el diseño de la página en unos pocos segundos desde las páginas diseñadas listas para usar. Obtendrá una amplia variedad de plantillas de página desde aquí.

Además, este generador de páginas de WordPress elimina la molestia de diseñar el mismo elemento repetidamente. Puede diseñar un bloque o una plantilla completa y guardarla para su uso posterior.

how-to-use-elementor-save-template

Su bloque o plantilla guardada aparecerá en la sección Mi plantilla y podrá insertarla en su diseño cuando sea necesario.

how-to-use-elementor-my-template

Con Elementor, crear un sitio web se vuelve más fácil que nunca.

Elementor de widgets globales

Si desea usar una sección de su diseño repetidamente en diferentes páginas de su sitio, puede guardarla como Widget global y simplemente usarla desde la Sección global.

Pueden ser formularios de suscripción, biografías de autores, íconos de seguimiento social, íconos para compartir en redes sociales o cualquier cosa que tenga que insertar varias veces en su sitio.

how-to-use-elementor-global-widgets
Widgets globales

Por lo tanto, no necesita hacer el mismo diseño una y otra vez. Es muy cansado. Solo diséñalo una vez y úsalo cuando lo necesites.

Códigos cortos de Elementor

En este creador de páginas, puede agregar un widget directamente usando códigos abreviados.

Para insertar el código abreviado en su página a través del editor predeterminado, navegue WP-admin> Plantillas> Plantillas guardadas.

Aquí puede ver todas sus plantillas guardadas con los códigos abreviados. Ahora, desde la columna de shortcode, puedes copiar el shortcode y pegarlo en tu editor clásico. Puedes ver los cambios desde la vista previa.

De lo contrario, puede ir al Panel de Elementor y usar el widget de código abreviado y pegar el código de la plantilla guardada.

Verá la vista previa al instante allí mismo.

insert shortcode

Bueno, ahora tienes todos los conocimientos básicos sobre todas las pestañas, elementos y funcionalidades de este creador de páginas gigante.

Potentes complementos de Elementor

how-to-use-elementor-addons

Elementor ya tiene muchos diseños de contenido excelentes para darle a su sitio un aspecto profesional e impresionante con funcionalidad avanzada. Aún así, puede ampliar el poder de personalización y agregar algunas características sobresalientes a su sitio utilizando complementos de Elementor de alta gama.

Ya que puede obtener complementos útiles según sus requisitos de la amplia galería de complementos de WordPress.

Consulte la lista de los 12 mejores complementos de Elementor para personalizar su sitio de WordPress con facilidad.

¿Dónde hago CLIC para editar la configuración y el estilo de los widgets de Elementor?

Bueno, ahora tiene un puñado de conocimientos para comenzar su primer sitio de Elementor.

Cuando saltó por primera vez a Elementor, obtendrá una página en blanco con dos opciones: "Agregar nueva sección" y "Agregar plantilla"

add-new-section

Como sabe, cada página web no es más que una estructura genérica que incluye una serie de secciones y una sección contiene columnas y esas columnas tendrán elementos como texto, imágenes o videos.

En Elementor puedes personalizar tu sección según tu imaginación. Puede agregar un color de fondo, degradado, imagen o videos individuales a cada bloque de su sitio.

Al principio, haga clic en Agregar nueva sección y puede elegir el bloque con las columnas requeridas. Además, puede modificar el diseño cambiando el tamaño y el ancho de la columna.

section-column

Ahora agregue elementos a las columnas y edítelos desde el panel lateral izquierdo o como se muestra en la imagen de arriba. Además, puede arrastrar widgets desde el panel del módulo izquierdo y modificarlo de acuerdo con el diseño de su sitio.

Además, puede agregar una plantilla o bloque prediseñado como se mencionó anteriormente.

Después de seleccionar un widget, obtendrá tres opciones en el panel de edición izquierdo para modificar el contenido, el estilo y mucho más del widget.

how-to-use-Elementor-edit-widgets

Desde la pestaña avanzada, puede editar los widgets con algunas características extraordinarias y premium. Puede modificar los contenidos con otros complementos instalados para su sitio desde aquí. Además, puede agregar fragmentos de código CSS personalizados en su sitio de Elementor desde este panel.

Resumir los pensamientos sobre cómo usar Elementor

¡Felicidades! Ahora tiene todos los conocimientos básicos sobre Elementor para comenzar su primer sitio. No importa si es un novato o un desarrollador, este increíble creador de páginas tiene una rica funcionalidad para diseñar su sitio según sus requisitos.

Con este creador de páginas, tendrá toda la libertad de personalizar su sitio de acuerdo con la voz de su marca.

¡Suena asombroso! ¿Derecha?

Además, puede potenciar su sitio de Elementor con potentes Happy Addons. Lo más sorprendente es que puede agregar animaciones personalizadas en su sitio sin ningún tipo de codificación con Happy Effects.

Mejorará su experiencia de construcción de páginas mejor con más de 27 widgets totalmente personalizables completamente gratis.

¿Entonces, Qué esperas? ¡Aprovecha la oportunidad hoy!

Dar un cheque a HappyAddons