Personalizar el botón ‘Ir Arriba’ y barra de scroll en Divi

Si alguna vez has entrado a un sitio web y sentiste que el diseño era pulido, profesional, coherente — incluso en esos pequeños detalles que normalmente pasan desapercibidos — hay buenas chances de que el dueño se tomó el tiempo de personalizar el botón de ir arriba y la barra de scroll. Son elementos que la mayoría ignora completamente, pero que en conjunto dicen mucho sobre el cuidado que pones en tu trabajo. En este tutorial te muestro exactamente cómo personalizar el botón ir arriba en Divi y adaptar la barra de desplazamiento para que todo el sitio hable el mismo idioma visual.

¿Por qué personalizar estos elementos en lugar de dejarlos por defecto?

La respuesta corta: porque el botón de ir arriba que Divi trae por defecto es funcional pero genérico. El color naranja estándar, el tamaño predeterminado, el borde cuadrado — todo eso puede chocar fuertemente con un diseño de marca que tiene sus propios colores y su propia personalidad. Lo mismo pasa con la barra de desplazamiento: el gris del sistema operativo no combina con nada, y aunque es un detalle sutil, el ojo entrenado lo percibe.

Lo bueno es que Divi te da el control completo vía CSS personalizado, sin necesidad de plugins adicionales. Unos pocos selectores bien colocados son suficientes para que esos dos elementos pasen de ser elementos genéricos del sistema a ser parte integral de tu identidad visual.

Dónde escribir el CSS en Divi

Antes de ver los selectores, hay que saber dónde va el código. En Divi, el CSS personalizado se escribe en Divi → Opciones del tema → Generales → CSS personalizado. Es el lugar correcto para esto porque se aplica en todo el sitio, se carga de forma eficiente y no depende de ningún archivo de tema hijo (aunque si tienes un tema hijo activo, también puedes meterlo en style.css — ambas opciones funcionan).

Consejo: Si ya tienes CSS personalizado en Opciones del tema, agrega los bloques nuevos al final y usa comentarios como /* botón ir arriba */ y /* barra de scroll */ para mantener el código organizado. Con el tiempo ese campo puede volverse un caos si no llevas orden.

Personalizar el botón de ir arriba

El selector que apunta al botón es .et_pb_scroll_top.et-pb-icon. Con ese selector tienes control sobre el color de la flecha (que en Divi es un ícono de fuente), el color de fondo, el radio de borde y el tamaño. Un ejemplo base para que adaptes con tus colores:

.et_pb_scroll_top.et-pb-icon {
  color: #ffffff;
  background: #e8001f;
  border-radius: 50%;
  font-size: 20px;
  margin-right: 10px;
}

Aquí color controla el color de la flecha (el ícono en sí), background el fondo del botón, border-radius: 50% lo convierte en un círculo perfecto, y margin-right te permite alejarlo del borde derecho de la pantalla si el diseño lo necesita.

El estado hover: un detalle que marca la diferencia

La interactividad es lo que separa un botón funcional de uno cuidado. Con el selector .et_pb_scroll_top.et-pb-icon:hover puedes cambiar los colores cuando el usuario pasa el cursor por encima — una buena práctica es oscurecer ligeramente el fondo o invertir los colores para dar feedback visual:

.et_pb_scroll_top.et-pb-icon:hover {
  color: #ffffff;
  background: #b5001a;
}

Puedes también agregar una transición suave para que el cambio no sea brusco:

.et_pb_scroll_top.et-pb-icon {
  color: #ffffff;
  background: #e8001f;
  border-radius: 50%;
  font-size: 20px;
  margin-right: 10px;
  transition: background 0.25s ease;
}

Con transition: background 0.25s ease el cambio de color en hover se anima en 0.25 segundos. Es suficiente para sentirse fluido sin que parezca lento.

🎓 ¿Quieres profundizar en personalización CSS con Divi?
En uxdivi.com/cursos tienes acceso a contenido premium donde trabajamos flujos completos de diseño con Divi 5, incluyendo casos de uso de CSS personalizado para identidad de marca. Accede como suscriptor y aplica todo esto en proyectos reales.

Personalizar la barra de desplazamiento

La barra de scroll usa selectores especiales con el prefijo ::-webkit-scrollbar. Actualmente funcionan bien en Chrome, Edge y Safari — Firefox tiene su propia sintaxis más limitada (scrollbar-color y scrollbar-width), aunque los selectores webkit también se toleran. Para la mayoría de los proyectos con clientes, cubrir webkit es suficiente.

