Written by Beth Bannor A credibility bar helps you build more credibility instantly! When potential leads first land on your site, they have no reason to trust you. You have to show them you’re trustworthy before they bounce from your site. This is why the credibility bar is placed below your hero because it positions it in the most prominent location while maintaining a conversion-driven design. For more details on why this was created, check out this blog article.
You can add a credibility bar to any page on your site. Let’s get started!
📝Table of Contents
Types of Credibility Bars
There are three types of credibility bar blocks built into Carrot. You can choose from the following:
Credibility Bar Testimonial
This solution allows you to have a revolving or static testimonial. You must have added a testimonial to your site before this option is available.
Credibility Bar Gallery
This solution allows you to add images to the credibility bar that are added in grayscale and scaled to size.
Credibility Bar
This is a custom-built solution where you choose what’s in the bar and how you want it styled.
Adding a Credibility Bar
It’s most common to add a credibility bar to the home page. To do so, navigate to the home page from your main account, click content, then click edit for the page labeled with a bold “Front Page.”
To add a credibility bar
- Click the orange “+” icon on the top left of your edit screen
- Start typing “credibility” until the credibility bar blocks appear
- Select the type of credibility bar you want to use
Once the bar is selected, it’ll automatically be added below the hero section of that page. No need to rearrange anything. The credibility bar block is designed to be inserted near the top of the page.
Editing the Credibility Bar
If you are using the testimonial block or the gallery block, please keep scrolling to learn about changing the background color, editing your credibility bar gallery settings, and changing the testimonials from revolving testimonials to a single static testimonial.
Editing and building out the custom credibility barhttps://player.vimeo.com/video/610998522?h=5058d8adf9&dnt=1&app_id=122963
Changing the background color
To change the background color of the credibility bar
- select the credibility bar block
- navigate to the block settings
- select the background color
- click update
Sometimes, the designs settings override block settings. If your background color isn’t saving, you’ll want to add a group block to your credibility bar and move the child blocks from the credibility bar within the group. Then, change the alignment for the group block to full-width and set the group block’s background color.
How to override a design’s hero section background for the credibility barhttps://player.vimeo.com/video/610974644?h=fc05fecb83&dnt=1&app_id=122963
Adjust your credibility bar gallery settings
All images are grayscale within the credibility bar. You will want to adjust the settings. We’ll list the possibilities below. Keep in mind, you want the text to be easy to discern and as few lines as possible.
Styles
“Default style” is the default style of the template and may switch between grayscale and shadowed.
Grayscale will change the images to black and white.
Shadowed will place a shadow around the block.
Crop Image Toggle
Toggled on, the images will automatically crop to fit the width of the # of columns you have displayed. The height will always be 150px.
Toggled off, the images will not automatically crop to fit the width of the # of columns you have displayed and the images will be adjusted to 150px height.
Columns Slider
This is the number of images side-by-side. We recommend using the same number of columns as you have images – unless! the images have text and a graphic hard to discern if it is on the same line as other images.
Set Image Alignment
We recommend selecting the center alignment for your image credibility bar. To do so, click the left-hand setting for alignment and choose “align center.”
Changing the credibility bar testimonial block from revolving to static
By default, the credibility bar testimonial block revolves and randomly selects a testimonial from all of the published testimonials on your site, each time the page loads.
If you want to stop the site from randomly selecting a testimonial from your testimonials, you’ll want to edit the block to specify a single testimonial to display on the credibility bar. You can do so by selecting the credibility bar testimonial block and selecting the preferred testimonial from the drop-down.
Credibility Bar FAQ
Why can’t I add a credibility bar to my page?
You can add a single credibility bar to each of your site’s pages. If one already exists on a page, you will not be able to add another to it. Be sure to check out the page’s block list to confirm if one is published on the page.
How can I edit and add images to my gallery within the credibility bar?
If you want to add or remove images to your credibility bar gallery, you can do so by selecting the gallery within the credibility bar. Once selected, you can upload an image or open the media library. Select upload if you want to add images. Select the media library if you want to remove or rearrange images in your gallery.
Rearrange images by clicking and dragging the images in the order you want them to be. Remove images from the gallery by clicking the “x” in the top right corner. Click the orange update button when you’re done.
Why do my gallery images keep getting cropped?
Gallery images scale to size by default. You’ll need to toggle the switch “crop images” so it’s off and your images will remain the original size, scaled to fit the number of images in your gallery and columns chosen.
How can I change my credibility bar so that it doesn’t span the entire width of the page?
You can edit your credibility bar’s alignment from full-width to wide-width to give it some margin so it doesn’t fit the entire width of the page. To do so, you must add a group block to your credibility bar and move the child blocks from the credibility bar within the group. Then, change the alignment for the group block to wide-width.
