Page Builder 101

Rows and blocks are the fundamental building blocks of your campaign. We've created settings for both that allow you to make the most of them with the control you need. We've explained how to add both to your pages here: Add Content to Your Pages. Now, here's an overlook of these settings and great tips to help you use rows and blocks best for your campaign’s needs 🙌! 



On this page:



Explore the three types of row settings

Open a row’s settings by clicking the cog that appears at the top right of each row.

Once inside, there are three section tabs at the top: General, Columns, and Advanced. 

GENERAL

The General tab houses your Background options. Here you can set the row’s text and background colour. As well as choose if you’d like to use an image or video file as the row’s background. 

Background Video

Click on the video camera icon to paste in your video’s URL. Note that it Check out Add Videos to Your Pages for more information on how to use videos for backgrounds. 

Note that it isn’t possible to have sound on a background video as this would stop it from auto-playing. 
Background Image
Click on the image icon under Background to set the background image by upload, or choose an image previously uploaded to your campaign’s Media Library. 

Click into the designated device’s tab and click Set focal point to adjust the centre of interest. Click where you’d like the image’s focus to be for the device view and hit save. 

Size can be set as Fill, Fit, or Tile under Image Size and the toggle below these options controls whether the background is fixed when scrolling.
HOT TIPS - BACKGROUNDS
🔥Utilize View-Specific Content options to create multiple header rows visible only on specific device views. For example, video background for desktop and tablet and an image for mobile view. 
🔥Upload a .gif file under the background image option to set rotating images as a background. 
🔥Contact us to help set up background images based on profile type or fundraiser uploads for Individual and Team Profile pages. 

COLUMNS

Rows come with a variety of different column configurations; under the C olumns tab you can set the background and text colour for each individually, as well as set padding and margins for each device view. 
Set individual columns to stick to the top of the page and show or hide per device view with the toggles included in this section. Learn more about view-specific content here. Add custom classes to use in your Custom CSS or class helpers in the Custom Class section of each column.

ADVANCED

There are three sections under the Advanced column of Row settings: Spacing, Vertical Alignment, and Attributes

Set the vertical spacing and gutter width for the entire row for each device view under Spacing. Here you can also set the entire row to show or hide for specific devices with the Show on toggle option. 
Choose from three alignment options for the row under Vertical Alignment. Apply class helpers from the Use Class Helpers article, such as row--full-width for full-screen rows, in the Attributes section.
Remember to click the check button at the bottom left of the panel to save your changes in the page editor and hit the Save button at the top right of the page editor to make all changes final. 
HOT TIPS - ATTRIBUTES
🔥 Review the class helpers under Advanced > Attributes of default rows in page templates to see and recreate row settings. 

Use unique Block settings

Blocks represent the actual content of your page, they range from paragraphs, headings, progress bars, buttons, donation forms and more! Many block types have unique settings that allow you to customize them best for your campaign. 
Click on the cog that appears at the top left when hovering over to enter a block’s settings. Block settings allow you to control each block to work best for your campaign. Here are some useful settings for our main block types.

Header


Add the Header block from the block options by searching for ‘header’ in the search bar at the top. The header will be included by default in the Header & Footer page though this is sometimes deleted by mistake and can be re-added without a problem. 

Head over to the Advanced section at the bottom of the General tab to toggle on sticky mobile navigation, show share buttons, and campaign total in the header.

Donation Form


Open the Advanced section to enable Gift Aid, allow saved cards, show a currency list, and create a default selection amount. 
Note: Changes made to one Donation Form's block settings don't carry over to other Donation Forms on your site. To ensure settings are the same go through the donation forms on all pages and configure the block settings accordingly.

Signup Form


There are two Signup Forms available in the block options. Both have a list of options under General > General Options
 such as, Enable teams and 
Enable Facebook signup


.
Sign Up Form (beta) allows setting both a registration fee and self donations and can be switched out from the Sign Up Form included by default. Delete the form and replace it with the Sign Up Form (beta) version from your block options. 



Heading


Open the Advanced section under the General tab of the block options to add an ID to the heading to create an anchor. Use the ID to create a customized URL to send users to the specific part of your page. Add a word, save, and send your new URL. For example, www.yourcampaign.raisely.com/#anchor

Progress Bar


Visit the General tab of the Progress Bar’s block settings to enable/disable showing the Total and Goal. Explore the rest of the progress bar’s block settings to have the progress bar functioning just as you’d like for specific pages or campaigns. 

Leaderboards

Showcase your campaign's profiles by using the Leaderboard block. Configure the leaderboard to display all types of profiles or only individual or team profiles in the block settings under Profile Type. Explore the General Options section to set sorting, order, and more.

Open the Conditional Filters section under the General tab to create filtered results in your leaderboard if you feel comfortable. Contact us with the filtering information that you'd like your leaderboard to use for help. 

Profile Grid

Switch out the Leaderboard block for a Profile Grid block to showcase profiles without progress bars or specific sorting. The Profile Grid includes larger profile pictures and more profile information. note: The Profile Grid doesn't include a search option like the Leaderboard block

Explore your site's Row and Block settings to find the best options for your campaign. And if you have any questions or get stuck contact us, we're just a message away.


Set Margins and Padding

Setting your content's margin and padding can help get your page looking just right 👌. Margin is the space around your block while the padding is the space between your block's border and the content inside of it. This means adjusting the margin of a block will move it up or down on the page while adjusting the padding will change the content of your block's size. It's possible to set margins to negative values if you'd like the block to overlap separate rows. 

We've made it easy for you to set both within row and block settings 🙌. For rows, set both padding and margins per column under the Columns tab. 

Set  Padding under the Style tab of a block's settings and Top and Bottom Margins under the Advanced tab. Set both with the sliders provided with your mouse or keyboard, or click into the number and type in exact size.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us