How to Add a Forum to Your Website with Divi’s Marathon Layout Pack

Last Updated on February 23, 2023 by 37 Comments

How to Add a Forum to Your Website with Divi’s Marathon Layout Pack
Blog / Divi Resources / How to Add a Forum to Your Website with Divi’s Marathon Layout Pack

Adding a forum to your site is a pretty simple process. There are some great plugins out there that will give you the functionality but may be hard to match the design of the forum with your Divi layout.

In this use case tutorial, I’m going to show you how to add a forum to your site that is both powerful and beautiful. I’ll be using Divi’s Marathon Layout pack with the forum plugin WPForo.

I think you will be surprised at the result.

Let’s get started.

Sneak Peek

Here is a sneak peek of the forum we will be creating together.
forum

What You Need for This Tutorial

To complete this tutorial, you will need the following:

Creating Your Forum

To create the forum, we will use the WPForo plugin. You can find the plugin by searching for it from within the WordPress dashboard by navigating to Plugins > Add New.

add wpforo

Once you have activated the plugin, navigate to Forums > Forums. This will bring you to the Categories and Forums page where you can setup new categories and forums and change their order and hierarchy. By default, you will see a blue category block named β€œMain Category” with one white forum block named β€œMain Forum”. This means that you have one forum named β€œMain Forum” under the category β€œMain Category”.

Let’s change the name of our Main Category to β€œMarathon” by clicking the edit icon on the blue block menu.

edit category

Then update the category information as follows:

Title: Marathon
Description: These are all of our Marathon Forums.
Forum Slug: marathon
Category Layout: Simplified

Publish your changes.

edit category

Go back to the Categories and Forums page and click to edit the Main Forum.

click edit forum

Update the following:

Title: Running is a Lifestyle
Description: This is a forum about the marathon running lifestyle.
Forum Slug: running-is-a-lifestyle

Publish your changes.

edit forum

Let’s create one more forum under the Marathon Category by going to Categories and Forums page and clicking the Add New button at the top of the page.

Then update the following:

Title: Race Prep
Description: This forum discusses how to prepare for a marathon.
Forum Slug: race-prep
Parent Forum: Marathon

Publish your changes.

edit race prep

Update Forum Settings

Now that we have created our forums, let’s go to the forum settings by navigating to Forums > Settings.

In the General tab, You can update the forum base URL, forum title, and forum Description.

settings

Don’t forget to update your options before going to the next tab.

The plugin comes with three forum layouts (or templates). These include the Simplified layout (the one we are using), the Extended Layout (great for a multi forum structure with a lot of content), and a Q&A Layout. Since we are using the Simplified layout, the settings under the Forums tab do not apply.

The Forum Accesses tab allows you to set the permissions for each usergroup that will have access to your forums. By default, guests will have read only access, registered users will have standard access, and admins will have full access.

Hover over Standard Access and click edit to update the permissions if you want.

forum access

Bear in mind that whenever a user registers for the forum, their posts will be awaiting moderation until you (the admin) approve them under the moderation page. Also, if you leave the option β€œCan Attach File” checked, the newly registered viewer will still be unable to post attachments until they have successfully posted 4 or 5 successful and approved post. This is a helpful security measure against spammers.

You can skip the Topics & Posts tab for now but those options may be helpful for your own forum later on.

The Members tab has some really cool options. You can do things like add custom redirects after the user logs in, registers, and/or confirms subscription. You can even customize the rating system and badges members will recieve by posting in the forum (which I love).

members tab

You can skip the Emails tab for now but this will be helpful for setting up your confirmation and notification emails.

The Features tab holds a lot of powerful options to customize your forum. You can go through these on your own time to see if any apply to your situation. The first seven options (and the last one) allow you to choose what elements of the forum you want to show. For our purposes, I would like to clean up the forum a little by hiding the forum stats section and the WPForo footer.

Here is what our forum currently looks like with those two elements at the bottom.

forum before

To hide these elements, select β€œNo” for β€œShow Forum Statistic” and also select β€œNo” for the β€œHelp wpForo to grow, show plugin info” option at the bottom of the page.

features

Designing Your Forum

The style tab is where you can design your forum by editing the color scheme and font sizes. You can even add your own custom css.

Start by updating the following font sizes:

Forums: 27px
Topics: 27px
Post Content: 16px

Then add the following custom CSS in the input box:

#wpforo-wrap #wpforo-title{font-size: 46px; font-weight: 600; line-height: 1.3em; }

This css changes the forum title to a bigger font size with more space in order to match our Divi Marathon Layout.

big title

You may notice that you don’t have the option to change the actual font being used for the forum. Not a problem. We can handle that from the Divi builder when we add the forum shortcode to the page.

The forum Color Styles are a bit overwhelming (and confusing) at first glance because you don’t know what colors are assigned to what elements on our forum. To find this information, click on the documentation link.

This will send you to the documentation on these colors and what elements are affected by each. The documentation is helpful because it not only lists the elements assigned to each color, but also gives you the target CSS ID/Class that can be used to customize individual elements.

style doc

To match the colors of our Divi Marathon Layout to our Default color palette, update the following:

Color 9: #ffffff
Color 11: #4866FF (this is the color taken from the button color on the Marathon Layout)
Color 12: #4866FF
Color 14: #4866FF
Color 15: #4866FF
Color 16: #4866FF

update colors

Designing Your Forum Page

Once you activate WPForo, a forum page is automatically created for you. The forum homepage can be found at the url example.com/community/. Go ahead and find the forum page from your page list and click to edit it. The page will have a shortcode in the content section of the page. We will use this shortcode to insert the forum inside a text module of our layout.

Deploy the Divi Builder and Visual Builder. Then open the settings menu at the bottom, click the Add from Library icon and select to use the Marathon About Page Layout.

select layout

Delete the first row in the first section. Then replace the video module in the row remaining in the first section with a text module.

In the text module Content box, enter the the shortcode [wpforo].

add shortcode

Under the design tab update the following:

Text Font: Montserrat
Link Font: Montserrat
Link Font Weight: Medium
Heading Font: Montserrat

Custom Padding: 3% Top, 3% Right, 3% Bottom, 3% Left

Box Shadow: select third option and change the shadow color to rgba(0,0,0,0.12).

shadow

Save settings.

Go to the section settings and change the custom padding back to the default. Then disable the box shadow option.

Save your settings.

Then delete the remaining rows and sections below your forum section.

Now let’s check out the final result.

final result

To add topics to your forums, click on one of the forums from the forum page and click the add topic button.

add topics

Here is an example of what a topic page looks like.

topic page

Here is what your forum looks like on mobile:

responsive

Final Thoughts

Forums are a popular feature on the web these days. So why not add one to your marathon website? The WPForo plugin has excellent functionality and with a little customization using the Divi Builder, you can match your forum’s design with the Divi’s Marathon Layout Pack.

I hope this use case tutorial will help you create your own beautiful forum for your website.

And as always, I look forward to hearing from you in the comments.

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time πŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

