• Pagina inicial
  • Artigos
  • Tema
  • Como Criar um Modelo Dinâmico de Postagem de Abertura de Trabalho com Divi's Theme Builder e ACF

Como Criar um Modelo Dinâmico de Postagem de Abertura de Trabalho com Divi's Theme Builder e ACF

Publicados: 2019-12-26

Ao usar o Divi Theme Builder em combinação com conteúdo dinâmico, você rapidamente substituirá plug-ins por modelos feitos por você mesmo. No tutorial de hoje, mostraremos como criar um modelo de postagem de abertura de trabalho completamente dinâmico usando o Divi Theme Builder e um grupo de campos ACF. Este modelo dinâmico de postagem de vagas de trabalho é totalmente personalizável e você também poderá baixar o arquivo JSON 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

modelo de cargo aberto

Móvel

modelo de cargo aberto

Baixe o modelo de postagem de abertura de emprego GRATUITAMENTE

Para colocar suas mãos no modelo de postagem de abertura de trabalho 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.

Baixe os arquivos
Download de graça

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. Adicionar categorias de postagem

Vá para as categorias de postagem

A primeira parte da criação do modelo de cargo em aberto é adicionar novas categorias de cargo que você usará para os cargos em aberto que você adicionar. Vá para as categorias de postagem dentro do seu painel do WordPress.

modelo de cargo aberto

Adicionar categorias de cargos em aberto

Adicione uma categoria pai e uma categoria separada para cada departamento.

  • Abertura de Trabalho
    • Comunicações
    • Projeto
    • Desenvolvimento
    • Marketing
    • …

modelo de cargo aberto

2. Instale ACF e configure os campos do projeto

Instalar e ativar ACF

Continue instalando e habilitando o plugin de Campos Personalizados Avançados gratuito.

modelo de cargo aberto

Configurar Grupo de Campos

Configure um novo grupo de campos acessando o Painel do WordPress> Campos personalizados> Adicionar novo .

modelo de cargo aberto

Queremos que o grupo de campos apareça exclusivamente nas postagens que fazem parte da categoria pai que adicionamos na parte anterior deste tutorial. Para fazer isso, certifique-se de que as seguintes regras se apliquem ao grupo de campos:

  • Post Type é igual a Post e
  • Categoria de Postagem é igual a Abertura de Emprego

modelo de cargo aberto

Adicionar Campos

Uma vez que o grupo de campos foi criado, é hora de adicionar os diferentes campos. Para recriar exatamente o mesmo modelo da visualização deste tutorial, você precisará dos seguintes campos personalizados:

  • Responsabilidades
    • Rótulo de campo: responsabilidades
    • Tipo de campo: área de texto
  • Experiência necessária
    • Rótulo do campo: experiência necessária
    • Tipo de campo: Editor Wysiwyg
  • Habilidades necessárias
    • Rótulo do campo: habilidades necessárias
    • Tipo de campo: Editor Wysiwyg
  • Qualificações de bônus
    • Rótulo de campo: qualificações de bônus
    • Tipo de campo: Editor Wysiwyg
  • Localização
    • Rótulo do campo: localização
    • Tipo de campo: Texto
  • Tipo de emprego
    • Rótulo do campo: tipo de trabalho
    • Tipo de campo: caixa de seleção
    • Opções: Tempo integral + Meio período + Freelance (nova linha para cada opção)
  • Aplicar redirecionamento
    • Rótulo do campo: Aplicar redirecionamento
    • Tipo de campo: Url

modelo de cargo aberto

3. Adicionar nova postagem do blog

Adicionar Título de Cargo Aberto, Descrição Curta e Categorias

Depois de preencher o grupo de campos personalizados e todos os seus campos, é hora de criar um exemplo de publicação de cargo em aberto. Insira o título, a descrição do trabalho e selecione as categorias.

modelo de cargo aberto

Preencha todos os campos personalizados

