Como destacar um módulo do Blurb pairado borrando os outros com Divi

Qualquer que seja o tipo de site que você está construindo, há grandes chances de, em algum momento, você querer exibir uma lista de diferentes serviços, etapas e muito mais. Uma das maneiras mais fáceis de criar essa lista de maneira atraente é usando o Módulo Blurb da Divi. Os Módulos do Blurb permitem que você estruture o conteúdo da lista lindamente, ao mesmo tempo que oferece infinitas possibilidades de design.

No tutorial de hoje, daremos um passo adiante e mostraremos como destacar um Módulo Blurb focado desfocando os outros que você exibiu. Essa é uma ótima maneira de colocar o foco em um módulo do Blurb por vez, sem permitir que os outros módulos do Blurb distraiam o leitor. Assim que um visitante passa para outro módulo do Blurb, esse passa a ser o destacado. Você também poderá baixar o arquivo JSON do layout gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout do módulo Hovered Blurb GRATUITAMENTE

Para colocar suas mãos no layout do módulo de blurb flutuante gratuito, 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.

Baixe os arquivos

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.

DOWNLOAD

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!

Vamos começar a recriar!

Adicionar nova seção

Cor de fundo

Comece adicionando uma seção regular a uma nova página ou àquela em que você está trabalhando. Abra as configurações da seção e altere a cor de fundo.

• Coor de fundo: #eaeaea

Espaçamento

Adicione algumas margens personalizadas e valores de preenchimento também.

• Margem superior: 2vw
• Margem inferior: 2vw
• Margem esquerda: 2vw
• Margem direita: 2vw
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Conclua as configurações da seção adicionando algum raio de borda.

• Todos os cantos: 20px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento. Ativar a opção 'Equalize a altura da coluna' ajudará na próxima etapa, que alinha o conteúdo da coluna.

• Equalize Alturas de Coluna: Sim
• Largura: 90%
• Largura máxima: 1580 px
• Altura mínima: 500px (desktop), automático (tablet e telefone)

Elemento Principal

Alinhe o conteúdo da coluna adicionando uma única linha de código CSS ao elemento principal da linha.

align-items: center;

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

O único módulo que estamos usando neste tutorial é um Módulo Blurb, mas você pode substituir este módulo por qualquer módulo de sua escolha, desde que adicione a classe CSS que compartilharemos nas próximas etapas. Adicione o primeiro Módulo Blurb à coluna 1 e insira algum conteúdo de sua escolha.

Selecione o ícone

Selecione um ícone a seguir.

Hover Gradient Background

Em seguida, use um plano de fundo gradiente apenas ao pairar.

• Cor 1: #ffffff
• Cor 2: # 0f1bff
• Tipo de gradiente: Linear
• Posição inicial: 20%
• Posição final: 20%

Configurações de ícone padrão

Vá para a guia de design do módulo e altere as configurações do ícone da seguinte forma:

• Cor do ícone: #ffffff
• Ícone de círculo: Sim
• Cor do círculo: #ffffff
• Posicionamento de imagem / ícone: topo
• Alinhamento de imagem / ícone: esquerda

Configurações do ícone de pairar

Altere as diferentes cores do ícone ao passar o mouse.

• Cor do ícone: # 0f1bff
• Cor do círculo: # f7f7f7

Configurações de texto de título padrão

Continue modificando as configurações de texto do título.

• Fonte do título: Fonte Sans Pro
• Peso da fonte do título: negrito
• Estilo da fonte do título: maiúsculas

Hover Title Text Settings

Altere a cor do texto do título ao passar o mouse.

• Cor do texto do título: #ffffff

Configurações de corpo de texto padrão

A seguir estão as configurações do corpo do texto.

• Fonte do corpo: Open Sans
• Altura da linha corporal: 2em

Hover Body Text Settings

Use uma cor de texto flutuante branca.

• Cor do corpo do texto: #ffffff

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione alguns valores de preenchimento personalizados.

• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Sombra de caixa padrão

Estamos usando uma sombra de caixa também.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -20px
• Cor da sombra: rgba (255.255.255,0.18)

Hover Box Shadow

Altere a cor da sombra ao pairar.

• Cor da sombra: rgba (0,0,0,0.18)

Classe CSS

E para que o efeito de desfoque aconteça, precisaremos atribuir uma classe CSS ao nosso Módulo Blurb. Posteriormente na postagem, usaremos essa classe CSS em alguns códigos JQuery.

• Classe CSS: blurb-item

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o Módulo Blurb na coluna 1, você pode cloná-lo duas vezes e colocar as duplicatas nas colunas restantes da linha.

Clonar linha inteira

Você pode clonar a linha quantas vezes quiser, dependendo de quantos Módulos do Blurb deseja exibir em sua página.

Personalize os módulos do Blurb individualmente

Claro, você precisará modificar o conteúdo individual de cada Módulo do Blurb.

Adicionar nova linha

Estrutura da Coluna

Adicione outra linha à seção usando a seguinte estrutura de coluna:

Espaçamento

Abra as configurações de linha e remova todo o preenchimento padrão superior e inferior. Isso ajudará a reduzir o espaço que essa linha ocupa.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Código à Coluna

Inserir código JQuery e CSS

Adicione um Módulo de Código à coluna da linha e insira algum código JQuery e CSS para fazer o efeito acontecer. Não se esqueça de colocar o código JQuery entre as tags de script e o código CSS entre as tags de estilo como você pode ver na tela de impressão abaixo.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com os módulos do Blurb que você compartilha em seu site. Mais especificamente, mostramos como destacar um Módulo do Blurb focalizado desfocando os outros que você exibiu. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.