Home Forums Porto Template general

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10031453
    okler1478
    Participant

    Apologies for a dopey question but im at a loss with this, how do i save / export a template, how do i add elements where are the codes or do i go into each page source code and then copy each page??

    Sorry i dont understand what to do here.

    Thanks Todd


    #10031455
    Support2
    Keymaster

    Hello Todd, thanks for your purchase.

    Note that Porto is a static HTML template. The HTML templates doesn’t have a “visual tool / cms interface” to edit the content, the template comes with HTML/CSS/JS (and a few optional PHP files for the contact form, newsletter integration, etc…), all the changes must be done using a installed editor, such as Notepad++, Sublime, Dreamweaver, etc… it’s required that you know at least a little bit about code editing in order to customize your own site using the template. After you do all the changes you upload the template to the server (via FTP).

    In the zip file that you downloaded there’s a folder called HTML, in that folder you will find the same files as shown in our preview site: http://preview.oklerthemes.com/porto/7.5.0 – Just open the file index.html in your browser and you will see the same demo site. Those are the files that you will use to create your website. All you need to do is to use the example files that comes in the package you download, edit the codes (HTML/JS/CSS) to add your Content using Sublime Text or an Equivalent Text/Code Editor. Creating a website based in a HTML template requires at least a little bit of knowledge in HTML/CSS/JS.

    For example, to get the elements you need go to respective element page, copy the element code and paste where you want. The best way is choose a demo to start as scratch and then remove the unwanted sections and copy/paste new elements to this page.

    (That’s how all the HTML templates available on ThemeForest work).

    We hope this helps.

    If you have any questions, just let me know.

    Kind Regards,

    Rodrigo.


    #10031458
    okler1478
    Participant

    Lets say i want to use this header (feature-headers-sticky-shrink.html) as an example, how do i know what to edit or where to edit in the source code?

    Same question applies to all the other features customization

    Thanks – todd


    #10031460
    Support2
    Keymaster

    Hello Todd,

    In that case you will need copy the entire tag <header>........</header> and paste into the new page. The same applies for <footer>. For example if you wants to copy a “Word Rotator” (http://preview.oklerthemes.com/porto/7.6.0/elements-word-rotator.html) here’s the code you need to copy:

    <h2 class="word-rotator rotate-1 mb-2">
    	<span>Porto is </span>
    	<span class="word-rotator-words">
    		<b class="is-visible">incredibly</b>
    		<b>especially</b>
    		<b>extremely</b>
    	</span>
    	<span> beautiful.</span>
    </h2>

    * The same applies for all elements/features in the template.

    Unfortunately there’s no other way for static HTML templates. A minimum knowledge with HTML is required.

    We hope this helps.

    Let us know if you have more questions.

    Kind Regards,

    Rodrigo.


    #10031462
    okler1478
    Participant

    Thanks rodrigo, header and footer is self explanatory but changing sliders is way trickier, how would i change to this slider slider-nivo

    The source code on my working page is entirely different than the code on the page where the slider is

    I have website experience but i cant possibly know where all the code starts and ends and where to place them


    #10031492
    Support2
    Keymaster

    Hello Todd,

    1) For the Revolution Slider we recommend you learn more trough the official documentation:

    * An alternative way for the Rev Slider is use the Visual Editor, a premium plugin at codecanyon.net where you can drag and drop create sliders (https://codecanyon.net/item/slider-revolution-jquery-visual-editor-addon/13934907). This plugin is not included with Porto and needs to be purchased separated. Note that it’s not possible to import the Porto revolution sliders into the Visual Editor AddOn. Just buy this plugin if you wants to create new sliders from zero.

    2) For the Nivo Slider is much more simple than Revolution Slider. Here’s is an example code of Nivo Slider:

    <div class="nivo-slider">
    	<div class="slider-wrapper theme-default">
    		<div id="nivoSlider" class="nivoSlider">
    			<img src="img/slides/slide-1.jpg" alt="" />
    			<a href="index.html"><img src="img/slides/slide-2.jpg" alt="" /></a>
    		</div>
    		<div id="htmlcaption" class="nivo-html-caption"></div>
    	</div>
    </div>

    3) For use both Rev Slider and Nivo you need include the necessary CSS and JS scripts on the page. You can find the required CSS and JS scrips in the examples pages:

    Revolution Slider:
    http://preview.oklerthemes.com/porto/7.6.0/index-classic.html

    Nivo Slider:
    http://preview.oklerthemes.com/porto/7.6.0/index-slider-nivo.html

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month, 1 week ago by Support2.
Viewing 6 posts - 1 through 6 (of 6 total)