How to Customize The Farley Template

Before you get started, please familiarize yourself with the basics of the Divi Builder here.

Table of Contents

If you want to learn how to add blog posts, check out this post!

Customize Templates in the Theme Builder

Customize Your Header

To access your website header template:

Navigate to Divi > Theme Builder in the sidebar
Click the pencil icon in the GREEN Global Header section

What to update in Your Header

Your logo and main menu will already show up in your header. If not, refer to this post to add them.

The only thing you need to change in your header is the content in the Call Out Bar at the top. If you don’t want this section, you can delete it by hovering over it and clicking on the BLUE trash can icon. To edit this section, follow the steps below:

Hover over the text and click on the GRAY gear icon (⚙)
Navigate to Content > Text > Body and update the text
Change the link text, highlight it, click on the link icon (🔗), insert the link URL and click Ok
Press the Green checkmark icon to updates these changes
Click Save
Exit out of the layout
Click the Save Changes button at the top left of the page

Customize Your Footer

To access your website footer:

Navigate to Divi > Theme Builder in the sidebar
Click the pencil icon in the GREEN Global Footer section

What to update in your Footer

Your logo and main menu will already show up in your Footer. If not, refer to this post to add them.

Edit your company summary:

Hover over the text and click on the GRAY gear icon (⚙)
Navigate to Content > Text > Body and update the text
Press the Green checkmark icon to updates these changes

Edit your Social Icons/Links:

Hover over the social icons and click on the GRAY gear icon (⚙)
To edit the social link, click on the gear icon next to the social media name. Navigate to Content > Link and add the full link of your social page (for example, www.instagram.com/yourcompany). Then click on the back arrow to the left of the Social Network Settings header at the top of the module to go back to all of your social media networks.
To add a social media icon that is not already added, click Add New Social Network. Navigate to Content > Network to choose the network and then navigate to Link to add the full link of your social page (for example, www.instagram.com/yourcompany). Make sure the Imported Preset at the top left is selected so your icons are the correct color. Then click on the back arrow to the left of the Social Network Settings header at the top of the module to go back to all of your social media networks.
To remove a social media icon, click on the trash can icon to the right of the Social Media type
Press the Green checkmark icon to updates these changes

Edit your Call to Action:

Hover over the text and click on the GRAY gear icon (⚙)
Navigate to Content > Text > Body and update the Title, Button Text and Body Content. Then click on the Link dropdown and add the URL for the button under Button Link URL. If you are linking to an internal page on your website you can hover over the gray box under Button Link URL and click on the Use Dynamic Content icon that pops up on the right side. Click on Page Link and choose the page you want to link to.
Press the Green checkmark icon to updates these changes
To edit the background image, open the Row Settings by hovering over the row and click the GREEN gear icon (⚙)
Navigate to Content > Column Structure and click the GRAY gear icon (⚙) of the 2nd column
Navigate to Content > Background > Background and click on the Image tab (3rd icon from the left)
Click on the box/image below to either upload an image or choose from your Media Library
Press the Green checkmark icon to updates these changes

Edit your company name (in the bottom right corner):

Hover over the text and click on the GRAY gear icon (⚙)
Navigate to Content > Text > Body and update the “Company Name” text to your Company Name
Press the Green checkmark icon to updates these changes

Add your Instagram Feed:

If you haven’t connected your Instagram via the Instagram Feed plugin, you can find instructions here. If you don’t want this section, hover over it and click the BLUE trash icon.

Hover over the “Connect on Instagram” button and click on the GRAY gear icon (⚙)
Navigate to Content > Text > Button to update the button text
Navigate to Content > Link > Button Link URL to add your Instagram link (for example, www.instagram.com/yourcompany)
Press the Green checkmark icon to updates these changes

Once you are finished editing your footer:

Click Save
Exit out of the layout
Click the Save Changes button at the top left of the page

Customize your Blog/Category Pages, Blog Post Template and 404 Page

For these templates you DO NOT need to customize anything. But, if you’d like to add or edit anything on these templates you can access them by:

Navigate to Divi > Theme Builder
Click the pencil icon in the GRAY Custom Body section of the page you’d like to edit. You can find the name of the page at the bottom of the white box.
Edit the layout
Click Save
Exit out of the layout
Click the Save Changes button at the top left of the page

Customize Your Website Pages

You should already have your pages added to your site and main menu but if you don’t, learn how to add them here.

There are three ways to access the backend of the page to edit it.

Click your site name at the top left of your website dashboard (next to the home icon). Then navigate to the page you want to edit using your website’s navigation. Click Edit with Divi at the top of the page to start editing.
Navigate to Pages from your website dashboard. Hover over the page title you want to edit and click Edit with Divi.
Navigate to Pages from your website dashboard. Click on the page title you want to edit. Click on the Edit with the Divi Builder button.

Adding Your Pre-Built Template Sections

With the Farley Template you can upload the full page layout which will include all of the sections that we have designed for each page (check out the pages here) or you can upload the pre-built sections individually.

How to add a Full page layout

There are two ways to upload full page layouts:

If you haven’t added any content to the page yet…

When you first open a page to edit it a pop up with 3 options will appear. If you want to add a full page layout click Choose a Premade Layout
Click Your Saved Layouts
Navigate to and click on [page name] Full Layout
Click Use this Layout

If you are already editing the content on a page but want to add the full page layout…

Open the Divi Builder on the page you want to edit
Click on the PURPLE Button (⋯) at the bottom of the page to expand the Divi menu
Click on the + button
Click Saved Layout
Navigate to and click on [page name] Full Layout
Click Use this Layout

How to add single pre-build sections

If you haven’t added any content to the page yet…

When you first open a page to edit it a pop up with 3 options will appear. Click on Build from Scratch.
Exit out of the Insert Row Pop up

Once you have content on your page…

Hover over an existing section (near the bottom) and click on the BLUE + button
Select Add from Library
Navigate to and click on the section you’d like to add
Click Use this Layout

How to delete sections

Hover over the section you want to delete
At the top left corner of the section click on the BLUE trash icon

Editing Global (brand) Colors

Once you have added your first section to your website, you will edit your global colors. This will automatically update all of the colors throughout your site. If you haven’t added your brand colors to your Divi Theme Options, please do that first.

Open up any module (ideally a text module) by hovering over it and clicking the GRAY settings icon (⚙).
Navigate to Design > Heading Text > Heading Text Color
Click on Global
Click on the gear icon (⚙)
Click on the pencil icon to edit the color
If you added your brand colors to your Theme Options, they will show up at the bottom of the color selector. Choose which color you want to change this specific global color to or input the hex code of the color in the black box at the top right and click on the checkmark to save. Sometimes when you are editing these colors, you will see updates happen on the website that won’t necessarily stick one you exit out of the module. Do not analyze your color choices until you have exited out of the module you are editing. Once you do that, you will see how it will actually look.
- First color (primary color) – this is your main accent color. It effects the border line color and the accent background color.
- Second color (secondary color) – this is your main website background color. This should be the lightest color. There should be significant contrast between this color and the color of your body text, heading text and buttons.
- Third color (heading text color) – this is the color of your headers (this color is set in your Theme Customizer)
- Fourth color (body text color) – this is the color of your body text (this color is set in your Theme Customizer)
- Fifth color – this is your image overlay color. In most cases you will not touch this color setting.
- Sixth color – This is your button background color. The button text is set to the secondary color, so there should be a high contrast between this color and your secondary color (the lightest color).
When it asks if you are sure, click Yes.
When you are done, click Finish Editing Global Colors
Once you do this, all of the colors on your website will update to the colors you just set.

How to Customize your Sections

You will mostly leave the Section settings alone except to change the background color/overlay image style.

To switch between styles, open the section settings by hovering over it and click the BLUE gear icon (⚙). At the top right of the pop up, click on “Preset: …” and chose one of the options below:

Light Background (default) – with this option selected the section or row will have the background color of your Secondary Global Color
Color Background – with this option selected the section or row will have the background color of your Primary Global Color
Image Overlay – with this option selected the section or row will have a background image with a black overlay. To add the image navigate to Content > Background and click on the Image tab (3rd icon from the left). Then click on the box below to either upload an image or choose from your Media Library. If you switch back to either the Light or the Color Background you will need to DELETE the Image you added to the background.

How to Customize your Rows

To edit a certain Row, hover over it and click the GREEN gear icon (⚙). To delete a certain Row, hover over it and click the GREEN trash icon.

Background Images

For certain images you will edit them in the row settings. This is applicable to the following Sections:

2 Columns (text + button | image) – for this row you will also see an image overlayed on the background image in column 2 when you are editing it. You will edit the overlayed image the same way as any other Image Module. The background image that you are editing in the Row Settings will show up on Desktop view and you will need to also edit the overlay image because that is the image that will show up on Tablet and Mobile view. We suggest using a landscape orientated image for the Tablet and Mobile view image.
Workshop/Events/Travel Schedule – for this row you may have a hard time click on the GREEN Row Settings because the header is in the way. Another way to open the Row Settings is to hover over the row until you see the GREEN outline and then double click.

To edit these images, follow the steps below:

Open the Row Settings by hovering over the row and click the GREEN gear icon (⚙)
Navigate to Content > Column Structure and click the GRAY gear icon (⚙) of the column that has the image in it
Navigate to Content > Background > Background and click on the Image tab (3rd icon from the left)
Click on the box/image below to either upload an image or choose from your Media Library
Press the Green checkmark icon to updates these changes

Add/Removing Columns & Duplicating Rows

For certain Sections you may need to add/remove columns or duplicate rows depending on your content. This is applicable to the 3 Column (image & text) and Workshop/Events/Travel Schedule Sections.

For example, in the 3 Column (image & text), there are 3 services listed. If you only have 2, you would want to remove the 3rd one. Or if you have 4 services you would want to either add one to the same row or remove one column from the row to make it 2 columns and then duplicate the row to then have 4 areas to add your services.

Add a Column

Open the Row Settings by hovering over the section and click the GREEN gear icon (⚙)
Navigate to Content > Column Structure and click the GRAY duplicate icon of the column you’d like to add. Duplicating an existing column instead of clicking Add New Column will add the modules you need to match the other columns in the row instead of adding a blank column.
- If you are editing the 3 Column (image & text) Section, duplicate the LAST column.
Press the Green checkmark icon to updates these changes

Remove a Column

Open the Row Settings by hovering over the section and click the GREEN gear icon (⚙)
Navigate to Content > Column Structure and click the GRAY trash icon of the column you’d like to remove
- If you are editing the 3 Column (image & text) Section, delete the MIDDLE column.
Press the Green checkmark icon to updates these changes

Duplicate a Row

Hover over the Row you’d like to Duplicate and click the GREEN duplicate icon.
If you need to reorder rows, hover over the Row you’d like to move and click on the GREEN Move Row icon (all the way on the left) and drag the row up or down.

Image Borders

For the images that have WHITE SPACE between the image and border, you will edit that border via the Row Settings:

Open the Row Settings by hovering over the section and click the GREEN gear icon (⚙)
Navigate to Content > Column Structure and click the GRAY gear icon (⚙) of the column with the image in it
Switch between image border styles by clicking on “Preset: …” at the top right corner of the pop up and chose one of the options below. If you are looking to change an Image Border style that DOES NOT have white space between the image and the border, check out how here.
- No Border (default) – with this option selected there will be no border and the image will take the up the full width of the column
- Color Border – with this option selected the border color will be your Primary Global Color (first from the left color)
- Light Border – with this option selected the border color will be your Secondary Global Color (second from the left color)
- Color Background (for image) – with this option selected the white space between the border and image will be filled in with your Primary Global Color (first from the left color)
- Light Background (for image) – with this option selected the white space between the border and image will be filled in with your Secondary Global Color (second from the left color)
Press the Green checkmark icon twice to updates these changes

How to Customize your Modules

To edit a certain Module, hover over it and click the GRAY gear icon (⚙). To delete a certain Module, hover over it and click the GRAY trash icon. To add a module, hover over your other modules and click on the GRAY + icon and choose the module you’d like to add.

Text Module

Navigate to Content > Text > Body and update your content
Press the Green checkmark icon to updates these changes

To switch between styles, click on “Preset: …” at the top right corner of the pop up and chose one of the options below:

Dark (default) – with this option selected the text color will be your Body Text Global Color (fourth from the left color)
Light – with this option selected the text color will be your Secondary Global Color (second from the left color).

Pro Tip: Choose the text style that has the greatest contrast with the background color of the section.

Button Module

Navigate to Content > Text > Button and update the button text
Navigate to Content > Link > Button Link URL to add your button link. If you are linking to an internal page on your website you can hover over the gray box under Button Link URL and click on the Use Dynamic Content icon that pops up on the right side. Click on Page Link and choose the page you want to link to.
Press the Green checkmark icon to updates these changes

To switch between styles, click on “Preset: …” at the top right corner of the pop up and chose one of the options below:

Color Button (default) – with this option selected the button background color will be your Button Background Color (last color) in your Global Colors and the text color will be your Secondary Global Color (second from the left color)
Light – with this option selected the button background color will be your Secondary Global Color (second from the left color) and the text color will be your Header Global Color (third from the left color).
Dark Outline – with this option selected the button will have a transparent background and the border and text will be your Button Background Color (last color) in your Global Colors
Light Outline – with this option selected the button will have a transparent background and the border and text will be your Secondary Global Color (second from the left color).

Pro Tip: Choose the button style that has the greatest contrast with the background color of the section.

Image Module

Note: You will edit the images in the sections 2 Column (Text + Image) and Workshop/Events/Travel Schedule via the Row Settings instead of Module Settings. Check out how here.

Navigate to Content > Image > Image and click on Add Image to add an image. If there is already an image there, click on the image to update it.
Upload your file or chose and image from your Media Library
Click on the BLUE Upload Image button at the bottom right to save
Press the Green checkmark icon to updates these changes

To switch between image border styles that hug the edge of the image, click on “Preset: …” at the top right corner of the pop up and chose one of the options below. If you are looking to change an Image Border style that has white space between the image and the border, refer here.

No Border (default) – with this option selected there will be no border along the edge of the image
Color Border – with this option selected the border color will be your Primary Global Color (first from the left color)
Light Border – with this option selected the border color will be your Secondary Global Color (second from the left color)

Testimonials Slider Module

To edit a slide:

Navigate to Content to click on the GRAY gear icon (⚙) to the left of the whichever slide you want to edit
Navigate to Content > Text > Title to update the client name
Navigate to Content > Text > Button to update the button text (if you don’t want a button just delete this text)
Navigate to Content > Text > Body to update the testimonial text
Navigate to Content > Image & Video > Image to update the image (a photo of your client or of the work you did for them)
Navigate to Content > Link > Button Link URL to update the URL for your button if you kept it
- Pro Tip: link to your Google Reviews page so potential clients can see all your reviews in real time
Click on the back arrow at the top left of the pop up to edit the next slide

To add a slide, click on Add New Slide. To delete a slide, click on the GRAY trash icon on the right side of the slide name.

Social Media Follow Buttons Module

Hover over the social icons and click on the GRAY gear icon (⚙)
To edit the social link, click on the gear icon next to the social media name. Navigate to Content > Link and add the full link of your social page (for example, www.instagram.com/yourcompany). Then click on the back arrow to the left of the Social Network Settings header at the top of the module to go back to all of your social media networks.
To add a social media icon that is not already added, click Add New Social Network. Navigate to Content > Network to choose the network and then navigate to Link to add the full link of your social page (for example, www.instagram.com/yourcompany). Make sure the Imported Preset at the top left is selected so your icons are the correct color. Then click on the back arrow to the left of the Social Network Settings header at the top of the module to go back to all of your social media networks.
To remove a social media icon, click on the trash can icon to the right of the Social Media type
Press the Green checkmark icon to updates these changes

Contact Form Module

To add a new field to your form:

Click Add New Field
Navigate to Content > Text > Title to update the title of the field
Navigate to Content > Field Options to change the type of question or to toggle on/off if the field is required
Press the back arrow at the top left of the pop up

Input your email:

This is very important! If you do not fill this out, your inquires will go into the abyss and you will not be notified when someone fills out your contact form.

Navigate to Content > Email > Email Address to add the email address you want your website inquires sent to.

To switch between styles, click on “Preset: …” at the top right corner of the pop up and choose one of the options below:

Dark (default) – select this option if the module is against a LIGHT background
Light – select this option if the module is against a DARK background

Pro-Tip: If you use a CRM, like Honeybook (get 30% off your subscription here! This is an affiliate link), you can embed a contact form from your CRM onto your website. This will automatically input your inquires from your website into your CRM. To embed the contact form:

Copy the embedded contact form code from your CRM
Click on the GRAY + button to add a module
Select the Code Module
Navigate to Content > Text > Code and paste the contact form code from your CRM

In most cases, the form won’t show up while you’re editing in the back end but will show up once you exit out of the Divi Builder.

FAQ Module

Do not use or delete the first accordion item!

To edit an Accordion Item:

Navigate to Content to click on the GRAY gear icon (⚙) to the left of the whichever item you want to edit
Navigate to Content > Text > Title to add the question
Navigate to Content > Text > Body to add the answer
Click on the back arrow at the top left of the pop up to edit the next item

To add an accordion item, click on Add New Accordion Item. To delete an Accordion Item, click on the GRAY trash icon on the right side of the item name.