MANUAL BÁSICO DE USO DE TU WEB + ELEMENTOR

1. Introducción

1.1. ¿Qué es Elementor y por qué tu web lo usa?

Elementor es un maquetador visual para WordPress, es decir, una herramienta que te permite editar tu web de manera sencilla sin necesidad de programar ni conocer código. Funciona con un sistema de arrastrar y soltar (drag & drop) que hace que todo el diseño sea mucho más intuitivo: puedes mover, añadir o eliminar elementos directamente desde la pantalla.

Tu web ha sido creada con Elementor porque es:

• Intuitivo: todo se ve en tiempo real, sin tener que “imaginar” cómo quedará.
• Flexible: puedes añadir o quitar bloques (texto, imágenes, vídeos, botones) fácilmente.
• Responsivo: permite adaptar el diseño a móvil, tablet y ordenador.
• Seguro: si no publicas los cambios, tu web seguirá igual que antes.

En resumen, Elementor es una herramienta pensada para que puedas hacer pequeños cambios en tu web con total autonomía, sin depender del equipo técnico para cada detalle.

1.2. Qué puedes y qué no deberías modificar

Aunque Elementor es muy completo, lo ideal es que solo edites lo necesario para mantener tu web actualizada.

Puedes cambiar sin problema:

• Textos (descripciones, títulos, botones).
• Imágenes (fotos de productos, cabeceras, banners).
• Vídeos insertados desde YouTube o Vimeo.
• Enlaces en botones o menús.

No es recomendable que cambies por tu cuenta:

• La estructura general de la página (secciones completas o columnas).
• Colores y tipografías globales (pueden romper la coherencia del diseño).
• Widgets avanzados (formularios complejos, sliders, integraciones con otros sistemas).
• Configuración de plugins o ajustes del tema.

Si tienes dudas sobre un cambio importante, lo mejor es consultarlo antes con el equipo técnico para evitar errores en el diseño o funcionamiento.

1.3. Objetivo de este manual: editar sin complicaciones

El objetivo de esta guía es que aprendas a hacer cambios básicos en tu web con confianza. No necesitas experiencia previa en diseño ni programación: iremos paso a paso para que entiendas cómo funciona Elementor y sepas manejar lo esencial.

Concretamente, al terminar este manual sabrás:

• Acceder al editor de Elementor.
• Editar y actualizar textos, imágenes, botones y enlaces.
• Insertar nuevos elementos simples como vídeos o iconos.
• Previsualizar y guardar cambios de forma segura.

Este manual está pensado para ti, que quieres mantener tu web actualizada sin complicarte, de forma rápida y práctica.

2. Acceder a tu web

Antes de empezar a editar tu página con Elementor, es importante que sepas cómo entrar al panel de administración de WordPress, que es el lugar desde el cual podrás gestionar todo el contenido de tu web.

2.1. Cómo entrar al panel de administración (WordPress)

1. Abre tu navegador (Chrome, Edge, Firefox o el que uses normalmente).
2. Escribe en la barra de direcciones la URL de tu web y añade al final /wp-admin.
   • Ejemplo: www.tudominio.com/wp-admin
3. Se abrirá la pantalla de acceso a WordPress.
4. Introduce tu usuario y contraseña.
5. Pulsa el botón Acceder.

2.2. Recuperar o cambiar tu contraseña

Si no recuerdas tu clave de acceso:

1. Haz clic en ¿Olvidaste tu contraseña?
2. Escribe tu correo electrónico o nombre de usuario.
3. Recibirás un email con un enlace para restablecer tu contraseña.

Consejo: utiliza siempre contraseñas seguras que combinen letras, números y símbolos.

2.3 Estructura básica del panel de WordPress

Cuando accedas al panel de WordPress verás un menú lateral con varias opciones. Las más importantes para ti son:

• Escritorio: resumen de tu web.
• Entradas: donde se crean y gestionan los artículos de tu blog.
• Páginas: donde están todas las páginas principales de tu web (Inicio, Servicios, Contacto…).
• Medios: la biblioteca donde se guardan imágenes, vídeos y documentos que subas.
• Comentarios: si tu web tiene habilitados los comentarios en el blog.
• Elementor: configuración y herramientas del plugin de Elementor.
• Apariencia: configuración del tema y menús (no recomendable tocar sin ayuda).
• Plugins: funcionalidades adicionales de tu web (normalmente gestionadas por el equipo técnico).
• Usuarios: lista de usuarios que tienen acceso a la web.
• Ajustes: configuración general (idioma, zona horaria, etc.).

