This tutorial is for how to bulk display Google sheets to dynamic HTML templates bundle into HTML codes collection module.
Click here for a video tutorial.
Step-1: Upload your purchased Dynamic_HTML_Templates_Bundle.zip file to your server’s htmltemplates directory.
Step-2: Now go to Siberian Backoffice > Manage > Modules > HTML Codes
Step-3: Here in ‘Add New HTML Code‘ section fill below details:
(1) Title: Google sheets to dynamic HTML templates bundle
(2) Order ID: As per your number of codes you can fill it yourself.
(3) Image URL: https://i.imgur.com/y82OHhr.png
(4) HTML File URL: Dynamic_HTML_Templates_Bundle.zip
(5) Description: Copy-paste below code there.
This is a bundle of dynamic HTML Templates with Google Sheets as data source. You can manage data from Google sheets and you have to customize the HTML code minimum just like basic changes of sheet ID, name, API key, title or colors codes etc.<p>We have given tutorials for how to create Google sheets API key, how to create Google sheet and sheet format for specific HTML template.</p><hr class="hr-sep"><p><strong>How it works?</strong></p><p>(1) You can put your data on Google sheets.</p><p>(2) Change your API key, Sheet ID & Name into HTML template.</p><p>(3) Copy-paste HTML template code into Source code module.</p><hr class="hr-sep"><p><strong>15+ Use Cases & 75+ Dynamic HTML Templates:</strong></p><ul><li>Dynamic HTML Table (6 Templates)</li><li>Dynamic Food Menu (18 Templates)</li><li>Dynamic Opening Hours (4 Templates)</li><li>Dynamic Accordion FAQs (10 Templates)</li><li>Dynamic Accordion List (2 Templates)</li><li>Dynamic Listings / Directory (2 Templates)</li><li>Dynamic Quotes / Greetings List (2 Templates)</li><li>Dynamic Features / Services List (10 Templates)</li><li>Dynamic Event Calendar (1 Template)</li><li>Dynamic Charts (5 Templates)</li><li>Dynamic Products List (3 Templates)</li><li>Dynamic Team Showcase (2 Templates)</li><li>Dynamic Testimonials (2 Templates)</li><li>Dynamic Progress Bar (2 Templates)</li><li>Dynamic Timeline (4 Templates)</li><li>Dynamic Counter (2 Templates)</li><li>Dynamic Buttons (2 Templates)</li></ul><hr class="hr-sep"><p><strong>Here are some screenshots:</strong></p><p>(1) <strong>Dynamic HTML Table:</strong> You can use data table for many purposes like product specifications, list, comparison etc. We have given examples of bordered and striped tables.</p><img class="modal-img" src="https://i.imgur.com/JkzMLBQ.png"><br/><p>(2) <strong>Dynamic Food Menu:</strong> You can use food menu for many purposes like restaurant menu, fast food menu, drinks menu, café menu, bakery menu, ice-cream menu etc. We have given many examples like single or multiple items menu, menu with multiple price, menu with images & description, menu with tabs etc.</p><img class="modal-img" src="https://i.imgur.com/QiEdL3Y.png"><br/><img class="modal-img" src="https://i.imgur.com/UXkMKN7.png"><br/><p>(3) <strong>Dynamic Opening Hours:</strong> You can use opening hours for displaying your restaurant / any shop / business working hours.</p><img class="modal-img" src="https://i.imgur.com/uOeEMus.png"><br/><p>(4) <strong>Dynamic Accordion FAQs:</strong> You can use it for displaying FAQs more stylish and professionally. We have included both templates versions – single and multiple open at a time.</p><img class="modal-img" src="https://i.imgur.com/xCC8LZZ.png"><br/><p>(5) <strong>Dynamic Accordion List :</strong> You can use it for displaying list of items, products, services, features etc. We have included both templates versions – single and multiple open at a time.</p><img class="modal-img" src="https://i.imgur.com/hMlFEJi.png"><br/><p>(6) <strong>Dynamic Directory / Listings:</strong> You can use it for various directory purposes like doctors directory, employee directory, restaurant / hotel / resort directory, spa / salon directory etc. Click to call & click to share on WhatsApp functionalities included.</p><img class="modal-img" src="https://i.imgur.com/2wtSOqS.png"><br/><p>(7) <strong>Dynamic Quotes / Greetings:</strong> You can use it for various list purposes like quotes list, birthday or anniversary wishes messages list, jokes list etc. Social sharing functionality also given.</p><img class="modal-img" src="https://i.imgur.com/nIli5tZ.png"><br/><p>(8) <strong>Dynamic Features / Services List:</strong> You can use it for various list purposes like features list, services list, amenities list, what we do list, why choose us list, benefits list etc.</p><img class="modal-img" src="https://i.imgur.com/HjZWnFq.png"><br/><img class="modal-img" src="https://i.imgur.com/cbwqi3G.png"><br/><p>(9) <strong>Dynamic Calendar:</strong> You can use this dynamic calendar for many purposes like public holidays calendar, birthdays calendar, school / colleges / city / religious / business events calendar, meetings / task / sports schedule calendar etc. You can display single or multiple events on same days, highlight today, mark event as repeating each year, customize colors etc.</p><img class="modal-img" src="https://i.imgur.com/AAmOzcZ.png"><br/><p>(10) <strong>Dynamic Charts:</strong> You can use dynamic charts for various data visualization purposes. We have given examples of Line Chart, Bar / Horizontal Bar Chart, Pie Chart & Doughnut Chart.</p><img class="modal-img" src="https://i.imgur.com/5vRnU4x.png"><br/><p>(11) <strong>Dynamic Products List:</strong> You can display a list of products.</p><img class="modal-img" src="https://i.imgur.com/2KH4C4T.png"><br/><p>(12) <strong>Dynamic Team Showcase:</strong> You can display a list of team members.</p><img class="modal-img" src="https://i.imgur.com/gt3YE0q.png"><br/><p>(13) <strong>Dynamic Testimonials:</strong> You can display a list of user’s testimonials or feedback.</p><img class="modal-img" src="https://i.imgur.com/qSoMGjs.png"><br/><p>(14) <strong>Dynamic Progress Bar:</strong> You can display animated progress bar.</p><img class="modal-img" src="https://i.imgur.com/leQL4gB.png"><br/><p>(15) <strong>Dynamic Timeline:</strong> You can display timeline with year, title & description.</p><img class="modal-img" src="https://i.imgur.com/EJPyjxs.png"><br/><p>(16) <strong>Dynamic Counter:</strong> You can display a counter with title & animated numbers count.</p><img class="modal-img" src="https://i.imgur.com/umDDH6X.png"><br/><p>(17) <strong>Dynamic Buttons:</strong> You can display buttons with in-app links.</p><img class="modal-img" src="https://i.imgur.com/9bZVYys.png">
Step-4: Now in editor the text above download button isn’t suitable for this bundle zip file, so you can change it using CSS. To do so find the ‘HTML Codes Collection – Main CSS File‘ section in HTML Codes backoffice module and use below CSS:
#modal-31 p.text-center { visibility: hidden; position: relative; }
#modal-31 p.text-center:after { content: "Download below zip file and unzip it, you will find all html files & PDF tutorials in it."; visibility: visible; position: absolute; top: 0; left: 0; right: 0; }
Note: Here in above CSS code, you have to change id (31) with your actual modal id which you can find by inspect element. If you can’t able to do it then email us with your Siberian URL & demo login access, we will do it for you.
Demo:
You can check a live demo of it here: https://appzadmin.com
Login details:
Email: demo@demo.com
Password: pwademo123
After a login, open any app and go to Left Side Menu > Modules > HTML Codes.