Cuando insertamos enlaces muy largos en el Elementor, sobre todo en textos o botones, es común que en los celulares aparezcan exceder el ancho de la pantalla, perjudicando la experiencia del usuario. Para ello, te enseñaré a dividir líneas de enlaces largos, cadenas largas, etc.
Para solucionar esto de forma sencilla, puedes utilizar un CSS personalizado directamente en el widget o contenedor.
Paso a paso:
- Abra el editor de Elementor y seleccione el widget o contenedor donde se inserta el enlace.
- Ir a la pestaña Avanzado → CSS personalizado (disponible en Elementor Pro).
- Pegue el siguiente código:
selector { salto-de-palabra: salto-de-palabra; }
- Hacer clic en Para actualizar y ver en el móvil: ahora los enlaces largos se ajustarán automáticamente, rompiendo la línea sin salir de la pantalla.
Consejo: Si quieres aplicar la regla a todo un contenedor, simplemente añade el CSS. De esta forma, todo el texto y los enlaces que contenga heredarán el comportamiento.
🎥 Videotutorial
Para ver el proceso en acción, mira el video a continuación donde te muestro cómo 1 minuto y 30 segundos Cómo aplicar este ajuste en Elementor:
Español 
Português do Brasil 
English (UK)