There are two ways to log into your website builder:
1.1 Log-in through the WordPress admin link we provide you with
(Recommended):
1.1.1.
Once your website goes live, you will receive an email with your website
editor URL, username, and
password from the design team. Just click the link, and log in using the credentials provided. See
the example below:
1.1.2.
Once you are in your dashboard, hover over your name on the top left side of the page and click
“visit site” to enter your website editor/builder.
1.1.3.
Enable the visual builder to start editing your website!
1.2.1.
Go to upandupspace.com and click Log In on the top right of the page
1.2.2 Log into the portal using your username and password you created when
registering your account
1.2.3. Once you log into the portal home, click Log into cPanel
1.2.4. Once you are in the cPortal, scroll down to Scripts and click on WordPress
1.2.5. Click on the Admin icon to enter the control panel of your WordPress website.
1.2.6. Once you are in your dashboard, hover over your name on the top left side of the
page and click “visit site” to enter your website editor/builder.
1.2.7. Enable the visual builder to start editing your website!
Let’s start with the basics. The building blocks of Divi. The main building blocks of Divi are
sections, rows, columns, and modules. Sections contain rows, which contain columns, which contain
modules. Modules are the content blocks of Divi. So Contact Forms, Images, Text, Sliers, Blurbs and
more are all examples of modules.
2.2. Element Settings Window Pop-Up
Whenever you open an element’s settings, a window will pop up with all of the content, design, and advanced
settings available to that element.
2.3. Content
The Content tab is where you can adjust the content settings of the Divi Builder element you’re working on.
What’s in the Content tab varies depending on which element you are working on.The Design tab is where you can
adjust the design settings for the Divi Builder element you are working on.
2.4. How To Edit Your Bio/About Page
How to Update Bio/About Photo:
Editing an Image Module:
2.4.1. Enable Visual Builder
2.4.2. Double click on the image or open the module settings to open the image settings
2.4.3. Once the image settings window opens, click the settings icon on the image to open
your media library.
2.4.4. Once your media library is open, select which photo you want to replace your current
image with, or add a new photo from your files, and click “Upload an Image
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
3. Editing a Slider Module
3.1 Enable Visual Builder.
3.2. Double click on the image slider to open the settings.
3.3. Each “new slide” contains a background image that rotates in the slider. Open the
settings for the specific slide you want to change, and scroll down to “Background” under ”Content”
3.4. To replace an image from your slider, double-click the background image in ‘Slide
Settings’, and your media gallery will open. Select your new image, or upload a new one by clicking upload
files, and then click “Upload an image”.
4. Editing a Text Module
4.1. Enable Visual Builder
4.2. Open the text settings by hovering over the text until a gray frame appears, and then
click the module settings icon.
4.3. Edit your text and save your changes by clicking on the green check mark.
5. How to Edit your Homepage Photos
5.1. Slider Module.
5.1.1. Enable Visual Builder.
5.1.2. Double click on the image slider to open the settings.
5.1.3. . Each “new slide” contains a background image that rotates in the slider. Open the
settings for the specific slide you want to change, and scroll down to “Background” under ”Content”
5.1.4. Double click on the image slider to open the settings.
5.1.5. To replace an image from your slider, double-click the background image in ‘Slide
Settings’, and your media gallery will open. Select your new image, or upload a new one by clicking upload
files, and then click “Upload an image”.
5.2. Movile Version - Slider
5.2.1. Enable Visual Builder
5.2.2. Click on the circle with the three dots
5.2.3. Click on the mobile icon to open the phone view of your website
5.2.4. Once the phone view is open, make sure the photo is displaying correctly. If not, you
can edit the photo in the module settings by following the same steps as the desktop version.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
TIP! If you have any trouble making your site look perfect, send us an email at designsupport@upandupspace.com
and we can do it for you!
6. Carrousel.
6.1. Enable Visual Builder
6.2. Click in the middle of the carousel section for the element settings to appear, and
click the settings icon to open the image carousel settings window
6.3. Once you have your image carousel settings open, click on the carousel item settings to
open the image you would like to edit or delete. The images are in the order they appear on the screen.
6.4. Click on the image settings to open your media library, and select or upload a new image.
You can also click on the trash icon to delete the image from the carousel.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green
“Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
6. Movile Version - Carrousel.
6.2.1. Enable Visual Builder.
6.2.2. Click the circle with the three dots.
6.2.3. Click on the mobile icon to open the phone view of your website.
6.2.4. Once you have the phone view open, make sure the photo is displaying correctly. If
not, you can edit the photo in the module settings by following the same steps as the desktop version.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
TIP! If you have any trouble making your site look perfect, send us an email at designsupport@upandupspcae.com
and we will make it for you!
7. Full Width Photo Module
TIP! Keep in mind that this type of web design requires a “landscape photo” (1920 pixels width – 1080 pixels
height). This means the photo should cover the entire screen of the laptop to look professional. If you
use a
portrait photo it won’t fit the fullscreen of the desktop version, so it won’t look good. Before changing this
part of your website ask your photographer to send you a landscape photo.
In some cases, you must change the version of the builder to “iPad version” or “phone version” to review if
your website has been changed in all three versions (desktop, iPad and mobile version)
7.1. Enable Visual Builder.
7.2. Double click on the homepage photo to open fullwidth image settings.
7.3. Click on the settings button to open your media library, and select or upload a new
image.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
7.4. Mobile Version - Full width
7.4.1. How to use and edit in Full width Section:
7.4.1.1 Enable Visual Builder.
7.4.1.2 Click the circle with the three dots.
7.4.1.3 Click on the phone icon to open the phone view of your website.
7.4.1.4 Once you have the phone view open, make sure the photo is displaying correctly. If
not, you can edit the photo in the module settings by following the same steps as the desktop version.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”.
8. How to edit photo gallery
homepage
8.1. Enable Visual Builder.
8.2. Open your gallery settings by double clicking anywhere in the gallery module, or by
clicking the settings button.
8.3. Once your settings are open, you can:
Rearrange the order by holding down on an image and
dragging it in the order you want them
Delete images you no longer want by clicking the “trash” icon that appears
when you hover over the image
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
9. How to add/remove/replace videos and
reels.
9.1. How to add a video module.
9.1.1. Enable Visual Builder.
9.1.2. Find the gray “plus” icon to add a new video module. Once the “Insert Module” box
appears, find and click the video option. You can easily find “video” by typing it into the search box.
9.1.3. Click “add video” and a screen will appear with the different actions you can take.
9.1.4. Click “Insert from URL”, paste your vimeo or youtube URL into the box and then click
“Insert into post”
9.1.5. Once your video is linked, you can play with sizing, spacing and other settings under
the “design” tabs until it appears to your liking!
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
9.2. How to replace videos
9.2.1. Enable Visual Builder
9.2.2. Open the “module settings”
9.2.3. Click the edit button in the video settings. When the “Actions” window appears, click
“Insert from URL”, change the link in the box to the video you want to replace the old one with, and click
“insert into post”.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
9.3. How to duplicate a video module:
9.3.1. Enable Visual Builder.
9.3.2. Click “duplicate module” in the module settings.
9.3.3. Once you have duplicated your module, you can edit the settings to replace the video
with new ones
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
9.4. How to remove videos:
9.4.1. Enable Visual Builder.
9.4.2. Hover over the video until the module settings appear and click the trash icon, or open
the module settings and click the trash icon over the video you wish to remove
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
10. How to add/update a resume:
10.1. Log into your website builder.
10.2. From your dashboard, go to your media library and click “add new” to add your resume to
your library.
10.3. Once you have uploaded your resume, open it and copy the URL to your clipboard.
10.4. Once you have your resume URL copied, open the “Menus” page under “Appearance”. Paste
the URL under the “custom links” menu item, add the title for your link in the “Link Text” box, and click “Add
to Menu”.
10.5. Expand the “Screen Options” on the top right corner of the screen, and make sure the
“Link Target” box is checked
10.6. Now that your resume has been added to the menu items, expand it to make sure you have
the “Open link in a new tab” box checked, and then click “Save Menu”.
11. How to edit your contact page:
11.1. How to edit your contact form email:
11.1.1. To edit your website, first enable the visual builder.
11.1.2. Double click on the contact form, or hover over the form until the module settings
appear to open the settings.
11.1.3. Once the contact form settings are open, scroll down to open the “Email” drop down
under the content tab. Here you can change the email address that is connected to your contact form.
TIP! Save your changes by either clicking the green check mark in the settings window, by clicking on the
green “Save” button, or when you are finished with your edits and go to “Exit the Visual Builder”
11.2. How to edit existing textbox:
11.2.1. Double click on the text box you want to edit to directly change the text, or hover
over the text until the module settings appear, and open the module settings to edit the text.
