The home page of your site is the first thing your users are going to see, and you want to make an impression. That’s why your MooTunes site’s home page is built with the Divi Builder, a very flexible page builder that allows you to customize the content in many different ways.

To edit it, navigate to the home page and click the “Enable Visual Builder” button on the toolbar. You will now enter the Visual Divi Builder.

The Divi Builder

Pages built with the Divi Builder consist of three different objects. Sections, rows of columns, and modules. Each of these has controls that allows you to customize their content and design.

Sections are used to create large groups of content. There are three different types of sections – Regular, Specialty and Full Width. Regular sections are made up of rows of columns while Full Width Sections are made up of full width modules that expand the entire width of the screen. In this tutorial we won’t go into Specialty sections.

Rows sit inside sections. You can add as many as you want. Each row consists of columns which house modules.

Modules are the pieces of content that make up your website.

Getting Started

Click on the “…” button at the bottom of the page. A list of icons will appear. If you click on the gear icon, you can change the page name. By default it will be “Powered by MooTunes”. This is what will show up in Google, so make it enticing! You could change it to a brief description of your project. Alternatively, you could just call it something like “Official Website”.

To the right is a layers button, click this to see all the elements making up your page in a structured mode. You can use this to easily find the object you want to adjust, or easily reorder sections on your page.

If you want to jump-start the page creation process, you can click the + icon. This will load a series of templates you can load to get started. Note that these were created by Elegant Themes, not MooTunes, and most aren’t designed for musicians.

You could also use some of the pre-made Sections MooTunes has created.

Pre-made Sections

MooTunes has developed some basic sections that you can use to get started. These have had minimal design changes, and are designed to give you a blank slate to work with. To add them, add a new Section and choose “Add From Library”. This document is not designed to go in-depth into every design change you can make, but simply to give some basic information to change the content.

Product Grid

This is what will be on your home page by default. It shows a grid of products. It consists of a Text module (for a heading) and a Shop module.

You can customize the title by selecting the text and renaming.

You can change which products are displayed by going into the Shop module’s settings. Here you can change the Product View Type (for example, to show products in a particular Product Category), and Product Count.

You can change the background of the Section by going into the Section settings.

Post Grid

This shows a grid of posts. It consists of a Text module (for a heading) and a Blog module.

You can customize the title by selecting the text and renaming.

You can change which posts are displayed by going into the Blog module’s settings. Here you can select Categories to be included, as well as change the Post Count.

You can change the background of the Section by going into the Section settings.

About Section

Use this to add information about your band or project. It consists of two columns. The first column has an image module, and the second has a Text module.

You can edit the text by selecting the text and typing.

You can change the image by going into the Image modules settings and uploading a new image.

You can change the background of the Section by going into the Section settings.

Keep In Touch Section

This adds a Mailing List Optin Form and a Contact Form in a nice two column layout.

Go into the Email Optin settings and under Email Account select a Mailing List that you want to sign users up to (you’ll need to set up Mailchimp first).

Go into the Contact Form module’s settings and under Email, type in an email address you want to send messages to.

You can edit any of the text by selecting it and typing.

You can change the background of the Section by going into the Section settings.

Post Slider

This shows your posts in a rotating carousel slider. It consists of a Post Slider module.

You can change which posts are displayed by going into the Post Slider module’s settings. Here you can select Categories to be included, as well as change the Post Count.

You can also change the default Background (when there is no Featured Image) on the Content tab.

You might want to add a background overlay on the Design tab to make your text stand out against your Featured Images.

You can change the background of the Section by going into the Section settings.

Fullwidth Post Slider

This is not in the Library. Simply add a Fullwidth Section with a Fullwidth Post Slider module.

This shows your posts in a fullwidth rotating carousel slider.

You can change which posts are displayed by going into the Post Slider module’s settings. Here you can select Categories to be included, as well as change the Post Count.

You can also change the default Background (when there is no Featured Image) on the Content tab.

You might want to add a background overlay on the Design tab to make your text stand out against your Featured Images.

Product Slider

This shows products in a rotating carousel slider. It consists of a Slider module.

Unlike the Post Sliders, these Product Sliders do not automatically populate from the products in your store. Go into the Slider modules setting and Duplicate the Slide for each Product you want to Feature.

In the Settings of each Slide, change the Title and Body to match the Products. Under “Image and Video” change the Image to the cover art of the Music Release you want to sell. Under “Link”, link the Button to the Product you want to sell. Under “Background” change the background.

If you’re using an image background, you might want to add a background overlay on the Design tab to make your text stand out.

Fullwidth Product Slider

This shows products in a fullwidth rotating carousel slider. It consists of a Fullwidth Slider module.

Unlike the Post Sliders, these Product Sliders do not automatically populate from the products in your store. Go into the Fullwidth Slider modules setting and Duplicate the Slide for each Product you want to Feature.

In the Settings of each Slide, change the Title and Body to match the Products. Under “Image and Video” change the Image to the cover art of the Music Release you want to sell. Under “Link”, link the Button to the Product you want to sell. Under “Background” change the background.

If you’re using an image background, you might want to add a background overlay on the Design tab to make your text stand out.

Blank Section

Many artists like to break their home page into sections with different image backgrounds. When doing this, it can be useful to add a Background Overlay to help your text stand out.

Divi only has a Background Overlay setting in Slider modules, and not in Regular sections. To make up for this, MooTunes has added some Custom CSS to it’s Regular Sections that allows you to easily add a Background Overlay. Simply go to the Sections Settings, and on the Advanced Tab enter the Custom CSS field. You will find some CSS here that you can use to add a Background Overlay easily by changing the background-color property.

The Blank Section simply adds a Regular Section with this CSS included, meaning you can create your own custom content outside of our sections.

More on Using the Divi Builder

Check out some tutorials by Elegant Themes, the creators of the Divi Builder.