Como adicionar um cartão flutuante sobre ao seu site Divi

Em quase todos os sites que você visita, os elementos aparecem e aderem à página. Avisos de cookies e opt-ins, inscrições de e-mail e caixas de bate-papo. Todos nós tendemos a ignorá-los em algum ponto, tornando-nos cegos para o que quer que o site esteja tentando nos dizer. Apenas clicamos no X sem ler. Mas isso não significa que esses tipos de elementos não possam ser úteis nem ter um lugar. Com o Divi, você pode criar facilmente um cartão flutuante que agrega valor ao seu site, explicando discretamente quem você é e o que sua marca faz. Vamos ver como é fácil.

Antevisão

Área de Trabalho

Móvel

1. Crie um modelo de página

A primeira coisa que você quer fazer é decidir em quais páginas deseja incluir este cartão flutuante. Você pode desejá-lo em todas as páginas do seu site ou apenas em páginas de destino específicas. De qualquer forma, você pode usar o Divi Theme Builder para configurá-lo. Tanto como um modelo global ou um modelo que se aplica a apenas algumas páginas.

Use o Theme Builder para criar o modelo

Para começar, vá para Divi - Theme Builder no painel do WordPress. Escolha a seção Corpo personalizado das páginas às quais deseja aplicar o cartão flutuante sobre ou Corpo global para aplicá-lo em todos os lugares.

Depois de carregar o Divi Visual Builder, escolha Iniciar do zero quando puder .

Adicionar uma linha de 1 coluna e um módulo de conteúdo de postagem

Em seguida, escolha uma linha de coluna única quando solicitado.

Em seguida, você deseja escolher o módulo Post Content . Este é um exemplo de nosso recurso de conteúdo dinâmico. O módulo exibe o design de acompanhamento construído dentro da própria página Divi, o que significa que este módulo mostrará conteúdo diferente para páginas diferentes com este modelo. Para postagens de blog, será o conteúdo do blog. Para as páginas da loja, serão os produtos. E para páginas individuais, o conteúdo personalizado que você fez usando Divi.

Ajustar seção e espaçamento de linha

Com eles no lugar, precisamos fazer alguns ajustes de espaçamento. Vá para as configurações de seção (borda azul no construtor Divi) e remova todo o preenchimento superior e inferior. Faça isso na guia Design , no título Spacing e, em seguida, defina 0px como Top e Bottom em Padding .

Salve suas alterações e insira as configurações de linha . Novamente, defina o preenchimento superior e inferior como 0px .

Em seguida, encontre o título Sizing e ative a opção Use Custom Gutter Width e defina seu valor como 1. Em seguida, defina Width e Max Width como 100%.

Com a preparação feita, vamos começar a fazer o cartão flutuante!

2. Adicionar cartão flutuante

Adicionar uma nova seção e linha

Primeiro, você desejará adicionar uma nova seção. Faça isso rolando até a parte inferior da página e clicando no círculo azul + e escolhendo Regular quando solicitado para o tipo de seção.

Adicionar um Módulo Blurb

Esta será a seção dedicada ao cartão flutuante. Dentro, queremos adicionar outra linha de coluna única. E dentro disso, queremos usar um módulo Blurb para a própria placa flutuante. O módulo Divi Blurb pode ser o módulo mais versátil do construtor, portanto, queremos aproveitar o que ele oferece para esse recurso.

Ajustar as configurações de seção e linha

Com isso no lugar, precisamos ajustar o preenchimento e o posicionamento desta linha e seção. Portanto, primeiro vá para as configurações de Seção e defina o Preenchimento Superior e Inferior como 0px em Exibir - Espaçamento .

Em seguida, na guia Avançado , encontre o título Posição . Defina o índice Z como 12. Quanto mais alto o número, mais “frontal” estará a seção e seu conteúdo. E como é uma carta flutuante, queremos que ela flutue sobre todos os outros elementos.

Por fim, vá para as configurações de linha e defina seu preenchimento na parte superior e inferior para 0px mais uma vez.

O conteúdo do módulo Blurb

Agora é hora de definirmos o próprio estilo do cartão. Insira as configurações do módulo Blurb. Por ser um elemento que descreve seu negócio, você desejará fazer uma breve menção ao que sua empresa ou marca faz. Como este é um exemplo de postagem, nós o preenchemos com lorem ipsum com sabor de zumbi. Você pode definir o título e o conteúdo do corpo na guia Conteúdo .

Defina a cor de fundo

Obviamente, você deseja que o cartão flutuante corresponda visualmente ao seu site, portanto, escolher a cor de fundo certa é muito importante. Vamos com #ffffff (branco). A guia Conteúdo também contém isso, e você o encontrará sob o título Plano de fundo e Lata de tinta .

Escolha uma imagem de cartão

