Edición y Gestión de Contenido

Esta sección te enseñará a gestionar y personalizar el contenido de tu sitio web en Loftsite utilizando Elementor, un editor visual de arrastrar y soltar que permite crear y modificar páginas de manera sencilla, sin necesidad de conocimientos avanzados de programación. Elementor es una herramienta intuitiva y flexible que te permitirá editar tu sitio web en tiempo real desde la misma página que deseas modificar, haciendo que el proceso sea más rápido y eficiente.

1. Acceso al Editor Elementor

1.1 Acceder directamente desde la página

La forma más rápida y recomendada de acceder a Elementor es directamente desde la página que deseas editar. Esto te permite realizar cambios en tiempo real sin tener que navegar por el backend de WordPress.

1. Navegar a tu sitio web:
   • Accede al frontend de tu sitio web, es decir, la vista pública del sitio que ven tus usuarios.
2. Editar con Elementor:
   • Desde la barra superior del menú de WordPress (visible cuando estás logueado como administrador), haz clic en el botón «Editar con Elementor» que aparecerá en la parte superior de cualquier página.
   • Inmediatamente, serás redirigido al editor visual de Elementor, donde podrás modificar la página sin cambiar de vista.

1.2 Acceder desde el backend de WordPress

También puedes acceder a Elementor desde el backend si lo prefieres.

1. Acceder a una página existente:

   • En el menú de WordPress, dirígete a Páginas > Todas las páginas.
   • Selecciona la página que deseas editar y haz clic en «Editar con Elementor».

2. Crear una nueva página:

   • Para crear una nueva página, ve a Páginas > Añadir nuevo y selecciona «Editar con Elementor» para empezar a trabajar con el editor visual desde cero.

2. Uso de Elementor para la personalización de contenido

2.1 Estructura y secciones básicas

En Elementor, las páginas se construyen a partir de secciones, columnas y widgets:

1. Secciones:

   • Las secciones son los bloques más grandes que dividen tu página. Puedes agregar secciones completas para separar diferentes áreas de contenido.
   • Cada sección puede contener una o varias columnas.

2. Columnas:

   • Dentro de una sección, puedes dividir el espacio en columnas. Esto te permitirá organizar los widgets de forma más precisa.
   • Por ejemplo, puedes tener una sección con dos columnas: una para texto y otra para imágenes.

3. Widgets:

   • Los widgets son los elementos individuales que puedes añadir a cada columna. Elementor ofrece una amplia gama de widgets predefinidos, que se pueden personalizar y ajustar fácilmente.

2.2 Tipos de Widgets en Elementor

1. Encabezados:

   • Los encabezados son títulos que ayudan a estructurar y dar jerarquía al contenido. Puedes cambiar el tamaño, color, fuente y alineación del texto.

2. Párrafos de texto:

   • Agrega bloques de texto para desarrollar información. Elementor te permite personalizar el formato del texto, incluyendo la fuente, el tamaño, la alineación y el espaciado.

3. Botones:

   • Usa botones para crear llamadas a la acción (CTA). Puedes personalizar el texto del botón, añadir enlaces y modificar el diseño (color, borde, tamaño).

4. Imágenes:

   • Inserta imágenes arrastrando el widget de Imagen y selecciona una imagen desde la Biblioteca Multimedia de WordPress.

5. Videos:

   • Añade videos de plataformas como YouTube o Vimeo. Solo necesitas pegar el enlace del video en el widget correspondiente, y podrás ajustar el tamaño y la forma en que se muestra.

6. Formularios:

   • Con el widget de Formulario, puedes crear formularios de contacto, de suscripción o cualquier otro tipo de formulario. Elementor ofrece integración con varias herramientas de marketing y CRM para gestionar las entradas del formulario.

7. Galerías y Sliders:

   • Usa galerías para mostrar múltiples imágenes de forma interactiva o sliders que rotan entre varias imágenes automáticamente. Puedes personalizar la velocidad, la transición y el estilo.

8. Listas de íconos:

   • Agrega listas visualmente atractivas con íconos para cada elemento. Estas listas son útiles para destacar características, beneficios o pasos.

      

2.3 Añadir nuevos widgets

1. Arrastrar y soltar widgets:

   • Desde el panel izquierdo de Elementor, selecciona el widget que deseas y arrástralo a la sección o columna donde quieras colocarlo.

2. Organización de contenido:

   • Puedes reorganizar fácilmente los widgets dentro de las columnas y secciones simplemente arrastrándolos a nuevas posiciones. Elementor también te permite duplicar widgets si necesitas reutilizar el mismo diseño en varias áreas de la página.

      

2.4 Personalización de estilo

1. Estilo visual:

   • Una vez que has añadido un widget, puedes personalizar su apariencia. Haz clic en el widget y utiliza el panel izquierdo para modificar el color, la tipografía, el tamaño, y los bordes.

2. Efectos de animación:

   • Elementor incluye una sección de animaciones que te permite agregar efectos como desvanecimiento, desplazamiento, zoom, etc., a los widgets. Esto es especialmente útil para captar la atención del usuario.

3. Configuraciones avanzadas:

   • La pestaña Avanzado te permite configurar márgenes, padding, visibilidad por dispositivo, y otros detalles que mejoran la personalización y responsividad (adaptación a móviles y tablets) de la página.

      

2.5 Guardar y publicar

1. Guardar cambios:
   • Una vez que has terminado de personalizar tu página, asegúrate de hacer clic en «Actualizar» para guardar los cambios.
2. Vista previa:
   • Utiliza la opción de Vista previa para ver cómo se verá la página antes de hacerla pública. Esto te permitirá verificar la disposición de los elementos y el estilo en diferentes dispositivos.

2.6 Edición de contenido multimedia

1. Imágenes:

   • Inserta imágenes desde la Biblioteca Multimedia de WordPress o sube nuevas imágenes directamente desde tu ordenador.
   • Personaliza el tamaño, el borde y el estilo de la imagen. También puedes añadir efectos de hover para cambiar la imagen cuando el usuario pasa el cursor.

2. Videos:

   • Agrega videos fácilmente utilizando el widget de Video. Solo necesitas pegar la URL del video en el campo correspondiente. Elementor te permite ajustar la reproducción automática, el mute y la presentación de controles.

3. Galerías y sliders:

   • Usa los widgets de Galería o Slider para mostrar múltiples imágenes. Puedes personalizar el número de columnas, la transición entre imágenes y el efecto de desplazamiento.

Captura de pantalla sugerida: Vista del panel de Elementor mostrando la organización de widgets y las opciones de personalización.

Video tutorial recomendado: Cómo usar Elementor para personalizar páginas de manera rápida y eficiente.

Conclusión

Elementor es una herramienta intuitiva y potente que facilita la edición y gestión de contenido en Loftsite. Al usar Elementor desde la página que deseas editar, puedes realizar cambios en tiempo real, visualizar los resultados de inmediato, y personalizar cada aspecto del diseño de manera sencilla. Con su amplia gama de widgets y opciones de personalización, puedes crear páginas visualmente impactantes que se adapten perfectamente a tu negocio o proyecto sin necesidad de escribir código.