Plantillas gratuitas de Elementor para implementar tutoriales de diseño de fondo de vídeo

¿Quiere que su sitio web capte la atención de sus visitantes nada más abrirlo? Entonces quizá quiera probarVídeo de fondo. En comparación con las imágenes estáticas o los fondos de colores sólidos, los fondos de vídeo son mucho más atractivos visualmente, ya que transmiten atmósfera, estado de ánimo e incluso marca. Conseguir este tipo de efectos en Elementor no es complicado en absoluto, especialmente si utilizas uno de esos fondos listos para usar.Plantillas gratuitas.

¿Dónde son apropiados los fondos de vídeo?

Antes de utilizarlo, analiza brevemente para qué escenarios son más adecuados los fondos de vídeo:

• Imagen de cabecera de la página de inicio (Hero Section)
  Utilice el vídeo para mostrar escenarios de uso de productos, dinámicas de equipo e historias de marca.
• Flyer/página de aterrizaje
  Mejore la presentación visual y aumente el tiempo de permanencia del usuario.
• Página de eventos o publicaciones
  Demostrar una interpretación rítmica y emocional para impulsar las emociones del usuario.
• Banners o bloques de sección con fondo acentuado
  El vídeo no roba el espectáculo y sólo se utiliza como fondo cinético.

Paso 1: Elige una plantilla gratuita con fondo de vídeo

En la secciónbiblioteca de plantillas(o plataformas proporcionadas por terceros como Envato Elements, TemplateMonster, ElementorKit), hay bastantes plantillas de página gratuitas que ya tienen un módulo de fondo de vídeo incorporado.

Método de búsqueda de palabras clave recomendado:

• Héroe de vídeo
• Página de aterrizaje con vídeo
• Plantilla de vídeo para la página de inicio de Elementor

Puedes importar estas plantillas directamente sin tener que construir la estructura desde cero. Si no tienes una plantilla de vídeo, puedes empezar eligiendo una plantilla de página de inicio limpia de la biblioteca de plantillas

Ve al editor de Elementor y cambia el fondo al tipo "Video".

Paso 2: Sustituir el contenido de fondo del vídeo

Después de importar la plantilla en Elementor, simplemente haga clic en ese bloque en la página con el fondo de vídeo y siga los pasos que se indican a continuación:

• Selección de contenedores o módulo "segmentos interiores(Sección)
• En el panel izquierdo, cambie a Estilo pestaña (de una ventana) (informática)
• Selección del tipo de fondo Vídeo

• Pegue la dirección de su vídeo en el campo "Enlace de vídeo" (se recomiendan los vídeos MP4 o YouTube) Si desea utilizar un vídeo local, también puede subirlo a su biblioteca multimedia y copiar el enlace URL y pegarlo aquí.

• Ajuste otros parámetros según sea necesario, por ejemplo:
  • Activar/desactivar la reproducción automática
  • Silenciar o no
  • Hacer o no un bucle
  • Activar o no la superposición para mejorar la legibilidad del texto

Paso 3: Optimizar la jerarquía y legibilidad del texto

Mucha gente ignora fácilmente un punto cuando utiliza fondos de vídeo: el vídeo mola, pero demasiado movimiento en el fondo afectará a la lectura del texto. En este punto, puedes utilizar algunas técnicas de enmascaramiento para solucionarlo:

• Añada una superposición de color semitransparente y ajuste la transparencia a 0,3 (es decir, 30%), deje el tipo como Clásico o pruebe con colores degradados.

• Utilice texto blanco en negrita y establezca una sombra
• Asegúrese de que el contenido en primer plano esté siempre por encima del vídeo y evite utilizar fuentes pequeñas y de colores claros.

Elementor te permite ajustar libremente estos detalles en las secciones Superposición de fondo o Estilo de texto.

Paso 4: Adaptación al rendimiento móvil

La compatibilidad con la reproducción automática de fondos de vídeo en teléfonos móviles no es ideal y algunos navegadores pueden desactivar la reproducción automática. Así que se recomienda que usted:

• En "receptivoOculta el fondo de vídeo móvil en "Ajustes" y sustitúyelo por una imagen estática.

• O utiliza archivos de vídeo de menor tamaño para reducir la presión de carga

Elementor te permite establecer fondos separados para diferentes dispositivos, perfecto para esta necesidad de cambio.

Paso 5: Mantener la velocidad de carga de la página

El fondo de vídeo es agradable a la vista, pero si no está optimizado correctamente, puede hacer que la página de inicio sea lenta. Puedes manejarlo así:

• Vídeo comprimidoDocumentación, en 2-3MB
• Utilización de vídeo especializado CDN o enlaces incrustados de YouTube
• Limitar el área de reproducción de vídeo, no toda la página
• Añade el plugin lazy loading para retrasar la carga de los vídeos

resúmenes

Añadir un fondo de vídeo con una plantilla gratuita de Elementor es más fácil de lo que crees. Si eliges la plantilla adecuada, sustituyes el enlace del vídeo, ajustas el estilo del texto de primer plano y optimizas un poco el rendimiento, podrás crear una página dinámica que sea llamativa y útil.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres