Como usar o pacote exclusivo de layout de padaria da Cyber ​​Monday para criar uma página de locais para sua empresa

Este ano, conseguir um negócio da Cyber ​​Monday significa ganhar uma tonelada de coisas grátis também! Além de desfrutar de um desconto de 25%, todos que comprarem uma nova assinatura Elegant Themes ou atualizarem sua conta existente (ou que já tenham uma assinatura vitalícia) também receberão 6 pacotes de layout gratuitos e exclusivos que estão disponíveis SOMENTE para download durante a venda da Cyber ​​Monday.

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Um olhar sobre o pacote exclusivo de layout de padaria da Cyber ​​Monday

Um dos pacotes de layout exclusivos que oferecemos como membros vitalícios e novos clientes da Cyber ​​Monday é este para Padarias. É composto por 5 páginas saborosas que farão qualquer site de padaria irresistível.

Design da página de destino

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Design da página de receitas

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Design da página do menu

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Sobre o design da página

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Design da página de contato

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Obtenha o pacote exclusivo de layout de padaria da Cyber ​​Monday

Antes de entrar neste caso de uso, você precisará colocar as mãos no Pacote de layout exclusivo da padaria Cyber ​​Monday, que você pode obter ao se tornar um novo membro Elegant Themes, atualizar sua conta existente ou já ser um membro vitalício conosco. Se você realmente já é um membro vitalício, pode fazer login em nossa área de membros e baixar todos os nossos pacotes de layout exclusivos aqui. Todos os outros precisarão usar o botão abaixo para comprar ou atualizar antes de seguirem com o resto do nosso tutorial.

Baixe o layout exclusivo antes que ele desapareça!

Já é um membro vitalício? Você pode baixar o pacote agora, não há necessidade de participar de nossa promoção da Cyber ​​Monday!

Como usar o pacote exclusivo de layout de padaria da Cyber ​​Monday para criar uma página de locais para sua empresa

Para o restante desta postagem, presumiremos que você aproveitou nosso negócio da Cyber ​​Monday ou que já é um membro vitalício e tem acesso ao Pacote de Layout de Padaria.

Depois de fazer o download do novo Bakery Layout Pack de nossa área de membros, você pode assistir ao vídeo abaixo para ver como é fácil de configurar. Também encorajamos você a seguir este tutorial para preparar seu site para novas personalizações.

Agora, vamos entrar no próprio caso de uso.

Ao construir um site para uma empresa com mais de um local, é importante pensar na melhor forma de comunicar essas informações aos visitantes. Eles precisam saber qual local está mais próximo deles e qualquer informação importante específica para esse local. E construir uma página de locais para o site é um ótimo começo.

Neste caso de uso, vou mostrar como é loucamente fácil criar uma página de locais profissionais para sua empresa usando o Pacote de Layout de Padaria.

Usando a estrutura do Layout da página de contato da padaria, mostrarei como adicionar pinos adicionais ao seu módulo de mapa para refletir todos os locais do seu negócio, juntamente com seções bem organizadas e projetadas para exibir informações importantes para cada local. Como podemos usar os elementos de design já fornecidos pelo layout, esse processo é revigorante e divertido (pelo menos é para mim).

Vamos começar.

Comece usando o layout de contato para criar sua página de locais

O layout da página de contato da padaria é perfeito para ser usado como base para nossa nova página de locais. Ele tem um módulo de mapa na parte superior que usaremos para mostrar cada uma das localizações de nossa empresa. Além disso, possui alguns outros elementos, como módulos de texto que já foram projetados, que podemos reorganizar e modificar conforme necessário.

Criar nova página

Primeiro, você precisará criar uma nova página e dar-lhe um título (algo como “Nossos locais”) e clicar para usar o divi Builder e depois o construtor visual.

Carregar layout da página de contato da padaria

Neste ponto, você já deve ter feito o upload dos layouts de página para sua biblioteca Divi. Clique para abrir o menu roxo na parte inferior da página e selecione o botão “Adicionar da Biblioteca” com o ícone de adição. Selecione a carga da guia da biblioteca e, a seguir, selecione o layout Contato da padaria na lista. O layout será carregado imediatamente na página.

Publicar.

Adicionando Seções para Informações Específicas de Localização

Na verdade, não temos muito conteúdo na página de contato para usar na construção de conteúdo adicional para nossos locais específicos. Então, vamos para a página de destino da padaria e selecione a linha da segunda seção da página e salve-a na Biblioteca.

Agora volte para a página de locais. Duplique a seção na parte inferior da página que contém o formulário de contato (não exclua, pois precisaremos dele mais tarde). Na seção diretamente abaixo do mapa, exclua a linha inteira da seção e adicione a linha que você salvou de sua biblioteca.

Em seguida, altere o layout da coluna da linha para um layout de dois terços e um terço.

