Como criar uma seção de lista de empregos dinâmica de carreiras com o módulo de blog da Divi
Publicados: 2019-12-27Em um tutorial anterior do Divi, mostramos como criar um modelo de cargo aberto completamente dinâmico com o Divi's Theme Builder e o plugin Advanced Custom Fields. No tutorial de hoje, mostraremos como você pode apresentar dinamicamente as vagas de emprego abertas em sua página de carreiras. Este tutorial é uma sequência da postagem do modelo de cargo em aberto, portanto, certifique-se de recriar o modelo primeiro e, em seguida, volte a este tutorial.
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 layout de lista de empregos dinâmico de carreiras GRATUITAMENTE
Para colocar suas mãos no layout de lista de empregos dinâmico gratuito de carreiras, primeiro você precisa fazer o download 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. Adicionar página de carreiras
Adicionar nova página e mudar para o Visual Builder
Comece criando uma nova página, dando um título a ela e mudando para o Visual Builder.
2. Comece a construir a página de carreiras no front-end
Adicionar Seção # 1
Fundo Gradiente
Adicione a primeira seção à página, abra as configurações da seção e use um fundo gradiente.
- Cor 1: # ff6600
- Cor 2: # fbff30
- Direção do gradiente: 126 graus
Divisória Inferior
Use também um divisor de seção inferior.
- Estilo do divisor: Encontrar na lista
- Altura do divisor: 8vw
- Repetição horizontal do divisor: 3x
- Disposição do divisor: abaixo do conteúdo da seção
Espaçamento
Conclua as configurações da seção adicionando algum preenchimento inferior.
- Preenchimento inferior: 200 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Texto à Coluna
Adicionar conteúdo H1
Adicione um Módulo de Texto à coluna da linha com algum conteúdo H1 de sua escolha.
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)
Adicionar Módulo Divisor à Coluna
Visibilidade
Logo abaixo do Módulo de Texto, adicione um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Altere a cor da linha do módulo a seguir.
- Cor da linha: #ffffff
Dimensionamento
E conclua as configurações do módulo alterando as configurações de dimensionamento.
- Peso do divisor: 8px
- Largura: 30%
Adicionar Seção # 2
Adicione outra seção regular à página.
Adicionar nova linha
Estrutura da Coluna
Adicione uma nova linha à seção usando a seguinte estrutura de coluna:
Adicionar Módulo de Texto à Coluna
Adicionar conteúdo H2
Adicione um Módulo de Texto à coluna da linha e insira algum conteúdo H2 de sua escolha.
Configurações de texto H2
Modifique 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: 2,3 rem.
Adicionar Módulo Divisor à Coluna
Visibilidade
O próximo módulo de que precisamos nesta coluna é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Modifique a cor da linha do módulo a seguir.
- Cor da linha: # ffa500
Dimensionamento
E complete as configurações do módulo alterando o peso do divisor e a largura máxima nas configurações de dimensionamento.
- Peso do divisor: 6px
- Largura máxima: 80px
Adicionar Módulo de Blog à Coluna
Contente
Para exibir as diferentes vagas de emprego em aberto, usaremos um Módulo de Blog que personalizaremos de acordo com nossas necessidades. Certifique-se de que as seguintes configurações de conteúdo se apliquem:
- Tipo de postagem: postagens
- Incluir categorias: marketing
- Comprimento do trecho: 150
Elementos
Nas configurações de elementos, as únicas duas opções que estamos habilitando são as seguintes:
- Mostrar botão Leia mais: Sim
- Mostrar trecho: Sim
Layout
Vá para a guia de design do módulo e certifique-se de usar um layout de largura total.
- Layout: largura total
Configurações de texto do título
Altere as configurações de texto do título também.
- Nível do título do título: H3
- Fonte do título: Montserrat
- Tamanho do texto do título: 1,5 rem.
Configurações do corpo do texto
Em seguida, modifique as configurações do corpo do texto.
- Fonte do corpo: Raleway
- Tamanho do corpo do texto: 1.1 rem.
- Altura da linha corporal: 2.1em
Leia mais Configurações de texto
Junto com as configurações de ler mais texto.
- Leia mais Fonte: Montserrat
- Leia mais Estilo da fonte: maiúsculas
- Leia mais Cor do texto: #ffffff
- Leia mais Tamanho do texto: 1rem
Espaçamento
Adicione algumas margens personalizadas e valores de preenchimento às configurações de espaçamento.
- Margem esquerda: 100px (desktop), 50px (tablet), 0px (telefone)
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Leia mais CSS do botão
E conclua as configurações do módulo adicionando alguns CSS de botão "leia mais" na guia avançada.
max-width: 200px; text-align: center; padding: 20px; margin-top: 40px; border-radius: 100px; background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;
Clone Row quantas vezes forem necessárias
Depois de concluir a linha e todos os seus módulos, você pode cloná-los quantas vezes quiser, dependendo de quantos departamentos sua empresa possui.
Alterar o conteúdo do módulo de texto
Certifique-se de alterar o conteúdo H2 de cada linha duplicada.
Alterar categorias de módulo de blog
Junto com as categorias do Módulo de blog.
Adicionar Módulo de Código à Coluna da Última Linha
Insira o código CSS para definir o estilo de posições de trabalho abertas individualmente
Para completar o design, vamos adicionar um Módulo de Código à última linha de nossa página e inserir as seguintes linhas de código CSS:
<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>
3. Salvar o design da página e visualizar o resultado
Depois de concluir o design da página, você pode salvar todas as alterações, sair do Visual Builder e visualizar o resultado!
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
Este tutorial é uma sequência de um tutorial anterior, onde mostramos como criar um modelo de cargo em aberto. Neste tutorial, demos um passo além e mostramos como apresentar essas vagas de emprego abertas dinâmicas em sua página de carreiras usando o Módulo de Blog da Divi. Você também conseguiu baixar o arquivo JSON 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.