Como criar uma página inicial de anúncios de casamento com Divi

Publicados: 2017-05-16

Esta postagem é a parte 1 de 5 de nossa minissérie Como Criar um Site de Casamento Elegante com Divi. Nesta série, iremos guiá-lo através das partes mais importantes da criação de um site de casamento para você ou um cliente com a Divi.

Configurar uma página de anúncio de casamento é uma forma criativa de informar seus convidados de que você vai se casar. Ao fornecer o URL do seu site, eles permanecerão em contato. Eles também poderão ver os detalhes do casamento online sempre que quiserem.

Vamos dar uma olhada no layout da página inicial que vamos ajudá-lo a construir passo a passo:

Criando Seu Menu de Navegação

Mostraremos exatamente como criar uma página de anúncio, uma página de galeria e uma página de lista de presentes para o site do seu casamento. Este primeiro post é dedicado a fazer a página de anúncios. Mas antes de irmos para lá, queremos ter certeza de que os hóspedes encontrarão o caminho pelo seu site sem problemas.

É por isso que primeiro você terá que fazer um menu de navegação adequado e elegante.

Comece indo para Divi> Opções de tema> e carregue o logotipo que você gostaria de usar em todo o seu site.

Clique em Salvar alterações e vá para as páginas do seu site WordPress. Adicione uma nova página onde você criará a página de anúncio. Faça o mesmo para a página da galeria e a página da lista de presentes que mostraremos como criar nas próximas postagens.

Vamos deixar o conteúdo vazio por enquanto e ir para o Theme Customizer do seu site para modificar o menu de navegação. Comece adicionando as páginas do seu site ao menu, indo para Menus> Adicionar um menu> Adicionar as páginas ao seu menu . Este menu deve ser o menu principal do seu site.

Em seguida, vá para Cabeçalho e navegação> Barra de menu principal e faça as seguintes alterações:

Altura do menu: 66
Ajuste a altura máxima do logotipo de acordo com as dimensões da imagem
Tamanho do texto: 16
Espaçamento entre letras: 2
Fonte: Raleway Light
Estilo da fonte: Negrito
Cor do texto: # 9b7461
Cor de fundo: rgba (155,116,97,0,13)

Agora, volte para Cabeçalho e Navegação e mude o estilo do cabeçalho para 'Centralizado' dentro do Formato do Cabeçalho.

Salve e publique as alterações feitas.

Comece na página de anúncios

O site tem quatro seções, e cada uma delas contribui com seu valor para o site - tornando o anúncio do seu casamento completo. Explicaremos cada seção em detalhes e mostraremos como exatamente você pode criar o mesmo design do layout mostrado acima.

Seção Hero (incluindo contagem regressiva)

A primeira parte do design é o cabeçalho. Decidimos fazer com que os convidados se sintam imediatamente interagidos com o site e com o casamento, inserindo um Módulo de contagem regressiva nele. Dentro do Divi builder, a seção de cabeçalho se parece com isto:

Vamos usar uma seção padrão com uma linha completa em modo de largura total nesta parte do site. Na seção de linha, você terá que adicionar três módulos; dois módulos de texto e um módulo de contagem regressiva. O Módulo de contagem regressiva está localizado no meio de ambos os módulos de texto.

Comece com o primeiro módulo de texto

Comece adicionando um Módulo de Texto à linha. Escreva o texto que deseja usar, altere a Orientação do Texto para 'Centro' e aplique as seguintes alterações na guia Configurações de Design Avançado:

Tamanho da fonte do texto: 100 px (desktop), 80 px (tablet), 66 px (telefone)
Fonte do texto: tangerina
Cor do texto: # 9b857b

Na mesma guia, role para baixo e altere as margens do seu Módulo de Texto adicionando '10% 'na parte superior e' 5% 'na parte inferior.

Clique em Salvar e sair.

Módulo de contagem (desktop)

Adicione um Módulo de contagem regressiva abaixo do Módulo de texto que você acabou de criar. Na guia Configurações gerais, adicione a data e a hora do casamento e altere a cor de fundo para '# fae4de'. Usaremos essa contagem regressiva apenas em desktops, vá em frente e desative-a para tablets e telefones.

Passe para as Configurações de design avançado e faça as seguintes alterações:

Fonte dos números: tangerina
Tamanho da fonte do Numbers: 74px
Cor da fonte do Numbers: # 9b857b
Altura da linha de números: 70px
Fonte do rótulo: Raleway Light
Tamanho da fonte do rótulo: 14px
Cor do texto do rótulo: # 9b857b
Altura da linha do rótulo: 25px

Na mesma guia, role para a parte inferior e ajuste o Padding personalizado superior para '10% 'e o Padding personalizado inferior para '10%'.

Em seguida, vá para a terceira guia CSS personalizado e adicione o seguinte código ao elemento principal:

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Sua contagem regressiva agora será exatamente como a da imagem de layout que mostramos acima.

Módulo de contagem regressiva (tablet e telefone)

Agora vá em frente, clone a contagem regressiva anterior que você fez e desative-a no desktop (em vez de no tablet e no telefone). Em seguida, faça as seguintes alterações no módulo:

Tamanho da fonte do Numbers: 72 px (tablet e telefone)
Altura da linha de números: 70px
Tamanho da fonte do rótulo: 14 px (tablet), 12 px (telefone)

E mude o código no elemento principal da guia CSS para:

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Segundo Módulo de Texto

Agora, no Módulo de contagem regressiva, adicione outro Módulo de texto. Na guia Configurações Gerais, altere a Orientação do Texto para 'Centro'. Continue adicionando o nome do noivo e da noiva e indo para a guia Configurações avançadas de design.

Em Advanced Design Settings, faça as seguintes alterações:

Fonte do texto: tangerina
Tamanho da fonte do texto: 50px
Cor do texto: # 9b857b
Altura da linha de texto: 1,7em

Continue rolando na guia Configurações de design avançado até Margem personalizada e adicione '10% 'à margem superior.

Divisor

A última parte desta seção de herói é o divisor. Adicione um divisor e altere a cor na guia Geral para '# 9b857b'. Certifique-se de que o divisor também esteja "visível".

Em seguida, vá para a guia Design e faça o Divider Style 'Solid', a Divider Position 'Top', altere o peso do divisor para '1px' e oculte no celular.

Vá para a guia CSS e adicione o seguinte código ao elemento principal:

margin-left: auto;
margin-right: auto;
width: 30%;

Clique em Salvar e sair. Você terminou a primeira seção do site, que deve ser parecida com esta:

Podemos agora passar para a segunda parte deste layout, onde você pode começar a contar sua história para os convidados.

Contando Histórias O Anúncio: Segunda Seção

Esta segunda seção possui duas linhas simétricas que formam uma parte da página inicial do casamento. Esta parte tem uma largura um pouco menor que cria um pouco mais de perspectiva em seu site.

Primeira linha da seção

Comece fazendo uma seção padrão, mude a cor de fundo para '# fffaf6' e adicione '5%' ao Padding Inferior. Em seguida, adicione uma linha de duas colunas a esta seção.

Em seguida, abra as configurações de linha. Nas configurações gerais, selecione 'SIM' para usar a largura personalizada, altere a unidade para porcentagem e preencha '90% '. Role para baixo na mesma guia, ative a largura da calha e oculte para telefone e tablet.

Em seguida, vá para a guia Advanced Design Settings, equalize as alturas das colunas e adicione '# 9b857b' como a cor de fundo da primeira coluna. Na mesma guia, altere o preenchimento da coluna 1 para '5%' superior, '10% 'à direita,' 5% 'inferior e '10%' à esquerda.

Para a segunda coluna, não precisamos definir uma cor de fundo, mas sim fazer upload de uma imagem de fundo.

Módulo de Texto

Agora, adicione um módulo de texto na primeira coluna da linha. Na guia Configurações gerais, coloque a orientação do texto em 'Centro' e digite o texto que deseja compartilhar na caixa de texto. Em seguida, vá para a guia Configurações avançadas de design.

Na guia Configurações avançadas de design, faça as seguintes alterações:

Largura máxima: 500 px (apenas para desktop)
Fonte do texto: tangerina
Tamanho da fonte do texto: 44
Cor do texto: # fffaf6

E adicione 5% ao preenchimento inferior.

Pressione Salvar e Sair e adicione outro Módulo de Texto. Faça a Orientação do Texto 'justificada'. Continue fazendo as seguintes alterações no Módulo de Texto nas Configurações de Design:

Largura máxima: 500px
Tamanho da fonte do texto: 14px
Fonte do texto: Raleway Light
Estilo da fonte: negrito
Cor da fonte do texto: # fffaf6
Altura da linha de texto: 1,7em

Pressione Salvar e Sair.

Clone a linha anterior

Agora, clone a linha que você acabou de criar. A linha clonada será automaticamente colocada abaixo daquela que você acabou de criar. Mas, neste caso, precisamos que os módulos estejam no lado oposto. Coloque os dois módulos de texto na segunda coluna em vez da primeira.

Em seguida, abra as configurações de linha e adicione uma imagem de plano de fundo à primeira coluna. Exclua todas as configurações de preenchimento feitas no preenchimento da primeira coluna e coloque-as no preenchimento da segunda coluna.

Pressione Salvar e Sair e pronto.

Linha para telefone e tablet

Crie outra linha de duas colunas e oculte para a área de trabalho. Aumente a largura da linha e altere a largura da calha para '3'.

Em seguida, vá para a guia Design e carregue uma imagem de plano de fundo para ambas as colunas e faça as seguintes alterações no preenchimento personalizado de ambas as colunas:

Top 5%
Certo: 10%
Inferior: 5%
Esquerda: 10%

Depois de adicionar esta segunda seção, é assim que seu layout deve ficar agora:

Padrinho, madrinha, noivos e padrinhos

Por que não colocar as pessoas mais importantes da sua vida no site do seu casamento? Dando quem vai ser o padrinho, a madrinha de casamento, os bridesmen e os padrinhos de casamento, pode dar um pequeno impulso extra para o seu site.

Para adicionar esta parte ao seu site, comece adicionando uma nova seção padrão à sua página. Dentro dessa nova seção, você terá que criar três linhas com diferentes colunas e módulos.

Agora, depois de criar a seção, que é uma seção padrão, dê a ela a seguinte cor de fundo: '# fae4de'. Você não terá que alterar mais nada nas configurações da seção para que possa pressionar Salvar e Sair.

Criando o Módulo de Texto

Em seguida, crie sua primeira linha de largura total. A única coisa que você terá que colocar lá é um Módulo de Texto. Abra o Módulo de Texto, preencha a caixa de texto e selecione 'Centralizar' no campo Orientação do Texto.

Em seguida, vá para Configurações avançadas de design, defina a fonte do texto como 'Tangerina', o tamanho da fonte do texto como '100px' (desktop e tablet) e '68% '(telefone) e a cor da fonte do texto como' # 9b857b '. Role para baixo na mesma guia e altere as margens para '10% 'superior e' 5% 'inferior.

Clique em Salvar e sair. Seu primeiro módulo e linha estão concluídos.

Adicione outra linha, neste caso com duas colunas e adicione 5% às margens superior e inferior. Em seguida, adicione um módulo de pessoa na primeira coluna da linha.

O Módulo de Imagem e Pessoa

Continuando, abra as configurações do módulo de pessoa. Faça upload de uma imagem, insira a URL dos canais de mídia social nos campos e escreva um pouco sobre eles na caixa de texto. Se você não tiver certeza de quais dimensões suas imagens devem ter, dê uma olhada nesta postagem do blog.

Em seguida, vá para Configurações avançadas de design e faça os seguintes ajustes:

Fonte do cabeçalho: Raleway Light
Estilo da fonte do cabeçalho: negrito
Tamanho da fonte do cabeçalho: 14
Cor do texto do cabeçalho: # 9b857b
Altura da linha de cabeçalho: 1em
Fonte do corpo: Raleway Light
Estilo da fonte do corpo: negrito
Tamanho da fonte do corpo: 14
Cor do corpo do texto: # 9b857b
Altura da linha corporal: 1,7em

Abra as configurações do módulo de pessoa e vá para a guia CSS. No campo Member Image, adicione o seguinte código:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Agora vá em frente e clone os Módulos de Imagem e Pessoa e coloque-os na coluna certa.

Continue adicionando uma nova linha com quatro colunas e clone o módulo Imagem e Pessoa novamente (quatro vezes) e coloque-os em cada coluna. O código e as configurações que usamos na primeira vez serão aplicados a todos eles.

Seu layout deve se parecer com este agora:

Onde e quando

Esta é a última parte da página inicial do seu casamento, onde você informará o seu público sobre o local e a hora do seu casamento. Para esta seção, precisaremos de uma linha com 3 colunas (1/2, 1/4, 1/4) com a seguinte cor de fundo: '# fffaf6'.

Adicionar um mapa

Na primeira coluna desta seção, adicione um módulo Mapa. Para poder usar o recurso Mapa, você terá que inserir uma chave de API do Google. Se você não tem uma chave de API, leia aqui como fazer uma. Digite o endereço do seu casamento e deixe o módulo encontrar a localização. Para criar um alfinete em seu mapa, adicione um novo alfinete e coloque o local novamente, o alfinete aparecerá no mapa.

Nas outras colunas, faremos uso de módulos de texto e sinopses. Adicione um módulo de texto e defina as configurações de Orientação do Texto nas Configurações Gerais para 'Centro'. Em seguida, vá para Configurações avançadas de design e faça as seguintes alterações:

Fonte do texto: tangerina
Tamanho da fonte do texto: 50px
Cor do texto: # 9b857b
Altura da linha de texto: 1,7em

As configurações deste módulo de texto se aplicam aos módulos de texto em ambas as colunas.

Módulo Blurb

No Módulo de texto, adicione um Módulo Blurb. Escolha o ícone de localização, mude sua cor para '# f9c8b8', adicione a localização na caixa de texto e mude a Orientação do Texto para 'Centro'. Em seguida, vá para Configurações avançadas de design e faça as seguintes alterações:

Tamanho da fonte do ícone: 42px
Fonte do corpo: Raleway Light
Estilo da fonte: negrito
Tamanho da fonte do corpo: 14
Cor do corpo do texto: # 9b857b
Altura da linha corporal: 1em

Na próxima coluna, faça exatamente a mesma coisa. Apenas mude o ícone de sinopse para um relógio e adicione os detalhes de 'quando' na caixa de texto.

É isso. Seu layout agora deve parecer tão suave quanto o layout deste tutorial:

Na segunda parte desta minissérie, veremos como você pode criar uma página de galeria dedicada a compartilhar fotos com seus convidados após o casamento. Se você tiver algum comentário sobre este tutorial, ou se tiver alguma solicitação para tutoriais futuros; certifique-se de deixar um comentário na seção de comentários desta postagem do blog para que possamos responder a você!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!