Recuerda: para editar el contenido de una página no lo harás desde aquí directamente, sino entrando a Páginas > [Nombre de la página] > Editar con Elementor (esto lo veremos en el punto 3).

3. Editar el contenido de tu web con Elementor

Elementor es el constructor visual que utilizamos para que puedas cambiar fácilmente textos, imágenes, botones y otros elementos de tu web. Lo más importante es que todo lo verás en tiempo real, tal y como quedará publicado.

3.1. Qué páginas puedes modificar tú mismo

En tu web hay partes que puedes actualizar sin problema:

• Páginas con información básica (Inicio, Sobre nosotros, Contacto, Servicios…).
• Textos, imágenes, botones y enlaces dentro de esas páginas.
• Secciones sencillas como testimonios, banners o bloques de información.

Mejor no modificar por tu cuenta:

• Cabecera (menú principal) y pie de página (footer), ya que afectan a toda la web.
• Formularios avanzados, galerías dinámicas o integraciones técnicas.

3.2. Cómo abrir Elementor desde una página

1. En el panel lateral de WordPress, ve a Páginas > Todas las páginas.
2. Coloca el ratón sobre la página que quieras editar.
3. Haz clic en el botón azul Editar con Elementor.
4. Se abrirá el editor visual de Elementor en una nueva pantalla.

3.3. La interfaz de Elementor: panel lateral, lienzo y barra superior

Cuando se carga Elementor verás tres zonas principales:

1. Panel lateral izquierdo
   • Aquí tienes los widgets (elementos que puedes añadir: texto, imagen, vídeo, botón, iconos, etc.).
   • En la parte inferior encontrarás:
     • Ajustes de página (para colores o ancho de contenido).
     • Historial de cambios (para deshacer errores).
     • Vista previa adaptable (móvil, tablet, escritorio).
     • El botón Actualizar (para guardar los cambios).
2. Lienzo central (tu página en vivo)
   • Es la vista de tu web, donde verás directamente lo que cambies.
   • Aquí podrás arrastrar y soltar widgets desde el panel lateral.
   • Todo se organiza en secciones (bloques grandes), columnas (subdivisiones) y widgets (elementos concretos).
3. Barra superior
   • Te permite volver al escritorio, salir de Elementor o previsualizar la página.

3.4 Editar textos, imágenes y botones

• Texto: haz clic sobre él, escribe en el panel lateral y verás el cambio en tiempo real.
• Imagen: haz clic sobre la imagen, pulsa “Elegir imagen” y selecciona una nueva desde la biblioteca de medios.
• Botón: edita el texto en el panel lateral y añade el enlace al que debe llevar.

3.5 Guardar los cambios y previsualizar

• Vista previa: haz clic en el icono del ojo para ver cómo quedará tu página antes de publicarla.
• Actualizar: cuando estés seguro, pulsa el botón verde Actualizar (esquina inferior izquierda).
• Si no actualizas, los cambios se perderán al salir.

3.6 Cómo usar el historial y recuperar versiones anteriores

Si cometes un error:

1. Abre el menú inferior del panel lateral.
2. Pulsa en Historial.
3. Podrás ver los cambios recientes (acciones) o incluso versiones anteriores completas de la página.
4. Selecciona la versión correcta y restáurala.

4. Añadir y actualizar imágenes, vídeos y enlaces

Una de las tareas más comunes al actualizar tu web es cambiar imágenes, insertar vídeos o modificar enlaces. Con Elementor lo puedes hacer de manera muy intuitiva y en tiempo real.

4.1. Subir imágenes a la Biblioteca de Medios

1. Haz clic sobre la imagen que quieras sustituir en la página.
2. En el panel lateral pulsa Elegir imagen.
3. Se abrirá la Biblioteca de Medios de WordPress, donde puedes:
   • Seleccionar una imagen que ya tengas subida.
   • Subir una nueva desde tu ordenador con el botón Subir archivos.
4. Haz clic en Insertar medio y automáticamente la imagen se actualizará en tu página.

4.2. Reemplazar imágenes en Elementor

Si lo que quieres es cambiar una imagen ya colocada en la web:

• Haz clic sobre ella.
• Selecciona una nueva desde la biblioteca.
• Pulsa en Actualizar para guardar los cambios.

4.3. Insertar vídeos de YouTube o Vimeo

