Fondo fijo a una sola columna de elementor (tablets y celular)

Para que la imagen de fondo se mantenga fija en una columna específica de Elementor y funcione en tablets y móviles, asegúrate de que el código CSS se aplica correctamente. Aquí te dejo el código ajustado:

1. Añadir el código en WordPress:
   • Instala y activa el plugin "Code Snippets" en tu sitio de WordPress si aún no lo has hecho.
   • Ve a "Snippets" > "Añadir nuevo".
   • Pega el siguiente código en el área de código.
   • Asigna un nombre a tu snippet, por ejemplo, "Fondo fijo para columna específica en Elementor".
   • Guarda y activa el snippet.

add_action('wp_head', function () { ?>
<style>
@media screen and (max-width: 1024px) {
.elementor-element-a4e4fd0 .elementor-widget-wrap {
background-attachment: fixed !important;
}
}
@media screen and (max-width: 767px) {
.elementor-element-a4e4fd0 .elementor-widget-wrap {
background-attachment: fixed !important;
}
}
</style>
<?php });

2. Asigna la clase a la columna de Elementor:
   • Ve al editor de Elementor y abre la página https://web.com/gael/.
   • Selecciona la columna donde deseas aplicar la imagen de fondo fija.
   • En la pestaña "Avanzado", añade la clase elementor-element-a4e4fd0 en el campo "Clase CSS" si no se asigna automáticamente al cargar el ID.

Este código CSS aplica el fondo fijo a la columna específica con data-id="a4e4fd0" solo en pantallas de tamaño máximo de 1024px (tablets y móviles).

Explicación del código:

• @media screen and (max-width: 1024px): Aplica los estilos CSS dentro del bloque solo a pantallas de hasta 1024px de ancho.
• .elementor-element-a4e4fd0 .elementor-widget-wrap: Selector CSS que apunta a la columna específica y su contenedor de widgets.
• background-attachment: fixed !important;: Fija la imagen de fondo y usa !important para asegurar que el estilo se aplique, sobrescribiendo otros estilos que puedan interferir.

Con estos pasos, la imagen de fondo se mantendrá fija en la columna específica solo en dispositivos móviles y tablets.

Código para móviles y tablets de Apple (IOs)

add_action('wp_head', function () { ?>
<style>
@media screen and (max-width: 1024px) {
.elementor-element-a4e4fd0 .elementor-widget-wrap {
background-attachment: fixed !important;
-webkit-background-attachment: fixed !important; /* para Safari en iOS */
}
}
@media screen and (max-width: 767px) {
.elementor-element-a4e4fd0 .elementor-widget-wrap {
background-attachment: fixed !important;
-webkit-background-attachment: fixed !important; /* para Safari en iOS */
}
}
</style>
<?php });

¿Por qué Apple no permite el fondo fijo en celulares?