Adding engaging content is the most important aspect of building a website. This content usually takes the shape of either text or images. There is also the task of ensuring all your content is laid out properly. You want to be sure it flows correctly and works well together. Working with a good editor can help tremendously. The page and post editor in BoldGrid expands upon the default WordPress editor to give you a fast, easy way to create professional pages for all your content.

This article is a comprehensive guide to the page and post editor in WordPress using the BoldGrid suite of plugins. You will learn how to use every aspect of the editor to make the most of your pages and posts in your BoldGrid website.

Once in the editor, you will see that the content is organized into a hierarchy. First is the section object. A section can contain one or more rows. Rows contain one or more columns, and columns contain one or more elements. Elements consist of either text, images, buttons, etc.

Content Organization

                                                        

Sections

SectionSections are the largest containers in the BoldGrid page editor system. Within a container, there may be one or more rows, columns, and elements. Sections have a toolbar that has two buttons. The left button takes you to a screen that allows you to drag the sections up and down your page, rearranging them any way you want. The right button brings up a menu that allows you to perform tasks related to that section.
GridBlocks are section templates that contain pre-generated content.

 

4583-02-section-menu

Clone Creates a duplicate of the existing section.
Delete Removes the entire section and all its content.
Section Width Toggles the width of the section by adding or removing a buffer column.
Move Up Swaps the section with the one above it.
Move Down Swaps the section with the one below it.
Add empty Section Creates a new empty section just below current one.
Change Background Brings up the menu to change the background.

                                

                            

Rows

4583-03-rowRows are the first layer of content inside a section. There can be one or more rows within a section. Each row can contain one or more columns. Rows can be moved vertically up and down within the section they are located. Rows are controlled by yellow drag handles. The drag handle contains two buttons. The top one is a movement handle. Clicking on it and holding your mouse left mouse button allows you to position the row within the section. The lower button has a menu with several configuration options for that row.

4583-04-row-menu

Clone Creates a duplicate of the existing row.
Delete Removes the entire row and all its content.
Clear Contents removes all content but does not remove the row itself.
Insert Gridblock Adds a new GridBlock section above the current one.
Add Column Adds a column to the right side of the row.
Add Empty Row Adds a new empty row at the top of the section.
Drag as Content Drag the row and allow it to be dropped inside another row or column.

                                            

Columns

4583-05-columnColumns are the next level of content that reside inside a row. A row can have one or more column. Columns contain one or more smaller content objects called elements. Columns can be moved horizontally within its row. Columns are controlled by the blue drag handles. It also has two buttons. The left button is the directional button. Clicking your left mouse button and holding it will allow you to drag the column left or right, swapping it out with the ones next to it. The other button has a menu with other options for you to configure the column.

 

Clone Creates a duplicate of the existing column.
Delete Removes the entire column and all its content.
Clear Contents Removes the content but does not remove the column.
Insert Media Allows the insertion of images, videos, etc.
Vertical Alignment Sets the alignment of the column to either top, center, or bottom of the row.
Background Brings up the background menu for the column only.
Insert Form Allows the insertion of a form from the form editor.

                                                                              

Elements

Elements are the innermost level of content and live inside a column. There can be one or more elements inside a column. Elements are where the content itself is located. Inside an element, you may add text, buttons, icons, images, etc. Elements are controlled by red drag handles. Elements can be moved up and down within its columns. The top button is a directional button that allows you to click and drag the element vertically. The bottom button has a menu with configuration options specific to the element. Some of the pre-generated GridBlock elements contain a smaller third option that lets you edit the element as a row, so there can actually be columns and elements nested inside. This button will appear at the bottom of the normal drag handle.

Clone Creates a duplicate of the existing element.
Delete Removes the entire element and all its content.
Font Allows the adjustment of font type and size.

Using the page and Post editor:  Content

                                    

Toolbars

A section can contain several different components such as rows, columns, and elements. These components can contain other items such as images. Each component and has a specific toolbar to allow for particular settings. These settings allow you to customize the component to customize your site.

                                                                              

How to Move Sections

You can move entire sections of your page from one location to another. Within the page and post editor there are a couple of different ways to do this.

Use the Section Toolbar Drag Button

  1. 4583-07-click-section-drag-buttonClick the left button on the section toolbar.
  2. 4583-08-section-drag-startThis opens up a view of your entire page. Grab the section you want to move by clicking and holding the left mouse button.
  3. 4583-09-section-drag-endNow drag the section to its new location on the page.
  4. 4583-10-click-exit-section-dragOnce you have the sections placed where you want, click the “Exit Section Dragging” button at the top.

Use the Section Edit Menu

  1. 4583-11-click-section-menuClick on the right button on the section toolbar.
  2. 4583-12-section-menuClick on either the “Move Up” or “Move Down” option to move the section in that direction. Your section will switch places with the next section in the chosen direction.

                                                                              

Adding Images to your Page

