Como criar uma página inicial do Giving Tuesday com Divi e GiveWP

Caso você não tenha ouvido, estamos nos preparando para começar uma campanha massiva de Black Friday e Cyber ​​Monday aqui na Elegant Themes. Mas há outra coisa legal acontecendo nesta época do ano. Chama-se Terça-feira de doações (este ano cai em 28 de novembro) e é um esforço das organizações sem fins lucrativos do mundo para lembrar a todos que, embora tenham aberto suas carteiras para compras pessoais, podem querer considerar doar para aqueles em precisa também. Que ideia legal! E já que estamos no negócio de empoderar nossa comunidade, pensamos que seria uma boa ideia ajudar aqueles que estão usando Divi (ou Extra) e trabalhando para organizações sem fins lucrativos a fazer a melhor página de destino de doações na terça-feira de doações que eles estão capaz de.

Aqui está uma visão rápida do que estaremos criando hoje.

Visualização do resultado final

No post de hoje, criaremos uma bela landing page Giving Tuesday completa com um formulário de doação visualmente impressionante (e funcional, é claro).

Instale o plugin GiveWP e crie um novo formulário

O formulário de doação que usaremos neste tutorial é gerado pelo plugin GiveWP. Para instalá-lo, navegue no Admin do WordPress até Plugins> Adicionar novo . Lá, use o recurso de pesquisa para encontrar o plugin Give. Clique no botão “Instalar agora” e depois ative-o.

Em seguida, vá para Doações> Adicionar formulário . Insira um título para o formulário. Eu escolhi “Apoie seus agricultores locais e agricultura sustentável”.

A seguir, você verá as opções do formulário de doação. Vamos examiná-los guia por guia.

Na primeira guia, chamada Opções de Doação, defina as seguintes configurações na seção superior.

Opção de doação: Doação multinível

Exibição de doações: botões

Valor personalizado: ativado

Na seção Nível de doação, configure os seguintes níveis de doação: $ 1, $ 5, $ 10, $ 25, $ 50, $ 100. Certifique-se de definir o nível de doação de $ 5,00 como seu novo padrão.

Agora vá para a guia Exibição de formulário. A única coisa que você precisa fazer aqui é alterar a configuração Opções de exibição para Modal.

