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.

Now that we have built the base site with an Inspiration and made some preferred changes with the Customizer, it is now time to modify the page content to represent our sample company. This will not involve changing colors and fonts as those have already been done via the Customizer. This is about changing the layout and content of the page itself. We will begin by learning how to edit the Home page.

Opening the Page for Editing

  1. Click on the Pages option from the left-hand sidebar menu.
  2. 2241-2-click-pages Next, hover over Home and click Edit.

Editing the Home Page Content

You will be dealing with several sections while learning to edit the home page. We will go over each section and discuss how to change them. We will go over title and text changes first and then do the images Home and The sample page here uses the Swifty theme. Your theme may contain different Gridblocks, but the concepts are the same.

Changing Title Text

The first area of the top Gridblock is a title area. To change the content, click somewhere in the box containing the text. From here you can delete the existing title and replace it with your own.

Click to change   Type your own message

 Modifying Paragraph Text

Click in an area that contains the stock paragraph text. This opens the area for editing. Highlight all the content in the column of the box and delete it. Once deleted, add your own paragraph. Do the same for the second column.

 
Highlight text   Fill in custom text

Editing the Home Page Images

Working with the images is one of the elements you will manipulate when learning how to edit the home page. Using your own images, you will need to upload them to your site, then add them to the page. After that, each image may need configuration to get the right look.

Uploading Images to your Site

  1. 2241-10a-click-mediaFrom the left-hand menu in the dashboard, hover over the Media option and then click on the Add New option.
  2. 2241-10b-click-select-filesThis will bring you to the Upload New Media page. Click on the Select Files option.
  3. 2241-10c-click-openFrom your local machine, highlight the images you want to upload and click Open. This will upload all the images to your media library.

Replacing Images

Once your images have been uploaded, you can replace the stock ones on the page.

  1. Click on the image and a small toolbar will appear at the top. Click on the Change option.

    Click Change

  2. Select replacement imageThis will bring you to the Media Library tab of the Replace Image screen. Locate and click on the image you want to use. A blue border will appear around it with a checkmark, this means it is selected. Click on the Replace button.
  3. CroppingYou may be asked to crop the image. If you want to use the whole image, click on the Skip Cropping button. You can crop if you wish to trim edges of the image.
  4. Image replacedThe new image will be inserted. Notice it is not the same size as the previous image. Don’t worry about that for now as you can adjust it later.
    After replacing stock images, you may notice that the sizes don’t quite match.To make the images even and aligned, you will need to edit each one. Click on the top image and then on the “Edit” button from the toolbar.

Adjust image sizeOn the Image Details page, set the Size option to “Custom Size” then set the Width option to your desired size. Next, click on the Update button.

 

Once you have completed altering your images, click on the “Update” button to save the changes.

 

Changing the Section Background

Background originalYou may have noticed that our section has a predetermined background image. This is easily customized with the section background button. 

 

Select from images, colors, or patternsOnce you have selected the Section Background button pictured above, you can choose from different background images, colors or patterns.

 

 

 

 

 

 

 

Your home page should now be complete and look vastly different than when you started. If you look at your page on your site you will see  your content along with the theme changes you made in the Customizer. Our sample site is shown to the right.  Now that you have learned how to edit the home page you can edit the “About Us” page.

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.