So you want to edit the Originate website…

First of all, proceed with caution. If the website team doesn’t know you’re doing this, DO NOT DO IT.  But if you must, on this page you will find all the info you need. All of these styles are already set as the defaults. If you find it being neccessary to manually edit any style settings on the page you’re creating, unless explicitly noted below, reach out to Yana instead.

Typograhy

(Change font color to white if using on black background)

H1: Lato Light 60px/1em (Mobile: 42px)

H2: Lato Light 46px/1.1em (Mobile: 38px)

H3: Lato Light 36px/1em (Mobile: 30px)

H4: Lato Light 23px/1.2em

H5: Lato Light 44px/1.2em

Body Copy: Lato Bold 16px/1.4em

Links: Same as body but Dark Lilac and underlined

Colors

#000
Black
(Do not use for text)

#333333
Dark Gray
Used for header text

#333333
Medium Gray
Used for body text

#363657
Dark Purple
Accent color

#2b4742
Dark Green
Accent color

#674d70
Dark Lilac
Accent color

Buttons

Manually set button styles to the following:
Lato Bold, 18px, 0.5px letter spacing, uppercase, #FFF
15px top & bottom padding, 40px left & right padding, #000 background

Form Elements

Coming soon.

Creating New Pages

To create a new page:

  1. Hover over “Pages” in the Admin Panel sidebar and click “Add New”.
  2. Add the page title, then click “Use Divi Builder.”
  3. Click “Choose a Premade Layout”, go to the “Your Saved Layouts” and select
    “New Page Template”

Navigation

Newly created pages must be added manually to the navigation menu. To do this, go to Appearance >Menus in the Admin Panel sidebar.  Find your page in the list on the left and click Add to Menu. Drag the new page item into the order you want it to appear.

Hero Area

To change the background

Hover over the hero area and click on the settings gear in the upper left corner (gear icon image). The outline around the area should be blue.

Click on “Background”, then click on the image to change the background image. In the search bar, enter “background” to find all available images, and/or reach out to Ryan for new images.

To change the text

To edit text, double click on it.

To delete a block of text, click on it, then click the garbage can icon ().

Body

You can add a number of modules to the body of the page, outlined below in the section titled “Modules You Can Use”.

Contact Form

screenshot of contact form Here’s a full-width module you can use if you need a contact form on a page. Usually this would go above the footer.

To add it to your design, click on the section under which you want to place it (this should be the main body section, outlined in blue when you click). An icon with a plus sign will appear when you hover over the bottom of the section (plus sign icon). Click on it to bring up Insert Section, go to the Add From Library tab and select Contact Form.

Footer

To edit footer content, go to Divi > Theme Builder in the Admin Panel sidebar. Click the pencil next to “Global Footer.”

After you’ve made your changes, click the Save button.

Edits only. DO NOT add content without talking to the website team.

Modules You Can Use

To add these modules to your design:

  1. Put this page into edit mode by clicking “Enable Visual Builder” in the dark gray bar on the top of this page (you have to be logged in).
  2. Click the module you want to use, then click the 3 vertical dots icon in the upper left corner (). The outline and button should be teal.
  3. Select Copy Module.
  4. Go to the page you’re building, click on the module preceding the one you want to add and click the 3 vertical dots icon.
  5. Select Paste Module.
  6. To edit the image or text, click on the image or text within the module, then click the gear icon. The outline and icon should be yellow-green.

Big Centered Text

Schedule a 30 minute call with one of our Product Consultants. We look forward to speaking with you!

3 columns with a Heading + Short Explanation

Big Word

Smaller words in a sentence

Big Word

Smaller words in a sentence

Big Word

Smaller words in a sentence

4 columns with a Heading + Short Explanation

Big Word

Smaller words in a sentence

Big Word

Smaller words in a sentence

Big Word

Smaller words in a sentence

Big Word

Smaller words in a sentence

Image + Text Side by Side

Paragraph Title

Your content goes here. Once copy is final, adjust the top padding of this text module in the settings (Gear icon > Design > Spacing > Padding Top. Hover over Padding to bring up the devices option ui icon and select desktop. Do not change the padding on mobile.) to center it vertically in comparison to the image.

2 Column Image Over Text

Paragraph Title

Your content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget est quis nunc consequat porta ac id lorem. Nullam blandit auctor purus, sed semper purus lacinia nec. Nullam sed diam ipsum. 

Paragraph Title

Your content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget est quis nunc consequat porta ac id lorem. Nullam blandit auctor purus, sed semper purus lacinia nec. Nullam sed diam ipsum. 

3 Column Image Over Text

Paragraph Title

Your content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget est quis nunc consequat porta ac id lorem. Nullam blandit auctor purus, sed semper purus lacinia nec. Nullam sed diam ipsum. 

Paragraph Title

Your content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget est quis nunc consequat porta ac id lorem. Nullam blandit auctor purus, sed semper purus lacinia nec. Nullam sed diam ipsum. 

Paragraph Title

Your content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget est quis nunc consequat porta ac id lorem. Nullam blandit auctor purus, sed semper purus lacinia nec. Nullam sed diam ipsum. 

Cards on Dark Background