Como criar um modelo de cartão de receita com o Divi Theme Builder

Publicados: 2019-11-26

Os blogueiros de comida e criadores de receitas sabem como é importante ter uma aparência consistente para as receitas que publicam. Uma solução comum é usar um plug-in de cartão de receita, mas isso vem com limitações de design. Agora, com o Divi Theme Builder, você pode criar seu próprio modelo de cartão de receita para usar em seu site e blog. Com a ajuda do plugin Advanced Custom Fields (ACF), projetar um cartão de receita exclusivo e reutilizável é mais fácil do que nunca.

Nesta postagem, mostraremos como criar um modelo de cartão de receita com conteúdo dinâmico. Usando as configurações do Divi Theme Builder, o design pode ser aplicado às postagens do blog que incluem receitas selecionando essa categoria específica. Esperamos que este tutorial inspire você a criar seu próprio estilo de cartões de receita com seus próprios campos personalizados.

Vamos dar uma olhada na aparência do design em diferentes tamanhos de tela.

Pré-visualização do modelo de cartão de receita

Vamos dar uma olhada na aparência do design em diferentes tamanhos de tela.

Área de Trabalho

Tábua

Móvel

1. Baixe e instale o plugin de campos personalizados avançados

Pesquise e instale

Encontre o plug-in ACF pesquisando 'Campos personalizados avançados' na barra de pesquisa do plug-in, instale-o e ative-o.

Adicionar Novo Grupo de Campo

Clique na guia ACF e selecione 'adicionar novo'. Nomeie o grupo como 'Cartão de receita'. Adicione os campos personalizados um por um através do botão 'adicionar campo'.

Adicionar campos personalizados

Para cada campo personalizado, clique no botão 'adicionar campo'. Cada um pode ser personalizado para um tipo diferente de conteúdo. A lista abaixo especifica o rótulo e o tipo de cada campo. Adicione a palavra 'receita' no início de cada rótulo de campo para que seja fácil de encontrar ao construir os módulos. O nome do campo será preenchido automaticamente assim que você adicionar o rótulo.

Título da Receita

Comece com o título da receita.

  • Rótulo do campo: título da receita
  • Tipo de campo: Texto
  • Requerido ?: Sim
  • Texto de espaço reservado: título da receita
  • Limite de caracteres: 30

Autor da Receita

Em seguida, crie um campo para o autor.

  • Rótulo do campo: Autor da receita
  • Tipo de campo: Texto
  • Requerido ?: Sim
  • Texto de espaço reservado: Autor

Tempo de preparação da receita

Siga isso com o tempo de preparação.

  • Rótulo do campo: Tempo de preparação da receita
  • Tipo de Campo: Número
  • Requerido ?: Sim
  • Texto de espaço reservado: ##
  • Preceder: Tempo de preparação:
  • Anexo: min.

Receita Doses

Depois, as porções.

  • Rótulo do campo: Receita porções
  • Tipo de Campo: Número
  • Requerido ?: Sim
  • Texto de espaço reservado: ##
  • Incluir: Porções:

Dica de sabor da receita

Adicione um campo de dica de sabor.

  • Rótulo do campo: Dica de sabor da receita
  • Tipo de campo: Texto
  • Requerido ?: Sim
  • Preceder: Dica de sabor:
  • Limite de caracteres: 40

Imagem de receita

Agora, adicione o campo de imagem.

  • Rótulo do campo: imagem da receita
  • Tipo de campo: imagem
  • Requerido ?: Sim

Título de Ingredientes da Receita

Em seguida, o título dos ingredientes.

  • Rótulo do campo: Título dos ingredientes da receita
  • Tipo de campo: Texto
  • Instruções: Basta escrever o mesmo que o texto do espaço reservado.
  • Requerido ?: Sim
  • Texto de espaço reservado: Ingredientes

Lista de Ingredientes da Receita

Em seguida, veja a lista de ingredientes.

  • Rótulo do campo: lista de ingredientes da receita
  • Tipo de campo: área de texto
  • Instruções: Adicione um espaço após cada item
  • Requerido ?: Sim
  • Linhas: 8
  • Novas linhas: adicionar automaticamente <br>

Título de preparação da receita

Ao lado do último, o título da preparação.

  • Rótulo do campo: Título de preparação da receita
  • Tipo de campo: Texto
  • Instruções: Basta escrever o mesmo que o texto do espaço reservado.
  • Requerido ?: Sim
  • Placeholder Text: Preparação

Lista de preparação de receitas

Finalmente, a lista de preparação.

  • Rótulo de campo: lista de preparação de receita
  • Tipo de campo: área de texto
  • Instruções: Adicione um espaço após cada item
  • Requerido ?: Sim
  • Linhas: 10
  • Novas linhas: adicionar automaticamente <br>

Publicar Grupo de Campo

Publique o grupo de campo. Sua janela de grupo de campo deve ser semelhante à imagem abaixo.

Como acessar o conteúdo do plug-in ACF para o modelo de cartão de receita no Divi Builder

Os campos personalizados avançados podem ser adicionados a um módulo Divi clicando no ícone de conteúdo dinâmico. Este ícone está no canto superior direito da caixa de conteúdo. Isto é o que parece:

2. Crie um novo modelo de cartão de receita com Divi Builder

Passos do Divi Theme Builder

1. Criar categoria de receitas

Você precisa de uma categoria chamada 'receitas' para que possa atribuir o modelo a ela. Adicione-o na guia de categoria por meio do painel.

2. Abra o Divi Theme Builder e adicione um novo modelo

Abra o criador de temas Divi e adicione um novo modelo.

3. Adicionar Corpo Global

Clique em 'adicionar corpo global' e atribua o modelo a postagens em categorias específicas> receitas. Em seguida, clique no botão 'criar modelo'.

4. Construir corpo personalizado

Clique em 'adicionar corpo global' e selecione 'adicionar corpo personalizado'.

3. Recrie o design do cartão de receita usando conteúdo dinâmico

Adicionar nova seção

Agora, podemos começar a projetar o modelo de cartão de receita. Quando o Divi builder for aberto, selecione 'build from scratch'. Comece adicionando uma nova seção.

Fundo

Nas configurações da seção, adicione uma cor de fundo.

  • Cor de fundo: cinza claro #ededed

Dimensionamento

Além disso, ajuste o tamanho na guia de design.

  • Largura: 100%
  • Largura máxima: 100%

Adicionar 1ª linha

Estrutura da Coluna

Adicione uma nova linha com uma coluna.

Dimensionamento

Antes de adicionar módulos, ajuste as configurações de dimensionamento da linha.

  • Largura máxima: 90%

Configurações de coluna

Fundo

Personalize as configurações da coluna dentro da linha. Primeiro, adicione uma cor de fundo.

  • Cor de fundo: branco #ffffff

Fronteira

Em seguida, modifique os estilos de borda.

  • Cantos arredondados: 1vw todos os quatro cantos
  • Estilos de borda: todos os quatro lados
  • Largura: 5px
  • Cor: Cinza Muito Escuro # 333333

Adicionar Módulo de Texto com Conteúdo Dinâmico

Contente

Depois de concluir as configurações de linha e coluna, é hora de adicionar módulos. Comece adicionando um módulo de texto. Na janela de conteúdo, selecione o conteúdo dinâmico para o título da receita. Uma vez selecionado, clique no ícone de engrenagem e insira snippets H1.

  • Corpo: Título da Receita
  • Configurações do corpo:
    • Antes: <H1>
    • Depois: </H1>

Texto do Título

Em seguida, defina o estilo das configurações de texto H1 de acordo:

  • Nível de direção: H1
  • Fonte: Orienta
  • Peso: Negrito
  • Alinhamento: Centro
  • Cor: Cinza Muito Escuro # 3d3d3d
  • Tamanho:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telefone: 5vw
  • Espaçamento entre letras: 3px
  • Altura da linha: 1,5em

Espaçamento

Modifique os valores de espaçamento também.

  • Margem inferior:
    • Desktop: -1vw
    • Tablet: -2vw
    • Telefone: -5vw
  • Enchimento superior:
    • Desktop + Tablet: 1vw
    • Telefone: 2vw
  • Preenchimento inferior: 0vw
  • Preenchimento esquerdo + direito:
    • Desktop + Tablet: 3vw
    • Telefone: 4vw

Adicionar segundo módulo de texto com conteúdo dinâmico

Contente

Adicione um segundo módulo de texto e selecione o conteúdo dinâmico para o autor da receita.

  • Corpo: Autor da Receita

Texto

Em seguida, defina o estilo do texto.

  • Fonte: Encode Sans
  • Cor: Cinza Muito Escuro # 3d3d3d
  • Tamanho:
    • Desktop: 1.4vw
    • Tablet: 2,4vw
    • Telefone: 3vw
  • Alinhamento: Centro

Espaçamento

Depois, ajuste o espaçamento.

  • Margem superior: 1,5vw
  • Enchimento superior:
    • Desktop + Tablet: 0vw
    • Telefone: 2vw
  • Preenchimento inferior: 2vw
  • Preenchimento esquerdo + direito:
    • Desktop: 2vw
    • Tablet + Telefone: 3vw

Adicionar 2ª linha

Estrutura da Coluna

Agora, adicione uma segunda linha usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e ajuste as configurações de dimensionamento de acordo:

  • Largura da calha: 2
  • Largura: 90%
  • Largura máxima: 100%
  • Alinhamento de linha: esquerda

Espaçamento

Então, o espaçamento.

  • Preenchimento superior + inferior: 0,5vw
  • Preenchimento esquerdo: 10vw

Visibilidade

Por último, na guia avançada, ajuste a visibilidade.

  • Excesso horizontal: visível
  • Estouro vertical: visível

Configurações da coluna 1 + 2 + 3

Fronteira

Defina o estilo de todas as três colunas da mesma maneira. Primeiro, vá para as configurações de borda e faça algumas alterações. Repita para todas as três colunas.

  • Cantos arredondados: 1vw todos os quatro cantos
  • Estilos de borda: todos os quatro lados
  • Largura: 5px
  • Cor: Cinza Muito Escuro # 333333

Transformar

Para dar ao design um efeito de foco, ajuste as configurações de transformação da seguinte maneira. Repita para todas as três colunas.

  • Escala de transformação ao passar o mouse: 105% x 105%

Adicionar Módulo de Texto à Coluna 1

Contente

Adicione um módulo de texto e deixe a janela de conteúdo vazia por enquanto. Nós vamos adicionar isso mais tarde.

Fundo

Adicione uma cor de fundo ao módulo.

  • Cor de fundo: Verde Lima # b1e88d

Texto do Título

A seguir, defina o estilo das configurações de texto H5.

  • Nível de direção: H5
  • Fonte H5: Orienta
  • Cor H5: Cinza Muito Escuro # 3d3d3d
  • Tamanho H5:
    • Desktop: 1vw
    • Tablet: 2.3vw
    • Telefone: 3.3vw
  • Alinhamento: Centro

Espaçamento

Finalmente, ajuste os valores de espaçamento como segue.

  • Enchimento superior:
    • Desktop: 1vw
    • Tablet: 1,5vw
    • Telefone: 3,5vw
  • Preenchimento inferior:
    • Desktop: 0,5vw
    • Tablet + telefone: 1,5vw
  • Preenchimento esquerdo + direito:
    • Desktop: 2vw
    • Tablet + Telefone: 3vw

Duplique o Módulo de Texto da Coluna 1 Duas Vezes e Mova para as Colunas 2 e 3

Na visualização wireframe, duplique o módulo de texto na primeira coluna. Em seguida, mova as duplicatas para as colunas 2 e 3.

Adicionar Conteúdo Dinâmico ao Módulo de Texto na Coluna 1

Adicione o conteúdo dinâmico para o tempo de preparação e ajuste as configurações.

  • Corpo: Tempo de preparação da receita
  • Configurações do corpo:
    • Antes: <H5> Tempo de preparação:
    • Depois: min. </H5>

Adicionar conteúdo dinâmico ao módulo de texto na coluna 2

Adicione o conteúdo dinâmico para porções de receita e ajuste as configurações.

  • Corpo: Receita Porções
  • Configurações do corpo:
    • Antes: <H5> Porções:
    • Depois: </H5>

Adicionar Conteúdo Dinâmico ao Módulo de Texto na Coluna 3

Adicione o conteúdo dinâmico para a dica de sabor e ajuste as configurações.

  • Corpo: Dica de sabor da receita
  • Configurações do corpo:
    • Antes: <H5> Dica de sabor:
    • Depois: </H5>

Adicionar 3ª linha

Estrutura da Coluna

Agora adicione a terceira linha usando a seguinte estrutura de coluna:

Dimensionamento

Antes de adicionar qualquer módulo, ajuste o tamanho da linha.

  • Largura de calha personalizada: 2
  • Largura: 80%
  • Largura máxima: 100%

Espaçamento

Além disso, apague a margem superior padrão.

  • Margem superior: 0vw

Visibilidade

Finalmente, ajuste a visibilidade na guia avançada.

  • Excesso horizontal: visível
  • Estouro vertical: visível

Configurações da coluna 1 + 2 + 3

Fronteira

Defina o estilo de todas as três colunas da mesma maneira, começando com as configurações de borda. Repita para as colunas 2 e 3.

  • Cantos arredondados: 1vw todos os quatro cantos
  • Estilos de borda: todos os quatro lados
  • Largura: 5px
  • Cor: Cinza Muito Escuro # 333333

Transformar

Continue adicionando uma transformação de foco na guia de design. Repita para as colunas 2 e 3.

  • Escala de transformação ao passar o mouse: 105% x 105%