Los tres selectores principales que necesitas:

Un bloque de CSS completo para la barra, usando los colores corporativos del ejemplo anterior:

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #e8001f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b5001a;
}

El border-radius en el thumb hace que los extremos del bloque deslizable sean redondeados, lo cual da un look más moderno. El selector :hover en el thumb funciona igual que en el botón — un cambio sutil de color que le dice al usuario que ese elemento es interactivo.

Consejo: Mantener el width de la barra entre 6px y 10px es el rango que mejor funciona en desktop. Más estrecha que 6px se vuelve difícil de agarrar con el cursor; más ancha que 10px empieza a comerse espacio visual de la página. En móvil la barra del sistema operativo se sobrepone y estos estilos normalmente no tienen efecto — no te preocupes por eso.

Coherencia visual: usar el mismo color en ambos elementos

Este es el punto que más impacto tiene en el resultado final. Si tu color corporativo es, digamos, un rojo #e8001f, ese mismo color debe estar en el fondo del botón de ir arriba Y en el thumb de la barra de scroll. Cuando los dos elementos comparten el mismo tono, el ojo los percibe como parte de un sistema coherente, no como dos decisiones de diseño separadas.

Lo mismo aplica para el radio de borde: si el botón es un círculo perfecto (border-radius: 50%), considera usar un radio intermedio para la barra (border-radius: 4px) en lugar de llevarlo al extremo — las barras de scroll perfectamente redondas en los extremos a veces se ven extrañas cuando son largas.

Si más adelante cambias la paleta del sitio, tendrás un solo lugar donde actualizar estos dos bloques de CSS. Por eso recomiendo dejar un comentario que los agrupe: /* identidad de marca — actualizar aquí si cambia color primario */.

Errores comunes y cómo evitarlos

El primero, y más frecuente: escribir el CSS en el CSS personalizado de una página individual en lugar del CSS global en Opciones del tema. El botón de ir arriba y la barra de scroll son elementos globales — si el CSS solo está en una página, solo funcionará ahí y en el resto del sitio seguirá el estilo por defecto.

El segundo error es olvidar el estado hover. Técnicamente el botón funciona sin él, pero sin feedback visual el sitio se siente menos interactivo, menos moderno. Es literalmente una línea de CSS — no hay excusa para saltarla.

El tercero es usar colores sin tomar en cuenta el contraste. Si el fondo del botón es claro, la flecha necesita ser oscura para que se vea bien. Si el thumb de la barra es del mismo tono que el track, el usuario no va a poder distinguirlo. Verifica el contraste antes de darlo por bueno — herramientas como Colour Contrast Analyser o WebAIM Contrast Checker son rápidas y gratuitas.

Y el cuarto, algo que veo seguido: aplicar estos estilos y no verificarlos en distintos tamaños de pantalla. La barra de scroll casi siempre se ve igual en desktop, pero en tablets intermedias a veces aparecen comportamientos inesperados. Usar alguna de las herramientas para pruebas de diseño responsive que revisan el sitio en múltiples viewports te ahorra sorpresas en el futuro.

Consejo: Si tienes varios colores de marca y no estás seguro de cuál usar en estos elementos, una regla útil: usa el color de acción principal — el mismo que usas en los botones "call to action" del sitio. Así hay coherencia entre todos los elementos interactivos.

Casos de uso: cuándo priorizar esta personalización

• Sitios de marca personal o portfolio: donde cada detalle construye la percepción de profesionalismo. Un botón genérico puede romper la ilusión de que el diseño es completamente a medida.
• Sitios de agencia o freelance entregados a clientes: personalizar estos elementos muestra que fuiste más allá del mínimo, lo cual justifica el precio y genera referidos.
• Tiendas WooCommerce: donde el usuario hace scroll extenso por catálogos de productos. Una barra de scroll bien diseñada hace que la experiencia de navegación se sienta más refinada.
• Landing pages largas de ventas o webinars: el botón de ir arriba se convierte en un elemento de navegación real cuando la página supera 3-4 scrolls completos.
• Sitios con tema oscuro (dark mode): la barra de scroll del sistema operativo casi siempre rompe el esquema oscuro — personalizarla es prácticamente obligatorio en esos casos.

En contraste, si el proyecto es un sitio sencillo de 2-3 páginas, con poco scroll y sin identidad de marca muy definida, puedes dejar estos elementos por defecto sin que afecte significativamente la experiencia. No todo necesita personalización por el simple hecho de poder hacerla.

Estas mismas técnicas de CSS en Opciones del tema las puedes aplicar a otros elementos que Divi trae con estilos genéricos: el ícono del menú hamburguesa en móvil es otro candidato clásico que con un par de líneas CSS pasa de genérico a parte del diseño. Y si trabajas con formularios de contacto en Divi, también puedes personalizar el botón de formulario para que ocupe el ancho completo y se vea más como un CTA que como un botón de sistema.

🎓 ¿Quieres aprender más sobre Divi y diseño web profesional?
En uxdivi.com/cursos encontrarás contenido específico sobre personalización avanzada de Divi, desde CSS quirúrgico hasta flujos de diseño completos con Divi 5. Accede como suscriptor y aplica esto en cada proyecto que entregues.

Recomendaciones para aplicarlo bien

1. Define tus colores antes de escribir el CSS. Anota el hex de tu color primario y el color de hover (que suele ser el mismo oscurecido entre un 15-20%). Así no tienes que adivinar sobre la marcha.
2. Agrupa el CSS de identidad visual en un bloque comentado. Un comentario como /* colores corporativos — actualizar si cambia la paleta */ al inicio del bloque te ahorra tiempo en el futuro.
3. Prueba el hover en desktop antes de dar por terminado. Parece obvio, pero es el paso que más se salta cuando uno está terminando un proyecto con prisa.
4. Verifica el contraste del botón. La flecha blanca sobre fondo rojo oscuro funciona bien; flecha gris sobre fondo gris claro no se ve. Tómate 30 segundos para verificarlo con cualquier herramienta de contraste online.
5. Documenta los valores en el handoff al cliente. Si entregas el proyecto y el cliente algún día quiere cambiar el color del botón, que sepa exactamente dónde ir y qué cambiar. Eso es parte del trabajo profesional.

Preguntas frecuentes

¿Estos estilos CSS funcionan en Divi 4 y Divi 5?

Sí, los selectores .et_pb_scroll_top.et-pb-icon y los pseudo-elementos ::-webkit-scrollbar funcionan en ambas versiones. Divi 5 introduce cambios importantes en su arquitectura, pero el botón de ir arriba conserva la misma clase CSS, así que el código funciona sin modificación.

¿El selector de barra de scroll funciona en Firefox?

Los selectores ::-webkit-scrollbar son compatibles con Chrome, Edge y Safari. Firefox usa su propia sintaxis: scrollbar-color: #e8001f #f1f1f1; y scrollbar-width: thin; aplicadas al elemento html o body. Para cubrir los dos motores, puedes incluir ambos bloques. En la práctica, la mayoría de los usuarios de diseñadores web hispanohablantes usan Chrome, así que webkit suele ser suficiente.

¿Puedo animar el botón de ir arriba para que aparezca con un efecto?

Sí. Divi ya le aplica una animación de fade-in nativa cuando el usuario hace scroll hacia abajo. Si quieres agregar una transición adicional en el hover, añadir transition: background 0.25s ease, transform 0.2s ease; al selector base te permite animar tanto el color como el tamaño (con transform: scale(1.1) en el hover). Mantén las transiciones cortas — más de 0.4 segundos empieza a sentirse lento.

¿Puedo cambiar el ícono de la flecha por otro símbolo?

Divi usa su propia fuente de íconos (ETmoudle) para renderizar la flecha, y cambiarla requiere sobrescribir el contenido del pseudo-elemento ::before del botón. Es posible, pero va un paso más allá de lo que cubre este tutorial. Si necesitas un ícono completamente distinto, la alternativa más limpia es ocultar el botón nativo de Divi y crear uno propio con posición fija, lo cual da control total sobre el elemento visual.

Conclusión

Personalizar el botón de ir arriba y la barra de desplazamiento en Divi es una de esas tareas que toma diez minutos pero que tiene un impacto desproporcionado en la percepción de calidad del diseño. El CSS es simple, el lugar donde va es siempre el mismo, y el resultado — un sitio donde hasta los elementos secundarios respetan la identidad visual — es exactamente lo que diferencia a un freelance que entrega lo básico de uno que entrega un trabajo cuidado. Una vez que lo configuras correctamente en un proyecto, el proceso en el siguiente te toma la mitad del tiempo.

🎓 ¿Quieres dominar la personalización de Divi de forma completa?
En uxdivi.com/cursos tienes acceso a cursos premium donde trabajo la personalización de Divi desde las bases hasta flujos avanzados con Divi 5. Accede como suscriptor y empieza a entregar proyectos donde cada detalle tiene tu firma.