Customize the Home Page to fit your Business Replace placeholder content & images with your own!
Follow along to see how to make these changes in the easy steps below.
To Get Started Making Home Page Changes:
Navigate To Your WordPress Dashboard > Pages > Click All Pages > Hover Over “Home” > Click “Edit With Divi” >
You are now in the Front End Builder of Your Home Page and will make all changes to home page here.
Video Tutorial:
For quick & easy customization tool tips, please check out the Quick Customization Tools guide prior to getting started with page customizations (saves loads of time in design changes!)
Reset Anchor Links In Buttons
For purchases of Spectrum Kit prior to 1/15/21, please use the following instructions to change anchor links within buttons:
** Anchor Link: has a #towards the end, which tells your website to drop down to a specific area of the page with that CSS identifier loaded into it. For more detailed information on Anchor Links, please read Anchor Links Info
Changing Anchor Links To Direct To Your Website:
Open up button settings > under content tab, scroll down to “link” > if the placeholder link does not say “page” and instead has an address typed in like this: https://spectrum.launchedcreative.com/services/#faq then it is an anchor link
**Please take note of what the /page/#anchor link is
To Change anchor link to your page, erase the “https://spectrum.launchedcreative.com portion but leave in the desired page and anchor link. Ex: /services/#faq
Click save
Anchor Link Legend for Home Page:
(to reset to your website, simply use these anchor links in the link area. You do not need to include your web address before the /)
FAQ Button: /services/#faq
Step 1- Changing Placeholder Text & Divider Color
1-1 Replacing Headings and Text with Your content
- Once in your home page, you will hover over each text module that you want to replace the text > click grey gear/setting icon > Content > replace the content with your text > click save
- Alternatively, you can click the text area you would like to change and start typing directly into the box > click save changes at bottom of page.
1-2 Resizing Placeholder Text
Most placeholder body text is set to the default font size of 16px. Some placeholder content is set to 18px to emphasize importance. If you would like to change these areas that are are not set to default, or to change any area you prefer to make larger:
- Hover over the text module you’d like to change > click grey settings icon > click Design Tab > text > text size > input your desired text size > click save.
- To change heading sizes, follow the steps above and scroll to > heading text to change sizing > click save.
1-3 Changing Divider Line Color
- To change divider line color, hover over the divider line > click settings icon > Design Tab > Line > Line Color > select your line color by inputting RGB color code > click save.
Step 2- Changing Placeholder Images
2-1 Changing Placeholder Images
- Hover over grey Image Module setting icon > click image > replace with your uploaded image or from your library > click save.
2-2 Changing Image Frame Color
- While still in the image module settings, click > design >scroll down to border > change border color to desired color
Step 4- Changing Background Colors
4-1 To Change the background of Header & “Spectrum ABA Therapy” Section:
- Click the blue section settings > Content Tab > background > input your desired background color.
4-2 To Change the background of Header (Orange) Box & Header Contact Info (white) Boxes
- Click the grey module settings > Content Tab > background > input your desired background color.
4-3 To change background color behind image next to ABA Therapy:
- Click the green row settings > column 1 > Content Tab > background > input your desired background color.
Step 5- Testimonial Slider
5-1 To Change Slider Settings
- Click Grey Slider Module Settings Icon > click grey icon for “Happy Parent #1” > click “text” to input your customer name and testimonial text
- To change background color of testimonial box: In main slider settings area (where all testiminials are listed) > Click Design > click Overlay > input your color > click save
- This will apply color changes to ALL testimonial sliders. To change each individual slider to a different color overlay or text settings, follow the directions above in each slide.
5-2 To add Additional Testimonials
- While still in the Slider settings module above > click the copy button on the slide above and follow the steps in 5-1 to change to your content.
5-3 To change image next to slider
- Click the image settings button > replace with your image
5-3 To change Section color below testimonial slider
- Click the green row settings > column 1 > Content Tab > background > input your desired background color.
Step 6- Staff Info
6-1 To Change Staff Placeholder Images & Border
- Hover over grey Image Module setting icon > click image > replace with your uploaded image or from your library > click save.
- While still in the image module settings, click > design >scroll down to border > change border color to desired color
6-2 To Change Staff Title Box
- Background color of box: Click the grey module settings > Content Tab > background > input your desired background color.
- Border color of box: While still in the text module settings, click > design >scroll down to border > change border color to desired color
- Change placeholder text to desired text
- Change Text Styling: While still in Text module settings > Design > Text > change to desired color and size > scroll down to Heading text > click H1 > change to desired color and size > repeat for H2 styling
6-3 To change Staff Detailed Info “Get To Know Me” Toggle settings
- Hover over grey Toggle Module setting icon > Change Placeholder Title > Change Placeholder Body content
- Background Color: Scroll down to background > change to desired color
- Icon Color/Size (+): Click Design Tab > Icon > change to desired color and size
- Background Color (open): Toggle > Open toggle background (the color of the background when the toggle + icon is hit) > change to desired color
- Title Text (open): Click Title Text > Open title text color > change to desired color > change to desired font
- Title Text (closed): scroll down to Closed Title text > Open title text color > change to desired color and size > change to desired font
- Body Text: scroll down to body text > change to desired color, font, size
- Border: scroll down to border > change to desired color
Step 7- Mail Opt-In Module
7-1 To Add Your Mailing List Credentials
- Click the “Email Optin” Module Settings > Scroll down to Email Account > Select your service provider from drop down list > Add your account name > add your account API (this will be found within your mailing list account) > click submit to load.
- Click “Success Actions” to set what you’d like your successful list opt-in to say
- To Change the background colors of the mail module: click the grey gear icon > content settings > background > color
- To change button style: Click “Design” tab and scroll to “button” to change button color and font
7-2 To Change the background colors of entire the section:
- Click the blue section settings > background > color
Placeholder Text Not Set To Default Settings
Documentation: The following areas have placeholder text that will not be changed with Theme Customizer setting changes. You will have to manually reset the font selection when changing the placeholder text out for the following area:
Header “Comprehensive Evidence-Based ABA Services” Tagline: Change in Text Settings.
“Helping Children Achieve” Services Heading: Change in Heading H1 Settings.
“Kind Words & Praise” Testimonial Heading: Change in Heading H1 Settings.
“Meet Our Team” Staff Heading: Change in Heading H1 Settings.
“Exceptional Services Provided By Highly Trained Professionals” Staff Subheading: Change in Text Settings.
Staff Name Boxes: Change Font for Heading H1 Only. All others set to default.
“Get To Know Me” Boxes Title Text: Change in “Title Text” H5 Heading