Como adicionar um mapa fixo e alternar para o modelo da sua página Divi

Se você dirige uma loja física e está criando um site para ela, muitas pessoas podem visitar seu site para obter informações práticas, como seu endereço. Claro, é aí que sua página de contato se torna útil, mas essa não é a única maneira de compartilhar perfeitamente detalhes de contato com seus visitantes. Se você está procurando uma maneira criativa de compartilhar o endereço de sua empresa, gostará deste tutorial. Estamos mostrando como adicionar um alternador de mapa fixo dinamicamente a cada página usando o Divi's Theme Builder. Começaremos criando um novo modelo de página. Em seguida, incluiremos o conteúdo da página dinâmica ao lado do corpo do modelo e adicionaremos um alternador de mapa fixo no topo do conteúdo da página dinâmica. Você também poderá baixar o arquivo JSON de modelo 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 modelo de página GRATUITAMENTE

Para colocar as mãos no template de página grátis, primeiro você precisa baixá-lo 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!

1. Crie um modelo de página dentro do Divi Theme Builder

Vá para o Divi Theme Builder e adicione um novo modelo de página

Começaremos este tutorial navegando até o Divi Theme Builder e adicionando um novo modelo de página.

Insira a área do corpo do modelo

Em seguida, insira o corpo do modelo selecionando “Build Custom Body”.

2. Adicionar conteúdo de página dinâmico à área do corpo

Configurações da seção

Espaçamento

Uma vez dentro do editor de template, você notará uma seção. Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.

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

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

Adicionar módulo de conteúdo de postagem à coluna

Para permitir que o conteúdo de cada página apareça dinamicamente, usaremos o Módulo Post Content dentro desta linha.

3. Criar design de pino de mapa fixo

Adicionar linha # 2 à seção

Estrutura da Coluna

Vá para a próxima linha, que usa a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Largura: 90%
• Largura máxima:
  • Desktop: 600px
  • Tablet e telefone: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

Configurações da coluna 1

Cor de fundo

Em seguida, abra as configurações da coluna 1 e use uma cor de fundo preta.

• Cor de fundo: # 000000

Imagem de fundo

Faça upload de uma imagem de plano de fundo de sua escolha a seguir. Você pode encontrar a imagem de fundo na pasta compactada que pode ser baixada no início deste tutorial.

CSS do elemento principal

Adicione as seguintes linhas de código CSS ao elemento principal da coluna também:

width: 80% !important;
max-height: 80vh;

Visibilidade

Em seguida, coloque o estouro vertical em automático. Isso, em combinação com a altura máxima na etapa anterior, garante que uma barra de rolagem apareça assim que a coluna exceder uma altura de 80 vh.

• Estouro vertical: Auto

Configurações da coluna 2

CSS do elemento principal

Abra as configurações da coluna 2 a seguir e aplique a seguinte linha de código CSS ao elemento principal:

width: 12% !important;

Adicionar Módulo de Mapa à Coluna 1

É hora de adicionar módulos, começando com um Módulo de Mapa na coluna 1. Adicione um pino de mapa de sua escolha.

Dimensionamento

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

• Largura: 88%
• Alinhamento do Módulo: Centro

Espaçamento

Remova a margem inferior padrão a seguir.

• Margem inferior: 0px

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

Adicione um Módulo Blurb abaixo do Módulo Mapa na coluna 1. Use algum conteúdo de sua escolha.

Selecione o ícone

Selecione um ícone a seguir.

Configurações de imagem / ícone

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

• Cor do ícone: #ffffff
• Posicionamento de imagem / ícone: esquerda

Configurações de texto do título

Defina o estilo do texto do título a seguir.

• Peso da fonte do título: negrito
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 16px
• Altura da linha do título: 1,6em

Configurações do corpo do texto

Em seguida, modifique as configurações do corpo do texto de acordo:

• Cor do corpo do texto: #ffffff
• Tamanho do corpo do texto:
  • Desktop: 16px
  • Tablet: 14px
  • Telefone: 13px
• Altura da linha corporal: 1,8em

Espaçamento

Aplique os seguintes valores de preenchimento também:

• Enchimento superior: 70 px
• Preenchimento inferior: 70 px
• Preenchimento esquerdo: 7%
• Preenchimento direito: 7%

Animação

E remova a animação do módulo padrão nas configurações de animação.

• Animação de imagem / ícone: sem animação

Adicionar Módulo Blurb à Coluna 2

Deixe as caixas de conteúdo vazias

Na coluna 2. Lá, adicionaremos um Módulo Blurb sem conteúdo.

Selecione o ícone

Selecione um ícone a seguir.

Cor de fundo

Em seguida, altere a cor de fundo.

• Cor de fundo: # 0045ff

Configurações de imagem / ícone

Vá para a guia de design e defina o estilo das configurações do ícone de acordo:

• Cor do ícone: #ffffff
• Posicionamento de imagem / ícone: topo
• Alinhamento de imagem / ícone: centro
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 25px

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

• Largura: 70px
• Altura: 70px

Espaçamento

Em seguida, remova a margem inferior padrão.

• Margem inferior: 0px

Sombra da caixa

Inclua também uma sombra de caixa.

• Posição horizontal da sombra da caixa: 6px
• Posição vertical da sombra da caixa: 6 px
• Cor da sombra: rgba (0,0,0,0.3)

Elemento principal e CSS da imagem do Blurb

Em seguida, navegue até a guia avançada e use as seguintes linhas de código CSS para o elemento principal:

display: flex;
justify-content: center;
align-items: center;

E adicione esta linha de código CSS dentro da caixa da imagem do Blurb:

margin-bottom: 0;

4. Adicionar funcionalidade de alternância

Adicionar classe CSS à linha 2

Agora que temos todos os elementos no lugar, é hora de nos concentrarmos na funcionalidade. Comece abrindo a segunda linha e aplicando a seguinte classe CSS:

• Classe CSS: map-toggle-row

Adicionar classe CSS ao módulo Blurb na coluna 2

Abra o Módulo Blurb na coluna 2 a seguir e use a seguinte classe CSS:

• Classe CSS: map-toggle

Adicionar Módulo de Código Abaixo do Módulo Blurb na Coluna 2

Em seguida, adicione um Módulo de código abaixo do Módulo Blurb na coluna 2.

Adicionar tags de estilo e script

Coloque algumas tags de estilo e script dentro da caixa de código.

Insira o código CSS

Estamos usando o seguinte código CSS dentro das tags de estilo:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

Insira o código JQuery

E o seguinte código JQuery dentro das tags de script:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Adicionar posição fixa com deslocamento horizontal à linha 2

Por último, mas não menos importante, precisaremos modificar as configurações de posição da segunda linha de acordo:

• Cargo: Fixo
• Localização: Esquerda Centro
• Deslocamento horizontal:
  • Desktop: -500px
  • Tablet e telefone: -72%
• Índice Z: 11

5. Salvar as alterações do construtor de página e tema

Assim que todas as alterações forem aplicadas, você pode salvar todas as alterações do Divi Theme Builder e ver o resultado em seu site!

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

Neste tutorial, mostramos como incluir criativamente os detalhes do endereço de sua empresa em todos os designs de página. Mais especificamente, mostramos como construir um modelo de página que inclui um alternador de mapa fixo, para que os visitantes possam acessar a localização da sua empresa a qualquer momento! Você também conseguiu fazer o download do arquivo JSON de modelo gratuitamente. Se você tiver dúvidas ou sugestões, fique à 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.