theme | BoldGrid

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.

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.

In the previous guide, we learned how to customize menus. The BoldGrid Header/Footer Widget areas allow for a wide variety of customization. Follow along with the example below to see how you can add a Call to Action to the front page of our site using a Text Widget in the Header. This article will show you how to customize header and footer widgets.

  1. CustomizeWithin the viewing area click on the pencil to edit the Call to Action widget.
  2. CustomizeIn the editing window, remove the title text and paste in “Virginia Beach’s Premier Jet Ski Rental”. Next, remove the text paragraph.
  3. CustomizeClick Save & Publish.

You have just added a Call to Action to the front page of your BoldGrid site. You are now ready to proceed to Advanced Options.

With your Inspiration category selected, you are now ready to select a BoldGrid Inspiration Design. If you would like to preview the designs without installing BoldGrid, you can do so at our BoldGrid themes page.

  1. You will see various themes loaded in the Design tab. Since we chose the “General” category, BoldGrid is showing us themes that match our choice. Simply scroll to see even more results.
  2. Hover over the “Wedge” theme and click on it to Preview. If you like what you see, you can simply click on the Select button to proceed.

Great! We’ve now selected our theme to use for our website and we’re ready to Configure and Install Inspiration Content.

Now that BoldGrid is installed, you’re ready to get started on building a new website. The next important step involves choosing an Inspirations Category. This category selection involves picking a live website with sample content relevant to your business. 

While BoldGrid provides multiple categories including Real Estate, Music, Law, Restaurants, and Home Repair. For now, however, to follow along with the tutorial, choose the category we select so we can all stay on the same page.

Following this tutorial series, you will be building a specific website along with us. Along the way, we will be using samples and providing precise steps to build an example site. Your site will look just like ours when we are done.

Let’s get started! 

  1.  Log into the BoldGrid dashboard.  
  2. Click Get Started.
  3. Choose the category that best describes your website and industry. Select General listed under the Category Filter heading and the page will refresh with the available categories.

Now that your category has been selected, you are ready to select your Inspirations Design .