Images are a large component of the content on a website. WordPress allows you to add images to your site by uploading them to your media library from your local computer. BoldGrid expands upon this by adding the ability to search for images for purchase from stock photography providers. You can then purchase them and add them to your library. Adding images to your site can be done in different ways, depending on which component you are working with.

                                                                              

Adding Images to a Column

  1. 4583-13-click-column-mod-menuLocate the column you want to add an image to and click on the modification menu button.
  2. 4583-14-click-insert-mediaClick on the Insert Media option.
  3. 4583-15-select-imageSelect your image by uploading, selecting from existing library, or purchasing via the BoldGrid Connect Search.
  4. 4583-16-click-insertClick the Insert into page button.
  5. 4583-17-image-insertedAfter the image is inserted, make any adjustments you need.

                                                                              

Adding Images in an Element

  1. Locate the element you want to add an image to and set your cursor where you want to add it.
  2. Click on the Insert Media button at the top of the page editor toolbar.
  3. Select your image by uploading, selecting from existing library, or purchasing via the BoldGrid Connect Search.
  4. After the image is inserted, make any adjustments you need.

BoldGrid offers several themes with a fixed full-page background Image. However, because all of the available BoldGrid themes are heavily customizable, you may notice a blocked background image or covered up by other page elements. If you’ve decided to delete your Call to Action widget, you’ll notice that a large part of your background image is no longer shown. In this tutorial, we’ll walk you through the steps to modify your CSS so you can show your website visitors more of your background image.

DicedFor this example, we’re using a fresh installation of the Diced theme. You may have noticed this theme comes with a Call to Action widget.

Blocked imageIf you delete this widget, the site content below rises up and covers the background image.

Follow along with the steps below to see how you can edit your theme’s CSS file to bring back your background image:

Editing the CSS File

To move the elements on your page and reveal your background image, you will need to edit the theme’s stylesheet. Instead of editing this file directly, you can safely add code to it through the BoldGrid customizer.

  1. Click AdvancedWhile in the customizer, click Advanced.
  2. Custom JS & CSSChoose Custom JS & CSS.
  3. Open EditorUnder Custom Theme CSS click Open Editor
  4.  Add codeAdd the following code: .entry-content {margin-top: 600px;}

Background image visibleThe margin-top code adds margin space above your site content to reveal your image. We set the margin at 600 pixels of space (600px), but you can adjust this to add more space. 800pxwill give you more space and show you 800 pixels worth of your background image. You can adjust this number to meet your individual needs.

Fixing a Blocked Background Image

This is one specific example of how to add this code in a particular theme (Diced). The applicable code may vary depending on which them you are using.

How to add a PDF to a Page

In this article, you will learn how to add a PDF in a page or post using page and post editor. You can use this feature to add something like a resume, CV, flowchart, or virtually any kind of document — available for download by your visitors.

  1. Log into BoldGridLog into BoldGrid.
  2. Click Pages or PostsClick Pages.
  3. Select your page or postSelect the page you want to edit.
  4. Add MediaClick Add Media.
  5. Click Upload FilesClick Upload Files.
  6. Select FilesDrag your PDF file into the screen or select it from your computer.
  7. Choose your PDF fileSelect the PDF and click Insert into post or Insert into page (depending on if you are editing a post or a page).
  8. You have an active link to the PDFYou will now see an active link to the PDF in your page content
  9. Link availableNotice, when you click the PDF link, you will see a link, this will be saved and can be used to download the file

Well done! You now know how to add a PDF to your BoldGrid page!

By the end of this article, you will know how to embed a video into a BoldGrid page. Embedding a video from a popular video site (like YouTube) is as easy as pasting a link to that video into your page. WordPress uses oEmbed to provide support to embed various media types easily. In this tutorial, we’ll work specifically with Youtube. Other video services can be embedded using the same method. 

Follow along with the steps below to see how:

  1. Select PagesSelect Pages.
  2. Select PageChoose the page you want to edit.
  3. Find a videoFind a video from YouTube, or any popular video site.
  4. Copy the linkCopy the link to the video.
  5. Paste video linkPaste the link into your BoldGrid page.

Link is replaced by videoNotice how the video will automatically replace the text link. WordPress (and thus BoldGrid) uses a format called oEmbed, which can open the video or image automatically from the link itself.

 

Well done! You now know how to embed a video into your BoldGrid page! You are now ready to Update or Publish your page with the video included.

The BoldGrid Image Gallery feature lets you easily create an impressive series of images right from your Media Library. You may first want to check out our article on working with images in BoldGrid.

If you’re ready to create image galleries, follow along with the steps below:

  1. Click PagesClick Pages
  2. Select your pageSelect the page you want to edit
  3. BoldGrid Add Media HighlightChoose Add Media
  4. Create GalleryClick Create Gallery
  5. BoldGrid Gallery Image SelectSelect the images you want to use in your gallery by clicking on them (select multiple images)
  6. BoldGrid Create New Gallery HighlightClick Create New Gallery
  7. BoldGrid Edit Gallery Settings HighlightAdjust your Gallery Settings
  8. Insert galleryChoose Insert Gallery

Now you are ready to Update or Publish your page with your gallery included.