bg-colorsIn our previous guide you learned about customizing colors. In this article, you will learn how to customize background images of a BoldGrid site. BoldGrid provides an image selection option as well as multiple patterns from which you can choose.

We will be using the image below named “water-sport.jpg”. Download this file to your local computer by right-clicking or control-clicking the image.

 
  1.  Click BackgroundClick Background.
  2.  Change ImageClick Change Image.
  3. Select ImageUpload the water-sport.png image and click Select.
  4. SelectNext, crop the image by moving the window all the way up and click Crop Image.
  5. Scaled to FitChange the Background Image Size to Scaled to Fit.
  6.  Save & PublishClick Save & Publish.

You now know how to customize the background image for our BoldGrid site. From here, you may proceed to the next section in the BoldGrid tutorial series:  How to Customize Fonts

siteNow that you have finished adjusting the site title and logo, you will learn how to customize colors for your BoldGrid Site. The color customization features can change the entire color scheme for the site.

Selecting Colors in Customizer

BoldGrid makes your color selection easy by providing ready-made palettes of different color schemes (using these is optional). Here, you will see how Suggested Palettes and color locking works, and then you will be guided toward defining a custom color palette to match our example. We will instruct you on exactly which colors you will need.

 

    1. Select Colors.
    2. Click Suggest Palettes to select from a variety of color choices.
    3. Select the top palette (The colors you see may differ from our example.)
    4. Lock the first color.
    5. Click Suggest Palettes again for suggestions based on your locked color.
    6. Click on various palettes to see how the colors of the site change based on your selection.
    7. Now we are going to assign specific colors to make our own palette; from the Colors menu, click on each color from left to right and fill in the following color codes:
      #e5d600
      #1956a3
      #8c8c8c
      #dd3333
      #e8e8e8

    8. Check to see if your colors match our example, these will be our new colors moving forward.
    9.  Click Done once you have added in your color values.
    10. Click Save & Publish to save your changes. 

You should now see your BoldGrid has a new color scheme.

You now know how to customize your colors in BoldGrid! Continue on to the next article in this series: How to  Customize Background Images.

Now that you have selected your Inspiration theme and installed your page set, you are ready to start customizing the site. To do this, you will us the Customizer tool to change your site title and logo. In this article, we start with the first tab on the Customizer, the Site Title and Logo tab. Depending on your theme, the site title may be visible on every page.

For this tutorial, you will need to download the images below. You can download them by right-clicking or control-clicking on each image link with your mouse.

Example Logoicon

 

Selecting Site Title and Logo

Now we are going to choose our site title and replace it in the header of our site with our logo.

 

  1. Choose Customize and then Active Site from the toolbar.
  2.  Select Site Title & Logo.
  3. Under Site Title fill in VB JetSki Rentals.
  4. Under Site Logo, click Select Image.
  5. Upload FilesClick Upload Files.
  6. Drag the “logo.png” file you downloaded into the window or click Select Files to upload the Logo file.
  7.  Select the logo we uploaded and click Select.
  8. Select Skip Cropping since the image will not look right if we crop it.  
  9. Adjust Logo Size to 199.
  10. Under Site Icon, click Select Image.
  11. Upload the icon.png file you downloaded you your local computer from above. Then click Select.
  12. Click Save & Publish.

  You will now see that the site title has been replaced by our logo image as well as the icon added to your browser tab. 

 
 

 Well done! You know how to change your site title & logo in BoldGrid. Continue on to the next section of this tutorial series:  How to Customize Colors.