Si eres como yo, quizás has navegado por un sitio web en tu dispositivo móvil y has notado que el zoom automático en los formularios hace que sea difícil rellenarlos. El zoom automático en dispositivos móviles puede ser molesto para algunos usuarios, especialmente aquellos que tienen dificultades para ver el contenido en pantallas pequeñas. Pero no te preocupes, ¡hay una solución simple! En este tutorial, te mostraré cómo desactivar el zoom automático en los formularios de Elementor utilizando un código CSS que puedes agregar fácilmente a tu sitio web en WordPress.
Tabla de contenidos
Con Elementor Pro
Abre la página o publicación en la que quieres desactivar el zoom automático en los formularios.
Haz clic en el botón «Editar con Elementor» para abrir el editor de Elementor.
Selecciona el widget de formulario de Elementor que quieres personalizar.
Haz clic en la pestaña «Avanzado» en la barra lateral de configuración del widget.
Desplázate hacia abajo hasta la sección de «CSS personalizado» y haz clic en el botón «Agregar nuevo».
En el cuadro de «Selector», escribe
.elementor-field-textual, .elementor-field-select.En el cuadro de «CSS», copia y pega el siguiente código:
font-size: 16px;
max-height: 100px;
touch-action: manipulation;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
- Haz clic en el botón «Guardar» para guardar los cambios.
Sin Elementor Pro
Si no tienes la versión Pro de Elementor, aún puedes desactivar el zoom automático en los formularios de Elementor. Para hacerlo, deberás agregar el código CSS a través de la opción de personalizar en WordPress.
Accede a la sección de «Personalizar» de tu sitio web en WordPress y selecciona «CSS adicional».
Copia y pega el siguiente código en el cuadro de CSS adicional:
.elementor-field-textual,
.elementor-field-select {
font-size: 16px;
max-height: 100px;
touch-action: manipulation;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
- Guarda los cambios y actualiza tu sitio web.
Explicación del código
A continuación, te explicaré qué hace cada línea de código:
La primera línea de código,
.elementor-field-textual, .elementor-field-select, selecciona los campos de texto y las listas desplegables del formulario de Elementor.La segunda línea de código,
font-size: 16px, establece el tamaño de fuente predeterminado para los campos de texto y las listas desplegables.La tercera línea de código,
max-height: 100px, establece la altura máxima para las listas desplegables. Si tienes listas desplegables más largas, puedes ajustar el valor para que se ajuste a tus necesidades.La cuarta línea de código,
touch-action: manipulation, ayuda a mejorar la experiencia del usuario en dispositivos móviles.La quinta línea de código,
-webkit-text-size-adjust: none, desactiva el ajuste automático del tamaño del texto en dispositivos iOS.La sexta línea de código,
-ms-text-size-adjust: none, desactiva el ajuste automático del tamaño del texto en dispositivos Windows.La última línea de código,
text-size-adjust: none, desactiva el ajuste automático del tamaño del texto en otros dispositivos.
Con este código, deberías poder desactivar el zoom automático en los formularios de Elementor. Si tienes algún problema o pregunta, no dudes en preguntar.