Continue preenchendo todos os campos personalizados.

modelo de cargo aberto

modelo de cargo aberto

4. Crie um novo modelo

Vá para Divi Theme Builder e adicione um novo modelo

Assim que seu exemplo de postagem de blog estiver pronto, é hora de criar o modelo de cargo em aberto! Para fazer isso, navegue até o Divi Theme Builder e clique em 'Add New Template'.

modelo de cargo aberto

Usar em

Use o modelo em postagens na categoria Abertura de vagas.

modelo de cargo aberto

5. Comece a construir o corpo do modelo

Agora, comece a construir o design clicando em 'Adicionar corpo personalizado' e selecionando 'Construir corpo personalizado'. Isso o redirecionará para o editor de modelos.

modelo de cargo aberto

Seção 1

Fundo Gradiente

Dentro do editor de template Divi, você notará uma seção. Abra essa seção e adicione um fundo gradiente.

  • Cor 1: # ff6600
  • Cor 2: # fbff30
  • Direção do gradiente: 126 graus

modelo de cargo aberto

Divisória Inferior

Adicione uma divisória inferior à seção seguinte.

  • Estilo do divisor: Encontre na lista
  • Altura do divisor: 8vw
  • Disposição do divisor: abaixo do conteúdo da seção

modelo de cargo aberto

Espaçamento

E inclua um pouco de preenchimento na parte inferior também.

  • Preenchimento inferior: 400 px

modelo de cargo aberto

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

modelo de cargo aberto

Adicionar Módulo Blurb à Coluna 1

Conteúdo Dinâmico

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos na coluna 1 é um Módulo Blurb. Selecione o conteúdo dinâmico do local para a caixa de título e deixe a caixa de conteúdo vazia.

  • Título: Localização

modelo de cargo aberto

Selecione o ícone

Continue selecionando um ícone.

modelo de cargo aberto

Configurações de ícone

Vá para a guia de design e altere as configurações do ícone da seguinte forma:

  • Cor do ícone: #ffffff
  • Posicionamento de imagem / ícone: esquerda
  • Use o tamanho da fonte do ícone: Sim
  • Tamanho da fonte do ícone: 25px

modelo de cargo aberto

Configurações de texto do título

Modifique as configurações de texto H3 também.

  • Nível do título do título: H3
  • Fonte do título: Lato
  • Cor do texto do título: #ffffff
  • Tamanho do texto do título: 1,4 rem

modelo de cargo aberto

Animação

Por último, remova a animação do ícone nas configurações de animação.

  • Animação de imagem / ícone: sem animação

modelo de cargo aberto

Clone o módulo do Blurb e coloque a duplicata na coluna 2

Depois de concluir o Módulo Blurb na coluna 1, você pode cloná-lo uma vez e colocar a duplicata na segunda coluna.

modelo de cargo aberto

Alterar Conteúdo Dinâmico e Ícone

Certifique-se de alterar o conteúdo dinâmico do título junto com o ícone.

  • Título: Tipo de trabalho

modelo de cargo aberto

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Na última coluna, adicione um Módulo de botão. Adicione alguma cópia de sua escolha.

modelo de cargo aberto

Link Dinâmico

Selecione o link de redirecionamento de aplicação dinâmica a seguir.

  • URL do link do botão: Aplicar redirecionamento
  • Destino do link do botão: na nova guia

modelo de cargo aberto

Alinhamento

Vá para a guia de design do módulo e altere o alinhamento em diferentes tamanhos de tela.

  • Alinhamento do botão: direita (área de trabalho), esquerda (tablet e telefone)

modelo de cargo aberto

Configurações de botão

Defina também o estilo do botão.

  • Usar estilos personalizados para botão: Sim
  • Tamanho do texto do botão: 1rem
  • Cor do texto do botão: # ff6600
  • Cor de fundo do botão: #ffffff
  • Largura da borda do botão: 0 px

