Como incorporar galerias Divi em alternadores para criar um menu de restaurante personalizado

Usar alternadores em sua página da web é uma ótima maneira de organizar seu conteúdo de maneira limpa e concisa. Isso pode ajudar a impulsionar a experiência do usuário, reduzindo a rolagem e dando ao usuário mais controle sobre o que deseja ver em sua página. O menu de um restaurante online é um bom exemplo de onde os seletores podem funcionar bem. Um usuário pode encontrar facilmente o item de menu de sua preferência e clicar no item para obter mais informações.

Neste tutorial, vou mostrar como criar alguns seletores intuitivos e compatíveis com dispositivos móveis para o menu do seu restaurante usando os seletores Divi. Vou até mostrar a você como otimizar sua chave para dispositivos móveis e incorporar galerias de imagens Divi dentro de seu conteúdo de alternância para mostrar fotos impressionantes de pratos específicos.

Vamos começar.

O antes e o depois

Aqui está uma prévia do antes e do depois do design do menu do restaurante que iremos construir.

Antes

Depois de

Começando

Substituindo a exibição da galeria do WordPress pela exibição da galeria Divi

Divi permite que você substitua a exibição padrão da Galeria do WordPress por uma exibição da Galeria Divi. Assim, sempre que você criar uma galeria WordPress e incorporá-la à sua página, a galeria será exibida como uma galeria usando o Módulo Divi Gallery. Isso permite que você adicione galerias de imagens Divi a qualquer módulo no Divi Builder (mais sobre isso posteriormente). Para implementar essa mudança, navegue até Divi> Opções de tema. Na guia Geral, clique para habilitar a opção Divi Gallery.

Configurando a cor de destaque do tema (opcional)

Como inseriremos uma galeria Divi em um módulo de alternância, a cor do ícone que aparece quando você passa o mouse sobre uma imagem na galeria herdará automaticamente a cor de destaque que você definiu para o tema Divi. Você pode definir a cor de destaque do tema no painel do WordPress navegando até Divi> Personalizador de temas> Configurações gerais> Configurações de layout. Em Configurações de layout, atualize a cor de acesso do tema para o seguinte:

Cor de destaque do tema: # a06d51

Esta é a cor que combinará com o Layout do Menu da Padaria que usaremos neste tutorial.

Atualizar o tamanho do ícone de alternância padrão no personalizador de módulo (opcional)

Para este projeto, achei que seria útil exibir um ícone de alternância maior ao usar o módulo Divi Toggle. Você pode alterar o tamanho padrão do Toggle Module navegando até Divi> Module Customizer. Em seguida, selecione o Módulo Alternar na lista e atualize o tamanho do ícone da seguinte forma:

Alternar tamanho do ícone: 32

Configurando sua nova página com o layout da página do menu de padaria

Para começar, você precisará criar uma nova página, dar um título a ela e implantar o Divi Builder. Selecione a opção “Choose a Premade Layout”.

No pop-up de carregamento da biblioteca, escolha o Pacote de layout da padaria e clique para usar o layout da página do menu da padaria.

Depois que o layout for carregado na página, publique sua página. Em seguida, clique no botão “Build on Front End”. e, em seguida, publique sua página. Em seguida, clique para construir no front end.

Uma vez feito isso, você está pronto para começar a projetar o menu!

Implementando o Design de Menu de Restaurante Personalizado com Divi Alternadores e Galerias de Imagens

Projetando uma Alternância de Item de Menu

Com o Divi Builder ativo no front end, adicione um módulo Toggle sob o módulo de texto com o subtítulo “Sweet Tooth”.

Por enquanto, você pode deixar o conteúdo simulado padrão usado para o Título e o Conteúdo do corpo. Mas, você precisará adicionar um preço para o item de menu dentro do conteúdo do corpo da guia. Clique na guia Texto (em vez de Visual) e adicione o seguinte html no texto padrão atual.

<h5>$8.00</h5>

Em seguida, comece a atualizar as configurações de alternância da seguinte maneira:

• Cor do ícone: # a06d51
• Abrir Alternar Cor do Texto: # 333333
• Cor do texto de alternância fechada: # 333333
• Cor de fundo de alternância fechada: #ffffff

