Skip to content Skip to footer
Desarrollo y Web

¿Cómo hacer uso del editor de contenido Elementor?

Destacado

Gestionar las publicaciones y contenido web desarrollado con el editor visual elementor

Si tu sitio web desarrollado por nosotros, está diseñado con el editor de contenido Elementor, hablemos de cómo puedes usarlo para crear o editar tu primer diseño.

Para comenzar, cree una nueva publicación o página y haga clic en el botón Editar con Elementor para iniciar el editor de Elementor.

¿Qué es Elementor 3? Iniciar Elementor. ¿Cómo usar Elementor en WordPress? Guía completa 3

Ahora debería ver una vista previa en vivo de su diseño a la derecha junto con la barra lateral de Elementor a la izquierda.

Para ahorrar tiempo, puede insertar una plantilla prefabricada haciendo clic en el icono de la biblioteca:

¿Qué es Elementor 4? Insertar plantilla. ¿Cómo usar Elementor en WordPress? Guía completa 4

Una vez que agregue la plantilla, haga que el lienzo de su página tenga ancho completo haciendo clic en el ícono de engranaje en la esquina inferior derecha para abrir el área de configuración de la página y seleccionando Elementor Ancho completo en el menú desplegable Diseño de página .

Ya está listo para empezar a editar. Primero, deberá comprender la estructura básica de Elementor. Un diseño de Elementor se compone de tres partes principales:

  • Secciones : dividen la página en filas horizontales.
  • Columnas : van dentro de las secciones y permiten dividir la sección en columnas verticales.
  • Widgets : son los que se utilizan para añadir contenido. Puedes colocarlos dentro de una columna (y esta, a su vez, queda dentro de la sección).

Para añadir un nuevo widget a tu plantilla, simplemente arrástralo desde la barra lateral. Si quieres eliminar un widget existente, haz clic derecho sobre él y selecciona » Eliminar» .

¿Qué es Elementor 5? Interfaz de Elementor. ¿Cómo usar Elementor en WordPress? Guía completa 5

Para cambiar la configuración y el diseño de un widget, columna o sección, todo lo que necesita hacer es seleccionarlo para abrir su configuración en la barra lateral:

¿Qué son los ajustes de widgets de Elementor 6? ¿Cómo usar Elementor en WordPress? Guía completa 6

Constructor de temas

El Creador de Temas de Elementor te permite usar el editor visual de Elementor para diseñar todo tu sitio web. Más específicamente, puedes crear archivos de plantilla para diferentes partes de tu sitio, incluyendo:

  • Encabezado y pie de página
  • Única (por ejemplo, la plantilla que utilizan todas o algunas de las publicaciones de tu blog)
  • Archivo (por ejemplo, la página que enumera las publicaciones de tu blog)

En esencia, ya no necesitas un tema, ya que Elementor te permite controlar cada detalle de tu diseño. Por eso creamos el tema gratuito Hello . Actúa como una base ligera sobre la que puedes diseñar tu sitio web con el Creador de Temas de Elementor.

Para sitios de WordPress personalizados más avanzados , Elementor también le permite insertar contenido dinámico desde campos personalizados que agregó con complementos como Campos personalizados avanzados .

Para comenzar con su primera plantilla de Theme Builder, diríjase a Plantillas → Theme Builder .

¿Qué es el creador de temas Elementor 9? ¿Cómo usar Elementor en WordPress? Guía completa 9

Configuración global

La función de configuración global de Elementor Pro te ayuda a crear y administrar el propio sistema de diseño de tu sitio para que puedas garantizar la coherencia en todo el sitio y acelerar tus flujos de trabajo.

Básicamente, la función Configuración global le brinda un área donde puede definir los colores, la tipografía, los botones, la configuración de imágenes, los campos de formulario y más de todo el sitio.

Al crear un nuevo diseño, este heredará automáticamente la configuración de tu Configuración Global. Si modificas algo en la Configuración Global, ese cambio se aplicará automáticamente a todo el sitio.

Por supuesto, nunca estás limitado a una sola página; siempre tienes la opción de personalizar completamente un diseño página por página. Pero con la Configuración Global, puedes asegurarte de que tus diseños predeterminados se vean exactamente como quieres y sean consistentes en todo tu sitio.

Para acceder a la Configuración global, haga clic en el menú de hamburguesas en la esquina superior izquierda de la barra lateral de Elementor mientras trabaja en el editor y seleccione Configuración del sitio :

¿Qué son los ajustes globales de Elementor 10? ¿Cómo usar Elementor en WordPress? Guía completa 10

Las ventanas emergentes pueden ser increíblemente útiles para el marketing, la navegación, la experiencia del usuario y mucho más. Con Elementor Pro, puedes prescindir del plugin de ventanas emergentes independiente gracias a Elementor Popup Builder .

Usando el editor visual de arrastrar y soltar de Elementor, podrás crear:

  • Ventanas emergentes de caja de luz
  • Barras de notificaciones
  • Rellenos de pantalla completa
  • Deslizables
  • Etc.

Obtendrás control total sobre el lienzo y la ubicación de tu ventana emergente y podrás usar todos los widgets de Elementor en tus diseños.

¿ Quieres crear una ventana emergente de captura de correo electrónico ? Simplemente añade el widget Formulario y conéctalo a tu servicio de email marketing. ¿Quieres crear una ventana emergente de formulario de inicio de sesión ? Simplemente añade el widget Inicio de sesión. ¿Quieres crear un anuncio? Simplemente añade texto y, quizás, un botón.

Una vez que termines el diseño, puedes usar reglas de segmentación para controlar dónde mostrar tu ventana emergente y quién la verá. Además, seguirás contando con reglas de activación avanzadas, como la intención de salida.

¿Qué son los activadores de ventanas emergentes de Elementor 11? ¿Cómo usar Elementor en WordPress? Guía completa 11

Para crear tu primera ventana emergente, simplemente ve a Plantillas → Ventanas emergentes en tu panel de WordPress y empieza a crear. Puedes diseñar tus ventanas emergentes desde cero o elegir entre docenas de plantillas prediseñadas:

¿Qué son las plantillas emergentes de Elementor 12? ¿Cómo usar Elementor en WordPress? Guía completa 12

Constructor de WooCommerce

Si está creando una tienda de comercio electrónico impulsada por WooCommerce, Elementor WooCommerce Builder le permite tomar todas las mismas excelentes características que vio anteriormente y aplicarlas a su tienda WooCommerce. 

Podrás usar la interfaz de arrastrar y soltar de Elementor para diseñar tus plantillas de páginas de productos individuales y tus páginas de archivo de tienda (las páginas que enumeran todos tus productos o los productos de una determinada categoría).

Además de diseñar las plantillas de tu tienda, también obtendrás widgets WooCommerce dedicados que puedes usar para insertar contenido WooCommerce en cualquier lugar de tu sitio. 

¿Te ha resultado útil este artículo?