Gold Penguin Logo with Text

Breakdance Builder ACF Service & Location Pages Template Creation

Want to create a single page template for different locations and services? This guide shows you how to design one template for all your service pages using Breakdance. 
Updated October 28, 2023
create service and locations template on Breakdance
create service and locations template on Breakdance
Difficulty: Easy. Might help to know the basics of this tool/topic
Time Required: ~20 minutes

Running a business in multiple locations? You might consider building a website with different pages for each location.

Now, think about the time spent designing pages for different locations. And what about when you expand to even more areas?

What if you can have a single, adaptable template that can be tailored to display specific details for each location? 

With Breakdance, it should be easy to create one. All you need to do is design a single template and add the details dynamically. This includes the location name, services offered, and even images.

That’s exactly what we’re going to do in this tutorial. Follow the steps below to learn how to design a single yet flexible template for your business.

create service and locations template on Breakdance

How to Build A Service & Location Template in Breakdance

1) Install the ACF Plugin

First off, we’ll need to create a custom post type. Each post will contain different details like the location title, service description, and images.

Traditionally, you’ll need to add some custom codes to your function file to do this. But thankfully, there are plugins available to make our life easier. 

For this tutorial, we’re going to install the ACF (Advanced Custom Fields) plugin. 

Go to your WordPress dashboard. Head over to Plugins > Add New. Install and activate Advanced Custom Fields.

install and activate ACF plugin

2) Create a Custom Post Type

With the ACF plugin active, you should see ‘ACF’ added to the left navigation.

To create a post type, go to ACF > Post types. Click ‘Add New.’ 

add new post type in ACF

On the settings page, you’ll need to enter a few details. 

Input ‘Services’ for the plural label, ‘Service’ for the singular label, and ‘service’ for the post type key. Adding taxonomies is optional, so we’ll leave it for another time.

create custom post type

Click ‘Save Changes.’

You should now see ‘Services’ displayed on the left sidebar. But it’s currently empty. You can’t add any details. That’s because we haven’t defined any fields yet.

So, let’s go ahead and do that in the next step.

3) Add A Field Group

Go to ACF > Field Groups. Click ‘Add New.’

At the top of the page, enter a field group title.

add ACF field group name

Under the fields section, click the ‘Add Field’ button and choose a field type from the drop-down. Enter a field label and field name. Then, click close. 

add ACF field group

For this tutorial, I’ve added three fields:

  • Image field for the location image
  • Text field for the location name
  • Text field for the services description
create ACF field group

Next, go to the settings section to set the location rules. Here, we want to show the field group if the post type is equal to ‘Service.’

set ACF location rules

Once you’re done, click ‘Save Changes.’

4) Add A New Service

With the new fields in place, let's input a service.

Go to Services > Add New. 

Fill in the service details like title, image, location, and services text. Save and publish. 

add custom post type details

As an example, I’ve added four new services for different locations, as shown below. 

add custom post types in Breakdance

5) Create a Page Template

Now, to the fun part! We’re going to create a page template for our service and location page.

Head over to Breakdance > Templates. Click ‘Add Template’ and choose ‘Add Custom template.’

Enter the title of the new template. Here, I’ve named it ‘Service Template.’ Next, add a location where you want to apply the template. On the drop-down, choose the name of your custom post type, in this case, Single/ Service.

create page template on Breakdance

Assign a priority number. If you have multiple templates, give this page the highest number so that it loads first. Then, click ‘Add Template.’

6) Add Dynamic Data

For this guide, I’ve already created a header template. 

If you need guidance, I suggest you read our separate tutorial on how to create a page header in Breakdance. Then, come back here when you’re ready.

To create the service template, I’m going to add a section with an image background, heading, and text. We’ll be using the image we’ve uploaded for the service post type. The heading will be for the title, and the text will be for the service description.

create Breakdance page template

Remember in the previous step we’ve created four different service types. To display each using a single template, we’re going to make the image, heading, and text dynamic.

First, click the section. Then, go to the design tab. Click ‘Background’ and choose ‘Image’ as type. Hover your mouse over the ‘Image’ label and click the ‘dynamic’ icon. This will open a pop-up window. 

insert dynamic data on Breakdance

Click the image under the ACF section. This will automatically fetch the images we’ve uploaded on our service post type.

insert dynamic data on Breakdance

Do the same for the heading and text. The heading should contain the location name or title. The text should have the service description.

Finally, add the style and layout that you want. Adjust the size and spacing. 

7) Save and Preview

After the final touches, click save.

Now, every time you switch to a different service location, the page should automatically change its image, location title, and service description.

Add layout and style to Breakdance page

This means multiple services and locations can be showcased with one template.

Here’s what our final page template looks like.

create single page template on Breakdance

What’s Next?

You’ve just learned how to create a single template for different service and location pages.

At this point, you might wonder - what’s next?

Breakdance has tons of features and libraries to help you level up your website.

For instance, consider adding a Google map element to your page. Most businesses find this feature helpful because it helps increase foot traffic. So, give it a try.

If this guide was helpful, please drop a comment. Your feedback drives us to create even better tutorials!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross