Skip to main content

How to edit content on your webpages

NationBuilder houses a variety of tools to help you build rich, interesting, interactive content on your site. This HOWTO will walk you through some of the key tools within the content editor. 

Table of Contents


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 arrowsbutton 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 buttonon 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 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 .

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. 

HTML source editor

new_wysiwyg_source_code.png

 

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.

 If you are using a specific theme and not a NationBuilder public 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 imageicon.

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 imagebutton again.

Don’t forget to click Save Content at the bottom of the page. 

Learn more about including images and other media files in your page.

 

Note that 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.

Youtube link

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 that the Embed.ly does not work with “youtu.be” links. 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.


Add a table

1. To add a table within your content, click on the tablebutton 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 tablebutton > 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 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

Configure featured content sliders

Sharing your site on social media 

How to create a website theme with NationBuilder

How to delete a page

NationBuilder public theme guidelines

Inserting images with text wraparound option is gone

Be the first to comment

Wrap code snippets in <code></code> tags.
Please check your e-mail for a link to activate your account.

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.