I Am Excited To Get To Know You! GET STARTED HERE >
Download my free Pleiadian Channeled recording: "Make Clear & Confident Decisions With Ease" GET STARTED HERE >

GENERAL SITE INFO: 

This page is to help you add new pages and sections to your site so you can keep them true to your brand design. Make sure to read the instructions above each section type and also the text within the modules for specific guidelines

*Things in the builder often do not look exactly the same as in the live view - make sure to check the live view before you make adjustments to design elements.

FONTS: Use h1, h2, or p tags;  the title, small-title, italics, and subheading classes will assign these font styles to your text. You can assign h1 and h2 by highlighting and choosing them, you need to enter code view to specify the rest.
h1 = title: Playfair Display, 42px, title case, color - #ed3d8a (pink)
h2 = heading: Raleway Semibold, 25px, uppercase, color - #081932 (navy)
p = paragraph: Cormorant Light, 20px, normal case, color - #801932 (navy)
.title = white title: California Dreamer, 250px, normal case, color - #ffffff (white)
.small-title = smaller black title: California Dreamer, 190px; normal case, color - #000000 (black)
.subheading = subheading: Raleway Semibold, 20px, uppercase, color - #801932 (navy)
.italics = italics: Playfair Display, 20px, normal case, color - #ffffff (white)

ADDING CUSTOM CODE:
The instructions for each module will tell you the steps to duplicate what you see. If you are creating a NEW section you will need to add the indicated module to the new section and then follow the steps. If you are updating an EXISTING section you will just follow what is written next.

To copy the template you will highlight some text and then click on the < /> icon in the toolbox which pops up. Then you will copy all the code you see (click cmd+a or ctrl+a to highlight everything). Then, in your new section, open the code box there and paste the whole new code. Close the code box and then edit your image and text as needed.

ADJUSTING THE SECTION SETTINGS:
The section instructions will tell you to open "Edit Sections Tab". This is the blue tab at the top right of each section on the page. In this toolbox you'll be able to update the layout, spacing, columns, and background for each section. The default settings are a "padded" layout, 40px top and 40px bottom spacing, 1 column, and a white background. Each of the section templates below will indicate any changes you will need to make to those defaults; if there aren't changes from the default they won't be listed.

BACKGROUND IMAGES: 
• Upload your own; or click on "Browse Images" and choose from thousands of stock photos directly inside Wavoto, powered by pexels.com, or select between ones you've previously uploaded to Wavoto by clicking on "Search My Images".
• Background photos work best when they do not have a specific focus. Background photos will shrink and stretch in order to fill the space for all screen sizes so the focus remains towards the center vertically and horizontally. If you have a person in a close up view, or towards any of the edges of the screen part of the person will get cut off on different screen sizes.

MAIN BANNER SECTIONS:
To add to a new section:
• EDIT > CONTENT > TEXTBOXES > BLANK MODULE: 
• EDIT SECTION TAB: 
  • Layout= Style Class "stretch" for the words which are centered on the screen OR "stretch lowered" for the words which are at the bottom of the screen
  • Spacing= You don't need to worry about spacing here since it is coded to stay full window height;   
  • Background= Update photo; add paralax scrolling

title text here

FRAMED HALF IMAGE/HALF TEXT MODULES: 
To add to a new section:
• EDIT > CONTENT > TEXTBOXES > BLANK MODULE: 
• EDIT SECTION TAB:  
  • Layout = Style Class "imgFrame". 
  **To add the feather effect, add Style Class "feather" in addition to "imgFrame". For example; Style Class = "imgFrame feather"

Left - Framed Photo with button

EDIT SECTION TAB:    
• Layout = Style Class "imgFrame". 
  **To add the feather effect, add Style Class "feather" in addition to "imgFrame". For example; Style Class = "imgFrame feather"

Right - Framed Photo with button

EDIT SECTION TAB:    
• Layout = Style Class "imgFrame". 
OTHER HALF IMAGE/HALF TEXT MODULES: 

RIGHT PHOTO WITH NO FRAME OR BUTTON

This is a half-image / half-text module. On large screens, the image and the text will remain centered horizontally with each other, no matter their respective size. On small screens, the image will stack itself above the text automatically. This module works best in single-column containers. Click on the image to replace it, change its size and shape, or add a link to it.

Custom WordArt Title 

You can not type new word art but you can create a new image with new word art and a white background with the exact same dimensions (1532 x 452). Then change it here by clicking on the image and uploading the new one.

You can not type new word art but you can create a new image with new word art and a white background with the exact same dimensions (1532 x 452). Then change it here by clicking on the image and uploading the new one.

EDIT SECTION TAB:
• Layout= Style Class "imageFrame"
**To add the feather effect, add Style Class "feather" in addition to "imgFame". For example; Style Class = "imgFrame feather"
CHECK LIST MODULES:
To add to a new section:
• EDIT > CONTENT > TEXTBOXES > BLANK MODULE: 
• EDIT SECTION TAB:  
  • Background: Color 1 (Navy)
  • List item one
  • List item two
This one is typically in a half image half text section, but it can be used anywhere there is text. 
To add to a new section:
• EDIT > CONTENT > TEXTBOXES > BLANK MODULE: 
OR
• Copy and paste the code into the text section of the half and half module (This is the part in code view that says, "< div class="halfnhalf-text" >" Erase the text tags there and replace with this code.

YOUR SUBHEADING TEXT WILL GO HERE

  • List item one
  • List item two

Bonuses:

  • List item one
  • List item two
* Note if you want to include one
JUICY STATEMENT SECTIONS: Left side background gradient 
To add to a new section:
• EDIT > CONTENT > TEXTBOXES > BLANK MODULE
• EDIT SECTION TAB: 
  • Layout = Full Width; style class = "blueGradient" (this will add the blue photo overlay gradient for desktop and mobile)
  • Spacing = 215px top, 215px bottom
  • Background = Change image; add Paralax scrolling
FORM SECTIONS: WITHOUT  WORD ART SECTION
To add to a new section:
• EDIT > CONTENT > SECTION TEMPLATES > OPT IN FORM: Delete the top box
• EDIT SECTION TAB: 
  • Spacing = 80px top, 40px bottom
  • Columns = 2; drag column #1 slider just right of center and drag column #2 just left of center (open settings tab in template to see an example if needed)
• FORM: Click on the gear icon in the top right of the form module to choose which form you would like to use. In the pop up box, in the CSS Class add "formFeather" (formFeather adds the feather)
Stay in the Know

Use the form below to join my mailing list to receive my newsletter.

FORM SECTIONS: WITH  WORD ART SECTION (shows underneath image in Editor but is correct in live view)
To add to a new section:
• EDIT > CONTENT > SECTION TEMPLATES > OPT IN FORM: Delete the top box
• EDIT SECTION TAB: 
  • Spacing = 80px top, 40px bottom
  • Columns = 2; drag column #1 slider just right of center and drag column #2 just left of center (open settings tab in template to see an example if needed)
• FORM: Click on the gear icon in the top right of the text module to REMOVE FROM PAGE. Click on the gear icon in the top right of the form module to choose which form you would like to use. In the pop up box, in the CSS Class add "letsConnect formFeather" (letsConnect adds the word art and formFeather adds the feather)
INSTAGRAM SECTIONS:
To add to a new section:
Click on the gear icon in the template below and copy the code in the field. 
• EDIT > MARKETING > INSTAGRAM FEED: Paste the code into the field when adding the module to the page.
• EDIT SECTION TAB: 
  • Spacing 60 top 30 bottom
  • Background= Color #6 (tan)