April 11, 2019 at 5:48 am #10029366
I have purchased Porto to use as a base template for a web to print store front we are building. Our web to print software interface is also based on Porto.
As we build the skin for store front there are Porto features I need to add to it. For instance, I might want to use a Porto element, feature, page or portfolio item.
Right now I have Porto uploaded to a staging environment so that I can browse for elements and features I might want to use.
How to go about getting the code for those elements that I want use and add them to our storefront?
For instance, say I want use a carousel from here:
Specifically, the one called “Navigation Inside Arrows No Background”
How do I generate the code to create that carousel so that I can place it in our dev or production site?
Any help is greatly appreciated.
April 11, 2019 at 10:23 pm #10029371
Unfortunately as all HTML templates on Themeforest you need do that manually. For example to get the carousel “Navigation Inside Arrows No Background” code you should open the page
elements-carousels.htmlin a text editor (notepad++, sublime text, etc..), search by “Navigation Inside Arrows No Background” (normally CRTL + F on sublime text and windows) and then you can copy the code. Like the image below:
For carousels you don’t need add any extra CSS Stylesheet or JS Script on the page, since it’s included in all pages of Porto. But for some another elements you should include the necessary CSS and JS script on header and footer. For example to use the “Infinite Scroll” feature you should include on footer of page the script:
Hope it helps.
Let us know if you have more questions.
April 11, 2019 at 10:26 pm #10029373
I am comfortable coding, so this is not an issue. I just wanted to make sure I was looking at this right.
As far as seeing examples of everything that is available in Porto, am I be able to do that by browsing on my the instance I have deployed on my staging environment front end?
Also, is their a good way to determine if a certain element or feature has dependencies on other CSS or JS files?
You’re help is greatly appreciated.
April 11, 2019 at 10:36 pm #10029375
Regarding “As far as seeing examples of everything that is available in Porto, am I be able to do that by browsing on my the instance I have deployed on my staging environment front end?”
– Yes you can do that on this way. Just check the source code and copy/paste the code.
Regarding “Also, is their a good way to determine if a certain element or feature has dependencies on other CSS or JS files?”
– Unfortunately don’t exists an easy way for that. The only way is check the header and footer to see if the page has extra CSS and JS. Another alternative is check the browser console when the element don’t render as expected, looking for JS errors (the console will show an JS errors that means is missing some JS library)
Hope it helps.