Na guia Objetivo de doação, primeiro ative a opção Objetivo de doação. Depois de fazer isso, defina o valor da sua meta. Eu configurei o meu para $ 1.000. Também defini o formato da meta como porcentagem. Isso permitirá que os visualizadores do formulário saibam a porcentagem de nossa meta que atingimos, não a quantidade real de dinheiro que arrecadamos. E, finalmente, mudei ligeiramente a cor da barra de progresso para corresponder ao mesmo verde usado em todo o resto do meu site (# 07c907).

Por último, precisamos adicionar algum conteúdo do formulário. Na guia Conteúdo do formulário, ative Exibir conteúdo. Em seguida, adicione algum texto à área de conteúdo.

Para os fins deste tutorial, essas são todas as configurações do formulário Give que precisamos definir. Clique no botão Publicar e observe que você precisará do shortcode deste formulário de doação mais tarde.

Ao configurar este formulário para valer, você também precisará ir para Doações> Configurações e configurar itens como Gateways de pagamento, e-mails, etc.

Prepare seus ativos de imagem

Também precisaremos de uma imagem de fundo personalizada para nossa seção de formulários. Obviamente, isso é opcional, não afeta o funcionamento do formulário. Mas parece legal e adiciona um bom design ao nosso exemplo de mercado de fazendeiros.

Para criar esta imagem usei o Photoshop, mas provavelmente você também pode usar um software gratuito chamado Gimp. É uma ferramenta de código aberto que possui muitos dos mesmos recursos.

Veja como criá-lo.

Primeiro, encontre uma imagem com elementos relacionados à sua organização sem fins lucrativos. Como o exemplo que estou usando é para um mercado de fazendeiros, decidi usar vegetais. Eu pesquisei em um site de imagens por “vegetais isolados”. Normalmente, o termo “isolado” em um site de imagens de ações se refere a itens em um fundo branco. Isso os torna fáceis de isolar, excluindo o plano de fundo. O que foi exatamente o que eu fiz.

Aqui está a imagem que encontrei.

Então abri essa imagem no photoshop.

Como a camada inicial está bloqueada por padrão, duplique-a clicando com o botão direito sobre ela e selecionando “Duplicar camada”. Em seguida, oculte a primeira camada clicando no ícone de olho próximo a ela.

Em seguida, use a ferramenta varinha mágica para selecionar todo o espaço em branco ao redor e dentro dos elementos vegetais. Pressione a tecla Backspace para excluí-lo.

Em seguida, navegue no menu superior para Imagem> Tamanho da tela e redimensione sua tela para 1920 × 1080. Quando você fizer isso, seus elementos provavelmente serão muito grandes em comparação com sua nova tela menor.

No teclado, pressione Command + T ou vá em Edit> Transform> Scale . Redimensione sua camada de elementos isolados para caber no novo tamanho da tela.

Isso é o mais longe que iremos nessa imagem por agora. Certifique-se de que salvou o novo arquivo do photoshop. Continuaremos abaixo assim que tivermos nosso novo formulário de doação como referência de tamanho.

Criando o Design no Divi

Se ainda não o fez, você vai querer baixar e instalar nosso novo Farmers Market Layout Pack (gratuito). Siga as instruções nesse post para instalar o pacote de layout. Depois de instalado, siga as instruções nesta postagem do blog para configurar seu site para o próximo estágio de personalização, que abordaremos aqui.

Quando estiver pronto, navegue até a página Doar e use o botão na parte superior da página para habilitar o construtor visual. Vou levá-lo seção por seção para baixo na página, fazendo personalizações à medida que avançamos.

Já que estamos preparando esta página para uma campanha de terça-feira de doações, provavelmente deveríamos fazer menção a isso logo no topo. Passe o mouse sobre a seção do herói e abra as configurações do módulo clicando no ícone de engrenagem nos controles cinza do módulo.

Em seguida, ainda na guia Conteúdo, role para baixo e abra as configurações de link. No título do campo URL do Botão # 1 coloque o texto “#donate”. Isso funcionará como um link de âncora para o formulário que criaremos a seguir.

Por último, navegue até a guia Design e abra as configurações de SubHead Text. Defina o peso da fonte do subtítulo como negrito.

A primeira seção agora está completa. Role para baixo até a terceira seção (aquela com uma citação grande) e clique no ícone de engrenagem nos controles da seção azul. Defina a cor de fundo para # F6F6F6.

A seguir, abra as configurações do módulo para o módulo de texto de cotação. Mude o fundo disso para # F6F6F6 também.

Esta seção também está completa. Passe para a quarta seção imediatamente abaixo dela. Esta é a nossa seção de formulário de doação.

Como esta seção existe no pacote de layout, é mais uma seção de “promessa”, onde as pessoas podem usar o formulário de contato para enviar a você uma promessa de quanto pretendem dar. Mas vamos transformá-lo em um formulário de doação real, onde podemos aceitar dinheiro diretamente.

Vamos começar com as configurações da seção e trabalhar nelas. Primeiro, precisamos mudar a cor de fundo. Defina-o com o mesmo # F6F6F6 da seção acima.

Em seguida, na aba Design da seção, abra as opções de Espaçamento. Adicione o seguinte preenchimento personalizado:

Superior: 250px

Certo: 40px

Inferior: 250px

Esquerda: 40px

Por último, ainda nas configurações da seção, navegue até a guia Avançado e abra os controles CSS ID e Classes. Abaixo do CSS ID, escreva a palavra “doar”.

Salve suas novas configurações.

Agora precisamos nos livrar do nosso formulário de compromisso. É composto por dois módulos de texto e um módulo de formulário de contato. Vá em frente e exclua-os. Em seu lugar, adicione um módulo de texto.

Dentro do novo módulo de teste, coloque o código de acesso para o formulário de doação que criamos anteriormente. Defina o plano de fundo como branco sólido (#ffffff).

Agora, navegue até a guia Design. Um segredo pouco conhecido é que os elementos gerados por códigos de acesso de terceiros podem ser personalizados até certo ponto usando as configurações de design do módulo de texto.

Nas opções de texto, defina as seguintes configurações:

Tamanho do texto do texto: 18 px

Altura da linha de texto: 1.8em

Nas opções de texto do título para H2, defina as seguintes configurações:

Tamanho do texto do título 2: 36px

Altura da linha do título 2: 1,5em

Nas opções de espaçamento, defina as seguintes configurações:

Preenchimento personalizado: 50xp (para todos os campos)

Nas opções de Sombra da caixa, escolha a última opção na linha superior (na extrema direita). Em seguida, configure esta opção:

Força de propagação da sombra da caixa: -2px

Finalmente, nas opções de animação, defina estas configurações:

Estilo de Animação: Bounce

Direção da animação: para cima

Duração da animação: 800ms

Atraso de animação: 400 ms

Opacidade inicial da animação: 100%

Depois de definir todas essas configurações de design, salve-as. Seu formulário de doação deve ter a seguinte aparência.

Claro que esta é uma forma perfeitamente aceitável. Mas na minha opinião é um pouco chato. Há duas coisas que eu gostaria de fazer para apimentar isso. Primeiro, vamos combinar o estilo do botão Doar Agora para combinar com outros botões Doar em todo o site.

Navegue até as opções de tema em Divi> Divi Library> General Role para baixo até a caixa Custom CSS e cole os estilos de botão para seguir lá:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Salve suas alterações e volte para a página de doações. Atualize-o e dê uma olhada no seu formulário. Agora deve ser assim.

Agora estamos chegando a algum lugar! Vamos adicionar o toque final. A imagem de plano de fundo da seção que começamos a criar anteriormente.

Para completá-lo, redimensione a janela do seu navegador para 1920 × 1120. Você pode usar um site como o whatsmybrowsersize.com.

Em seguida, faça uma captura de tela de sua página de doações com nosso novo formulário centralizado nela. Deve ser assim.

Abra esta nova captura de tela no Photoshop junto com o arquivo photoshop que criamos anteriormente.

Use a ferramenta Rectangle Marquee para selecionar seu formulário. Em seguida, vá em Select> Inverse para selecionar tudo, exceto o seu formulário. Exclua sua nova seleção. Agora você deve ter uma tela semelhante a esta.

Agora você tem um "modelo de formulário" com o tamanho correto que pode ser usado como referência para sua imagem de fundo. Com os dois arquivos do photoshop abertos, arraste a camada do photoshop contendo seu formulário isolado para o arquivo de imagem de fundo.

Em seu painel de camadas, ajuste a opacidade de sua camada de formulário para 50%. Depois, com o formulário ainda selecionado, clique no ícone de cadeado e bloqueie-o. Agora deve ser assim.

Agora você pode selecionar sua camada de vegetais no painel de camadas. Use a ferramenta laço para selecionar elementos individuais e excluí-los ou reorganizá-los até obter a configuração desejada. Minha configuração final ficou assim.

Depois de ter sua própria configuração final, você irá para Arquivo> Exportar> Exportar como e escolher PNG para manter o fundo transparente.

Agora podemos adicionar essa imagem à seção Formulário de Doação de nossa página de Doações, de volta ao nosso site Divi.

Abra as configurações da seção. Em Background, deixe a cor que definimos anteriormente e escolha a opção de imagem. Adicione sua nova imagem de fundo aqui. Em seguida, defina as seguintes configurações:

Tamanho da imagem de fundo: tamanho real

Posição da imagem de fundo: centro

Salve essas configurações. A seção do seu formulário agora deve estar completa.

Para finalizar completamente o seu design (para coincidir com a visualização da página inteira desde o início do post), simplesmente altere as cores de fundo das seções da página restantes para coincidir com as da captura de tela. Você usará cinza (# F6F6F6) ou branco (#ffffff).

Feliz arrecadação de fundos!

Com o Divi e um plugin tão poderoso quanto o Give, temos certeza de que seus esforços no Giving Tuesday serão um grande sucesso. Obrigado por acompanhar. Se você ainda quiser alguma ajuda com qualquer coisa abordada neste tutorial, estarei conduzindo uma transmissão ao vivo hoje às 15h em nossa página do Facebook e no canal do YouTube, onde mostrarei todo o processo em um único take. Também responderei perguntas à medida que avançarmos. Espero ver você lá!