Como construir um layout de sermão usando campos personalizados e conteúdo dinâmico na Divi

A capacidade de acessar e ouvir sermões é uma parte vital de qualquer site da igreja. E, com o lançamento do novo Pacote de Layout de Igreja da Divi, achei que seria útil mostrar como você pode construir um layout de sermão usando conteúdo dinâmico. Para fazer isso, usarei o plugin Advanced Custom Fields para criar um grupo de campos personalizados que você pode atualizar no backend de sua postagem. E usando o recurso de conteúdo dinâmico do Divi, vou mostrar como você pode criar um layout para puxar esses campos personalizados para preencher o conteúdo de sua postagem. Depois de tudo dito e feito, você terá um bom layout de sermão com conteúdo dinâmico que pode ser atualizado no backend usando uma interface de usuário intuitiva de campos personalizados sem nunca ter que implantar o construtor visual.

Vamos começar.

O que você precisa

Para este tutorial, você precisará do seguinte:

• O Tema Divi
• O plugin Advanced Custom Fields
• O Layout do Blog da Igreja do Pacote de Layout da Igreja (acessível no Divi Builder)

Espreitadela do esquema do sermão

Aqui está uma olhada no layout que construiremos. A beleza desse layout é que a maior parte do conteúdo está sendo gerado a partir de campos personalizados no back-end usando conteúdo dinâmico.

Criação de campos personalizados com o plugin de campos personalizados avançados

O plugin Advanced Custom Fields (ACF) facilita o agrupamento de campos personalizados para serem usados ​​como conteúdo dinâmico em suas postagens ou páginas. Ele suporta vários tipos de campo (como um selecionador de data, um editor Wysiwyg e oEmbed) que tornam a atualização de campos personalizados realmente fácil. Isso é extremamente útil para fornecer uma IU mais intuitiva para os clientes atualizarem seus sites usando campos personalizados.

Depois de ter o plug-in ACF instalado e ativado, vá para o painel do WordPress e Campos personalizados> Adicionar novo.

Adicionar um novo grupo de campo

Para configurar um novo grupo, dê um título ao novo grupo de campo.

Na seção de localização (ou alternar), altere as configurações para que o Tipo de postagem seja igual a "Projeto" em vez de Postagem. Basicamente, isso diz ao plug-in para exibir apenas este grupo de campos personalizados no tipo de postagem do projeto embutido no Divi (você também pode deixar como postagem, se quiser. Sua escolha).

Em seguida, role para baixo até a seção de configurações e atualize o seguinte:

Posição: Alta (após o conteúdo)

Esta configuração de posição determina a localização do seu grupo de campos personalizados no editor de back-end de sua postagem ou página.

Adicionar campos personalizados ao grupo de campos

Agora que seu grupo foi criado e configurado, é hora de começar a adicionar campos personalizados ao grupo.

O campo personalizado do alto-falante

Para o primeiro campo personalizado, vamos adicionar um local para os usuários inserirem um orador para o sermão. Para adicionar um novo campo, clique no botão “Adicionar Campo” e digite o seguinte:

Rótulo de campo: alto-falante
Nome do campo: palestrante
Tipo de campo: Selecione
Escolhas (digite cada uma em uma nova linha): Pastor Sênior, Pastor Associado, Pastor Juvenil, Orador Convidado

O campo personalizado do título do sermão

Em seguida, adicione um campo personalizado para o título do sermão.

Rótulo do campo: Título do sermão
Nome do campo: sermon_title
Tipo de campo: Texto
Placeholder Text: Título do sermão

O campo personalizado da data do sermão

Em seguida, adicione um campo personalizado para a data do sermão. Este será definido para ter um tipo de campo selecionador de data para que a adição de novas datas seja muito fácil no back-end.

Rótulo do campo: Data do sermão
Nome do campo: sermon_date
Tipo de campo: selecionador de data
Formato de exibição: F j, Y
Formato de retorno: F j, Y
A semana começa em: segunda-feira

O campo personalizado de descrição do sermão

Em seguida, adicione um campo personalizado para a descrição do sermão. Isso permitirá que os usuários atualizem o conteúdo da postagem usando um editor Wysiwyg sem ter que abrir o construtor visual.

Rótulo do campo: Descrição do sermão
Nome do campo: sermon_description
Tipo de campo: Editor Wysiwyg

O campo personalizado de incorporação de áudio do Sermão

Em seguida, adicione um campo personalizado para a incorporação de áudio do sermão usando o tipo de campo oEmbed. Isso nos permitirá inserir uma incorporação de áudio do sermão simplesmente atualizando o url de áudio para a incorporação no backend.

Rótulo de campo: Sermão Audio Embed
Nome do campo: sermon_audio_embed
Tipo de campo: oEmbed

O campo personalizado do URL de áudio do Sermão

Em seguida, adicione um campo personalizado para a URL de áudio do sermão para que possamos usar a URL para preencher um link dentro de um módulo para criar um link de download para o arquivo.

Rótulo do campo: URL do áudio do sermão
Nome do campo: sermon_audio_url
Tipo de campo: Url

Tudo bem. Depois que os campos personalizados forem adicionados ao nosso grupo de campo, não se esqueça de salvar seu grupo de campo. Agora podemos começar a criar o layout do sermão para nosso conteúdo de sermão de campo personalizado para ser usado como conteúdo dinâmico em toda a postagem.

Crie um novo projeto

No painel do WordPress, navegue até Projetos> Adicionar novo. Em seguida, insira um título para o Projeto, que também deve ser o título do sermão (mas isso é com você). Em seguida, clique em para usar o Divi Builder. Você verá o grupo de campos personalizados exibidos na parte superior do construtor divi.

Agora preencha os campos personalizados com informações do sermão específicas para esta postagem.

Palestrante: Pastor Sênior (selecionado em um menu suspenso)
Título do Sermão: Uma Nova Criação (ou o que você quiser)
Data do sermão: selecione a data no selecionador de data
Descrição do sermão: use o editor WYSIWYG para inserir a descrição do sermão
Sermon Audio Embed: digite a url do arquivo de mídia que você deseja incorporar ao reprodutor de mídia
URL do Sermon Audio: insira a url do arquivo de mídia (deve ser um arquivo zip se você quiser fazer o download imediatamente ao clicar)

Em seguida, adicione uma imagem em destaque para o seu projeto. Isso servirá como a imagem usada para o reprodutor de áudio do layout do sermão.

Adicionando um novo layout pré-fabricado para seu projeto

Agora clique para usar o Visual Builder.

(Nota: Atualmente, o construtor de backend não suporta conteúdo dinâmico, então precisamos implantar o construtor visual. Se você preferir customizar o layout com uma funcionalidade de construtor de backend, simplesmente implemente o construtor visual e clique no modo wireframe.)

Em seguida, clique na opção para escolher um layout predefinido. No pop-up de carregamento da biblioteca, selecione o Pacote de Layout da Igreja e clique para usar o layout da Página do Blog da Igreja.

Assim que o layout for carregado na página, exclua a segunda, quarta e quinta seções do layout. Agora, seu layout deve ter apenas três seções: a seção de cabeçalho superior, a seção “Últimos sermões” e a seção de rodapé inferior.

Em seguida, exclua o módulo de blog na segunda seção.

Atualize o módulo de texto “Últimos Sermões” para que tenha o seguinte conteúdo:

<h3>Description</h3>

Em seguida, duplique esse módulo de texto e atualize o conteúdo para dizer “Ouça agora”.

Adicionando o Conteúdo Dinâmico do Layout do Sermão

A descrição do sermão

Agora estamos prontos para começar a construir o conteúdo de áudio do sermão dinâmico para nossa seção. Para começar, vamos adicionar a descrição do sermão logo abaixo do módulo de texto com o título “Descrição”. Para fazer isso, adicione um novo módulo de texto. Passe o mouse sobre a caixa de entrada de conteúdo e clique no ícone de conteúdo dinâmico.

Em seguida, selecione o campo personalizado Descrição do sermão na lista suspensa.

Salvar configurações.

Agora a descrição do seu sermão será exibida como conteúdo dinâmico. Isso significa que tudo o que você adicionar à caixa de entrada de descrição do sermão na tela do editor de backend será atualizado na página do projeto dinamicamente.

O Módulo de Áudio e o Audio Embed

No módulo de texto com o título “Ouça agora”, adicione um novo Módulo de áudio. Em seguida, atualize o conteúdo do texto com o seguinte conteúdo dinâmico:

Título: Título do sermão (campo personalizado)
Nome do Artista: Alto-falante (campo personalizado)
Nome do Álbum: Data do Sermão (campo personalizado)

Os rótulos realmente não importam, pois estamos principalmente preocupados com o posicionamento do conteúdo dinâmico dentro do módulo de áudio. O título do sermão, o palestrante e a data do sermão são exibidos de forma agradável no módulo de áudio sem muito trabalho.

Para a Imagem da capa do módulo de áudio, adicione conteúdo dinâmico clicando no ícone de conteúdo dinâmico ao passar o mouse sobre a área de visualização da imagem e selecione Imagem em destaque.

Agora, tudo o que você definiu como imagem de destaque no backend irá preencher automaticamente a imagem da capa do áudio do sermão.

