Por padrão, os pontos do carrossel no GemPages geralmente são centralizados abaixo do slider. No entanto, dependendo do seu layout e estilo de design, você pode querer alinhar os pontos à esquerda.
Este artigo mostrará como alinhar os pontos do carrossel à esquerda no GemPages usando um código CSS personalizado simples, sem necessidade de experiência em programação.
Por que alinhar os pontos do carrossel à esquerda?
Os pontos do carrossel alinhados à esquerda podem ajudar a melhorar tanto a consistência do design quanto a experiência do usuário em determinados layouts.
Aqui estão alguns casos de uso comuns:
1. Alinhar layouts de conteúdo à esquerda
Se seus títulos, texto e botões estiverem alinhados à esquerda, os pontos centralizados podem parecer visualmente inconsistentes. Alinhar os pontos à esquerda cria um layout mais limpo e equilibrado.
2. Crie um design minimalista moderno
Muitos designs de sites modernos usam elementos de navegação alinhados à esquerda para uma aparência mais profissional e com estilo editorial.
3. Melhorar o espaçamento no layout para dispositivos móveis.
Em dispositivos móveis, pontos alinhados à esquerda podem se ajustar melhor ao conteúdo empilhado e evitar espaçamento inadequado.
Como alinhar os pontos do carrossel à esquerda
Passo 1: Selecione o elemento do carrossel
Dentro do editor GemPages, clique no elemento Carrossel onde você deseja que os pontos fiquem alinhados à esquerda.
Passo 2: Abra o painel de código personalizado
Clique com o botão direito do mouse no elemento Carrossel e selecione Código personalizado.
O painel de Código Personalizado será exibido.
Passo 3: Adicione o código CSS
Adicione o seguinte código CSS no campo Código Personalizado:
.gL5w7OAVEa .gp-carousel-dot-container { justify-content: start !important; }
Exemplo:
.YOUR_ELEMENT_ID .gp-carousel-dot-container { justify-content: start !important; }
Isso garante que o estilo personalizado se aplique apenas ao elemento de carrossel específico que você selecionou.
Obrigado por seus comentários