Editar la página de inicio con Elementor: añadir módulos (texto, imágenes, botones, etc.)

Aprender a añadir módulos básicos es una habilidad fundamental para diseñar páginas con Elementor. Este capítulo te mostrará cómo añadir texto, imágenes, botones y otros elementos comunes a mano, y ajustar sus estilos para dar a tu página de inicio su primera forma.

Preparación: Entrar en el modo de edición de Elementor

1. Inicie sesión en el backend de WordPress, vaya a "Páginas" → Busque "Inicio" (o la página que desee editar), haga clic en "Editar".
2. Haz clic en el botón "Editar con Elementor" (azul con el icono de Elementor) en la parte superior de la página para acceder a la interfaz de edición visual.

Una vez dentro, la interfaz se divide en tres secciones:

• Izquierda: Panel del módulo(contiene todos los elementos que se pueden añadir)
• Centro: zona de edición(Visualización en tiempo real de los efectos de la página)
• Derecha: Panel de estilo(Los estilos detallados pueden ajustarse cuando se selecciona un elemento)

Paso 1: Añadir el módulo "Título" (título de texto)

Los títulos son el "esqueleto" de la página y sirven para guiar a los visitantes por la jerarquía de contenidos.

1. Encontrar el módulo de cabeceraEn el panel de módulos de la izquierda, localice el módulo "Título" (icono "T") en la categoría "Básico".
2. Arrastrar y soltar para añadir a la páginaMantenga pulsado el módulo 'Título', arrástrelo hasta la posición '+ Arrastrar elemento aquí' en el área de edición central y suelte el ratón. En este punto la página aparecerá con un título por defecto 'Este es el título'.
3. Modificar el contenido del títuloSeleccione el módulo de título que acaba de añadir y aparecerá un panel de edición a la derecha:
   • En "Contenido" → "Texto del título", elimine el texto predeterminado e introduzca su título (por ejemplo, "Bienvenido a mi blog personal").
   • Seleccione el nivel en "Nivel de encabezado" (H1 es el más grande, adecuado para encabezados principales; H2 es el segundo más grande, adecuado para subencabezados, y se selecciona en función del nivel de contenido).
4. Ajustar el estilo del títuloHaz clic en la pestaña "Estilos" del panel derecho para personalizarlo:
   • estilo caligráficoSeleccione su fuente preferida (por ejemplo, "Microsoft Black", "Arial") en el cuadro desplegable "Fuente".
   • magnitudArrastre el control deslizante "Tamaño de fuente" o introduzca directamente el valor (el tamaño de título recomendado está entre 24-48px).
   • colorHaga clic en la casilla "Color del texto" para seleccionar el color del título (por ejemplo, negro, azul oscuro).
   • alinearse en el orden correctoHaga clic en el botón "Alineación del texto" para ajustar el título a la izquierda, al centro o a la derecha (se recomienda centrar el título principal de la página de inicio).

Paso 2: Añadir el módulo "Párrafo" (cuerpo del texto)

Los párrafos se utilizan para mostrar detalles, como una sinopsis, una descripción, etc.

1. Añadir módulo de párrafoBusque el módulo Párrafo (el icono es el símbolo de un párrafo) en la categoría "Básico", a la izquierda, y arrástrelo y suéltelo debajo del módulo Título.
2. Modificar el contenido del párrafoSelecciona el módulo de párrafo e introduce el contenido (por ejemplo: "Aquí comparto mis lecciones de vida y mis notas de estudio, ¡bienvenido a intercambiar a menudo!) Bienvenido a compartir!".
3. Optimizar los estilos de párrafoCambie a la pestaña Estilos:
   • tamaño de letra: Se recomienda un ajuste de 16-18px (para facilitar la lectura).
   • Alto de la filaAjuste a 1,5-1,8 veces (para un espaciado de texto más cómodo).
   • colorElija un color que se distinga del título (por ejemplo, gris oscuro para evitar que se parezca demasiado al color de fondo).

Paso 3: Añadir el módulo "Imagen" (insertar imagen)

Las imágenes dan vida a la página y se recomienda elegir imágenes claras y relevantes (por ejemplo, fotos personales, imágenes de productos, paisajes).

1. Cargar o seleccionar imágenesBusca el módulo "Imágenes" en la categoría "Básico" de la izquierda y arrástralo a la parte inferior del párrafo. Selecciona el módulo "Imágenes" y haz clic en "Seleccionar imagen" en "Contenido" → "Imagen" a la derecha:
   • Si la imagen ya está en su ordenador, haga clic en "Cargar archivo" → Seleccione la imagen → Haga clic en "Seleccionar".
   • Si ha cargado antes, puede seleccionar directamente la imagen existente en la Biblioteca multimedia.
2. Ajuste de la pantallaCambie a la pestaña Estilos:
   • tallasEn "Anchura", ajuste la proporción de la imagen en la página (por ejemplo, 100% significa anchura de pantalla completa, 80% significa más estrecha).
   • esquina redondeadaArrastre el control deslizante Radio del borde para redondear las esquinas de la imagen (cuanto mayor sea el valor, más pronunciadas serán las esquinas redondeadas).
   • fig. experiencia traumática que persigue a alguienActiva "Sombra de cuadro" para añadir una ligera sombra a la imagen (para darle un aspecto más estratificado).
3. Añadir descripción de la imagen (opcional)Introducir descripciones de las imágenes (por ejemplo, "Mis fotos de viaje") en "Contenido" → "Texto alternativo" ayuda a los motores de búsqueda a entender el contenido de las imágenes y mejora el SEO.

Paso 4: Añadir el módulo "Botón" (clic guiado)

Los botones suelen utilizarse para guiar a los visitantes a realizar acciones, como "Ver más", "Contacto", "Comprar ahora", etc.

1. Módulo Añadir botónBusque el módulo "Botones" en la categoría "Básico" de la izquierda y arrástrelo y suéltelo debajo de la imagen.
2. Configurar el contenido de los botones y los enlacesCompruebe el módulo de botones, a la derecha en "Contenido":
   • ejemplaresEscriba el texto del botón (por ejemplo, "Ver mis mensajes").
   • enlaceHaga clic en la casilla situada junto a "Dinámico" e introduzca la dirección del enlace (por ejemplo, la dirección de la página de su blogroll o un enlace externo).
     • Si enlaza con una página de la estación, puede hacer clic en el icono "Seleccionar página" situado a la derecha del cuadro de entrada para seleccionar directamente la página de destino.
3. Diseñar estilos de botonesCambia a la pestaña "Estilo" para crear botones llamativos:
   • color: Elija el blanco para el "Color del texto" y colores vivos para el "Color de fondo" (por ejemplo, azul, naranja, para armonizar con el color principal de la página).
   • tallasTamaño del botón: Seleccione "Mediano" o "Grande" en "Tamaño del botón" para que el botón sea más fácil de pulsar.
   • geometríaAjuste el "Radio del borde" a 5-10px (las esquinas ligeramente redondeadas son más agradables estéticamente).
   • ** Efecto hover **: Haz clic en la pestaña "hover" para definir el color (por ejemplo, intensificar el color) cuando el ratón pasa por encima, para mejorar la sensación de interactividad.

Paso 5: Ajustar el espaciado entre módulos (para una página más ordenada)

Después de añadir varios módulos, puede haber problemas de espaciado entre ellos demasiado cerca o demasiado lejos, y habrá que ajustar la disposición:

1. Módulos seleccionadosHaga clic en el borde del módulo (aparece un borde azul).
2. Ajuste de los márgenes exteriores: En el panel derecho "Avanzado" -> "Margen", ajuste la distancia entre el módulo y los elementos superior e inferior (por ejemplo, "Margen superior" se ajusta a 30px para aumentar la separación con el módulo superior).
3. alinearsePulse y mantenga pulsado Ctrl (o Command tecla) Seleccione varios módulos a la vez y haga clic en el botón "Alinear" de la barra de herramientas superior (por ejemplo, "Alinear al centro") para alinear los elementos de forma más ordenada.

Paso 6: Guardar y previsualizar

1. Guardar cambiosHaga clic en el botón "Actualizar" situado en la esquina inferior izquierda de la página (se recomienda guardar los cambios a tiempo después de cada modificación).
2. Vista previa del efectoHaga clic en el botón "Vista previa" de la esquina superior izquierda y seleccione "Vista previa de escritorio", "Vista previa de tableta" y "Vista previa de teléfono móvil" para comprobar el efecto de visualización en distintos dispositivos (asegúrese de que el texto no se superpone y la imagen no se distorsiona en el teléfono móvil).

Consejos para principiantes

• Los módulos pueden añadirse repetidamente: si necesita más de un párrafo o imagen, puede arrastrar y soltar directamente el módulo correspondiente varias veces.
• Borrar módulo: Después de seleccionar un módulo, pulse el teclado Delete o haga clic en el icono "Papelera" situado en la parte superior del módulo.
• Copiar módulo: tras seleccionar un módulo, haga clic en el icono "Copiar" para copiar rápidamente elementos del mismo estilo (sólo hay que modificar el contenido).

Con los pasos anteriores, has dominado las habilidades básicas de adición de módulos de Elementor. ¡A continuación, puede tratar de añadir "icono", "divisor", "lista" y otros módulos para hacer la página de inicio más rica!