Info Box Carousel

The Info Box Carousel is part of the basic Bootstrap CSS framework. We've taken the component and styled it with a bit of CSS to really bring it to life!. You can include any HTML content in your article boxes.

Tips


Instructions

Info Box Carousel

In this tutorial, we’ll demonstrate how to update, add and remove info boxes in the Info Box Carousel

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, just right click on the placeholder image, and select Open file:/// .. your Library page will open, and you can quickly edit the content.
Video Demonstration: Info Box Carousel quick edit

  1. First, locate the component placeholder in your page.
  2. Right click on the placeholder and select ‘Open file:///…’
  3. You components Library page will open in a new window, ready for editing.

Remove from page

The Info box Carousel can be removed from any page by simply selecting the ( placeholder ) and deleting from the page.

  1. Click anywhere on the component to select it
  2. Then click on the <div.info-box-caro…> tag, in the ‘Quick Tag Selector’ toolbar..
  3. Press the delete key to remove.

Add to page

To add the Info Box Component to a page, it’seasiest if you just copy and paste from an existing page.. however, you caninsert into any page in just a few steps.

  1. Open the page you wish to add the Info Box Component into.
  2. Switch to code view.
  3. Locate a section in the page where you want to add the component.
  4. If you need help finding a section to paste the component into, checkout our tutorial on Locating a section in your page.
  5. Copy the following code, and paste into your page.
  6. If the page you are copying the code into, is within a sub folder of your website make sure to update the ‘include’ link, checkout our tutorial on Adding code to a web page in a sub folder.
<div class="container-wrapper">
	<div class="container">
		<div class="row">

<!-- article carousel -->
<!--webbot bot="Include" tag="BODY" u-include="Library/components/info-box-carousel/wrapper/info-box-carousel-wrapper.htm" -->
<!--/article carousel -->

		</div>
	</div>
</div>

Change heading, content, button

Video Demonstration: Info Box Carousel update heading content button and image

The heading, content and button are standard HTML that you would edit, as you would edit in any web page.

  1. Open the ( Library / components / info-box-carousel ) folder.
  2. Open the ‘info-box-carousel.htm’ page.
  3. You can edit in Design or Code view, your preference.
  4. Each box includes an image, an H3 heading, a paragraph of text and a button ( More >> ) which you can link to any page in your website, or any website just as you would link any text in your site.
  5. Watch the video for tips and details.

Change image

  1. To change the image, use the same process as you would for changing an image in a web page.. here’s an article showing you how to swap out images in a web page.

Add or remove boxes

Video Demonstration: Info Box Carousel add or remove columns

The Info Box Component displays 3 or 4 boxes at one time. You can change the number of boxes being displayed.
This tutorial is available in video only.

Add or remove groups of boxes

Video Demonstration: Info Box Carousel add or remove groups

The Info Box Component displays 3 or 4 boxes at one time, these boxes areformed into ‘groups’ so an entire group of boxes will be shuffled as the carousel rotates. You can add more groups, or remove what you don’t need.
This tutorial is available in video only.

Info Box Carousel

In this tutorial, we’ll demonstrate how to update, add and remove info boxes in the Info Box Carousel.

NEW! Quick Edits!

Something new we’ve added to our Bootstrap themed templates is the ‘Design View’ Quick Edits option. As you’re working in your page, you’ll now see a Component ‘Quick Edit’ placeholder image. To quickly open the Accordion Panel Library page for editing, press and hold the ( Alt ) key on your keyboard, while you click on the ‘pladeholder’ image, then click on ( info-box-carousel.lbi ) .. your Library page will open, and you can quickly edit the content.
Video Demonstration: Info Box Carousel quick edit

Remove from page

The Info box Carousel can be added to, or removed from any page by simply selecting the ( webbot ) and removing from the page.

  1. Click anywhere on the component to select it.
  2. Locate the <!–webbot–> on the ‘Quick Tag Selector’ bar and click [ <!--webbot--> ]
  3. Press the delete key to remove.

Add to page

Video Demonstration: Info Box Carousel add to page

To add the Info Box Component to a page, it’seasiest if you just copy and paste from an existing page.. however, you caninsert into any page in just a few steps.

  1. Open the page you wish to add the Info Box Component into.
  2. Switch to code view.
  3. Locate a section in the page where you want to add the component.
  4. If you need help finding a section to paste the component into, checkout our tutorial on Locating a section in your page.
  5. Copy the following code, and paste into your page.
  6. If the page you are copying the code into, is within a sub folder of your website make sure to update the ‘include’ link, checkout our tutorial on Adding code to a web page in a sub folder.
<div class="container-wrapper">
	<div class="container">
		<div class="row">

<!-- article carousel -->
<!--webbot bot="Include" tag="BODY" u-include="Library/components/info-box-carousel/wrapper/info-box-carousel-wrapper.htm" -->
<!--/article carousel -->

		</div>
	</div>
</div>

Change heading, content, button

Video Demonstration: Info Box Carousel update heading content button and image

The heading, content and button are standard HTML that you would edit, as you would edit in any web page.

  1. Open the ( Library / components / info-box-carousel ) folder.
  2. Open the ‘info-box-carousel.htm’ page.
  3. You can edit in Design or Code view, your preference.
  4. Each box includes an image, an H3 heading, a paragraph of text and a button ( More >> ) which you can link to any page in your website, or any website just as you would link any text in your site.
  5. Watch the video for tips and details.

Change image

  1. To change the image, use the same process as you would for changing an image in a web page.. here’s an article showing you how to swap out images in a web page.

Add or remove boxes

Video Demonstration: Info Box Carousel add remove boxes

The Info Box Component displays 3 or 4 boxes at one time. You can change the number of boxes being displayed.
This tutorial is available in video only.

Add or remove groups of boxes

Video Demonstration: Info Box Carousel add remove groups

The Info Box Component displays 3 or 4 boxes at one time, these boxes areformed into ‘groups’ so an entire group of boxes will be shuffled as the carousel rotates. You can add more groups, or remove what you don’t need.
This tutorial is available in video only.