Content blocks are used to add various types of content to your webpages including text, images, videos, and even your social media links. This article will go over how to edit different types of content blocks. To find out how to add, move, or delete content blocks, check out this article.

Add Heading or Paragraph Text Content to Website

When you add a content block that includes text (e.g., Title, Heading, or Paragraph blocks) you'll have a text tool bar that is displayed at the top of the page.

Let's take a look at the text editing options available, starting from the left:

Formatting

The first three icons are related to text formatting. You can Bold (B) and Italicize (I). You can Underline, Strikethrough, Superscript, Subscript, and set to all Uppercase (found under the A). The eraser icon will reset it back to the default option.

Size and Spacing

The next icon has your options for adjusting the size and spacing of your text. You can use the + and  - to increase or decrease size.

Add a Link

The next icon is used to add a hyperlink to text. When you click the add link option (1) a window will pop up for you to set up the link (2). You can either enter a URL in the LINK line (i.e., to direct to another webpage) or use the three dots to the right (3) to link to a document.

More Options

Next to the chain link icon, you will see three dots you can click on to view more options available. This includes: preview, word count, symbols, icons, images, lists and indents, font, paragraph styles, and preferences

Preview Your Page

The eye icon allows you to view your page and adjust how wide you would like it to show on your live site by selecting the boxes at the top. Once finished, you can select the "x" at the top right.

Word Count

If you select the "i" icon, a pop up will appear showing you your word count on the page you are currently editing.

Symbols

The horseshoe icon allows you to insert a large range of arrows, emojis, and many other symbols. Clicking on the icon will bring up a panel on the right side of available icons that can be inserted into the content block. Click on the three dots to view specific types of symbols to choose from as well.

Insert Icons

The smiley face icon allows you to insert additional icons/symbols that may not have been available under the symbols section. Clicking on the icon will bring up available icons that can be inserted into the content block. 

Images

You can use the next icon to add an image into the block. When you click on this icon a window will pop up to select the image you want to insert. You can either drag and drop the image file into that window or use the chain link icon to select a previously uploaded file.

Lists and Indents

The next icon allows you to add a list (i.e., bulleted or numbered) and also control indents.

Font

The a icon allows you to switch the font. If you have already set your default fonts in the Site Settings screen you will probably not need to use this option.

Paragraph Styles

The H icon is used to select a paragraph style. This option is most helpful to use if you have set up your default style options from Site Settings.

Preferences

The wrench icon allows you to customize how you seeing your editing options when you have clicked into a content block. 

Undo or Redo

The final icons in the list are the undo and redo arrows, which is used to revert back to something that was just previously done.

Add Image Content to Website

When you add a content block that includes an image, you'll notice two options available when you hover over the image. You'll see an image icon (1), which will allow you to change and upload a new image. You will see a chain link icon (2) which will allow you to adjust image settings, and the pencil icon (3), which will allow you to view and manage the image dimensions.

• Image Icon: When you click on the image icon, you'll be prompted to select the file you want to add from your computer.
  
  
  
• Chain Link Icon: When you click on the chain link icon, a window will pop up with image settings. The SOURCE (1) will list the image you have selected. You can click the white chain link  icon on this line to replace the image file. You can use the LINK (2) allows you to make the image a clickable link. You can either enter a URL or use the white chain link icon to link to a document. If you would like to have the link open in a new window you'll want to make sure to mark that option (3).
  
  

• Pencil Icon: When you click on the pencil icon, a window will pop up with dimension settings. This will allow you adjust the shape and position of the image.
  
  

Note: You will want to adjust the dimensions of the image before uploading your photo. Otherwise you will need to re-upload the image after making adjustments to the image dimensions.

Add Video Content to Website

You can embed a video from a video storing site (e.g., YouTube, Vimeo, etc.) onto your page with one of the video content blocks.

Once you add the block to your page, you can click on it to see the setting (gear icon) button on the top right of the content block. This will bring up a window where you can enter the link to your video.

Once you click OK the video preview should update to display the video you have selected.

Add Social Media and Contact Content

You can add links to your social media and email with one of the Social or Contact Info content blocks. Once you've added the content block you'd like, you can hover over the icon to view the Edit button. You can click on this to edit/set up the link.

For Facebook, Twitter, YouTube, or any other social media site, you'll want to update the LINK with your organization's specific page URL.

For the email option you will leave the "mailto:" preface and just enter the contact email address.

Add a Map to Website

You can also add a map, which comes from Google Maps, to your website. There is a Map category of content blocks and some of the Contact Info block also include maps.

Once you have added the block you will click on it to view the setting (gear icon) button.

When you click on the button a window will pop up with the embed code of the example map.

To get the correct information to paste into this window you will need to go to Google Maps and search for the address you want to display. Once you have found the address, you will want to click the Share option listed.

This will bring up a Share window. You will want to toggle to Embed a Map (1). You can then select the size from the dropdown on the left (2). Finally you will copy the HTML code (3). This is what you will paste into the window in your website builder.

Once you paste the code into the window you will click OK, which will then update the map.