Let’s start immediately assuming you want to replace a block of contents with other blocks.
Replacing a block is very easy, simply copy the preferred block of code from the Geniux Blocks demo page (Geniux/blocks/index.html) and paste it into the page.
For demonstration purposes open the page index-default-onepage.html with your code editor, where we will show you how to replace the Intro #2 section with the Intro #3 section.
This is how Intro #2 looks in index-default-onepage.html page, inside our content area.
The section corresponds at the Intro #2 from the Geniux Blocks Demo page (Geniux/blocks/intro-2.html)
<!-- ====================================================== === START CONTENT AREA === ======================================================= --> <!-- Start Intro #2--> <section id="intro"> <div class="container"> <div class="row text-center"> <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1"> <h2>Start to create with <span>Geniux</span>,<br>powerful & smartly coded, build fast with pre-designed content blocks.</h2> <hr class="hr-small hr-color m-t-30 m-b-55"> <div class="col-md-6 col-sm-6"> <div class="feat-wrapper"> <div class="feat-icon icon-sm"> <span><i class="icon-laptop" aria-hidden="true"></i></span> </div> <div class="feat-description"> <div class="feat-title"> <h4 class="f-w-400">Block Based</h4> </div> <p>New and modern pre-designed blocks, start to create your new website today with Geniux!</p> <a href="#" class="gnx-btn btn-xsmall btn-border-dark" role="button">Read More</a> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="feat-wrapper"> <div class="feat-icon icon-sm"> <span><i class="icon-adjustments" aria-hidden="true"></i></span> </div> <div class="feat-description"> <div class="feat-title"> <h4 class="f-w-400">Create Easily</h4> </div> <p>Build new and awesome pages using Geniux, just copy and paste your preferred block.</p> <a href="#" class="gnx-btn btn-xsmall btn-border-dark " role="button">Read More</a> </div> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> </section> <!--/ End Intro #2-->
Here you can see how the section appears:
Go to the Geniux Blocks page and from the sidebar menu hover the Intro Sections sidebar menu link.
Scroll to Intro #11 and click on it.
Click on the Show Code button and at the bottom copy the code using the COPY button.
Now go to the index-demo-onepage.html, select the Intro #2 portion of code and erase it.
Paste the Intro #3 code, save and refresh your page, the new intro section is ready to be customized with your content.
You can use this method to replace any section in your page, navigations, hero sliders, content sections, portfolios, call to action, etc.