modelo de cargo aberto

  • Raio da borda do botão: 100 px
  • Fonte do botão: Montserrat
  • Estilo da fonte do botão: maiúscula

modelo de cargo aberto

Espaçamento

E complete as configurações do módulo adicionando alguns valores de preenchimento personalizados às configurações de espaçamento.

  • Enchimento superior: 15px
  • Preenchimento inferior: 15 px
  • Preenchimento esquerdo: 50 px
  • Preenchimento direito: 50 px

modelo de cargo aberto

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha! Escolha a seguinte estrutura de coluna:

modelo de cargo aberto

Adicionar Módulo de Texto à Coluna

Conteúdo Dinâmico

Adicione um novo Módulo de Texto à coluna e selecione o conteúdo dinâmico do título da postagem.

  • Conteúdo Dinâmico: Postagem / Título do Arquivo

modelo de cargo aberto

  • Antes: <H1>
  • Depois: </H1>

modelo de cargo aberto

Configurações de texto H1

Vá para a guia de design do módulo e altere as configurações de texto H1 de acordo:

  • Fonte do cabeçalho: Montserrat
  • Peso da fonte do cabeçalho: Pesado
  • Cor do texto do título: #ffffff
  • Tamanho do texto do cabeçalho: 8rem (Desktop), 4rem (Tablet), 2.5rem (Telefone)

modelo de cargo aberto

Adicionar Módulo Divisor à Coluna

Visibilidade

O próximo módulo de que precisamos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

  • Mostrar divisor: Sim

modelo de cargo aberto

Linha

Altere a cor da linha do módulo a seguir.

  • Cor da linha: #ffffff

modelo de cargo aberto

Dimensionamento

Modifique as configurações de dimensionamento também.

  • Peso do divisor: 8px
  • Largura: 30%
  • Alinhamento do Módulo: Esquerda

modelo de cargo aberto

Adicionar Seção # 2

Espaçamento

Para a próxima seção! Remova todo o preenchimento superior padrão.

  • Preenchimento superior: 0 px

modelo de cargo aberto

Adicionar linha # 1

Estrutura da Coluna

Adicione uma nova linha à seção usando a seguinte estrutura de coluna:

modelo de cargo aberto

Espaçamento

Abra as configurações de linha e remova o preenchimento superior padrão.

  • Preenchimento superior: 0 px

modelo de cargo aberto

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

Cor de fundo

Adicione um Módulo de Postagem à linha e mude a cor de fundo para branco.

  • Cor de fundo: #ffffff

modelo de cargo aberto

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: Raleway
  • Tamanho do Texto: 1.1 Rem
  • Altura da linha de texto: 2.1em

modelo de cargo aberto

Espaçamento

A seguir, brinque com os valores de espaçamento em diferentes tamanhos de tela.

  • Margem superior: -300px
  • Preenchimento superior: 100 px (desktop), 50 px (tablet e telefone)
  • Preenchimento inferior: 100 px (desktop), 50 px (tablet e telefone)
  • Preenchimento esquerdo: 100 px (desktop), 50 px (tablet e telefone)
  • Preenchimento direito: 100 px (desktop), 50 px (tablet e telefone)

modelo de cargo aberto

Fronteira

Adicione algum raio de borda também.

  • Todos os cantos: 20px

modelo de cargo aberto

Sombra da caixa

E complete as configurações do módulo adicionando uma sombra de caixa sutil.

  • Força do desfoque de sombra da caixa: 50 px
  • Cor da sombra: rgba (0,0,0,0.09)

modelo de cargo aberto

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha usando a seguinte estrutura de coluna:

modelo de cargo aberto

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H2

Adicione um Módulo de Texto à coluna da linha com algum conteúdo H2.

modelo de cargo aberto

Configurações de texto H2

