While the page editor does have a WYSIWYG editing interface, the best way to ensure the page is properly formatted is to use the code view and update it with HTML.

Please navigate to the "Custom Pages" page by clicking the dropdown "Content & Design" in the sidebar. Then, select "edit" next to the custom page that you want to edit. To access the code view editor, click on the “...” icon located within the editing window. This will cause additional editing buttons to appear. Then click on the “< / >” button to be taken to the HMTL editor code view.

The GiveGab platform uses Bootstrap 3, so many of the CSS classes and HTML components below come from there. Each format feature has a start and end tag, noted with < > (start) and </ > (end).

Using <h> tags, you can change the headings/ size of your text with h1 being the largest and h5 being the smallest (visualization below). Most page titles will use <h1>, while subheadings use <h2>. Header texts also pull in the lead color of the giving site’s branding by default.

For standard text, no <h> tag is needed and you can just use <p> to mark the start of a new paragraph of text.

Note: Make sure to close your heading with the same level code within your </ > tag.

Example:

To include a line break within your text, use a simple <br> indicating a break in the text. If you want a horizontal line break, use the <hr> tag. The horizontal line will automatically adjust to the width of the page. You do not need to include an end tag for line breaks.

<br>

<hr> ______________________________________

<b> </b> or <strong> </strong> bolded text

<em> </em> or <i> </i> emphasized/italicized text

<u> </u> underlined text

<strike> </strike> striked text

<a href=”https://www.givegab.com” target="_blank">GiveGab</a> GiveGab

<a href=”mailto:customersuccess@givegab.com” target="_blank">email us</a> email us

Note: including target=”_blank” opens the hyperlink in a new browser tab. If you want the link to open in the same window, remove the target=”_blank” from your code to just include the <a href=”url”>.

Note: You can interchange the p in the <p style> with a header tag if you’re looking to adjust header text. Example <h3 style=”text-align: center”> </h3>

<ol> </ol> Ordered list start/end tag

<ul> </ul> Unordered list start/end tag

With either ordered or unordered lists, each bullet point will have its own <li> </li> tag

1. This is the first point

2. This is the second point

3. This is the third point

To insert an image into the HTML, first upload the file to a web hosting service, such as Amazon s3 so that there is a publicly-viewable URL for the image. Include the URL within the <img src> tag within quotations, as noted below.

Note: It’s important to include alt text to help with user accessibility, especially if a user is using an e-reader to access the web page and unable to see the image.

To add columns, you’ll want to include <div> tags that help identify the specific rows and spacing of the texts. Each <div class=”row”> tag signals a singular aligned row of text, while the <div class=”col-sm-6”> tag nested underneath marks the individual columns. Remember to close out each <div> tag with the </div> tag.

For the following, refer to the formatting example underneath each section of code.

Two columns of text code

Two columns of text example

Three columns of text code

Three columns of text example

The HTML code above should help format the majority of the content you would need to use for your giving site. If you need help with additional HTML formatting, talk with your Project Manager.