Cómo Alinear a la Izquierda los Puntos del Carrusel

De forma predeterminada, los puntos del Carrusel en GemPages generalmente se centran debajo del control deslizante. Sin embargo, dependiendo del diseño y estilo de su página, es posible que desee alinearlos hacia el lado izquierdo.

Este artículo le mostrará cómo alinear a la izquierda los puntos del Carrusel en GemPages utilizando código CSS personalizado simple, sin necesidad de experiencia en programación.

¿Por Qué Alinear los Puntos del Carrusel a la Izquierda?

Los puntos del Carrusel alineados a la izquierda pueden ayudar a mejorar tanto la coherencia del diseño como la experiencia del usuario en ciertos diseños de página.

A continuación se presentan algunos casos de uso comunes:

1. Coincidir con Diseños de Contenido Alineado a la Izquierda

Si sus encabezados, textos y botones están alineados a la izquierda, los puntos centrados pueden verse visualmente inconsistentes. Alinear los puntos a la izquierda crea un diseño más limpio y equilibrado.

2. Crear un Diseño Minimalista Moderno

Muchos diseños de sitios web modernos utilizan elementos de navegación alineados a la izquierda para lograr una apariencia más profesional y de estilo editorial.

3. Mejorar el Espaciado del Diseño en Dispositivos Móviles

En dispositivos móviles, los puntos alineados a la izquierda pueden encajar mejor con el contenido apilado y evitar un espaciado irregular.

Cómo Alinear a la Izquierda los Puntos del Carrusel

Paso 1: Seleccione el Elemento Carrusel

Dentro del editor de GemPages, haga clic en el elemento Carrusel donde desea que los puntos queden alineados a la izquierda.

Paso 2: Abra el Panel de Código Personalizado

Haga clic derecho en el elemento Carrusel y seleccione Código Personalizado.

El panel de Código Personalizado aparecerá.

Paso 3: Añada el código CSS

Agregue el siguiente código CSS en el campo de Código Personalizado:

.gL5w7OAVEa .gp-carousel-dot-container {

 justify-content: start !important;

}

Ejemplo:

.SU_ELEMENTO_ID .gp-carousel-dot-container {

 justify-content: start !important;

}

Esto garantiza que el estilo personalizado se aplique únicamente al elemento Carrusel específico que seleccionó.