Hidden first row for code blocks

Put any code blocks together at the top of the page in a hidden first row (unless a particular code block has to be lower down the page). To hide this first row:

• Load from the library the saved code block 'Row 1 - hide'
• (Do not unlink from library)

Curved hero image

To add a curved hero image at the top of the page:

• Load from the library two code blocks called
  • 'Hero image'
  • 'Hero image - set image URL'
• Unlink from library only the second block 'Hero image - set image URL'
• In the code for 'Hero image - set image URL', change the image URL to the one you want

Yellow backgrounds

To set a yellow background for a particular section of the page (e.g. the form):

• The part you want to make yellow should be together in one row and a column within that row
• Load from the library one of the code blocks called 'Row X, column Y - yellow background' -- depending on which row and column it is
• (Do not unlink from library)

Top tips

1. There are lots of examples and instructions on this page, page 2 of this action, and the example two-column action
2. Some examples and instructions are in the first row which is hidden unless you're looking at this page in the editor
3. Each page section (with rounded corners and spacing around it) is a row -- mostly you can just use a normal one-column or two-column row, it's only for a wide single column below two columns that it's different (see the example two-column action for details)
4. Saved blocks are your friends (text blocks, code blocks, etc) -- these all live in the '2021' folders in the library (if you're creating new saved blocks, move them there too -- you have to go to Components in Engaging Networks to move them to a different folder). 
5. When you use a saved block, only unlink from the library if you are going to change the code/content inside the block (otherwise, leave it link to the saved version -- that way if we ever need to update the saved version, it will update every page that uses it at once).

Helper classes

There are some classes you can add to various elements (e.g. text blocks, images, paragraphs, form labels) to change how they look on an individual basis.

To add one to a whole block (e.g. a Text block, Form block or an Image block), edit that block, then click the paint palette icon , then add custom class(es).  You can also use them in HTML code e.g. <p class="text-small zero-space-above">...</p>

If you're adding more than one class, these must be separated by spaces (not commas).

Vertical spacing

• zero-space-above
  or space-above or space-above-more
  or reduce-space-above or reduce-space-above-more
• zero-space-below
  or space-below or space-below-more
  or reduce-space-below or reduce-space-below-more

Text size

• text-medium  22px, looks like this
• text-medium-small  18px, looks like this
• text-small  16px, looks like this

Forms

Validators

When using the following form fields, make sure to set the Validator:

• Postcode
• Email
• Phone number
• Date (YYYY-MM-DD)

(Validators only work when Mandatory is ticked - apart from Phone number where you also have an optional validator.)

Petition totaliser

• Colours are set automatically -- you don't need to change anything
• To set the text, edit the widget then go to Copy and use e.g.
  Join the {widget_data~count} supporters who are fighting for safe and happy childhoods for all children.
  or
  {widget_data~count} people have already
• If you want to show text only (not the progress bar), add the code block 'Petition totaliser - text only' to the page (usually in the first row)

Skip to form button on mobile

By default on mobiles, if there is a form on the page and the user cannot see it on-screen at present (because it's below or above), the user will see a button at the bottom of the screen to skip straight to the actual form (or to the form steps if this is being used).

You can change some of the settings if you want to -- what the text on the button should be, where the user should scroll to (if you don't want it to be the form steps or the first form block), or you can switch off this skip to form button completely on the page.  To do this:

• Load from the library the code block 'Skip to form button on mobile - settings'
• Unlink it from the library
• Update the settings

If you just want to make the button appear on all screen sizes (not just mobile), add this saved code block: Skip to form button - make it show for all users, regardless of screen size

Form steps

If you are using form steps, put these next to / near to your first form block, to ensure the skip to form button on mobiles works properly.

To add:

• Load from the library one of the text blocks 'Form steps X of Y' - e.g. 'Form steps 1 of 2'
• Unlink from library
• Update the text

1. Your details
2. Email your MP

Stay in touch

We would love to send you regular updates about our work, including how you can support children by campaigning, volunteering and fundraising.

Full-screen rows

See below for an example full-screen row. 

NB the code blocks there only need to be included once on the page, and ideally would be at the top of the page.

How to add a full-screen row

1. Insert an Advanced Row (Add row > Custom layout)
2. Tick 'Custom class name' for the row (not the column) and then add this class name: full-screen
3. Remove column 2 (full-screen rows work with single columns)

How to set background images

1. Insert the saved code block 'Full-screen rows - Define background images' at the top of the page -- this is where we can define multiple background images that you can then use on rows
2. Click Unlink from library, then Save to library with a new name
3. Edit the code block - you'll see there are various image slots (if you need more, add a second version of this code block on the page). For each image you want to use:
   1. Upload mobile and desktop versions of the image to Images & Files -- see the beginning of the code block for instructions on what dimensions and file size/type to use
   2. Replace XXXXXXX IMAGE NAME with a reference name that makes sense to you, it's not used anywhere else
   3. In both instances of .background-image-xxxxxxxxxx replace xxxxxxxxxx with a unique name, using only lowercase letters, numbers and hyphens (-), no spaces or capital letters or other punctuation
   4. Replace https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-mobile.jpg with the mobile image URL
   5. Replace https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-desktop.jpg with the desktop image URL
4. To set a background image on a full-screen row, edit the Advanced Row then in the Custom class name box for the row (not the column), add a space after full-screen then whatever you set earlier to replace background-image-xxxxxxxxxx (note: without the dot) -- so what's in this box should now be e.g. full-screen background-image-girl-fridge

How to add content

The easiest thing is to:

1. Insert the saved text block 'Full-screen row - Example content' -- this will give you a heading, text, expandable boxes and a next button
2. Click Unlink from library, then (if you want) Save to library with a new name

How to manually add an expandable box

If you didn't insert the saved text block described above, you can insert an expandable box manually:

1. In a full-screen row, edit your text block
2. Click the Source button to see the HTML code
3. Paste this HTML code after all the other code you see:
   <details>
<summary>
Here is a title
</summary
<p>Here is some text</p>
<p>If you are editing this expandable box, make sure to leave it looking closed in the text block editor - otherwise it will be open when a supporter comes to the page.</p>
</details>
4. Hit the save button to take you out of the code view
5. Edit the content as needed

How to add 'next' buttons

If you didn't insert the saved text block described above, you can insert a 'next' button manually:

1. In a full-screen row, edit your text block
2. Click the Source button to see the HTML code
3. Paste this HTML code after all the other code you see:
   <div class="button">
Next
</div>
4. Hit the save button to take you out of the code view
5. Edit the button name to whatever you like

How to add floating take action button

See instructions in the section above titled Skip to form button on mobile