Localize o módulo de texto com o conteúdo do endereço na coluna direita da seção inferior. Arraste-o sob o módulo de imagem na coluna direita da linha na seção acima dele.

Em seguida, atualize o Conteúdo nos módulos de texto na coluna à esquerda para representar a localização específica da sua empresa. Para meu exemplo, vou adicionar o seguinte:

Sede Principal
Cidade de Nova York

Agora atualize o módulo de imagem na coluna da direita para incluir uma imagem da localização da sua empresa.

Isso servirá como uma boa seção para cada um de seus anúncios de localização específicos.

Agora, tudo o que você precisa fazer é duplicar esta seção para adicionar outros locais.

Duplique esta seção duas vezes para que você tenha um total de 3 seções de localização. Em seguida, altere a cor de fundo da seção de localização do meio para branco para ajudar a dividir melhor as seções.

Em seguida, atualize as seções duplicadas com conteúdo específico do local. Para este exemplo, além de minha localização em Nova York, criarei uma seção para San Francisco e Houston também.

Projete a seção de rodapé do formulário de contato

Lembre-se daquela seção que salvamos no final, contendo nosso formulário de contato. Isso servirá como uma ótima seção de rodapé para nossa página de localização. Tudo o que precisamos fazer é ajustá-lo um pouco.

Primeiro, vamos excluir os módulos restantes na coluna da direita. Em seguida, atualize o layout da coluna de linha para um layout de uma coluna. Agora tudo o que você deve ver é o formulário de contato em uma linha de uma coluna.

Em seguida, clique para editar as configurações de linha e atualizar o seguinte:

Na guia de conteúdo ...

cor de fundo: #ffffff

Na guia Design ...

preenchimento personalizado: 5% superior, 5% direito, 5% inferior, 5% esquerdo

Sombra da caixa: [selecionar sombra da caixa]

Agora vamos adicionar uma imagem de fundo para nossa seção. Vá para as configurações da seção e selecione uma das imagens de fundo incluídas no layout.

Excelente! Agora no módulo de mapa.

Adicione sua chave de API do Google

Neste ponto, você precisará certificar-se de criar sua chave de API do Google e adicioná-la às Opções de tema.

Atualize o módulo de mapa com novos pinos de localização

Neste ponto, a maior parte de nossa página foi concluída. Tudo o que resta são as atualizações do módulo de mapa no topo da página. Precisamos adicionar os novos locais dos pinos para as três seções que criamos nas seções da página (Nova York, São Francisco e Houston).

Clique para editar o Módulo de Mapa e atualizar as configurações da seguinte forma:

Apague o pino que aparece no módulo para que você comece do zero. Em seguida, adicione um novo pin e atualize as configurações da seguinte maneira:

Título: Padaria da cidade de Nova York
Conteúdo: Mais informações
Endereço do pino do mapa: cidade de Nova York

Clique no botão Localizar.

Em seguida, adicione um novo pin e atualize as configurações da seguinte maneira:

Título: Padaria San Francisco
Conteúdo: mais informações
Endereço do pino do mapa: San Francisco

Clique no botão Localizar.

Em seguida, adicione um novo pin e atualize as configurações da seguinte maneira:

Título: Houston Bakery
Conteúdo: mais informações
Endereço do pino do mapa: Houston, TX

Clique no botão Localizar.

Você pode deixar o endereço do centro do mapa como Cidade de Nova York. Mas ajuste a exibição do mapa para diminuir o zoom o suficiente para poder ver todos os locais quando o visitante visualizar o mapa pela primeira vez.

Adicionar links âncora às caixas de conteúdo do pino

Como um recurso adicional, você pode melhorar a experiência do usuário adicionando um link de âncora dentro do conteúdo do pino que aparece ao clicar no pino. Este link de âncora levará o usuário para a seção específica da página que mostra as informações desse local.

Abra a configuração do módulo de mapa e edite as primeiras configurações de pino. Realce o texto na caixa de conteúdo que diz “Mais informações” e clique no ícone do link para torná-lo um link. Para o url, digite “#newyork” e clique em OK.

Faça o mesmo para o pin de São Francisco (use o url “#sanfran”) e o pin de Houston (use o url “#houston”).

Agora, tudo o que você precisa fazer é adicionar um ID CSS personalizado a cada uma de suas seções que corresponderá aos URLs de link que você acabou de criar nos pinos.

Para a seção “New York City”, atualize as configurações da seção na guia Advanced com o CSS ID “newyork” e salve suas configurações.

Agora, quando o usuário clica no link “mais informações” (com o url #newyork) no pino de Nova York, a página pula para essa seção.

Faça o mesmo para a seção de São Francisco (use o CSS ID “sanfran”) e a seção de Houston (use o CSS ID “houston”)

É isso. Tudo pronto!