Adicionar Módulo de Imagem com Conteúdo Dinâmico à Coluna 1

Contente

Adicione um módulo de imagem com conteúdo dinâmico para a imagem da receita.

  • Imagem: Imagem de Receita

Adicionar Módulo de Texto com Conteúdo Dinâmico à Coluna 2

Contente

Agora, adicione um módulo de texto com conteúdo dinâmico para o título dos ingredientes. Clique no ícone de engrenagem e insira os trechos H3 da seguinte maneira.

  • Corpo do texto: Título dos ingredientes da receita
  • Configurações do corpo:
    • Antes: <H3>
    • Depois: </H3>

Texto do Título

Em seguida, defina o estilo do texto do título.

  • Nível de direção: H3
  • H3Font: Orienta
  • H3 Cor: Cinza Muito Escuro # 3d3d3d
  • Tamanho H3:
    • Desktop: 1.6vw
    • Tablet: 2vw
    • Telefone: 5.5vw
  • Alinhamento: Centro

Espaçamento

Complete o módulo ajustando o espaçamento.

  • Margem inferior: 0vw
  • Enchimento superior:
    • Desktop: 2vw
    • Tablet: 3vw
    • Telefone: 4vw
  • Preenchimento esquerdo + direito:
    • Desktop: 2vw
    • Tablet + Telefone: 3vw

Adicionar Módulo Divisor à Coluna 2

Linha

Adicione um módulo divisor e estilize-o da seguinte maneira.

  • Cor: Verde Lima # b1e88d

Dimensionamento

Em seguida, ajuste os valores de dimensionamento.

  • Peso: 5px
  • Largura: 40%
  • Alinhamento: Esquerda

Espaçamento

Por último, ajuste o espaçamento.

  • Margem superior: 0vw

Adicionar Módulo de Texto com Conteúdo Dinâmico à Coluna 2

Contente

Adicione um módulo de texto com conteúdo dinâmico para a lista de ingredientes. Clique no ícone de engrenagem na guia de conteúdo dinâmico e habilite o HTML bruto.

  • Corpo do Texto: Lista de Ingredientes da Receita
  • Configurações do corpo: Habilitar HTML bruto

Texto

Em seguida, estilize o texto da seguinte maneira.

  • Fonte: Encode Sans
  • Cor: Cinza Muito Escuro # 333333
  • Tamanho:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telefone: 3vw

Espaçamento

Além disso, ajuste o espaçamento.

  • Margem superior:
    • Desktop: -1vw
    • Tablet: -3vw
    • Telefone: -5vw
  • Enchimento superior:
    • Desktop + Tablet: 0vw
  • Preenchimento inferior:
    • Desktop: 3vw
    • Tablet + telefone: 4vw
  • Preenchimento esquerdo + direito:
    • Desktop: 3vw
    • Tablet: 4vw
    • Telefone: 5vw

Duplique todos os módulos na coluna 2 e vá para a coluna 3

Na visão wireframe, duplique todos os módulos na coluna dois. Mova os módulos duplicados para a coluna três na mesma ordem.

Adicionar Conteúdo Dinâmico no 1º Módulo de Texto na Coluna 3

Adicione o conteúdo dinâmico para o título de preparação.

  • Corpo: Título de preparação da receita

Adicionar Conteúdo Dinâmico no 2º Módulo de Texto na Coluna 3

Além disso, adicione o conteúdo dinâmico da lista de preparações ao último módulo de texto da coluna.

  • Corpo: Lista de Preparação de Receitas

Adicionar 4ª linha

Estrutura da Coluna

Para completar o modelo, precisamos de um módulo de conteúdo de postagem. Adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Antes de adicionar um módulo, ajuste o tamanho da linha.

  • Largura de calha personalizada: 2
  • Largura: 100%
  • Largura máxima: 80%

Espaçamento

Modifique as configurações de espaçamento a seguir.
  • Preenchimento esquerdo + direito: 0vw

Configurações da coluna 1

Fundo

Defina o estilo da coluna para corresponder ao cartão de receita acima. Primeiro, adicione um plano de fundo.

  • Cor de fundo: branco #ffffff

Espaçamento

Além disso, ajuste o espaçamento.

  • Preenchimento esquerdo: 0vw

Fronteira

Por último, mas não menos importante, modifique as configurações de borda.

  • Cantos arredondados: 1vw todos os quatro cantos
  • Estilos de borda: todos os quatro lados
  • Largura: 5px
  • Cor: Cinza Muito Escuro # 333333

Deixe a coluna 2 vazia.

