Como criar um controle deslizante de galeria de fotos personalizado no Divi
Publicados: 2019-06-10Todos nós sabemos que os controles deslizantes são ótimos para atrair os usuários com serviços, produtos ou páginas em destaque em um local conveniente acima da dobra. Alguns sites (estou pensando em fotógrafos) precisam apresentar uma ou mais de suas galerias de fotos na página inicial. Usar um controle deslizante para isso pode ser uma boa opção. No entanto, você pode não ter considerado apresentar sua galeria de fotos em um controle deslizante como este.
Neste tutorial, vou mostrar uma maneira fácil de incorporar galerias de imagens Divi em seus slides para criar um controle deslizante de galeria de fotos totalmente personalizado no Divi. O truque é criar uma galeria de imagens WordPress na área de conteúdo do seu controle deslizante. Em seguida, você só precisa ter certeza e selecionar a opção de usar a Galeria Divi em vez do estilo Galeria do WordPress padrão. É super fácil e divertido de implementar.
Vamos começar.
Espiada
Aqui está uma prévia do controle deslizante da galeria de fotos que construiremos neste tutorial.
Baixe o Layout do Slider da Galeria de Fotos Personalizada GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter a seguinte configuração:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Cerca de 6 a 8 imagens a serem usadas para a imagem do controle deslizante e galeria de fotos
Depois disso, você terá uma tela em branco para começar a construir algumas guias de foco no Divi.
Habilite a opção Divi Gallery em Divi Theme Options
Divi permite que você substitua a exibição padrão da Galeria do WordPress por uma exibição da Galeria Divi. Portanto, sempre que você cria uma galeria WordPress e a incorpora em um módulo, a galeria é exibida como uma galeria usando o Módulo Divi Gallery. Basicamente, isso permite adicionar galerias de imagens Divi a qualquer módulo do Divi Builder. Em nosso caso, adicionaremos uma Galeria Divi ao módulo deslizante.
Para alterar a configuração, navegue até Divi> Opções de tema. Em seguida, na guia Geral, clique para habilitar a opção Divi Gallery.
É isso! Agora, o código de acesso padrão da Galeria do WordPress exibirá uma galeria de fotos no estilo Divi.
Criação do controle deslizante da galeria de fotos personalizada no Divi
A Seção e Linha
Para começar, vá em frente e crie uma seção regular com uma linha de uma coluna.
Em seguida, atualize as configurações de linha da seguinte forma:
- Largura: 100% (portanto, o controle deslizante terá largura total no celular)
- Preenchimento: 0 px superior, 0 px inferior
- Cantos arredondados: 20px
Construindo o Conteúdo do Slider
Em seguida, adicione um módulo deslizante à linha.
Abra as configurações do controle deslizante e exclua um dos slides que foi adicionado por padrão. Em seguida, clique no ícone de engrenagem no slide para abrir as configurações do slide.
Em seguida, atualize o conteúdo do slide com o seguinte:
- Título: Nossa Galeria
- Botão: Ver tudo
- Corpo: Esta é a nossa galeria. Confira.
Abaixo da área de conteúdo do corpo, clique no botão Adicionar mídia.
No pop-up Biblioteca de mídia, selecione a guia Criar galeria no canto superior esquerdo. Em seguida, selecione 6 imagens que deseja usar para a galeria e clique no botão “Criar uma nova galeria” no canto inferior direito.
Isso o levará à página de edição da categoria dentro do pop-up. Ignore as configurações da galeria no canto superior direito porque os estilos da Divi Gallery substituirão essas configurações da Galeria do WordPress.
Em seguida, clique no botão “Inserir Galeria”.
Isso coloca um shortcode da galeria no conteúdo do módulo do controle deslizante. Se você quiser que a galeria seja exibida após o texto do corpo atual, certifique-se de colocar o código curto após o conteúdo.
Agora você tem uma galeria embutida no estilo Divi exibida na área de conteúdo do seu módulo deslizante. Coisas muito legais!
Vamos continuar atualizando nosso conteúdo de slide adicionando uma imagem de slide principal.
Agora que temos o conteúdo do controle deslizante pronto, salve suas configurações para o slide 1.
Configurações do controle deslizante
Certifique-se de salvar as configurações para o slide individual. Em seguida, atualize as seguintes configurações de design para o controle deslizante principal. Isso garantirá que as atualizações de design afetem todos os slides individuais que você adicionar.
Borda da imagem e sombra da caixa
- Cantos arredondados da imagem: 20 px
- Largura da borda da imagem: 40 px (desktop), 0 px (tablet)
- Cor da borda da imagem: rgba (0,0,0,0)
- Sombra da caixa de imagem: veja a captura de tela
- Posição horizontal da sombra da caixa: -170 px
- Posição vertical da sombra da caixa: -220 px
- Força de propagação da sombra da caixa: -60px
- Cor da sombra: rgba (255,255,255,0,2)
Título e corpo do texto
- Fonte do título: Karla
- Alinhamento do texto do título: à direita
- Tamanho do texto do título: 48px
- Altura da linha do título: 1,3em
- Tamanho do corpo do texto: 16px
- Espaçamento entre letras do corpo: 2px
- Altura da linha corporal: 2em
Estilos de botão
- Tamanho do texto do botão: 16 px
- Cor de fundo do botão: # 333333
- Largura da borda do botão: 0 px
- Raio da borda do botão: 20 px
- Espaçamento entre letras dos botões: 2 px
- Fonte do botão: Karla
- Peso da fonte do botão: negrito
- Ícone do botão: veja a captura de tela
- Alinhamento do botão: direito
- Margem do botão: -5em à direita
- Padding de botão (desktop): 3em à esquerda, 5em à direita
- Preenchimento do botão (telefone): 2em à esquerda, 6em à direita
- Sombra da caixa de botão: veja a captura de tela
- Posição vertical da sombra da caixa: 0 px
- Força de propagação da sombra da caixa: 20 px (desktop), 10 px (telefone)
- Cor da sombra: #ffffff
Slider Padding
- Preenchimento: 10% superior, 10% inferior
Adicionando um gradiente de fundo ao slide 1
Agora que temos o estilo do controle deslizante no lugar, podemos adicionar um gradiente de fundo personalizado ao nosso slide individual. Abra as configurações do slide 1 e atualize o seguinte:
- Cor do gradiente de fundo à esquerda: # 6d0066
- Cor certa do gradiente de fundo: # 000000
- Tipo de gradiente: radial
- Direção radial: canto superior esquerdo
Criando o slide 2
Para criar o segundo slide, podemos apenas duplicar o slide 1 usando o ícone de duplicar. Em seguida, abra as configurações do slide duplicado (slide 2).
Neste ponto, você pode atualizar o conteúdo do novo slide conforme necessário. Por exemplo, você pode adicionar uma nova imagem de slide e gerar outro shortcode de incorporação de galeria para adicionar uma nova galeria de fotos ao slide.
Em seguida, atualize o gradiente de fundo da seguinte maneira:
- Cor do gradiente de fundo à esquerda: # 0c71c3
Resultado final
Aqui está o resultado final.
E aqui está a aparência do controle deslizante no tablet e no telefone.
E aqui está o controle deslizante, se você remover as imagens dos slides para que apenas o conteúdo do slide e a galeria sejam exibidos.
Pensamentos finais
A capacidade de incorporar uma galeria divi dentro do Módulo Slider do Divi abre a oportunidade de criar alguns controles deslizantes de galeria de fotos de ótima aparência com pouco esforço. Esperançosamente, este tutorial irá lhe dar alguma inspiração para criar alguns lindos controles deslizantes da galeria de fotos.
Para obter mais informações sobre esta técnica de incorporação da galeria divi (incluindo dicas sobre como estilizar a galeria divi incorporada), verifique o post sobre como incorporar galerias Divi em alternadores.
Estou ansioso para ouvir de você nos comentários.
Saúde!