Como criar um modelo de projeto de portfólio dinâmico com Divi & ACF
Publicados: 2019-12-23Procurando uma maneira de simplificar a maneira como você cria itens de portfólio em seu site? Se sim, você vai adorar este post. Neste tutorial, mostraremos como criar um modelo de projeto de portfólio dinâmico com o Divi's Theme Builder e o plugin ACF. Construir um modelo de projeto de portfólio permitirá que você crie o corpo do modelo uma vez e aplique-o a todos os itens do portfólio que adicionar no futuro. O modelo de design que criamos corresponde a todos os tipos de profissões criativas, mas é apenas a ponta do iceberg. Você pode adicionar quantos campos desejar e usar aqueles dentro do seu modelo. Você também poderá baixar o arquivo JSON do design que recriaremos 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 projeto de portfólio dinâmico GRATUITAMENTE
Importante: você terá que adicionar manualmente conteúdo dinâmico a cada módulo depois de configurar os campos ACF e fazer upload do arquivo JSON de modelo para o Theme Builder.
Para colocar as mãos no modelo de projeto de portfólio dinâmico gratuito, 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.
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.
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. Instale ACF e configure os campos do projeto
Instalar e ativar ACF
Comece instalando o plugin Advanced Custom Fields gratuito em seu site WordPress. Depois de instalá-lo, certifique-se de ativá-lo também.
Configurar Grupo de Campos
Depois de instalar e ativar o plugin, é hora de começar a criar os campos personalizados. Vá para as configurações do plugin e adicione um novo grupo de campo.
Modifique a localização do seu grupo de campo. Queremos que apareça apenas em nossos projetos.
- Tipo de postagem - é igual a - Projeto
Adicionar Campos
Continue adicionando um novo campo para cada um dos itens mencionados abaixo:
- Problema
- Rótulo de campo: problema
- Tipo de campo: área de texto
- Solução
- Rótulo de campo: Solução
- Tipo de campo: área de texto
- Testemunho
- Rótulo do campo: Depoimento
- Tipo de campo: Texto
- Pessoa de contato
- Rótulo do campo: pessoa de contato
- Tipo de campo: Texto
- Imagem da pessoa de contato
- Rótulo do campo: imagem da pessoa de contato
- Tipo de campo: imagem
- Cargo da pessoa de contato
- Rótulo do campo: Cargo da pessoa de contato
- Tipo de campo: Texto
- Logotipo do cliente
- Rótulo do campo: logotipo do cliente
- Tipo de campo: imagem
- Site do cliente
- Rótulo de campo: Site do cliente
- Tipo de campo: Url
- Duração do projeto
- Rótulo do campo: Duração do projeto
- Tipo de campo: intervalo
- Anexo: semanas
Saiba que você é livre para adicionar quantos campos desejar, dependendo do modelo de projeto que deseja criar. Para recriar o design exato que foi mostrado na visualização deste post, você precisará de todos os campos mencionados acima.
2. Criar Novo Projeto
Adicionar Portfólio Título e Descrição do Projeto
Depois de configurar o grupo de campos e todos os seus campos, é hora de criar um projeto de amostra. Vá para o painel do WordPress, adicione um novo projeto e insira um título e uma descrição.
Carregar imagem em destaque
Em seguida, carregue uma imagem em destaque de sua escolha.
Preencha todos os campos personalizados
Continue preenchendo todos os diferentes campos personalizados que você adicionou na primeira parte do tutorial.
3. Crie um novo modelo
Vá para Divi Theme Builder e crie um novo modelo
É hora de começar a construir o modelo! Vá para o Divi Theme Builder e adicione um novo modelo.
Usar em
Aplique o modelo a todos os seus projetos.
- Use em: todos os projetos
4. Comece a construir o corpo do modelo
Continue começando a construir o corpo personalizado do modelo.
Seção 1
Cor de fundo
Dentro do editor de template, você notará uma seção. Abra essa seção e adicione uma cor de fundo preta.
- Cor de fundo: # 000000
Espaçamento
Adicione um pouco de preenchimento personalizado superior e inferior a seguir.
- Enchimento superior: 250px
- Preenchimento inferior: 250 px
Fronteira
Adicione algum raio de borda inferior esquerdo e direito também.
- Inferior esquerdo: 8vw
- Inferior direito: 8vw
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma primeira linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo
Em seguida, adicione um Módulo de Texto e coloque algum conteúdo na caixa de conteúdo.
- Corpo: Duração do projeto:
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:
- Fonte do texto: Montserrat
- Cor do texto: # a0a0a0
- Tamanho do texto: 1,2 rem
Adicionar Módulo de Texto # 2 à Coluna
Conteúdo Dinâmico
Adicione outro Módulo de Texto à coluna e selecione o conteúdo dinâmico da duração do projeto.
- Conteúdo Dinâmico: Duração do Projeto
- Depois de: semanas
Configurações de texto
Altere as configurações de texto do módulo a seguir.
- Fonte do Texto: Lora
- Cor do texto: #ffffff
- Tamanho do texto: 1,5 rem
Adicionar Módulo de Texto # 3 à Coluna
Conteúdo Dinâmico
Adicione outro Módulo de Texto e selecione o conteúdo dinâmico do título de postagem / arquivo.
- Conteúdo Dinâmico: Postagem / Título do Arquivo
- Antes: <H1>
- Depois: </H1>
Configurações de texto H1
Defina o estilo das configurações de texto H1 do módulo.
- Fonte do cabeçalho: Montserrat
- Cor do texto do título: #ffffff
- Tamanho do texto do título: 6rem (desktop), 3rem (tablet e telefone)
Espaçamento
Conclua as configurações do módulo adicionando alguma margem superior e inferior.
- Margem superior: 100px
- Margem inferior: 100px
Adicionar módulo de conteúdo de postagem
Configurações de texto
O próximo e último módulo que precisamos na coluna é um Módulo Post Content. Isso mostrará a descrição do seu projeto. Altere as configurações de texto do módulo da seguinte forma:
- Fonte do Texto: Lora
- Cor do texto: #ffffff
- Tamanho do texto: 1.5 rem (desktop), 0.9 rem
- Altura da linha de texto: 2em
Adicionar linha # 2
Estrutura da Coluna
Adicione outra linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Imagem à Coluna 1
Conteúdo Dinâmico
Adicione um Módulo de imagem à coluna 1 e selecione o conteúdo dinâmico do logotipo do cliente.
- Conteúdo dinâmico: logotipo do cliente
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo
Em seguida, adicione um Módulo de Texto à coluna 2 e insira uma cópia de sua escolha.
Vincular conteúdo dinâmico
Vincule o módulo ao site do cliente selecionando o conteúdo dinâmico do site do cliente nas configurações de link.
- Conteúdo Dinâmico: Site do Cliente
Configurações de texto
Altere as configurações de texto do módulo a seguir.
- Fonte do texto: Montserrat
- Cor do texto: #ffffff
- Tamanho do texto: 1,5 rem
- Altura da linha de texto: 1em
Espaçamento
Adicione um pouco de preenchimento de fundo personalizado também.
- Preenchimento inferior: 50 px
Fronteira
E complete as configurações do módulo adicionando uma borda inferior.
- Largura da borda inferior: 1 px
- Cor da borda inferior: # ffc300
Adicionar Seção # 2
Espaçamento
Para a próxima seção! Remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar linha
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Espaçamento
Abra as configurações de linha e remova todo o preenchimento padrão superior inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar Módulo de Imagem à Coluna
Conteúdo Dinâmico
O único módulo de que precisamos nesta linha é um Módulo de imagem. Conecte a imagem à imagem em destaque do projeto.
- Conteúdo dinâmico: imagem em destaque
Fronteira
Adicione algum raio de borda inferior esquerdo e direito também.
- Inferior esquerdo: 8vw
- Inferior direito: 8vw
Adicionar Seção # 3
Espaçamento
Adicione outra seção regular com algum preenchimento superior e inferior personalizado.
- Enchimento superior: 250px
- Preenchimento inferior: 250 px
Adicionar linha # 1
Estrutura da Coluna
Adicione uma nova linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Texto à Coluna 1
Adicionar conteúdo H2
Adicione um Módulo de Texto à coluna 1 e insira algum conteúdo H2 de sua escolha.
Configurações de texto H2
Altere as configurações de texto H2 da seguinte forma:
- Fonte do título 2: Montserrat
- Peso da fonte do cabeçalho 2: negrito
- Cabeçalho 2 Tamanho do texto: 2rem
Adicionar Módulo de Texto à Coluna 2
Conteúdo Dinâmico
Passe para a segunda coluna, adicione um Módulo de Texto e use o conteúdo dinâmico do problema.
- Conteúdo Dinâmico: Problema
Configurações de texto
Em seguida, altere as configurações de texto do módulo:
- Fonte do Texto: Lora
- Tamanho do texto: 1.5rem (desktop), 0.9vw (tablet e telefone)
- Altura da linha de texto: 2em
Clone Row
Depois de concluir a linha, vá em frente e clone-a inteiramente.
Alterar cópia do módulo de texto na coluna 1
Altere a cópia do Módulo de Texto da coluna 1 da linha duplicada.
Alterar o conteúdo dinâmico do módulo de texto na coluna 2
Modifique o conteúdo dinâmico do Módulo de Texto na coluna 2 da linha duplicada também.
- Conteúdo Dinâmico: Solução
Adicionar Módulo de Botão à Coluna 2 da Linha Duplicada
Adicionar cópia
Continue adicionando um Módulo de Botão à coluna 2 da linha duplicada. Adicione alguma cópia de sua escolha.
Configurações de botão
Vá para a guia de design do módulo e altere as configurações do botão da seguinte forma:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 1,5 rem.
- Cor do texto do botão: # 000000
- Raio da borda do botão: 0 px
- Fonte do botão: Montserrat
Espaçamento
Conclua as configurações do módulo adicionando alguma margem superior.
- Margem superior: 100px
Adicionar Seção # 4
Cor de fundo
Vamos para a próxima e última seção! Adicione uma cor de fundo preta.
- Cor de fundo: # 000000
Fronteira
Adicione algum raio de borda superior esquerdo e direito à seção também.
- Superior esquerdo: 8vw
- Superior direito: 8vw
Adicionar linha
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Depoimento à Coluna
Conteúdo Dinâmico
Adicione um Módulo de depoimento à linha e selecione algum conteúdo dinâmico para os diferentes elementos dentro do módulo.
- Autor: pessoa de contato
- Cargo: Cargo da Pessoa de Contato
- Corpo: Testemunho
- Imagem: imagem da pessoa de contato
Elementos
Desative o ícone de citação a seguir.
- Mostrar ícone de citação: Não
Cor de fundo
Em seguida, mude a cor de fundo do módulo para preto.
- Cor de fundo: # 000000
Configurações de texto
Vá para a guia de design do módulo e altere a cor do texto.
- Cor do Texto: Claro
Configurações do corpo do texto
Modifique as configurações do corpo do texto a seguir.
- Fonte do corpo: Montserrat
- Tamanho do corpo do texto: 2rem (desktop), 1.5rem (tablet e telefone)
Configurações de texto do autor
Altere também as configurações de texto do autor.
- Fonte do Autor: Lora
- Tamanho do texto do autor: 1.4 rem (desktop), 0.9 rem (tablet e telefone)
Configurações de posição de texto
E conclua as configurações do módulo alterando as configurações de texto de posição de acordo:
- Fonte de posição: Lora
- Posição da cor do texto: # a8a8a8
- Tamanho do texto da posição: 1.4 rem (desktop), 0.9 rem (tablet e telefone)
4. Salve as alterações do Theme Builder e visualize o resultado
Depois de concluir o modelo, salve todas as alterações do Divi Theme Builder e veja o resultado em seu projeto!
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 post, mostramos como criar um belo modelo de projeto de portfólio usando o Divi Theme Builder e o plugin ACF. Essa é uma ótima maneira de simplificar a maneira como você exibe projetos em seu site. Depois de atribuir o modelo a todos os seus projetos, ele se aplicará automaticamente a futuros itens de portfólio que você adicionar. Você também conseguiu fazer o download do arquivo JSON de modelo deste design 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.