Adicionar módulo de conteúdo de postagem à coluna 1

Texto

Adicione um módulo de conteúdo de postagem à coluna um e estilize o texto para corresponder ao modelo de cartão de receita.

  • Fonte: Encode Sans
  • Cor: Cinza Muito Escuro # 333333
  • Tamanho:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Telefone: 3vw
  • Altura da linha: 2em

Texto do Título 1

  • Fonte: Orienta
  • Cor: Cinza Muito Escuro # 333333
  • Tamanho:
    • Desktop: 2vw
    • Tablet: 5vw
    • Telefone: 6vw

Texto do Título 2

  • Fonte: Orienta
  • Cor: Cinza Muito Escuro # 333333
  • Tamanho:
    • Desktop: 1.8vw
    • Tablet: 4.5vw
    • Telefone: 5.5vw

Texto do Título 3

  • Fonte: Orienta
  • Cor: Cinza Muito Escuro # 333333
  • Tamanho:
    • Desktop: 1.6vw
    • Tablet: 4.5vw
    • Telefone: 5vw

Espaçamento

Para combinar com o estilo do cartão de receita, ajuste os valores de espaçamento.

  • Preenchimento superior + inferior: 2vw
  • Preenchimento esquerdo + direito:
    • Desktop: 4vw
    • Tablet + telefone: 6vw

Se quiser alterar a cor da linha de blockquote ou cor do link, você pode fazer isso no personalizador de tema em cor de destaque.

4. Editar / criar postagem usando configurações de plug-in ACF e modelo de cartão de receita

Campos personalizados de entrada

Abra ou adicione uma postagem. Abaixo da área de conteúdo, você encontrará todos os campos personalizados para o modelo de cartão de receita. Para recriar este desenho de torrada de abacate, preencha os campos da seguinte forma.

Título da receita:

  • Torrada de Abacate Vegan Supergreen

Autor da receita:

  • Magdalena Swifter - www.veganchef.com

Tempo de preparação da receita:

  • 15

Receitas porções:

  • 3

Dica de sabor da receita:

  • Use flocos de sal marinho e óleo virgem extra

Imagem da receita:

  • Imagem de torrada de abacate

Título dos ingredientes da receita:

  • Ingredientes

Lista de ingredientes da receita:

  • 3 fatias de pão integral
  • 1 abacate maduro
  • 100g. Favas Cozidas
  • 10g. Brotos verdes
  • 1 cebolinha picada
  • 30g. Queijo Feta Esfarelado
  • 1 limão cortado pela metade
  • Pitada de azeite de oliva
  • Polvilhe de sal marinho

Título de preparação da receita:

  • Preparação

Lista de preparação de receitas:

  • 1. Torre as fatias de pão ao seu gosto.
  • 2. Abra o abacate, retire a polpa, amasse com um garfo.
  • 3. Esprema o suco de limão sobre o abacate e tempere com sal.
  • 4. Espalhe o purê de abacate sobre a torrada.
  • 5. Polvilhe as favas, os rebentos e a cebolinha picada.
  • 6. Tempere com sal.
  • 7. Adicione o queijo feta esfarelado.
  • 8. Finalize com azeite.

Dê um título à postagem

Título

Não se esqueça de adicionar um título à sua postagem.

  • Receita de torrada de abacate

Adicionar conteúdo, selecionar categoria e adicionar imagem em destaque

Escreva ou insira o conteúdo da postagem do blog no editor regular. Selecione a categoria de receitas e adicione uma imagem em destaque.

Pré-visualização do modelo de cartão de receita

Mais uma vez, vamos dar uma olhada novamente em como o post concluído com o modelo de cartão de receita se parece em diferentes telas.

Área de Trabalho

Tábua

Móvel

É um embrulho!

Vamos revisar rapidamente as etapas que seguimos para obter esse design de modelo de cartão de receita.

  1. Instale o plugin ACF.
  2. Configure um grupo de campo do cartão de receita.
  3. Adicione campos personalizados.
  4. Crie um novo modelo e atribua-o às postagens do blog na categoria 'receitas'.
  5. Use conteúdo dinâmico de campos ACF nos módulos.
  6. Crie ou edite uma postagem de blog preenchendo os campos.
  7. Adicione o conteúdo da postagem do blog.

Como esse design foi criado como um modelo com conteúdo dinâmico, ele permanecerá consistente em todas as postagens do blog de receitas que usam os campos personalizados do plugin ACF. Esperamos que este design de modelo de cartão de receita inspire todos os tipos de modelos de receitas novos e inovadores para seus blogs relacionados a comida. Deixe-nos saber sua opinião nos comentários.