• Fonte do título: Patua One
• Peso da fonte do título: negrito
• Estilo da fonte do título: TT
• Espaçamento entre letras de título: 1px
• Altura da linha do título: 4em
• Preenchimento personalizado: 0 px superior, 0 px inferior

Para aumentar a área clicável do título de alternância, a altura da linha do título é aumentada e o preenchimento superior e inferior é removido.

Agora vamos adicionar uma borda esquerda ao nosso alternador.

• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # a06d51

Adicionando uma galeria de imagens ao módulo de alternância

Conforme mencionado anteriormente, quando você habilita a opção Divi Gallery nas opções do tema Divi, uma incorporação WordPress Gallery assume o estilo de uma Divi Gallery. Isso permite que você incorpore uma galeria de imagens no estilo Divi a qualquer módulo. Para este exemplo, queremos adicionar algumas imagens dentro do módulo de alternância para exibir algumas imagens de um item de menu de restaurante específico. Para fazer isso, abra as configurações de alternância e clique no botão Adicionar mídia acima da caixa de conteúdo.

No pop-up Biblioteca de mídia, selecione a guia Criar galeria à esquerda. Em seguida, selecione a (s) imagem (ns) que deseja usar para a galeria e clique em “Criar uma nova galeria”.

Na seção Editar Galeria do pop-up, ignore as configurações da galeria porque os estilos da Galeria Divi substituirão essas configurações da Galeria do WordPress. Em seguida, clique no botão Inserir Galeria.

Isso coloca um código de acesso da galeria no conteúdo do módulo de alternância. Se você quiser que a galeria seja exibida após o texto do corpo atual, certifique-se de colocar o código curto após o conteúdo.

Ajustando o preenchimento da linha para smartphone

O conteúdo ficará bem próximo ao espaçamento atual do layout predefinido. Precisamos atualizar as configurações de linha para criar mais espaço no smartphone. Para fazer isso, abra as configurações da linha que contém as opções de menu do seu restaurante e atualize o seguinte:

• Preenchimento personalizado (telefone): 0 px à esquerda, 0 px à direita

Duplique a Alternância conforme necessário

Para adicionar mais itens de menu, basta duplicar o módulo Alternar e atualizar o conteúdo com novo texto e galerias de imagens conforme necessário. Depois disso, você pode excluir os itens de menu originais que vieram com o layout predefinido.

Resultado final

Agora vamos conferir o resultado final do design.

Alterando o número de colunas na galeria

Por padrão, a galeria tem um layout que permanece com três colunas em todas as larguras de navegador e dispositivos. No entanto, com o efeito lightbox, os usuários poderão ver uma versão maior ao clicar no item da galeria. Portanto, as imagens menores ainda podem funcionar. Mas, se você quiser alterar o número de colunas, você sempre pode adicionar um pequeno trecho de CSS. Para este exemplo, vou mudar a galeria para exibir imagens em duas colunas. Para fazer isso, primeiro abra as configurações de alternância e adicione uma classe CSS personalizada da seguinte maneira:

Classe CSS: two-col-gal

Em seguida, abra as configurações da página e adicione o seguinte CSS personalizado:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Alterando a cor de sobreposição da Galeria de imagens no personalizador de módulo

Se quiser alterar a cor da sobreposição de foco do item da galeria sem ter que usar CSS personalizado, você pode alterar as configurações padrão do Módulo da Galeria no Personalizador de Módulo. Para fazer isso, navegue até Divi> Module Customizer. Em seguida, clique no módulo Galeria e altere a cor de sobreposição de foco para o que você quiser.

Pensamentos finais

Esperançosamente, este tutorial inspira como usar o Divi Toggle Module para criar menus de restaurantes incríveis. Como bônus, você pode ter aprendido um novo truque para incorporar algumas galerias Divi em qualquer módulo que desejar (não apenas alternadores). A única limitação é personalizar o número de colunas que você deseja exibir na sua galeria. No entanto, você pode adicionar um pequeno trecho de CSS personalizado para colocá-lo no caminho certo.

Estou ansioso para ouvir de você nos comentários.

Saúde!