Sitio web avanzado: Personalización de fondos de elementos

Personaliza el fondo de los elementos de tu sitio web para que combine con la imagen de tu empresa mediante diseños creativos. Elige imágenes de la galería, sube tus propias imágenes, usa fondos de vídeo o aplica colores y degradados para darle un toque único a tu sitio.

Editar el fondo de un elemento

Sigue los pasos que se indican a continuación para acceder al editor de diseño y cambiar el fondo de un elemento.

Paso a paso:

1. Haz clic con el botón derecho en el elemento y haz clic en Editar diseño.

   Si estás en modo flexible o en Editor 2.0, selecciona Editar diseño en el menú flotante para abrir el panel de diseño.

2. Diríjase a la sección Antecedentes.
3. Según el elemento, seleccione Color, Imagen o Vídeo.
4. Seleccione el fondo deseado.
5. Para crear un carrusel de imágenes, seleccione varias imágenes y haga clic en Listo.
   • Una vez creado el control deslizante, puede configurar los ajustes de las diapositivas, como el estilo de transición y la velocidad, desde el menú de diseño de filas.
   • Se pueden aplicar al control deslizante cualquiera de las otras opciones de imagen de fondo, como Superposición de fondo, Posicionamiento y Estilo de visualización.
6. Opcional: Si selecciona una sola imagen para el fondo, active la opción "No optimizar esta imagen" para evitar la optimización.

Configuración de imágenes de fondo

Tras configurar una imagen o un control deslizante, aparecen opciones de configuración adicionales. Estos ajustes varían, pero los más comunes incluyen:

Estilos de visualización de imágenes

Estas opciones controlan cómo se ajusta, se repite o se estira una imagen dentro de un contenedor:

• Cubrir: Estira la imagen para cubrir toda el área. Se mantiene la relación de aspecto, pero es posible que se recorten partes de la imagen.
• Imagen completa: Muestra la imagen completa sin recortarla. Esto puede provocar que aparezcan barras alrededor de la imagen, dependiendo del tamaño del contenedor.
• Mosaico: Repite la imagen a su tamaño original en un patrón para rellenar el área.
• Sin repetición: Muestra la imagen completa una sola vez en su tamaño original.

Posicionamiento y efectos

• Tipo de posición de la imagen: Disponible en el Editor 2.0 y en el modo flexible. Seleccione Predeterminado, Estático o Parallax.
• Posición: Determina dónde se coloca la imagen, por ejemplo, en el centro, arriba o abajo. En el editor 2.0 y en el modo flexible, debe configurar la posición para cada tamaño de pantalla.

Utilizar fondos de vídeo

Utiliza fondos de vídeo para añadir movimiento desde YouTube, Vimeo o Dailymotion.

Limitaciones

• Vídeos de fondo de YouTube: Los vídeos de YouTube muestran el título y el nombre del usuario que los subió antes de que comience el vídeo. Dado que no se pueden eliminar sin modificar manualmente el CSS, recomendamos utilizar otras fuentes de vídeo para los fondos.
• Asistencia con dispositivos móviles: Los vídeos de YouTube no se reproducen automáticamente en dispositivos iOS. En los iPhones en modo de bajo consumo, aparecerá un botón de reproducción en lugar de reproducir automáticamente cualquier vídeo.
• Audio: Los vídeos de fondo no reproducen sonido. Si necesita audio, utilice el widget de vídeo.
• Rendimiento: Los vídeos consumen más ancho de banda y pueden distraer a los usuarios. Úselos con moderación y considere reducir la opacidad del vídeo para lograr un efecto más sutil.
• Listas de reproducción de Dailymotion: Elimine los parámetros de la lista de reproducción de la URL. Utilice únicamente el enlace directo al vídeo. Por ejemplo, utilice https://www.dailymotion.com/video/x60ktex en lugar de un enlace que contenga ?playlist=.

Paso a paso: