The facility to get admission to and pay attention to sermons is an important a part of any church web page. And, with the discharge of Divi’s new Church Format Pack, I assumed it might be helpful to turn you the way you’ll construct a sermon structure the usage of dynamic content material. To try this, I’ll be the usage of the Complicated Customized Fields plugin to create a gaggle customized fields that you’ll replace at the backend of your submit. And through the usage of Divi’s dynamic content material function, I’ll display you the way you’ll design a structure to tug in the ones customized fields to populate the content material of your submit. As soon as it’s all stated and accomplished, you’re going to have a pleasing sermon structure with dynamic content material that may be up to date at the backend the usage of an intuitive UI of customized fields with out ever having to deploy the visible builder.

Let’s get began.

What you Want

For this educational, you’re going to want the next:

  • The Divi Theme
  • The Advanced Custom Fields plugin
  • The Church Weblog Format from the Church Format Pack (available from the Divi Builder)

Sermon Format Sneak Peek

Here’s a peek on the structure we can construct. The wonderful thing about this structure is that lots of the content material is being generated from customized fields at the backend the usage of dynamic content material.

Growing Customized Fields with the Complicated Customized Fields Plugin

The Complicated Customized Fields (ACF) plugin makes it simple so that you can workforce customized fields in combination for use as dynamic content material in your posts or pages. It helps quite a lot of field types (like a date picker, a Wysiwyg editor, and oEmbed) that make updating customized fields in point of fact simple. That is extraordinarily useful for offering a extra intuitive UI for purchasers to replace their web page the usage of customized fields.

Upon getting the ACF plugin put in and activated, cross in your WordPress Dashboard and Customized Fields > Upload New.

Upload a brand new box Workforce

To setup a brand new workforce, give the brand new box workforce a identify.

Below the site segment (or toggle) alternate the settings in order that the Put up Sort is the same as “Mission” as a substitute of Put up. This principally tells the plugin to simply show this tradition box workforce at the mission submit kind constructed into Divi (It is advisable to go away it as submit if you wish to have as neatly. Your selection.)

Then scroll right down to the settings segment and replace the next:

Place: Top (after content material)

This place environment determines the site of your customized box workforce within the backend editor of your submit or web page.

Upload Customized Fields to Box Workforce

Now that your workforce has been created and setup, it’s time to begin including customized fields to the gang.

The Speaker Customized Box

For the primary customized box, let’s upload a spot for customers to go into a speaker for the sermon. So as to add a brand new box, click on the “Upload Box” button and input the next:

Box Label: Speaker
Box Title: speaker
Box Sort: Choose
Possible choices (input every on a brand new line): Senior Pastor, Affiliate Pastor, Adolescence Pastor, Visitor Speaker

The Sermon Name Customized Box

Subsequent, upload a customized box for the sermon identify.

Box Label: Sermon Name
Box Title: sermon_title
Box Sort: Textual content
Placeholder Textual content: Sermon Name

The Sermon Date Customized Box

Then, upload a customized box for the sermon date. This one we can set to have a date picker box kind in order that including new dates might be a breeze at the backend.

Box Label: Sermon Date
Box Title: sermon_date
Box Sort: Date Picker
Show Layout: F j, Y
Go back Layout: F j, Y
Week Begins On: Monday

The Sermon Description Customized Box

Subsequent, upload a customized box for the sermon description. This will likely permit customers to replace the content material of the submit the usage of a Wysiwyg editor with no need to open the visible builder.

Box Label: Sermon Description
Box Title: sermon_description
Box Sort: Wysiwyg Editor

The Sermon Audio Embed Customized Box

Subsequent, upload a customized box for the sermon audio embed the usage of the oEmbed box kind. This will likely let us embed an audio embed of the sermon through merely updating the audio url for the embed at the backend.

Box Label: Sermon Audio Embed
Box Title: sermon_audio_embed
Box Sort: oEmbed

The Sermon Audio URL Customized Box

Subsequent, upload a customized box for the sermon audio URL in order that we will use the URL to populate a hyperlink inside of a module to create a obtain hyperlink to the record.

Box Label: Sermon Audio URL
Box Title: sermon_audio_url
Box Sort: Url

Alright. As soon as the customized fields had been added to our box workforce, don’t disregard to save lots of your box workforce. Now we will get started growing the sermon structure for our customized box sermon content material for use as dynamic content material during the submit.

Create a New Mission

From the WordPress Dashboard, navigation to Tasks > Upload New. Then input a identify for the Mission which must even be the identify of the sermon (however this is as much as you). Then click on to make use of the Divi Builder. You’ll see the gang of customized fields displayed on the most sensible of the divi builder.

Now fill within the customized fields with sermon knowledge explicit to this submit.

Speaker: Senior Pastor (decided on from a dropdown menu)
Sermon Name: A New Advent (or no matter you wish to have)
Sermon Date: make a choice date from date picker
Sermon Description: use WYSIWYG editor to go into the outline for the sermon
Sermon Audio Embed: input the url to the media record you wish to have to embed into the media participant
Sermon Audio URL: input the url to the media record (must be a zipper record if you wish to have this to obtain straight away on click on)

Then upload a Featured symbol to your mission. This will likely function the picture used for the audio participant of the sermon structure.

Including a New Premade Format to your Mission

Now click on to make use of the Visible Builder.

(Observe: Lately the backend builder doesn’t improve dynamic content material so we wish to deploy the visible builder. If you happen to would slightly customise the structure with a extra backend builder capability, merely deploy the visible builder and click on the wireframe mode.)

