EventZ – Conference & Event Html Template
Version: 1.2.3
Last update: 22.06.2023
Created By: Codeboxr Team
Support: Contact us
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file,
please feel free to email via my user page contact form HERE. Thanks so much!
Overview
EventZ is a clean, modern and minimal responsive template. It's especially designed for Conference, Meeting, Exhibition, Congresses, Event, Conference Website, Event Management and more.This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap 5.x, Font Awesome 5.x, SCSS, CSS3 Animation, CSS Flipping Animation, Event Countdown, Flexible Count, and more. EventZ have many sections: Header, Speakers, Venue, Schedule, Travel Info, Memories, Register/Pricing, Testimonials, Sponsored, Get in Touch. It also comes with ready-made CSS3 Animation, Google Map, Working Contact Form, Parallax and more.
It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap 5. If you need custom development as well as need to know anything specific for this template that doesn't cover in this documentation, you are always welcome to contact us.
How to Modify or Customize
Folder Structure
When you run 'npm run dev', a directory named 'dist' will be
created, which is the template directory compiled from Gulp, the directory structure is as
follows:
Gulp Development Files Structures
Node.js and Gulp.js are required to compile the template. If you don't have Node.js and Gulp.js installed, please follow the instructions below:
Install Node.js and Gulp.js
- 1. Download node js form here: Node.js
- 2. Open command prompt in folder and run
'npm install -g gulp'
To develop, please run 'npm install', then 'npm run dev' a
directory named 'dist' will be created, the development directory structure is
as follows:
npm run build - This will create a production ready version of your template in
the dist folder. This will also create minified versions of your CSS and JS
files.
GENERAL
Eventz html template contains html, css, js and sass files. Css files are compiled from sass files. Final js and css files are all minified version added in html head tag but their non minified version is included for further development. The template includes a gulp.js file which can compile the sass file into one css file and compress, same thing for template.js to minified template.min.js.
Sass: Sass files are located in assets/sass folder. If you are advance user and know how to compile sass then change it as need and compile. gulp.sass file in template root has all instruction. If you don't know what it is then don't touch it and leave it as it is. You can change css file as need (in case you need customization in style)
Html: All html files are located in template root folder. Total three html files index.html(Home), contact.html() and speaker.html(Single Speaker)
CSS: Css files are stored in assets/css. The default css file is style-default.css and it's minified version of file style-default.min.css. In the css folder, there are other css files for different color variation. We include 5 color variation, by default the default css is linked, but you can change as need. We recommend not to change the default css file style-default.min.css and see there is an extra css file custom.css in css folder and put any extra custom style in that file.
JS Files: Most js libraries are under assets/vendor folder. template main js file is under folder assets/js , file name template.min.js which is minified version of file template.js. If you change the template.js then compile it via gulp. We recommend not to change this file and use custom.js for any custom js code.
Header
Logo & menu
If you would like to edit branding name/logo : you would do the following:
If you would like to edit Menu Content : you would do the following:
Header Content
If you would like to edit branding header content : you would do the following:
Countdown configuration
For Countdown in Header Section like this type of code in index.html
0
Days
0
Hours
0
Minutes
0
Seconds
To change date please see the code like below
....
Change the year, month, day from data-year="2016" data-month="12" data-day="31"
Speakers
If you would like to edit Heading & Text, please go to Speakers Section in index.html
The code is like:
01
Speakers
Vestibulum auctor eros vel
diam tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single Speaker, like this type of code:
Jonathon S. Kundu
Founder & Chief of Executions
To edit any single speaker open the file speaker.html, for example demo page for all speakers we linked speaker.html, what you need to do is copy this file and rename and link seprated speaker details html file for each.
Venue Video
If you would like to edit popup modal content, The code is like:
The Schedule
If you would like to edit Heading & Text, please go to Schedule Section in index.html
The code is like:
02
Schedule
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Tab Menu content, like this type of code:
If you would like to edit Single Schedule, like this type of code:
09:03 AM
Room 305
Grand Tipu Sultan
Welcoming and Introduction
By Devid Warner
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae Nullam varius a
felis eu dictum. Suspendisse sodales leo non ipsum tincidunt, seder
elementum orci luctus sodales lacus euismod.
More Info
Sponsore
If you would like to edit Heading & Text, please go to Sponsored Section in index.html
The code is like:
03
Sponsored
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single item, like this type of code:
Travel Info
If you would like to edit Heading & Text, please go to TRAVELINFO Section in index.html
The code is like:
04
TravelInfo
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single item, like this type of code:
GOOGLE MAP
This is a javascript based plugin. So, for any type customization or modification need to open site custom javascript file which you find from js folder as template.js
HTML code of google map starting from as
Confgigure Google map: To change from the above section latitude, see it has example like data-lat="xxxx", longitude (example data-lng="xxxx"), tile (data-title="xxxxx") and description for location marker (data-content="xxxx"), , the rest thing will be loaded automatically and you don't need to care about this.
Register
If you would like to edit Heading & Text, please go to Register Section in index.html
The code is like:
05
Register
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single pricing item, like this type of code:
Standard pass
- Unlimited licenses
- Unlimited Entrance
- One Unlimited Entrance
- Day One Coffee Break
- Day One Certificate
- Day One Workshop
- One Certificate
$ 7.95
/ month
Memoris
If you would like to edit Heading & Text, please go to TRAVELINFO Section in index.html
The code is like:
06
Memoris
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single item, like this type of code:
Our Testimonials
If you would like to edit Heading & Text, please go to Testimonials Section in index.html
The code is like:
07
Testimonials
Vestibulum auctor eros vel diam
tincidunt nec ultrices sem vestibulum. Nulla eget felis
eu elit. Maecenas fringilla diam condim entum
If you would like to edit Single item, like this type of code:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. !
Jonathon Doe
Contact Us Page
Contact page is a separate page contact.html and the mail related configuration is shown below:
To configure email options then open contact.php file which you find from php directory from template root. There we try to describe everything by comments.
Default Email configuration:
$admin_email_to = 'admin@yourdomain.com'; // admin email who will get the contact email alert
$admin_email_to_name = "Company Name"; // Admin Name/Company name who will get the email alert
$admin_email_from = 'noreply@yourdomain.com'; // admin email from which email address email will be sent
$admin_email_from_name = 'System'; //admin name from which email will be sent
$admin_send_subject = 'Contact form alert'; //email subject what the admin will get as contact email alert
$user_send_subject = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"