1. Arrastra el widget Vídeo desde el panel lateral al lugar donde quieras colocarlo.
2. En el panel izquierdo pega la URL del vídeo (por ejemplo: https://youtube.com/...).
3. Configura las opciones disponibles:
   • Autoplay (reproducir automáticamente).
   • Silencio (activar sonido solo si el usuario lo permite).
   • Iniciar en (marcar el minuto exacto desde el que se reproducirá).

4.4. Crear botones y añadir enlaces

Los botones son fundamentales para guiar a los visitantes hacia acciones importantes (reservar, contactar, comprar…).

1. Arrastra el widget Botón al área deseada.
2. En el panel lateral escribe el texto del botón (ejemplo: “Contactar ahora”).
3. En el campo Enlace, introduce la dirección a la que quieres que lleve:
   • Una página interna (ejemplo: /contacto).
   • Una web externa (ejemplo: https://instagram.com/tunegocio).
   • Un correo electrónico (ejemplo: mailto:info@tudominio.com).
   • Un número de WhatsApp (ejemplo: https://wa.me/34600000000).
4. Ajusta estilo, color y tamaño en la pestaña Estilo.

4.5. Recomendaciones de tamaño y peso de las imágenes

• Resolución óptima: 1200 px de ancho máximo para banners grandes y 800 px para imágenes normales.
• Peso recomendado: menos de 300 KB por imagen.
• Formato: JPG para fotos, PNG para imágenes con transparencias, y WEBP si tu hosting lo permite (más ligero).
• Alt text: no olvides rellenar el campo “Texto alternativo” al subir la imagen, mejora el SEO y la accesibilidad.

5. Trabajar con contenedores y widgets

En Elementor, todo el diseño se organiza con contenedores. Dentro de esos contenedores se colocan los widgets (texto, imágenes, botones, vídeos, etc.).

Piensa en ello así:

• El contenedor es la “caja” que estructura tu diseño.
• Los widgets son los elementos que colocas dentro de esa caja.
• Puedes meter un contenedor dentro de otro (contenedores anidados) para crear estructuras más complejas.

5.1. Diferencia entre contenedores y widgets

• Contenedor: define la estructura (puede ser una sola fila, varias columnas internas, o bloques anidados).
• Widget: es el contenido concreto que colocas dentro (texto, imagen, vídeo, botón, etc.).

5.2. Añadir un nuevo contenedor

1. Haz clic en el botón “+” del lienzo central.
2. Elige el diseño Flexbox y escoge disposición del contenedor (horizontal, vertical o cuadrícula).
3. Arrastra los widgets que quieras al interior.

Ejemplo práctico:

• Creas un contenedor horizontal.
• Dentro añades un widget Imagen (izquierda) y un widget Texto + Botón (derecha).
• Acabas de montar un bloque clásico de “Imagen + Descripción + CTA”.

5.3. Contenedores anidados

Si necesitas subdividir más el diseño, puedes insertar un contenedor dentro de otro.
Ejemplo:

• Un contenedor principal con fondo de color.
• Dentro, dos contenedores anidados (uno para texto y otro para una imagen).

Esto te permite maquetar diseños más complejos de forma ordenada.

5.4. Widgets más utilizados

Los widgets más básicos y prácticos para ti serán:

• Encabezado: títulos o subtítulos.
• Texto: párrafos o descripciones.
• Imagen: fotos o logotipos.
• Botón: llamadas a la acción.
• Vídeo: insertar vídeos desde YouTube o Vimeo.
• Icono: pequeños gráficos.
• Separador / Espaciador: para dar aire entre bloques.
• Galería: mostrar varias imágenes.

Consejo: céntrate en estos widgets básicos y evita los avanzados si no estás familiarizado.

5.5. Ajustar diseño, márgenes y espaciado

Cada contenedor y widget tiene 3 pestañas de configuración:

1. Contenido: lo que muestra (texto, imagen, enlace…).
2. Estilo: colores, tipografías, fondos, bordes.
3. Avanzado: márgenes, rellenos, animaciones, responsividad.

Ejemplo práctico:
Si un bloque se ve demasiado pegado a otro:

1. Selecciona el contenedor.
2. Entra en la pestaña Avanzado.
3. Ajusta el relleno o margen.

Esto asegura que tu web se vea ordenada y con aire entre los elementos.

6. Entradas de blog y noticias

La sección de blog o noticias de tu web es el lugar donde puedes publicar artículos, novedades o información útil para tus clientes. Esto ayuda a mantener tu web activa, mejora el posicionamiento en Google y ofrece más contenido de valor.

En WordPress, las entradas se gestionan desde el editor de bloques, no desde Elementor, para que sea más sencillo y rápido.

6.1. Diferencias entre páginas y entradas

• Páginas: son estáticas (Inicio, Contacto, Servicios…). No cambian con frecuencia.
• Entradas: son dinámicas (artículos del blog, noticias, novedades). Se publican de manera periódica y se muestran en orden cronológico en la sección Blog.

Es decir, si quieres añadir contenido nuevo de forma continua, hazlo siempre en Entradas.

6.2. Crear una nueva entrada

1. En el panel de WordPress, ve a Entradas > Añadir nueva.
2. Escribe el título en el bloque superior (ejemplo: “5 consejos para aprovechar tu servicio”).
3. En el editor de bloques añade:
   • Texto: párrafos explicativos.
   • Encabezados: para estructurar el contenido (H2, H3).
   • Imágenes: subidas desde la Biblioteca de Medios.
   • Vídeos o enlaces si los necesitas.

6.3. Añadir imagen destacada, categorías y etiquetas

En la barra lateral derecha encontrarás los ajustes principales de la entrada:

• Imagen destacada: es la foto principal que representará tu artículo en el listado del blog.
• Categorías: sirven para organizar los artículos por temas generales (ejemplo: Noticias, Consejos, Eventos).
• Etiquetas: son palabras clave más específicas que ayudan a clasificar y relacionar tus entradas.
• Extracto: un breve resumen del artículo (en algunas plantillas aparece como introducción en la vista previa del blog).

6.4. Publicar, programar o guardar en borrador

Cuando termines tu entrada tienes varias opciones:

• Guardar borrador: si aún no quieres publicarla.
• Vista previa: para ver cómo se verá antes de publicarla.
• Publicar: la entrada será visible en tu blog al instante.
• Programar: puedes elegir la fecha y hora exacta en la que quieres que aparezca publicada.

7. Formularios

En tu web hay dos apartados clave que siempre deben estar actualizados:

1. El formulario de contacto, que es la vía por la que los usuarios se comunican contigo.
2. Los textos legales obligatorios (Política de Privacidad, Política de Cookies y Aviso Legal), que son requisitos del RGPD y deben aparecer visibles en todas las páginas de la web.

7.1. Revisar mensajes recibidos en el formulario de contacto

Dependiendo del plugin instalado, los formularios funcionan de dos maneras:

• Envío por correo electrónico: los mensajes llegan directamente al email de tu empresa (ejemplo: info@tudominio.com).
• Registro en WordPress: algunos plugins guardan también los mensajes dentro del panel de WordPress (en un apartado llamado “Formularios” o similar).

Para comprobar que todo funciona:

1. Haz una prueba enviando un mensaje desde tu propia web.
2. Revisa que llega al correo correcto.
3. Si no llega, revisa la carpeta de spam o consulta al soporte técnico.

7.2. Cambiar el email de destino del formulario

1. Entra a la página, mediante «Editar con Elementor», con el formulario que quieres cambiar.
2. Selecciona el formulario.
3. Busca en las opciones del widget «Correo electrónico«.
4. Cambia la dirección al correo deseado (ejemplo: info@tudominio.com).
5. Guarda los cambios.

8. Recursos adicionales y próximos pasos

Además de este manual básico, tienes a tu disposición recursos adicionales que te ayudarán a seguir aprendiendo y sacar el máximo partido a tu web creada con WordPress y Elementor.

8.1. Videotutoriales para repasar Elementor

Si quieres ver en vídeo algunos de los pasos explicados:

• Documentación oficial de Elementor:
  https://elementor.com/help/
• Canal de YouTube de Elementor:
  https://www.youtube.com/c/elementor

En estos recursos encontrarás explicaciones prácticas, ejemplos visuales y actualizaciones sobre nuevas funciones.

8.2. Soporte y ayuda de WordPres

Si necesitas aprender más sobre WordPress en general:

• Soporte oficial en español:
  https://es.wordpress.org/support/
• Guía de inicio rápido en WordPress:
  https://es.wordpress.org/support/article/first-steps-with-wordpress/

8.3. Acciones recomendadas tras tu Kit Digital

• Mantén actualizado tu blog o sección de noticias para mejorar tu posicionamiento en Google.
• Revisa cada cierto tiempo los textos legales (privacidad, cookies y aviso legal).
• Haz cambios pequeños y frecuentes en vez de grandes modificaciones de golpe, así reduces errores.
• Si necesitas crecer, considera integrar nuevas funciones (tienda online, automatizaciones, reservas, etc.).

8.4. Contacto con Kvilar para soporte personalizado

Si en algún momento necesitas ayuda, nuestro equipo está disponible para apoyarte:

📞 822 09 99
✉️ info@kvilar.es
🌐 kvilar.es

Nos encargamos de resolver incidencias, aplicar mejoras avanzadas y acompañarte en la gestión digital de tu negocio.