Tweak your BindTuning Theme with Widgets

All BindTuning Themes comes with Bootstrap components which you can leverage to build action on your SharePoint pages, improving user experience and engagement.

Those same Bootstrap components are only appliable for Classic SharePoint sites and/or pages and are static by nature, needing manual code adjustments in order to modify their correlative content. However, BindTuning offers the Build feature, a bundle of 19+ Web Parts, that constitute a highly functional and dynamic approach to content management, overcoming Bootstrap widgets limitations.

Further information relating to the Build feature, as well as detailed instructions on how to start a trial can be found here.

Locate the theme resources

All BindTuning Theme resources are located inside BindTuning's Customizer Tool, which you can access via your BindTuning account:
  1. Log in to your BindTuning account; 
  2. Locate and open your Design tab; 

    design.PNG

  3. Navigate to your Themes Gallery

    themes-gallery.PNG

  4. Select your required theme by mousing over it, and clicking on More Details;

    more-details.PNG

  5. Click on Brand this Theme, followed by your corresponding SharePoint version.

    brand.PNG

After this procedure has been completed, you'll be redirected to our Customizer Tool. From there, proceed to navigate to the Features and Widgets pages, where you'll be able to find the corresponding HTML structure for any of the existing components.

widgets.png

Below, you'll find examples of how to use these widgets:

Sliders

You need to have the images stored on your SharePoint Site.
  1. On the navigation go to Widgets and click on Sliders;
  2. On Slider click to View code and grab that HTML;
  3. Find all the HTML elements with the img src="IMAGE_URL";
  4. Replace all the URL on src for the URL of the images;
  5. Add the code to your SharePoint Page and Save the page;
  6. The Slider will display on your page.

Buttons

The button classes can be used on an a, button, or input element. In this example, we will link the button to a specific URL and will, therefore, use the anchor tag element.
  1. On the navigation go to Features and click on Buttons;
  2. On buttons click to View code and grab that HTML;
  3. Make the necessary change to make this a link and reference it to Google;
  4. Save the page;
  5. If you click on the button, you'll be redirected to Google's website.

Font Awesome

  1. On the navigation go to Features and click on Icons;
  2. Get the icon that you intend to use, in this example, we'll use the phone to show a contact;
  3. Click on the icon and get the HTML code. Make the necessary change to change the number and start with space:
  4. Save the page;
  5. You are using the Font Awesome on your page with a contact number.
Have more questions? Submit a request

Comments

Powered by Zendesk