Altere as configurações de texto H2 do módulo da seguinte forma:

  • Fonte do título 2: Montserrat
  • Peso da fonte do cabeçalho 2: pesado
  • Cor do texto do título 2: # ffa500
  • Tamanho do texto do título 2: 1,5 rem.

modelo de cargo aberto

Adicionar Módulo Divisor à Coluna

Visibilidade

O próximo módulo de que precisamos é um Módulo Divisor. Certifique-se de que o módulo 'Mostrar divisor' esteja habilitado.

  • Mostrar divisor: Sim

modelo de cargo aberto

Linha

Altere a cor da linha do módulo a seguir.

  • Cor da linha: # ffa500

modelo de cargo aberto

Dimensionamento

E complete as configurações do módulo brincando com as configurações de dimensionamento.

  • Peso do divisor: 6px
  • Largura máxima: 80px

modelo de cargo aberto

Adicionar Módulo de Texto # 2 à Coluna

Conteúdo Dinâmico

O próximo e último módulo de que precisamos nesta coluna é outro Módulo de Texto. Selecione o conteúdo dinâmico relevante.

  • Conteúdo dinâmico: experiência necessária

modelo de cargo aberto

Certifique-se de habilitar o HTML bruto.

  • Habilitar HTML bruto: Sim

modelo de cargo aberto

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

  • Fonte do texto: Raleway
  • Tamanho do Texto: 1.1 Rem

modelo de cargo aberto

Configurações de texto de lista não ordenada

Modifique também a altura da linha da lista não ordenada.

  • Altura da linha da lista não ordenada: 2.3em

modelo de cargo aberto

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione alguns valores de preenchimento personalizados.

  • Enchimento superior: 50 px
  • Preenchimento inferior: 50 px
  • Preenchimento esquerdo: 50 px
  • Preenchimento direito: 50 px

modelo de cargo aberto

Fronteira

Adicione algum raio de borda também.

  • Todos os cantos: 20px

modelo de cargo aberto

Sombra da caixa

E complete as configurações do módulo adicionando uma sombra de caixa sutil.

  • Força do desfoque de sombra da caixa: 50 px
  • Cor da sombra: rgba (0,0,0,0.09)

modelo de cargo aberto

Adicionar linha # 3

Estrutura da Coluna

Vamos para a última linha! Use a seguinte estrutura de coluna:

modelo de cargo aberto

Clonar Módulos na Coluna 2 Duas Vezes e Colocar Duplicados nas Colunas 1 e 2 da Nova Linha

Clone os módulos que você adicionou à linha anterior duas vezes e coloque as duplicatas na nova linha.

modelo de cargo aberto

Alterar Cópia do Módulo de Texto # 1

Certifique-se de alterar a cópia H2 de cada Módulo de Texto duplicado.

modelo de cargo aberto

Alterar conteúdo dinâmico do módulo de texto nº 2

Junto com o conteúdo dinâmico.

  • Conteúdo dinâmico: habilidades necessárias

modelo de cargo aberto

  • Conteúdo Dinâmico: Qualificações de bônus

modelo de cargo aberto

Novamente, certifique-se de que o HTML bruto esteja habilitado para ambos os Módulos de Texto contendo conteúdo dinâmico.

  • Habilitar HTML bruto: Sim

modelo de cargo aberto

6. Salve as alterações do Theme Builder e visualize o resultado

Depois de concluir o corpo do modelo, você pode salvar todas as alterações do construtor de tema e visualizar o resultado em seu exemplo de publicação de emprego aberto!

modelo de cargo aberto

modelo de cargo aberto

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

modelo de cargo aberto

Móvel

modelo de cargo aberto

Pensamentos finais

Nesta postagem, mostramos como criar um modelo de cargo aberto dinâmico e totalmente personalizável usando o Divi Theme Builder e o plugin ACF. Usamos apenas conteúdo dinâmico em nosso modelo de postagem, o que facilita a adição de futuras vagas de emprego abertas ao seu site. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à 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.