Personaliza el fondo de los elementos para que coincida con el tema de tu negocio con diseños llamativos y creativos. Elija entre imágenes de fondo personalizadas en la galería de fotos, cargue sus propias imágenes, use fondos de video o aplique colores y degradados para agregar un toque único a su sitio.
Nota
Para ver los fondos de página, consulte Fondo del tema.
Cualquier archivo (texto, imagen, video, audio) que se cargue en el sistema estará disponible de forma pública. No se deberá cargar información personal ni confidencial. Para eliminar el archivo por completo, elimine el archivo desde el Administrador de medios.
Para obtener más información sobre las directrices de medios, consulte Medios: directrices y especificaciones.
Recomendación
Todos los videos de fondo de YouTube muestran el título y la herramienta de carga del video antes de que el video comience a cargarse. No hay forma de eliminar estos elementos sin cambiar el CSS de forma manual. Debido a este cambio, no se recomienda utilizar videos de YouTube para los videos de fondo.
Para editar el fondo de los elementos:
-
Vaya a la sección Fondo .
-
Dependiendo del elemento, seleccione Color, Imagen o Video y seleccione el fondo deseado.
-
Algunos elementos también tienen la opción de controles deslizantes de imagen. Para crear un control deslizante de imagen, selecciona varias imágenes y haz clic en Listo. Para obtener información detallada sobre los controles deslizantes de fondo, consulte Controles deslizantes de imagen de fondo.
-
Para obtener detalles sobre las opciones de color, consulte Selector de color
-
-
(Opcional) Al seleccionar una imagen para un fondo, haga clic en el botón de alternancia No optimizar esta imagen para evitar la optimización si se emplea una sola imagen (esta configuración aparecerá después de que se seleccionó una imagen).
Algunos contenedores ofrecen la opción de agregar un control deslizante de imagen de fondo.
Para crear un control deslizante de fondo:
-
Vaya a la sección Fondo .
-
Haga clic en Imagen.
-
Haga clic en el signo + y seleccione varias imágenes en lugar de una sola imagen del selector de imágenes.
-
Haga clic en Listo.
-
(Opcional) Una vez creado el control deslizante, puede establecer la configuración de la diapositiva, como el estilo de transición de la diapositiva y la velocidad de la diapositiva, desde el menú de diseño de filas.
-
(Opcional) Cualquiera de las otras opciones de imagen de fondo, como Superposición de fondo, Posicionamiento y estilo de visualización, se puede aplicar al control deslizante.
Una vez que se configuró una imagen o un control deslizante de imagen, estarán disponibles opciones de configuración adicionales.
Si bien las opciones pueden variar, las dos más comunes son:
-
Estilos de visualización de imágenes: estas son las distintas formas en que puede controlar cómo se muestran las imágenes dentro del contenedor. Estas opciones le permiten ajustar cómo una imagen se ajusta, se repite o se estira para cubrir el área. Hay cuatro opciones:
-
Cubierta: Estira la imagen para cubrir toda el área sin perder su relación de aspecto (dado que está cubriendo el área del contenedor, partes de la imagen pueden estar cortadas).
-
Imagen completa: muestra la imagen completa. Si bien la imagen no se cortará, es posible que aparezcan barras a ambos lados o por encima y por debajo de la imagen, según el tamaño del contenedor.
-
Mosaico: Repite la imagen completa en su tamaño original en un patrón de mosaico para rellenar el área. Si la imagen es más grande que el contenedor, no se repetirá.
-
Sin repetir: muestra la imagen completa en su tamaño original sin repetirla. Si la imagen es más grande que el contenedor, se cortará. Si es más pequeño que el contenedor, habrá espacio alrededor de la imagen.
-
-
Tipo de posición de la imagen (solo Editor 2.0 y modo flexible): seleccione entre Predeterminado, Estático o Paralaje.
-
Posición: esta configuración determina dónde se coloca la imagen, como en el centro, arriba, abajo, a la izquierda o a la derecha del contenedor. La configuración de posición funciona junto con las opciones de visualización de la imagen para controlar cómo se muestra la imagen.
-
En el Editor 2.0 y el modo flexible, la posición de la imagen de fondo se establece según el tamaño de la pantalla.
-
Emplee los fondos de video para agregar rápidamente un video de YouTube, Vimeo o Dailymotion. Los fondos de video pueden llamar la atención de un visitante con contenido en movimiento y agregar un aspecto moderno y elegante a cualquier sitio.
Recomendación
Todos los videos de fondo de YouTube muestran el título y la herramienta de carga del video antes de que el video comience a cargarse. No hay forma de eliminar estos elementos sin cambiar el CSS de forma manual. Debido a este cambio, no se recomienda utilizar videos de YouTube para los videos de fondo.
Para agregar un fondo de video a un contenedor:
-
Ten un video listo para subir o la URL de un video que se pueda compartir y que se cargue en YouTube, Vimeo o Dailymotion.
-
Haga clic con el botón derecho en el elemento al que desea agregar este fondo y, a continuación, haga clic en Editar diseño.
-
Vaya a la sección Fondo .
-
Haz clic en la pestaña Video. Tiene las siguientes opciones:
-
Haga clic en Cargar video y seleccione el video que desea cargar. Puede cargar hasta 200 MB en todos los formatos. Puede cargar video desde su dispositivo, Facebook, Instagram, Dropbox, Google Drive o grabar un video usando su cámara sitio web.
-
Pegue el URL del video que desea usar en el cuadro de texto del URL de YouTube, Vimeo o Dailymotion.
Nota
Los videos de YouTube no son compatibles con dispositivos móviles, ya que no se reproducen de forma automática en dispositivos iOS.
-
-
Los videos de YouTube no son compatibles con dispositivos móviles, ya que no se reproducen de forma automática en dispositivos iOS.
-
Los iPhone con batería en modo de baja potencia no reproducen automáticamente videos en un sitio y, en su lugar, mostrarán un botón de reproducción.
-
Los videos de fondo no reproducirán sonidos.
-
Los videos pueden tomar tiempo y ancho de banda para cargar y pueden distraer a los usuarios de enlaces o texto importantes de su página, así que úselos con moderación.
-
Considere agregar una superposición con una mayor opacidad del fondo del video para que el efecto sea más sutil.
-
Cuando agregue un video de Dailymotion que forma parte de una lista de reproducción, asegúrese de agregar solo el enlace directo al video (y omita el parámetro de la lista de reproducción, que se parece a esto:?playlist-x1x2f3). Si el URL del video tiene este parámetro, bórrelo. Por ejemplo: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 sería https://www.dailymotion.com/video/x60ktex
Esto se debe a que la relación de aspecto de la imagen o el video es diferente a la del contenedor.
Dependiendo de su objetivo, esto puede ser difícil de abordar. Si la imagen o el video deben caber en un contenedor que cambia en función del tamaño de la pantalla, no existe una solución perfecta para evitar que se corte. La parte visible de la imagen o el video variará en función del tamaño de la pantalla.
Si no es necesario que la imagen cubra toda el área, se puede emplear la opción Imagen completa en las opciones de visualización de la imagen (consulte la sección de este artículo, Configuración de la imagen de fondo).
Actualmente, los fondos de video no tienen una opción de video completo. Ajustar la relación de aspecto del video original puede solucionarlo.
Para obtener más información sobre la relación de aspecto, consulte Medios: directrices y especificaciones.
Si el video se agrega a través de un enlace, el problema podría estar relacionado con la configuración de privacidad del video. Para comprobarlo, intente emplear un enlace de video diferente. Si el nuevo video funciona, sugiere que la configuración de privacidad del video original impide que se muestre en el sitio.
La solución dependerá de la plataforma que aloje el video, y su equipo de soporte puede ayudar.