Sariel Guide manual
Only on Template Monster
By: JACodes
Introduction
What you'll need
Your code editor, ZIP unpacker
Getting Started
- Extract / Unpack the template
- You'll see demo, manual, psd, template folder, and readme.md file
Demo folder : What was used in the live preview of the template.
Manual folder : An offline manual aside from this one.
PSD folder : A photoshop file with og card template.
Template folder : A clean template with only few elements for you to get started.
Readme file : Other relevant info, Licensing etc..
Editing Sariel
- Once done in Getting started.
- Open template folder in your chosen code editor and go to index.html file.
- View your changes by opening index.html located at template folder in your browser.
Note :
• Icons used is bootstrap icon.
• otherpage.html is if you want to separate sections into sub pages.
• Texts highlighted in yellow
in this manual can be clicked in order to highlight the code.
• Icon like this can also be clicked to show screen shot
of the element.
Before you start editing disable the loading first by commenting the code, code should look like the code reference above located at line 59 on the index.html file. So you won't see it everytime you refresh.
Customizing Hero banner.
Definition - The hero banner area is the area of the page
between the navigation and the start of your content. The hero banner is often an image.
Adding video to main hero banner. Just replace the img tag inside the hero-page div with video tag along with the location of your video code reference above.
A secondary hero banner for subpages. As is, no slider option. can be replaced with video. code reference above
Adding portfolio items
A grid of with photos in Sariel located in Portfolio section that can be filtered and clicked to display full detail about a project.
Notes: If you ever decided to separate portfolio section to another page be sure you have the code referenced above; within that page as this will be the container of the portfolio details.
Animating contents
Animation trigger when content is visible to the user. The example can be seen above
anim-fadeUp
anim-fadeLeft
anim-fadeRight
anim-fadeScaleUp
anim-bounce-fadeUp
anim-bounce-fadeLeft
anim-bounce-fadeRight
anim-bounce-fadeScaleUp
Only use one in element's classlist.
Adding testimonies
Note: btn-testimony-back and forward can be removed if you don't want user to toggle the testimony back and forth.
Drop down
Changing Themes
Once you generated an array of hex code using the colorpickers in the index.html located at demo
folder or the live Sariel site, go to the js folder of the website you are working on in this
case you should be in template folder. Open script.js and you'll see the code above.
the
theme1
variable is the light mode colors while
theme2
would be the darkmode. Just paste the array of hex code you have
generated, in any of the variable and you have your own color scheme.