Inscreva-se no meu canal:
Oi pessoal
Hoje vamos ver como criar uma galeria no modelo Divi que mostra um texto ao passar o mouse sobre ela e também tem um link.
Isso é útil se quisermos criar um portfólio personalizado, receitas culinárias ou qualquer outra ideia que venha à mente.
O resultado será o seguinte:
Para isso usaremos o construtor DIVI e o aspecto final que o editor deve ter é o seguinte:
O primeiro passo é configurar a linha, é a seção verde da imagem anterior, quando você clicar nas três linhas horizontais você verá a seguinte tela e você deve deixar as opções como você vê aqui:
Agora adicionamos o módulo galeria com as seguintes opções:
Para adicionar as imagens temos que clicar no botão “Atualizar Galeria” e escolher as imagens que vamos adicionar:
Agora temos que adicionar em cada imagem o texto que queremos que apareça ao passar o mouse na imagem.
Vamos adicioná-lo no campo de legenda ao clicar em cada imagem:
No exemplo eu adicionei o seguinte link com um título e subtítulo:
<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>
Temos quase pronto, mas na falta de adicionar a folha de estilo parece que estamos muito longe do resultado final:
Agora é só adicionar o CSS. Para isso, clicamos nas opções do construtor, como mostra a imagem a seguir:
Adicionamos o css na tela a seguir:
O CSS que você deve adicionar é:
/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/ /*Hide the image title and default overlay effect*/ .et_pb_gallery_item h3, .et_overlay { display: none; } /*Set the position and size of the images and add an extra pixel to get rid of white space between images*/ .et_pb_gallery_grid .et_pb_gallery_image { position: absolute; width: calc(100% + 1px) !important; } .et_pb_gallery_caption { margin: 0 !important; } /*Set the colour of the caption text*/ .et_pb_gallery_caption a { color: #fff; } /*Set the font size and case for the title*/ b { font-size: 20px; text-transform: uppercase; } /*Set the position of caption text so it displays on to of the image on hover and add an outline*/ p.et_pb_gallery_caption { position: relative; background: rgba(0, 0, 0, .5); /*This is the colour of the image overlay on hover*/ border: none; outline: 5px solid rgba(255, 255, 255, .5); /*This is the colour of the border*/ outline-offset: -20px; /*This moves the border in a little from the edge*/ text-align: center; padding: 25% 5%; /*Adjust the first value if using more or less text*/ cursor: pointer; opacity: 0; /*Hide the caption until hover*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } /*Show the caption on hover*/ p.et_pb_gallery_caption:hover { opacity: 1; } /*Media queries: You will need to adjust these values if using more or less text*/ @media only screen and (max-width:1366px) { p.et_pb_gallery_caption { padding: 23.7% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1280px) { p.et_pb_gallery_caption { padding: 19% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1024px) { p.et_pb_gallery_caption { padding: 15% 5%; /*Adjust the first value if using more or less text*/ } } /*This media query make the gallery display as two columns rather than three on tablets in portrait*/ @media only screen and (min-width: 768px) and (max-width: 980px) { .et_pb_column .et_pb_grid_item:nth-child(2n+1) { clear: both !important; } .et_pb_gutters1 .et_pb_grid_item:nth-child(n) { width: 50% !important; margin: 0 !important; clear: none; } p.et_pb_gallery_caption { padding: 26.5% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 480px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 24.8% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 320px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 19.4% 5%; /*Adjust the first value if using more or less text*/ } }
E conseguimos o resultado que procurávamos 😉
Olá…A sobremesa é boa, vejo uma certa divisão do Óscar…Heh heh. De qualquer forma, é minha estrutura para fazer web. Que diferenças você acha entre Genesis e Divi? Como você vê ambos capazes de fazer os mesmos projetos? Saudações!
Oi Sergio,
Gostei da coisa da "divização". Muitos de vocês me perguntaram e é por isso que estou fazendo isso 😉
Genesis e Divi são visões muito diferentes. Divi é muito mais fácil de projetar, mas na minha opinião Genesis mais robusto, sim, muito mais complicado.
Saudações 😉
Oscar
concordo totalmente Oscar, genesis é incrível! e Divi é legal por causa de como é fácil fazer algumas coisas que normalmente são difíceis. Bem, ótimo este vídeo, hein? Muito obrigado.
Muito obrigado pelas suas palavras Txomin 😉
concordo plenamente com seu comentário
Um abraço!
Bom dia Oscar, uma dúvida, ao assinar e baixar o template Divi, como funcionam as atualizações? Como para poder atualizar, as chaves do produto geralmente são solicitadas
Ola Roberto,
Eu carrego as atualizações para a zona premium e você precisa atualizá-las manualmente.
Saudações 😉
ummMMMmm não sei o que estou fazendo de errado, mas não funciona, é a segunda vez que tento. Olá Óscar 🙂
Olha, se você tiver um momento, é um site de teste, eu uso para um projeto.
Estou usando imagens com o mesmo tamanho que você usa no vídeo 748px por 421px.
Já tentei deixar eles menos altos, mais estreitos e não entendi hehe
É verdade que a versão do Divi não é a mesma do vídeo, mas acho que não tem nada a ver.
exemplo aqui:
ht—tps://txurrut.appbera.com/
Grande Oscar, continuamos aprendendo com seus tutoriais wordpress
Muito obrigado amigo 😉
Um abraço!