updating bcgurus templates to use with a basic+...
TRANSCRIPT
Updating BCGurus Templates to use with a Basic+ Hosting Plan
BCGurus templates are optimized for use with the WebCommerce Hosting Plan with Business Catalyst. If you need to use the template with a plan that does not include functionality such as webapps, blogs, etc such as the the Basic+ plan, the following instructions will help you achieve this.
There are really two choices that need to be made with module. Do you get the code and update the template with the straight html? or do you remove the module from the page navigation.
Webapps are the most common module that needs to be updated to use on the lower plans.
WEBAPPSYou need to get the code that Business Catalyst is outputting for the webapp with template. You can either use the browser’s ‘Inspect Element’ feature or you can right click the page and choose ‘View Page Source’.
After that it’s a matter of finding the output for the section of code that is being generated by the webapp, copying that code, and pasting it into your html page either in the Develop tab or the code editor of your choice.
Note that this is really just for the List View of the webapp output. If you’re going to need Detail view as well then you should seriously consider going to the webCommerce hosting plan.
For example, to update the slider on the home page of one of our recent templates.
(focus on the red areas to see what is being updated)
—- THIS
<section class="slider"> <ul class="example-orbit" data-orbit="data-orbit"> {module_webapps,Homepage Slider,a} </ul> </section>
Page output looks like this
—- BECOMES
<section class="slider"> <div class="orbit-container"> <ul class="example-orbit orbit-slides-container" data-orbit="data-orbit"> <li class="active"> <img alt="Improve leadership and communication skills" src="/_assets/img/slider-1.jpg"> <div class="orbit-caption"> <h1>Improve leadership and communication skills</h1> <h2><a class="sec_butoon btn" href="#">Learn More</a> </h2> </div> </li> <li> <img alt="Establish, achieve, and exceed goals" src="/_assets/img/slider-3.jpg"> <div class="orbit-caption"> <h1>Establish, achieve, and exceed goals </h1> <h2><a class="sec_butoon btn" href="#">Learn More</a> </h2> </div> </li> <li> <img alt="Navigate office politics" src="/_assets/img/slider-2.jpg"> <div class="orbit-caption"> <h1>Navigate office politics </h1> <h2><a class="sec_butoon btn" href="#">Learn More</a> </h2> </div> </li>
</ul> <a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a> <div class="orbit-timer"><span></span> <div class="orbit-progress" style="overflow: hidden; width: 85.96%;"></div> </div> <div class="orbit-slide-number"><span>1</span> of <span>3</span> </div> <div class="orbit-bullets-container"> <ol class="orbit-bullets"> <li data-orbit-slide="0" class="active"></li> <li data-orbit-slide="1"></li> <li data-orbit-slide="2"></li> </ol> </div> </div> </section>
Once this is pasted into your page’s html you should preview the page and make sure it looks the same. Then you can update the html as you like to replace images, text or remove components you don’t want (carefully).
Here’s the same thing with the Team Page on one of our recent templates.(Remember to go to the live page and use ‘Inspect Element’ or ‘View Page Source’)
—- THIS
<div class="our-team"> <h3>Our Team</h3> <ul> {module_webapps,Our Team,a} </ul> </div>
—- BECOMES
<div class="our-team"> <h3>Our Team</h3> <ul> <li> <div class="team-image"> <a href="#"><img src="/_assets/img/Layer-3.jpg" alt="Jennifer Dow"></a> </div> <div class="team-description"> <div> <h5><a href="#">Jennifer Dow</a></h5> <span>Aviation Specialist</span> <p>Aecenas sed justo varius velit imperdet rutrum consetetur sadipscing elitr, </p> </div> </div> <div class="social-icon"> <a href="#" class="read-more">Read More</a> <ul> <li><a href="#"><em class="icon-facebook"></em> </a> </li> <li><a href="#"><em class="icon-social19"></em></a> </li> <li><a href="#"><em class="icon-youtube-1"></em></a> </li> <li><a href="#"><em class="icon-rss8"></em></a> </li> </ul> </div> </li> <li> <div class="team-image"> <a href="#"><img src="/_assets/img/Layer-2.jpg" alt="John Dawson"></a> </div>
Page output looks like this
<div class="team-description"> <div> <h5><a href="#">John Dawson</a></h5> <span>Business Solutions</span> <p>Aecenas sed justo varius velit imperdet rutrum consetetur sadipscing elitr, sed diam noniet </p> </div> </div> <div class="social-icon"> <a href="#" class="read-more">Read More</a> <ul> <li><a href="#"><em class="icon-facebook"></em> </a> </li> <li><a href="#"><em class="icon-social19"></em></a> </li> <li><a href="#"><em class="icon-youtube-1"></em></a> </li> <li><a href="#"><em class="icon-rss8"></em></a> </li> </ul> </div> </li> <li> <div class="team-image"> <a href="#"><img src="/_assets/img/Layer-6.jpg" alt="John Doe"></a> </div> <div class="team-description"> <div> <h5><a href="#">John Doe</a></h5> <span>Visions and Future</span> <p>Aecenas sed justo varius velit imperdet rutrum consetetur sadipscing elitr, sed diam</p> </div> </div> <div class="social-icon"> <a href="#" class="read-more">Read More</a> <ul> <li><a href="#"><em class="icon-facebook"></em> </a> </li> <li><a href="#"><em class="icon-social19"></em></a> </li> <li><a href="#"><em class="icon-youtube-1"></em></a> </li> <li><a href="#"><em class="icon-rss8"></em></a> </li> </ul> </div> </li> <li> <div class="team-image"> <a href="#"><img src="/_assets/img/Layer-5.jpg" alt="Kim Dawson"></a> </div> <div class="team-description"> <div> <h5><a href="#">Kim Dawson</a></h5> <span>Time Management</span> <p>Aecenas sed justo varius velit imperdet rutrum consetetur sadipscing elitr, sed diam </p> </div> </div> <div class="social-icon"> <a href="#" class="read-more">Read More</a> <ul> <li><a href="#"><em class="icon-facebook"></em> </a> </li> <li><a href="#"><em class="icon-social19"></em></a> </li> <li><a href="#"><em class="icon-youtube-1"></em></a> </li>
<li><a href="#"><em class="icon-rss8"></em></a> </li> </ul> </div> </li> </ul> </div>
Make sense?
Here’s the same thing with the Testimonials webapp from one of our recent templates. The output in this case is a slider that shows 3 testimonials at a time.
(Remember to go to the live page and use ‘Inspect Element’ or ‘View Page Source’)
—- THIS
<div class="testimonials"> <h3>Testimonials</h3> <ul class="center lazy responsive"> {module_webapps,Testimonials,a} </ul> </div>
—- BECOMES
<div class="testimonials"> <h3>Testimonials</h3> <ul class="center lazy responsive slick-initialized slick-slider"> <div class="slick-list draggable" tabindex="0" style="padding: 0px 15px;"> <div class="slick-track" style="opacity: 1; width: 4452px; transform: translate3d(-1113px, 0px, 0px);"> <li class="slick-slide slick-cloned" index="-4" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-8.jpg" alt="Ben Stiller"></div> <article> <p>Nam liber tempor cum soluta nobis eleifend option imperdiet doming id quod mazim placerat...</p> <span>Ben Stiller</span><span class="location">- New York, NY</span> </article> </li> <li class="slick-slide slick-cloned" index="-3" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-7.jpg" alt="Channing Tatum"></div> <article> <p>Nam liber tempor cum soluta congue nihil imperdiet doming id quod mazim placerat...</p> <span>Channing Tatum</span><span class="location">- New York, NY</span> </article>
Page output looks like this
</li> <li class="slick-slide slick-cloned" index="-2" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-8.jpg" alt="Jennifer Lawrence"></div> <article> <p>Nam liber tempor cum soluta nobis eleifend imperdiet doming id quod mazim placerat...</p> <span>Jennifer Lawrence</span><span class="location">- New York, NY</span> </article> </li> <li class="slick-slide slick-cloned slick-active" index="-1" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-7.jpg" alt="Sam Dwayne"></div> <article> <p>Nam liber tempor cum soluta nobis eleifend imperdiet doming id quod mazim placerat...</p> <span>Sam Dwayne</span><span class="location">- New York, NY</span> </article> </li> <li class="slick-slide slick-active slick-center" index="0" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-8.jpg" alt="Ben Stiller"></div> <article> <p>Nam liber tempor cum soluta nobis eleifend imperdiet doming id quod mazim placerat...</p> <span>Ben Stiller</span><span class="location">- New York, NY</span> </article> </li> <li class="slick-slide slick-active" index="1" style="width: 326.5px;"> <div class="circular-image"><img src="/_assets/img/Layer-7.jpg" alt="Channing Tatum"></div> <article> <p>Nam liber tempor cum soluta nobis eleifend option doming id quod mazim placerat...</p> <span>Channing Tatum</span><span class="location">- New York, NY</span> </article> </li> </div> </div> <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button> <button type="button" data-role="none" class="slick-next" style="display: block;">Next</button> </ul> </div>
The trick is to figure out what section of html you want to replace, then go to the page that the template is outputting to get the html and paste that in place of the module_webapp code.
This is possible because the template was created on a webCommerce plan so the webapp output is still available even though the web Basics+ plan does not allow you to get to it in Admin.
For the rest of the modules, it’s a matter of removing the pages from the navigation under Site Manager >> Menus in the Admin section of your site. The same technique outlined above for web apps could technically work for these other modules, but because there are most often list AND detail pages it’s much much better to go to a higher plan when you need these type of pages. Creating the pages manually would be labour intensive and prone to error.
For webBasics+ sites this would apply to:BlogStoreEventsNewsFAQ’sForumDownloadsPhoto Gallery
For webMarketing sites this would apply to:StoreEvents
These instructions should help you take a template that is optimized for the webCommerce plan and successfully set it up on a lower plan like webBasics+ or webMarketing.