O módulo Blurb oferece a opção de incluir uma imagem ou ícone para o módulo, e queremos uma imagem que represente nossa empresa. Novamente, na guia Conteúdo , encontre Imagem e Ícone e simplesmente carregue a imagem que funciona para o seu módulo.

Moldar os cantos do cartão

Em seguida, vá para a guia Design e para o título Borda . Encontre as opções de Cantos arredondados e defina cada canto em 25px . Isso suavizará as bordas afiadas e quadradas sem alterar o formato do cartão como um todo.

Alinhamento de Texto

Sob o título Texto , defina o Alinhamento do Texto para o centro.

Estilo do texto do título do cartão flutuante

O texto do título que você definiu anteriormente é H4 . Para estilizá-lo, vá para o título Texto do Título , escolha a guia H4 e altere as seguintes opções de Título :

• Fonte: Poppins
• Peso da fonte: negrito
• Cor do texto: # 22303f
• Tamanho do texto: 20px
• Altura da linha: 1,3em

Em seguida, precisamos ir para as configurações de capacidade de resposta e alterar o tamanho do título para dispositivos móveis. Altere o tamanho do texto do título para 14px .

Estilize o texto do cartão

Em seguida, navegue até Body Text e altere Body Font para Poppins para corresponder à fonte do título.

Em seguida, clique na guia Link (ícone de corrente) e troque a Cor do Texto do Link por uma cor complementar para o seu site. Escolhemos # 97c357 .

Dimensionando o Cartão Sobre

Sob o título Dimensionamento , adicione os seguintes valores a essas configurações:

• Largura da imagem: 75%
• Largura do conteúdo: 25vw
• Largura: 25vw
• Largura máxima: 30vw

Nas configurações de capacidade de resposta, ajuste os seguintes valores:

• Largura do conteúdo: 90vw
• Largura: 90vw
• Largura máxima: 95vw

Esses valores garantirão que o cartão ocupe toda a largura da tela em dispositivos móveis, porque um cartão flutuante no canto normalmente é impossível de ler.

Espaçamento para o Blurb

O título Spacing é uma solução rápida, onde você precisa definir a Margem Esquerda como 0px , o Preenchimento Superior e Inferior como 2vw e o Preenchimento Esquerdo e Direito como 1vw.

Para configurações responsivas, apenas o Padding Superior e Inferior serão alterados. Vamos definir isso em 5% .

Adicionar Sombra de Caixa

Como o cartão flutuante permanecerá fixo em sua localização, queremos que pareça que está flutuando acima do seu conteúdo. Este efeito é bastante simples adicionando uma sombra de caixa básica ao módulo. Esta opção pode ser encontrada em Box Shadow , e escolhemos a sombra inferior básica.

Ajuste de CSS responsivo

Agora é a parte divertida. Estamos indo para a guia Avançado, onde faremos o cartão flutuante afixar-se na página. Para fazer isso, nosso primeiro passo é desligar a imagem que adicionamos para o desktop. As imagens no módulo Blurb podem realmente afetar o tamanho e a usabilidade no celular, além de ser outra coisa para a página carregar.

Portanto, queremos adicionar display: none; no campo Imagem do Blurb somente para celular em CSS personalizado .

Fixe e flutue o cartão com configuração de posição

Finalmente, vamos posicionar o cartão onde queremos que flutue. Primeiro, queremos ir para a guia Avançado e rolar até Posição . Selecione Fixo no menu suspenso.

Em seguida, encontre as opções de localização . Este é o ponto da tela onde a carta flutuante ficará. Para desktop, queremos que ele esteja no canto inferior da tela. Então, clicamos no quadrado que se correlaciona com isso. Também queremos que ele seja ligeiramente deslocado da borda da janela, então vamos alterar o Deslocamento vertical para 3% e o Deslocamento horizontal para 2%.

Em seguida, queremos criar uma localização e deslocamento diferentes para dispositivos móveis. Acima, definimos a largura do cartão para esticar toda a largura da tela. Com isso em mente, mudaremos o Local fixo para a parte inferior central para que o cartão flutue na parte inferior da tela o tempo todo.

Além disso, vamos alterar apenas o deslocamento vertical para dispositivos móveis. Defina este valor para 3% . Não há necessidade de deslocamento horizontal porque é a largura da tela do celular e está centralizado.

Resultados finais

Quando tudo estiver configurado corretamente e ajustado para o seu site pessoal, o produto final deverá ser semelhante a este.

Área de Trabalho

Móvel

Conclusão

Com as opções poderosas e a interface intuitiva do Divi, você pode projetar e afixar um cartão flutuante em seu site rapidamente. Ao permitir que seus usuários saibam com quem estão lidando desde o início, você certamente conquistará alguma lealdade à marca.

Para que você usou cartões flutuantes em seus sites? Deixe-nos saber nos comentários!