Customize the Services 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 Services Page Changes:
Navigate To Your WordPress Dashboard > Pages > Click All Pages > Hover Over “Services” > 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:
Please review Quick Customization Tools prior to getting started (it will save you loads of time in customizing the design!)
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 Services 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
Services Button: /services/#services-box
Patient Info: /get-started/#patients
Step 1- Changing Placeholder Text & Divider Color
1-1 Replacing Headings and Text with Your content
- Once in your Services 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
(To see which areas do not have default text settings, please see tab at the bottom of this page.)
Most placeholder body text is set to the default font size of 16px. 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 3- Changing Background Colors
3-1 To Change the background of Header & “Spectrum ABA Therapy” Section:
- Click the blue section settings > Content Tab > background > input your desired background color.
3-2 To Change the background of Header (white) Box
- Click the grey module settings > Content Tab > background > input your desired background color.
3-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.
3-4 To Change the background of “Our Services” Section
- Click the blue section settings > Content Tab > background > input your desired background color.
3-5 To Change the background of “Ready To Get Started” Section and Orange 4 Image Section:
- Click the green row settings > content > input your desired background color.
3-6 To Change the background of “FAQ” Section
- Click the blue section settings > Content Tab > background > input your desired background color.
Step 5- FAQ Toggles Section
To Change all Toggle Designs at once: Hold down shift button > while holding down shift button, right click in the middle of a toggle box > right click each toggle box until all desired boxes are highlighted with gear module settings showing > continue with following directions:
5-1 To Change Toggle Appearance:
- Hover over grey Image Module setting icon > Design> Icon > change color > “use custom size” change size of + button
- While still in the toggle module design settings, click “toggle” > change open toggle backrgound color to change color of background when open > “closed toggle background” to change color when closed
- While still in the toggle module design settings, click “Title text” > change to desired settings for both open and closed
- While still in the toggle module design settings, click “Closed Title text” > change to desired settings
- While still in the toggle module design settings, click “body” > change to desired settings
Step 6- ABA Therapy Call To Action (Bottom of Page)
This section is set to make global changes. If you change this item on this page, it will reflct across any page this section is present in. You do not need to make these changes on every page.
6-1 To Change the background colors of entire section (grey):
- Click the blue section settings > background > color
6-2 To Change the background colors of inner row (orange)
- Click the green section settings > column 1 background > color
- To change the border of the row: In main row settings > click design > border > change to desired color or change to 0px to remove border
6-3 To Change placeholder text & Image
- Click the grey text module gear settings > change placeholder body text > design > change to desired font, text, size
- Click grey image module settings > change placeholder image to desired image
6-4 To Change button settings
- Click the grey button module gear settings > change placeholder button text > design > button > change to desired font, text, size
Documentation (Items Not Set to Default)
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.
“Quality Behavioral Therapy Services” Heading: Change in Heading H1 Settings.
“Our Services” Tab Section Heading: Change in Heading H1 Settings.
“FAQ” Heading: Change in Heading H1 Settings.
Documentation: The following areas have buttons that will not be changed with Theme Customizer setting changes. You will have to manually reset the font selection when changing the button settings:
Services Page Header: FAQ, Services, Get Started Buttons: Change button settings by clicking grey module settings button > design > button > change font, text size, color, background color, border color, and icon size/color/placement values as desired.