Duración estimada: 90 minutos

Al final de esta lección, tendrás Elementor instalado y activado en tu WordPress con una pantalla básica maquetada.

Lección 1.1: Instalación paso a paso de Elementor

Con una instalación de WordPress limpia, solo con los plugins «Classic editor», «Widget Editor» y tema «Betheme» procederemos a instalar el maquetador Elementor.

Paso 1: Acceder a tu panel de WordPress

1. Abre tu navegador web (Chrome, Firefox, etc.)
2. Escribe la dirección de tu sitio WordPress seguida de /wp-admin
   • Ejemplo: https://tusitio.com/wp-admin
3. Introduce tu nombre de usuario y contraseña.
4. Haz clic en «Acceder».

Paso 2: Navegar al área de plugins

Una vez dentro del panel de WordPress:

1. En el menú izquierdo, busca la opción «Plugins».
2. Pasa el cursor sobre «Plugins».
3. En el submenú que aparece, haz clic en «Añadir nuevo».

Explicación visual:

├── Escritorio
├── Entradas
├── Medios
├── Páginas
├── Comentarios
├── **APARECIÓN**
├── **Plugins** ← ¡Haz clic aquí!
│   ├── Plugins instalados
│   └── **Añadir nuevo** ← ¡Luego aquí!
└── Herramientas

Paso 3: Buscar Elementor

En la pantalla «Añadir plugins»:

1. Mira la parte superior derecha de la pantalla.
2. Verás un cuadro de búsqueda que dice «Buscar plugins».
3. Escribe exactamente: «Elementor».
4. Presiona Enter o haz clic en la lupa.

Paso 4: Identificar el plugin correcto

Verás varios resultados. Necesitas encontrar el oficial:

Cuidado con estos:

• «Elementor Pro» – Es la versión de pago
• «Elementor Addons» – Son extensiones
• «Elementor Hello» – Es un tema, no el plugin

Paso 5: Instalar Elementor

Una vez identificado el plugin correcto:

1. Haz clic en el botón «Instalar ahora» que está debajo del nombre «Elementor».
2. Espera unos segundos mientras WordPress descarga e instala el plugin.
3. Verás que el botón cambia a decir «Activar».

Paso 6: Activar Elementor

1. Haz clic en el botón «Activar».
2. Verás un mensaje en la parte superior que dice: «Plugin activado».
3. Observa que en el menú izquierdo ahora aparece «Elementor» como nueva opción.

Verificación de instalación correcta

Para asegurarte de que todo está bien:

1. Ve a cualquier página existente
   • Menú izquierdo → «Páginas» → «Todas las páginas»
   • Elige cualquier página y haz clic en «Editar»
2. Deberías ver un nuevo botón azul que dice «Editar con Elementor»

Si ves este botón, ¡felicidades! Elementor está instalado correctamente.

Lección 1.2: Instalación de un tema compatible

Objetivo: Instalar un tema ligero que funcione perfectamente con Elementor.

⚠️ Atención: si tienes Betheme, usa siempre éste. Lee sólo lo siguiente como documentación/aprendizaje ⚠️

¿Por qué necesitamos un tema compatible?

• Algunos temas tienen su propio sistema de diseño.
• Esto puede generar conflictos con Elementor.
• Los temas ligeros permiten que Elementor tenga control total.

Paso 1: Ir al área de temas

1. En el menú izquierdo, busca «Apariencia».
2. Pasa el cursor sobre «Apariencia».
3. Haz clic en «Temas».

Paso 2: Añadir nuevo tema

1. En la parte superior de la pantalla, verás un botón «Añadir nuevo».
2. Haz clic en él.

Paso 3: Buscar «Hello Elementor» (o instalar Betheme de pago)

1. En el cuadro de búsqueda (arriba derecha), escribe: «Hello Elementor».
2. Presiona Enter.

Paso 4: Instalar el tema

1. Encontrarás el tema «Hello Elementor» creado por Elementor.com.
2. Pasa el cursor sobre la imagen del tema.
3. Aparecerá un botón «Instalar».
4. Haz clic en «Instalar».
5. Espera a que se complete la instalación.
6. El botón cambiará a «Activar».
7. Haz clic en «Activar».

¿Qué es Hello Elementor?

• Es un tema ultraligero (menos de 6KB).
• No incluye estilos propios.
• Permite que Elementor controle todo el diseño.
• Es 100% gratuito.
• Mantenido por el equipo de Elementor.

Paso 5: Verificar la activación

Después de activar Hello Elementor:

1. Abre tu sitio web en una nueva pestaña.
2. Observa que el diseño es muy básico, casi blanco.
3. Esto es normal – significa que el tema está listo para que Elementor tome el control.

Lección 1.3: Configuración básica de Elementor

Objetivo: Configurar las opciones esenciales de Elementor para un buen inicio.

Acceder a la configuración general

1. Visita tu pantalla Home como si fueras cualquier usuario.
2. En el menú superior veras «Editar con Elementor» haz clic en el.
3. Cargará la pantalla de editor de contenido.
4. En la barra superior, en el lado izquierdo, verás el logotipo, haz clic en el y selecciona «Ajustes del sitio«.
5. Verás opciones como «Colores globales, Fuentes globales, tipografia, botones, margenes, campos de formulario, etc». Éstos son valores que puedes modificar y se aplicarán a toda la web.
6. Haz los cambios que quieras y pulsa el botón que aparece abajo del todo «Guardar cambios«.

Lección 1.4: Crear página de prueba

Objetivo: Crear tu primera página con Elementor para verificar que todo funciona.

Paso 1: Crear nueva página

1. En el menú izquierdo, haz clic en «Páginas».
2. Haz clic en «Añadir nueva».

Paso 2: Dar nombre a la página

1. En el campo «Añadir título», escribe: «Mi primera página con Elementor».
2. No escribas nada en el editor clásico de WordPress.

Paso 3: Abrir con Elementor

1. Busca el botón azul que dice «Editar con Elementor».
2. Está ubicado justo encima del editor de texto.
3. Haz clic en él.

Paso 4: Primer contacto con el editor

¡Felicidades! Estás dentro del editor de Elementor.

Lo que deberías ver:

1. Panel izquierdo: Lista de widgets (iconos).
2. Área central: Espacio vacío con un botón «+».
3. Panel derecho: Vacío por ahora.

Paso 5: Probar un widget simple

1. En el panel izquierdo, busca «Título».
2. Arrástralo (click + mantener pulsado + mover) al área central.
3. Suelta el ratón.

Paso 6: Configurar el título

1. Haz clic en el widget que acabas de añadir.
2. En el panel izquierdo, ve a pestaña «Contenido».
3. En el campo «Título», escribe: «¡Hola Mundo! Mi primera página con Elementor»

Paso 7: Guardar y ver

1. Haz clic en el botón«Publicar» (abajo izquierda o arriba derecha según versión).
2. Haz clic en «Ver página» (icono de ojo).
3. ¡Verás tu página en vivo!.

EJERCICIO PRÁCTICO DEL MÓDULO 1

Objetivo: Verificar que has aprendido todo correctamente.

Tarea 1: Instalación limpia

1. Desinstala Elementor si ya lo tenías.
2. Vuelve a instalarlo desde cero siguiendo los pasos.

Tarea 2: Configuración completa

Configura Elementor con estos valores exactos:

• Color primario: #4CAF50 (verde).
• Fuente primaria: ‘Open Sans’
• Espacio entre widgets: 15

Tarea 3: Página de prueba

Crea una página llamada «Práctica Módulo 1» que contenga:

1. Un título principal.
2. Un párrafo de texto.
3. Una imagen (puedes usar una cualquiera).
4. Un botón.

Verificación final:

Tu página debería verse así en el editor:

[TEXTO: "He aprendido a instalar y configurar Elementor"]
[IMAGEN: Cualquier imagen]
[BOTÓN: "Ver más"]

PREGUNTAS FRECUENTES

P: ¿Necesito Elementor Pro para empezar?

R: NO. Elementor Free es más que suficiente para aprender y crear sitios profesionales.

P: ¿Puedo cambiar de tema después?

R: SÍ, pero algunos temas pueden no ser compatibles. Hello Elementor es la opción más segura para iniciados. Para profesionales se puede usar temas como BeTheme (recomendado).

P: ¿Elementor ralentiza mi sitio?

R: Es un maquetador pesado, por lo que se recomienda no instalar muchos plugins en una web WordPress con éste maquetador.

RECURSOS ADICIONALES

1. Documentación oficial: https://docs.elementor.com/ (en perfecto inglés)
2. Foro de soporte: https://wordpress.org/support/plugin/elementor/

PRÓXIMO MÓDULO: «Primer contacto con el editor» – Aprenderás a moverte por la interfaz, usar widgets básicos y crear tu primera sección.