How to use the Page Designer
Our Page Designer makes it easy for anyone to create fundraising campaign pages. No need for HTML coding or a developer! The Page Designer include Drag and Drop Webpage Components, fundraising leaderboards, image carousels, image jumbotrons, YouTube videos, Instagram feeds and more!
How to use Page Designer
1. Page Designer
• Login to your account, navigate to the menu on the left, and click ‘Page Designer’
2. Adding a new page
• Select ‘Pages’ and click ‘Add Page’
3. Setting up Page Details
• Create a page name ie: Event Day
• Select a page title (note: this will display in the menu header) ie: Event Day
• Select a ‘Page Slug’: this will be the URL
4. SEO (Search Engine Optimization) Settings
• Search engines display only the first 60-70 characters of a page’s title in their search results. For this reason, the length of your title plays an important role in SEO title optimization.
• The meta description is a snippet of up to about 155 characters – a tag in HTML – which summarizes a page’s content
5. Adding blocks or ‘rows’
• Begin by adding a Block, clicking one of the rows on the top depending on the format you are looking for
6. Now for the fun part! Designing your page in the Block Editor!
• Choose an element from the dropdown menu
• Options: text, title, button, image, thermometer, instagram, jumbotron text, jumbotron video, image carousel, card block, individual leaderboard, team leaderboard, livestream, sponsors, faq, embed youtube video
• Most pages will have a header, so we will start with the Jumbotron With Textbox
7. Once you have selected your element for the Block Editor, click ‘Edit’, then select the blue arrow and the right menu will appear:
8. Editing elements in Block Editor
• One you have selected ‘Edit’ you will see options for your Jumbotron Textbox such as: image, text, button etc.
• Select Jumbotron Image to upload an image. Image width of between 1500px->2000px is ideal for banner images.
• Once you have uploaded an image, you have the option to change the position of this image (ie: center, left etc.)
• Jumbotron Button is a button you can place on the image, or remove
• Add text and change the colour, position, bolded etc.
• You can change the opacity of the textbox background here:
9. Header example:
10. Adding a textbox
• Now we can create a textbox below the header for the main body of the page
• Typically, the Event Day page would have event schedule details such as location, time, etc.
• Add another Row like we did before, and select ‘Textbox’ from the dropdown
11. Use the plus and minus icons on the textbox editor block to change the sizing/position:
12. Now you’ve created a page using the Block Editor!