Para combinar melhor com o design do layout, salve suas configurações e copie o plano de fundo da seção inferior clicando com o botão direito do mouse no texto da categoria Plano de fundo nas configurações da seção e selecionando “Copiar plano de fundo”.

Agora cole o plano de fundo nas configurações de plano de fundo do módulo de áudio abrindo as configurações do módulo de áudio, clicando com o botão direito do mouse no texto da categoria de plano de fundo e clicando na opção “Colar Plano de Fundo”.

Em seguida, vá para as configurações de design e atualize o seguinte:

Orientação do Texto: Esquerda
Margem personalizada: 0px inferior

Agora tudo o que resta para completar o reprodutor de áudio do sermão é o reprodutor de áudio real incorporado. Atualmente, a caixa de entrada de áudio embutida no módulo de áudio não oferece suporte a conteúdo dinâmico (tenho certeza que o fará no futuro), portanto, faremos uma pequena solução alternativa. Vamos criar um novo módulo de texto e adicionar o arquivo de áudio incorporado usando conteúdo dinâmico. E por causa da maneira como o WordPress reconhece o shortcode gerado pelo campo personalizado, ele exibirá o reprodutor de áudio padrão.

Para fazer isso, adicione um módulo de texto sob o módulo de áudio e, em seguida, adicione o campo personalizado “Sermon Audio Embed” como conteúdo dinâmico. Certifique-se de ativar o HTML bruto para que o código de acesso funcione.

Agora podemos posicionar nosso reprodutor de áudio dentro do módulo de áudio com alguma margem personalizada. Vá para a guia de design e atualize o seguinte:

Margem personalizada (desktop): -40 px superior, 280 px à esquerda, 60 px à direita
Margem personalizada (tablet): 0 px à esquerda, 0 px à direita

O link de download

Às vezes, é útil que os usuários baixem o arquivo de áudio. Para tornar isso mais fácil, você pode adicionar um link para o arquivo de áudio à sua postagem. Para fazer isso, vamos usar conteúdo dinâmico para preencher um módulo de sinopse com o título do sermão e a url de áudio.

Adicione um módulo de sinopse no módulo de áudio e atualize o conteúdo da seguinte maneira:

Título: Título do sermão (campo personalizado)
Ícone: veja a captura de tela
URL do link do título: URL do áudio do Sermão (campo personalizado)

Para estilizar a sinopse de forma que se pareça mais com um link clicável, atualize o seguinte:

Cor do ícone: rgba (33,50,94,0,86)
Posicionamento de imagem / ícone: esquerda
Estilo da fonte do título: U
Cor do sublinhado do título: rgba (33,50,94,0,86)
Cor do texto do título: rgba (33,50,94,0.86)
Altura da linha do título: 2em
Largura do conteúdo: 100%

Para tornar o link ainda mais reconhecível como um download, você pode editar o conteúdo dinâmico do título do sermão que está ocupando o título da sinopse com texto adicional na caixa de entrada seguinte que diz “(download)”.

Adicionando o Título do Sermão e Meta ao Título

Para a última etapa, vamos nos certificar de que nossa seção de cabeçalho de projeto / postagem esteja usando conteúdo dinâmico para o título da postagem, juntamente com o nome do orador e a data do sermão. Para fazer isso, abra as configurações do módulo de cabeçalho de largura total e atualize o seguinte:

Título: Título do sermão (campo personalizado)
Texto do subtítulo: Palestrante (campo personalizado)
(Observação: para o conteúdo dinâmico do alto-falante, digite "por:" antes da entrada)
Texto do link do botão nº 1: excluir
Texto do link do botão 2: excluir
Conteúdo: Data do Sermão (campo personalizado)

Agora vá para a guia de design e retire o preenchimento personalizado que está sendo usado.

Aqui está o resultado final.

Agora, tudo o que você precisa fazer é salvar o layout em sua biblioteca Divi para ser usado em futuras postagens de sermões. E como você tem seu grupo de campo personalizado pronto para executar todos os projetos, pode simplesmente atualizar as informações do campo personalizado no back-end sem nunca ter que abrir o Visual Builder.

Além disso, com os sermões salvos como projetos, você pode criar facilmente um portfólio filtrável para exibir seus sermões!

Pensamentos finais

Espero que este tutorial ajude a lançar mais luz sobre o conteúdo dinâmico e como ele pode ser usado com o plugin Advanced Custom Fields para criar um layout poderoso para sermões. Pode levar algum tempo para configurar tudo, mas a recompensa definitivamente vale a pena. Claro, esse mesmo processo pode ser usado para criar todos os tipos de conteúdo dinâmico para diferentes tipos de postagem. Deixe-me saber se você tiver alguma dúvida nos comentários abaixo. Estou ansioso para ouvir de você.

Saúde!