37 Comments

  1. I don’t think this works anymore in 2023, I tried following the tutorial and though everything went well, the forum does not work, in that every click within the text container results in permission issues.

    • There should be just a FORUM -THEME of Divi it self. Just complete like the presets of pages.

  2. Any tips on customizing the mobile layout? I’d like to it be full width but I can’t seem to figure out the option, even with some custom css.

    Thanks

  3. Thank you for this tutorial. I’ve installed wpForo and my client wants site visitors to register for the forum before they have access to it. He also wants to keep the forum private so that only registered users can access it. Do you have instructions on how to achieve these 2 goals? Many thanks!

  4. I wish this released earlier, I used to love Divi but I transitioned to my theology forum a few years ago. I always thought Divi would be perfect if you could make a forum with it. Is it compatible with anspress?

  5. Is there a video for this? I had an email about it, but when I clicked on the link, a message appeared on YouTube saying that the video had been removed. πŸ™

  6. I have installed WPForo Plugin on my new niche website.Really wonderful plugin & easy to customize background look.Good stuff.I need more for an example,I would love to customize the signup form.could you please suggest me another wpforo plugin alternative? Good stuff
    Thanks in Advance

    • I personally did not tried it, but for signup or login forms you could also use (I read in wpForo documentation) Buddypress or Ultimate member plugins…

  7. Hi, I was looking for it. Bu I have a question:
    Is it easy to do with this layout a social network?
    Thanks.

  8. I am really happy about this one, too, Jason. I’m totally adding this to my running site as soon as I can get the dev time, and some of the marathon layouts. I appreciate you putting the time in on the forums since I didn’t know about WPForo at all before this.

  9. Creating forum is a easy task but what to do to stop spamming posts? I am getting too much spam posts on my forum, my first hour of work goes waste in this….

    • Use Google Recaptcha
      I have ZERO spam registrations since implementing this.

    • You could turn on Akismet and reCaptcha… to avoid spam registrations and postings

  10. Thank you for this article.

    I manage a small site + forum for French users of Divi and I use
    bbPress, but it seems a bit slow, so this new solution
    is pretty good.

    Thank you for the info and your work

  11. There is a WP blog from a friend that uses another template. For him to use will have to change to Vivi so only try to install the forum to get this look?

    • This particular example is just for Divi, yes.

  12. Very good complement, I was looking for something like this for one of our projects, but I have a question, how can I have a Spanish version?

  13. this is good plugin becoz my some friends already used this ….so good article..

  14. I’m wondering if there’s a level of transparency that needs to be addressed?

    I often see these “How To” blogs reference obscure plugins that I couldn’t find even if I tried. Does the author have any connection to the respective plugin developers?

    In this blog, I would assume most people would be bbPress or BuddyPress for WordPress forums and I’m sure there’s others. Referring a plugin that has so few downloads and few reviews is troubling.

    If the author is selecting, say WPForo, as opposed to a more popular option, I’d really be interesting in know why that’s the case. Again, for the sake of transparency and disclosure.

    • Michael,

      Thanks for your concern. I have no hidden agenda. It is true that 10,000 active installations isn’t much compared to bbpress’s 300,000. But it is less than 2 years old and the high reviews and recent growth shows enough promise to introduce it to the community. And the out of box design elements are refreshing. But I love bbpress and understand it’s widespread popularity. Because of this, we do plan on covering it in a future Divi post in order to give it the attention it deserves.

      I hope that helps clear things up.

      • Hi Jason,
        Loving all the tutorials especially as I am only new to the whole WordPress / Divi world.
        I look forward to the tutorial for bbpress as that is what I have installed.
        Still not sure if it is in fact the “best” but it’s the most used which is why I ran with it.

  15. Hi Jason, thanks for another enlightening article. Even if I’m not personally going to use the resource your article happens to be about I still find each of them extremely helpful as a reminder that the options we have with Divi are basically limitless. Just getting our minds thinking about options we may not have previously considered is greatly undervalued. Understanding why you don’t choose to use something in a particular project can be as informative as why you would decide to use it. In a nutshell , thanks for the articles, I get something out of all of them.

  16. Also for the template Extra ???

    • Yes this should work well with Extra as well.

  17. I have tried installing this today on a test site I am working on. Everything went well until it came to customising the colours. I simply cannot get them to change. I have disabled all other plugins, cleared the cache, and checked on several other computers, but no joy.

    I appreciate that wpforo is a third party plugin, but any thoughts would be much appreciated.

    • Andy,

      This may be because of the WPForo layout you are using for your Forum Category. Are you using the simplified, extended, or Q & A? I think I remember running into this issue whenever I switch over to a new layout. The colors didn’t seem to change the new layout I selected. I thought this was cache related but I may be wrong. Maybe try the different layouts and see if any of them are able to be changed.

      • Hi Jason

        I have been using the simplified layout. I finally got some of the colours to change, by heading further down the list of options. I found that changing the options that control all of the colour groups (orange, green etc) worked. I also had to disconnet my site from Cloudlfare, which isn’t a huge issue for this site but could be for others.

        I tried uninstalling the plugin from the plugi screen, as well as going to my c-panel and deleting the contents of the folders and re-installing to see if that made any difference. I found that a lot of the data was still stored in the database and the uninstalling process didnt full remove all data.

        After a lot of messing around I did get most of the changes done, but I have to say its been a real fiddle.

  18. I’m creating a site where the divi community can chat, share tips and showcase their work etc. This forum plugin will come in handy. What do you think of that idea?

    Not everyone has facebook to join the divi groups.

    • I personally think it’s a great idea. The more people we have out there talking about Divi and helping each other, the better. πŸ™‚

      And you’re right. The Divi groups on FB are awesome, but the limitations of it being on a social platform do rear their heads occasionally.

      • I also agree, the Facebook group is amazing but we need an alternative. In the spirit of action, I have created a Divi community group on Telegram. Search and Join the “Divi Pro” group on Telegram. Search “Divi Pro” in telegram.

  19. What if I have a simplepress forum running now and I want to migrate to this one?

  20. I have installed wpForo on Divi based website 1 week ago. Everything went smooth πŸ™‚

    • Nice… How do you like it so far?

      • I like it. Nice look, responsive out of the box. Even translated everything to my native language (Lithuanian).

        But at the moment sometimes happens that login (for admin too) page freezes. It is somehow related with reCaptcha (a lot of users have this issue). Temporally fix is to go to ftp and in plugins directory to rename ‘wpforo’ directory to something else. Developers promissed to check that carefully before releasing next version of forum.

  21. Cool! I don’t need it but I think these types of posts are really helpful and I have used your other tutorials a lot.

    • Awesome!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today