All Collections
Website
How pages work
Edit content on your webpages
Edit content on your webpages

NationBuilder houses a variety of tools to help you build rich, interesting, interactive content on your site.

Updated over a week ago

Table of Contents

Where to start

Many pages have a content editor that live under Website > Edit [page] > Content or Website > Edit [page] > Posts & Subpages > Edit > Content or Website > Edit [page] > Questions & subpages > Edit > Q & A.

Edit your content

There are three options to edit the content of your website page: 

1. Every page has a content editor where you can enter and format your content.

If you are entering quite a bit of content, note that you can click the arrows button for full screen mode. This will allow the editing tools to stick, so they will be within easy access of the content you're currently editing, instead of having to constantly scroll to the top of the page.

You can set headings and text styles/sizes by clicking on the Normal dropdown menu. 

You can also Bold, Italicize, Underline, and color text, as well as align text to Left/Center/Right.

Alternately, you can edit text sizes in the WYSIWYG source code-- second to last menu button <> on the WYSIWYG menu:

Everything is written in the source code is in HTML whereas font sizes are a CSS feature. Therefore, you will need to format the CSS in HTML in order to make the change. Any CSS component formatted in HTML begins with a 'style' tag.

Say you are looking to change this paragraph to a 15px font size:

<p>This is a paragraph</p>

Since the paragraph above doesn't yet have a style tag, you will need to add it as well as the font size:

<p style="font-size: 15px;">This is a paragraph</p>

Some of the other elements of your page already have some styling (i.e. being centered on the page):

<h3 style="text-align: center;"><strong>Downtown Los Angeles</strong></h3>

At this point, all you will need to add is the font size:

<h3 style="text-align: center; font-size: 15px;"><strong>Downtown Los Angeles</strong></h3>

Finally, if the text you are looking to change already has a font size attached, you will need to only adjust the pixel limit:

<h4 style="text-align: center; font-size: 15px;"><strong>Downtown Los Angeles</strong></h4>

to

<h4 style="text-align: center; font-size: 20px;"><strong>The Vortex - Los Angeles</strong></h4>

Finally, text sizes can be changed for your website in the theme files. You can read more on that here.

Easily add bulleted or numbered lists by clicking the bullet and 123 buttons. You can also increase and decrease indents 

You can insert links to other websites, posts, etc. by highlighting text and clicking on the chain button. You can remove them via the broken chain link button.

There are also Undo/Redo buttons, as well as the ability to clear text formatting Tx.

When you press enter/return, line spacing will default to double. To use single spacing, simply click shift + enter or shift + return at the end of your sentence. 

2. Edit in-line formatting using the HTML editor. 

 3. Use CSS to define the style of the page in Template. Template is where you want to place iFrame, Javascript or other code that you want to use within that page only. In order to access the page template, click on the Create a custom template button.

📌 Note: If you are using a specific theme and not a NationBuilder stock theme, you can customize for the entire theme by clicking on here. When you do, you will be redirected to Website > Theme > Current custom theme > Files where you can make your changes.

When you begin to edit the specific page template, the changes you make will override the theme level template and only affect this page.

Once you make the change, scroll to the bottom of the page and you can save the drafted changes or save and publish the changes. You can also discard the drafted changes, reverting the template to its previous state or choose to delete the custom template, restoring the theme level template.

If you want to strip out the theme layout template, but keep the content of the page, check off the option to "Ignore [theme name] layout template."

More information on editing the page template is covered in our theme documentation.

Add images and video

To insert an image on your page:

1. Click on the Insert/edit image button.

2. Click Upload and insert (or drop) the image. 

3. (Optional) You may edit the image formatting including size, alignment, border, and vertical or horizontal space in the Advanced tab. You can also click/drag to resize the image once you've uploaded it.

4. Click Ok. Your image should appear in your content editor. You can always open the editing menu by clicking on the image and then clicking on the Insert image button again.
Don’t forget to click Save Content at the bottom of the page. 

📌 Note: The content editor is integrated with Embed.ly so videos from YouTube, Vimeo, Hulu, and other sites will automatically display when added to the page.

To add the video, copy and paste the URL of the video into your content editor. The URL must be on its own line with nothing in the lines immediately above or below. Embed.ly will automatically post the video in the place of the URL when you publish the page.

📌 Note: If you don't see your video right away, try removing all of the formatting from the link by pasting it in a text editor and re-pasting into the content box.

Remember to click Save Content after you paste the link. You can view all embedded videos at the bottom of the page under “Content URLs found.”

📌 Note: Embed.ly does not always work with “youtu.be” URLs. If you have one of these links, we recommend that you return to Youtube to get the more traditional “.com” URL. You can always embed the video using an iframe code provided by Youtube. You will insert the iframe in the Template of the page.

To center a video add the following code around the link in the HTML editor. of your page ( < > ). Once you have added the link in the content it will appear in the source code.

<div class="d-flex justify-content-center">https://LINKHERE</div>

Add a table

1. To add a table within your content, click on the Table button on the content editor toolbar. 

2. Hover over Table and select the size of the table by scrolling the mouse over the boxes indicating the amount of columns and rows you want. Click when you've got the dimensions you want and the table will appear in the content box.

3. Enter your content and format it as you see fit. Note the pop up box with buttons to expand, delete, insert rows before/after, insert columns before/after, and delete columns. 

If you'd like to add background or border colors, highlight the cells you'd the change to apply to and click the table button > Table properties > Advanced.

Formatting your text

If you are running into spacing and formatting issues when using the NationBuilder content editor, you are probably copying and pasting the text from another application. When you copy and paste text from one application into the NationBuilder content editor, hidden html may be attached to that text, and that can create issues with the formatting of your content. In order to get around any formatting issues, you can do a few different things:

1. Highlight all of the text in your content editor and then go to the dropdown menu on the left hand side of the toolbar to select a different text option.

2. Highlight all of the text in your content editor and use the clear formatting Tx button to clear all formats and just keep plain text. 

3. If all else fails, you can go into the HTML editor <> in the toolbar, and manually strip your content of any unnecessary HTML. 

Related HOWTOs

Did this answer your question?