Then click on the method to Make a selection a Premade Format. From the burden from library popup, make a choice the Church Format Pack after which click on to make use of the Church Weblog Web page structure.

As soon as the structure is loaded to the web page, delete the second one, fourth, and 5th sections from the structure. Now your structure must simplest have 3 sections: the highest header segment, the “Newest Sermons” segment, and the ground footer segment.

Subsequent delete the weblog module in the second one segment.

Replace the “Newest Sermons” textual content module in order that it has the next content material:


Then replica that textual content module and replace the content material to mention “Pay attention Now”.

Including the Sermon Format Dynamic Content material

The Sermon Description

Now we’re able to begin construction out the dynamic sermon audio content material for our segment. For starters we’re going to upload the sermon description proper below the textual content module with the identify “Description”. To try this, upload a brand new textual content module. Hover over the content material enter field and click on at the dynamic content material icon.

Then make a choice the Sermon Description customized box from the dropdown listing.

Save Settings.

Now your sermon description might be displayed as dynamic content material. Because of this no matter you upload to the sermon description enter field at the backend editor display might be up to date onto the mission web page dynamically.

The Audio Module and Audio Embed

Below the textual content module with the identify “Pay attention Now”, upload a brand new Audio Module. Then replace the textual content content material with the next dynamic content material:

Name: Sermon Name (customized box)
Artist Title: Speaker (customized box)
Album Title: Sermon Date (customized box)

The labels don’t in point of fact subject since we’re basically desirous about the location of the dynamic content material throughout the audio module. The Sermon Name, Speaker, and Sermon Date are displayed effectively throughout the audio module with out a lot paintings in any respect.

For the Duvet Artwork Symbol of the audio module, upload dynamic content material through clicking the dynamic content material icon when soaring over the picture preview house and make a choice Featured Symbol.

Now no matter you might have set as your featured symbol at the backend will routinely populate the duvet artwork symbol to your sermon audio.

To compare the design of the structure higher, save your settings and cross reproduction the background of the ground segment through proper clicking at the Background class textual content within the segment settings and settling on “Replica Background”.

Now paste the background in your audio module background settings through opening the audio module settings, proper clicking at the background class textual content, and clicking the “Paste Background” possibility.

Then soar over to the design settings and replace the next:

Textual content Orientation: Left
Customized Margin: 0px backside

Now all now we have left to finish the sermon audio participant is the real audio participant embed. Lately, the audio enter field inbuilt to the audio module doesn’t improve dynamic content material (I’m positive it is going to sooner or later), so we’re going to do a small workaround. We’re going to create a brand new textual content module and upload the audio record embed the usage of dynamic content material. And as a result of the way in which WordPress acknowledges the shortcode generated through the customized box, it is going to show the default audio participant.

To try this, upload a textual content module below the audio module after which upload the customized box “Sermon Audio Embed” as dynamic content material. Be sure you Allow Uncooked HTML in order that the shortcode will paintings.

Now we will place our audio participant within the audio module with some customized margin. Pass to the design tab and replace the next:

Customized Margin (desktop): -40px Best, 280px Left, 60px Proper
Customized Margin (pill): 0px Left, 0px Proper

The Obtain Hyperlink

Occasionally, it’s useful for customers to obtain the audio record. To make this more uncomplicated, you’ll upload a hyperlink to the audio record in your submit. To try this, we’re going to use dynamic content material to populate a blurb module with the sermon identify and the audio url.

Upload a blurb module below the audio module and replace the content material as follows:

Name: Sermon Name (customized box)
Icon: see screenshot
Name Hyperlink URL: Sermon Audio Url (customized box)

To taste the blurb to appear extra like a clickable hyperlink, replace the next:

Icon Colour: rgba(33,50,94,0.86)
Symbol/Icon Placement: Left
Name Font Taste: U
Name Underline Colour: rgba(33,50,94,0.86)
Name Textual content Colour: rgba(33,50,94,0.86)
Name Line Top: 2em
Content material Width: 100%

To make the hyperlink much more recognizable as a obtain, you’ll edit the sermon identify dynamic content material this is occupying the blurb identify with further textual content within the after enter field that reads “(obtain)”.

Including the Sermon Name and Meta to the Heading

For the final step, let’s make sure that our mission/submit heading segment is the usage of dynamic content material for identify of the submit in conjunction with the speaker identify and the sermon date. To try this open the fullwidth header module settings and replace the next:

Name: Sermon Name (customized box)
Subheading Textual content: Speaker (customized box)
(Observe: For the Speaker dynamic content material, input “through: ” within the ahead of enter)
Button #1 Hyperlink Textual content: delete
Button #2 Hyperlink Textual content: delete
Content material: Sermon Date (customized box)

Now cross over to the design tab and take out the customized padding getting used.

Here’s the overall consequence.

Now all it is very important do going ahead is save the structure in your Divi library for use for long run sermon posts. And because you might have your customized box workforce able to head on all initiatives, you’ll merely replace the customized box knowledge at the backend with out ever having to open the Visible Builder.

Additionally, with the sermons stored as initiatives, you’ll simply create a filterable portfolio to show your sermons!

Ultimate Ideas

I’m hoping this educational is helping shed some extra mild on dynamic content material and the way it may be used with the Complicated Customized Fields plugin to create an impressive structure for sermons. It should take a little time to set the entirety up, however the payoff can indubitably be price it. After all, this similar procedure can be utilized to create a wide variety of dynamic content material for various submit sorts. Let me know if in case you have any questions within the feedback underneath. I sit up for listening to from you.


The submit How to Build a Sermon Layout using Custom Fields and Dynamic Content in Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]