Index

 

Header Image with Text Overlay

Using Layout Parts

Global Footer – Individual Layout Parts

Global Footer – Full Layout Part

  • Individual layout parts are used to make up the Full Footer
  • all layout parts use these pc codes for start a campaign and sign up links
    • What is GFM section – ( ?pc=lp_wigfm_[name-of-page-in-url] )
    • footer menu desktop – ( ?pc=lp_footer_dt_[name-of-page-in-url] )
    • footer menu mobile – ( ?pc=lp_footer_mob_[name-of-page-in-url] )

Global Header

  • uses pc code ( ?pc=lp_header_[name-of-page-in-url] )

Instructions to copy and paste any of the elements from this page into your page:

 

  1. Enter builder mode ( if you mess something up on accident just don’t save and refresh the page and all will be ok 🙂 )
    screen-shot-2016-12-05-at-2-06-49-pm
  2. Hover over the area you want to copy and click the ‘copy’ icon from the GRAY area not the blue area
    screen-shot-2016-12-05-at-2-08-32-pm
  3. Go to the page you are working on and enter builder mode again. Scroll down to the bottom of the screen and you will find an empty area for you to add new content. hover over that area and click on the ‘paste’ icon in the gray area. You will then get a pop up warning you about overwriting data. Go ahead and click ok on that unless you accidentally happen to click ‘paste’ on an area you don’t want to overwrite

Header Image with Text Overlay

 

Use any combo of these classes to get your desired text alignment for mobile and desktop:

set to center text for both:

text-fullwidth  

 

mobile view specific:

text-mob-fullwidth
text-mob-left-half
text-mob-right-half

desktop view specific:

text-dt-fullwidth
text-dt-left-half
text-dt-right-half

 

so for example, you can enter in ( text-dt-left-half text-mob-fullwidth ) into the additional css class input field

 

 

Where to enter the custom classes:

 

  1. double click your text area and under the styling tab scroll to the bottom until you see the field named additional css class

 

 

if you want to copy any of the examples below follow these instructions at the top of the page

 

or

 

how to manually create this header on your template:

 

  1. The container that holds the images and text needs to have the class hero-image-text-container.
  2. Within that main container you need to have a three separate elements dropped in.
    1. a image cropped for mobile devices – set to hide for desktop and tablet*
    2. another image cropped for desktop devices – set to hide for mobile.*
    3. a row with the text that needs to have any combo of the above classes added into the custom class field. h1 for the large text and regular paragraph for the small text.

*the hide for mobile, tablet, and desktop is at the top of the same style tab you use to add the additional css classes

 

Left Align Text Desktop and Mobile 

#A-TEMPLATE-RESOURCE-AND-GUIDE
#A-TEMPLATE-RESOURCE-AND-GUIDE

Sports Fundraising For Athletes & Teams

Raise money for tournament fees, equipment, travel and more.

Left Align Text Desktop & Fullwidth Text Mobile 

#A-TEMPLATE-RESOURCE-AND-GUIDE
#A-TEMPLATE-RESOURCE-AND-GUIDE

Sports Fundraising For Athletes & Teams

Raise money for tournament fees, equipment, travel and more.

Fullwidth Text Desktop and Mobile 

#A-TEMPLATE-RESOURCE-AND-GUIDE
#A-TEMPLATE-RESOURCE-AND-GUIDE

Sports Fundraising For Athletes & Teams

Raise money for tournament fees, equipment, travel and more.

Right Align Text Desktop and Mobile 

#A-TEMPLATE-RESOURCE-AND-GUIDE
#A-TEMPLATE-RESOURCE-AND-GUIDE

Sports Fundraising For Athletes & Teams

Raise money for tournament fees, equipment, travel and more.

Right Align Text Desktop & Fullwidth Text Mobile 

#A-TEMPLATE-RESOURCE-AND-GUIDE
#A-TEMPLATE-RESOURCE-AND-GUIDE

Sports Fundraising For Athletes & Teams

Raise money for tournament fees, equipment, travel and more.

Tips:

 

 

Break line at a certain word

to manually break lines at a certain word in the sentence you will need double click your text area and go into the text tab (don’t enter the following in the visual tab) and wrap the sections of the sentence in a span with a style=”display:inline-block” like so:

<span style="display: inline-block;">First section breaks here. </span><span style="display: inline-block;">Second part breaks here</span>

First section breaks here. Second part breaks here

Using Layout Parts

Layout parts can be added to your template in builder mode by dragging in the layout part from the module panel

screen-shot-2016-12-05-at-2-20-15-pm

Select the layout part you want

screen-shot-2016-12-05-at-2-20-32-pm

Once saved here and in the module panel at the bottom of the page, refresh the page to see your layout part. You might need to go into the style of that module section and adjust padding as needed.screen-shot-2016-12-05-at-2-24-14-pm

screen-shot-2016-12-05-at-2-24-41-pm

 

You can also copy elements from this page and paste them into your page. Instructions for this are at the top of the page.

individual WIGFM

 

Layout Part Name

Footer Part – WISGFM

 

What is GoFundMe?

GoFundMe is the world’s largest online fundraising platform, with more than $4 billion raised so far.

 

individual news

 

Layout Part Name

Footer Part – news

 

#A-TEMPLATE-RESOURCE-AND-GUIDE

 

individual footer menu

 

Layout Part Name

Footer Part – Menu

 

 

individual ideas

 

Layout Part Name

Footer Part – Ideas

 

 

individual legal

 

Layout Part Name

Footer Part – Legal

What is GoFundMe?

GoFundMe is the world’s largest online fundraising platform, with more than $4 billion raised so far.
#A-TEMPLATE-RESOURCE-AND-GUIDE

Global Header Layout Part

 

Layout Part Name

Global Header

 

Erase the current menu on your page, drag in the layout part into the template and select the Global Header. You will need to set the padding to 0 in the grey container the layout part is inside of. 

* remember the pc code for the global header is auto set to pc=lp_header_[name of page in URL]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn