convert HTML template to Elementor Page Template WordPress
• First and foremost, we have provided a sample template in HTML format. You can find the template file here:
<!-- HTML2 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Job list</title>
<link rel="stylesheet" href="./styles/style.css" />
<script>
<!-- HTML 1 -->
const jobs = [
{
"pos": "React Native Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/reactnative-developer/"
},
{
"pos": "Fullstack Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/fullstack-dev-9/"
},
{
"pos": ".NET Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/net-dev/"
},
{
"pos": "Java Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/net-dev/"
},
{
"pos": "C# Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/c-developer/"
},
{
"pos": "Node.js Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/node-js-developer/"
},
{
"pos": "Node.js Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/node-js-developer/"
},
{
"pos": "Microsoft Dynamic Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/microsoft-dynamic/"
},
{
"pos": "Angular Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/angular-dev/"
},
{
"pos": "Angular Developer",
"loc": "Chicago",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/angular-dev/"
},
{
"pos": "React.js Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/react-js-developer/"
},
];
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- HTML 4 -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: poppins;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.display-none {
display: none !important;
}
.job-filter {
background: #fafafa;
padding: 30px 0px;
margin-bottom: 35px;
}
.job-filter .job-filter-row {
width: 900px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
}
.job-filter .job-filter-row .job-filter-col {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
.job-filter .job-filter-row .job-filter-col .btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn {
width: 45%;
margin-right: 10px;
background-color: white;
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: #005FA9;
border: 1px solid #005FA9;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn:hover {
/*background-color: rgba(248, 204, 20, 0.1);*/
}
.job-filter .job-filter-row .select-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.job-filter .job-filter-row .select-item h1 {
margin-right: 8px;
margin-bottom: 0 !important;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #5e5c57;
}
.job-filter .job-filter-row .select-item .form-select {
width: 184px;
height: 30px;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #5e5c57;
border: 1.2px solid #dddddd;
background: white;
}
.job-count {
margin-bottom: 35px;
}
.job-count h1 {
text-align: center;
font-weight: 600;
font-size: 28px;
line-height: 42px;
color: #5e5c57;
}
.job-count span {
color: #005FA9;
}
.job-list {
height: 850px;
overflow-y: scroll;
}
.job-list .job-card {
width: 97%;
height: 100px;
margin: auto;
margin-bottom: 16px;
padding: 35px 50px;
background: #ffffff;
border: 0px solid #dddddd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.job-list .job-card:hover {
-webkit-box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
}
.job-list .job-card .job-pos {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
color: #5e5c57;
font-weight: 600;
font-size: 20px;
line-height: 30px;
}
.job-list .job-card .job-loc {
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #5e5c57;
}
.job-list .job-card .job-contract {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
color: #5e5c57;
}
.job-list .job-card .apply-btn {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
.job-list .job-card .apply-btn {
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: #005FA9;
border: 1px solid #005FA9;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-list .job-card .apply-btn:hover {
background-color: rgba(0, 95, 169, 0.2);
}
/*# sourceMappingURL=style.css.map */
@media only screen and (max-width: 767px) {
.job-filter {
padding: 20px 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 0;
}
.job-filter .job-filter-row {
flex-direction: column;
gap: 20px 0;
width: auto;
}
.job-filter .job-filter-row .select-item h1 {
font-size: 12px;
line-height: 20px;
}
.job-filter .job-filter-row .select-item .form-select {
font-size: 12px;
line-height: 20px;
}
.job-list .job-card {
height: auto;
flex-direction: column;
padding: 20px;
}
.job-list .job-card .job-pos,
.job-list .job-card .job-loc,
.job-list .job-card .job-contract,
.job-list .job-card .apply-btn {
font-size: 12px;
line-height: 20px;
}
.job-count {
margin-bottom: 20px;
}
.job-count h1 {
font-size: 14px;
line-height: 21px;
}
}
</style>
</head>
<body>
<div class="job-filter">
<div class="job-filter-row">
<!-- begin row -->
<div class="job-filter-col">
<div class="select-item">
<h1>Position</h1>
<select
class="form-select form-select-pos"
aria-label="Default select example">
<option value="" selected>Select position</option>
</select>
</div>
</div>
<div class="job-filter-col">
<div class="select-item">
<h1>Location</h1>
<select
class="form-select form-select-loc"
aria-label="Default select example">
<option value="" selected>Select location</option>
</select>
</div>
</div>
<div class="job-filter-col">
<div class="select-item">
<h1>Contract</h1>
<select
class="form-select form-select-type"
aria-label="Default select example">
<option value="" selected>Select contract</option>
</select>
</div>
</div>
<!-- end row -->
</div>
</div>
<div class="job-count">
<h1 class="text-center">
<span>Work with us </span> at Flagtick Group
</h1>
</div>
<div class="job-list"></div>
<script src="app.js"></script>
<!-- HTML 3 -->
<script>
$(document).ready(function () {
// Create location options
$(".form-select-loc").append(
$("<option>", {
value: "New York City",
text: "New York City",
})
);
$(".form-select-loc").append(
$("<option>", {
value: "Los Angeles",
text: "Los Angeles",
})
);
$(".form-select-loc").append(
$("<option>", {
value: "Chicago",
text: "Chicago",
})
);
// Create type of contract options
$(".form-select-type").append(
$("<option>", {
value: "Fulltime",
text: "Fulltime",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Intern",
text: "Intern",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Freelancer",
text: "Freelancer",
})
);
// Remove duplicate job name
let jobArr = [];
$.each(jobs, (i, job) => {
jobArr.push(job.pos);
});
let uniqueJobArr = [...new Set(jobArr)];
// Create position options
$.each(uniqueJobArr, (i, job) => {
$(".form-select-pos").append(
$("<option>", {
value: job,
text: job,
})
);
});
// Create job card
$.each(jobs, (i, job) => {
var $jobCard = $("<a></a>").addClass("job-card").attr("href", job.link);
$(".job-list").append($jobCard);
var $jobPos = $("<div></div>").addClass("job-pos").text(job.pos);
$jobCard.append($jobPos);
var $jobLoc = $("<div></div>").addClass("job-loc").text(job.loc);
$jobCard.append($jobLoc);
var $jobContract = $("<div></div>")
.addClass("job-contract")
.text(job.typeCon);
$jobCard.append($jobContract);
// ADD APPLY LINK
var $applyBtn = $("<a></a>")
.addClass("apply-btn")
.attr("href", "https://flagtick.com/application-form/")
.text("APPLY NOW");
$jobCard.append($applyBtn);
});
});
// filter function
$(document).ready(function () {
const posSelect = document.querySelector(".form-select-pos");
const locSelect = document.querySelector(".form-select-loc");
const conSelect = document.querySelector(".form-select-type");
const jobCard = document.querySelectorAll(".job-card");
const filterBtn = document.querySelector("#filter-btn");
function removeAllDisplayNone() {
jobCard.forEach((card) => {
card.classList.remove("display-none");
});
}
function updateFilter() {
removeAllDisplayNone();
if (posSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[0].textContent !== posSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (locSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[1].textContent !== locSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (conSelect.value !== "") {
jobCard.forEach((card) => {
console.log(card.children[2].textContent);
if (
card.children[2].textContent !== conSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
}
posSelect.addEventListener("change", () => {
console.log("hello");
updateFilter();
});
locSelect.addEventListener("change", () => {
updateFilter();
});
conSelect.addEventListener("change", () => {
updateFilter();
});
});
</script>
</body>
</html>
Note: To ensure grammatical correctness and coherence, it's best to avoid importing `styles.css` and `app.js` when using the HTML widget in Elementor.
• We will be using the free version of Elementor which has a Navigator structure like this: one row contains one column for the HTML widget arranged vertically.
• <!-- HTML 1 -->
<!-- HTML 1 -->
<script>
const jobs = [
{
"pos": "React Native Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/reactnative-developer/"
},
{
"pos": "Fullstack Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/fullstack-dev-9/"
},
{
"pos": ".NET Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/net-dev/"
},
{
"pos": "Java Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/net-dev/"
},
{
"pos": "C# Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/c-developer/"
},
{
"pos": "Node.js Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/node-js-developer/"
},
{
"pos": "Node.js Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/node-js-developer/"
},
{
"pos": "Microsoft Dynamic Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/career/microsoft-dynamic/"
},
{
"pos": "Angular Developer",
"loc": "New York City",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/angular-dev/"
},
{
"pos": "Angular Developer",
"loc": "Chicago",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/angular-dev/"
},
{
"pos": "React.js Developer",
"loc": "Los Angeles",
"typeCon": "Fulltime",
"link": "https://flagtick.com/careers/react-js-developer/"
},
];
</script>
• <!-- HTML 2 -->
<!-- HTML2 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Job list</title>
<link rel="stylesheet" href="./styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="job-filter">
<div class="job-filter-row">
<div class="job-filter-col">
<div class="select-item">
<h1>Position</h1>
<select
class="form-select form-select-pos"
aria-label="Default select example">
<option value="" selected>Select position</option>
</select>
</div>
</div>
<div class="job-filter-col">
<div class="select-item">
<h1>Location</h1>
<select
class="form-select form-select-loc"
aria-label="Default select example"
>
<option value="" selected>Select location</option>
</select>
</div>
</div>
<div class="job-filter-col">
<div class="select-item">
<h1>Contract</h1>
<select
class="form-select form-select-type"
aria-label="Default select example">
<option value="" selected>Select contract</option>
</select>
</div>
</div>
</div>
</div>
<div class="job-count">
<h1 class="text-center">
<span>Work with us </span> at Flagtick Group
</h1>
</div>
<div class="job-list"></div>
<script src="app.js"></script>
</body>
</html>
• <!-- HTML 3 -->
<!-- HTML 3 -->
<script>
$(document).ready(function () {
// Create location options
$(".form-select-loc").append(
$("<option>", {
value: "New York City",
text: "New York City",
})
);
$(".form-select-loc").append(
$("<option>", {
value: "Los Angeles",
text: "Los Angeles",
})
);
$(".form-select-loc").append(
$("<option>", {
value: "Chicago",
text: "Chicago",
})
);
// Create type of contract options
$(".form-select-type").append(
$("<option>", {
value: "Fulltime",
text: "Fulltime",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Intern",
text: "Intern",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Freelancer",
text: "Freelancer",
})
);
// Remove duplicate job name
let jobArr = [];
$.each(jobs, (i, job) => {
jobArr.push(job.pos);
});
let uniqueJobArr = [...new Set(jobArr)];
// Create position options
$.each(uniqueJobArr, (i, job) => {
$(".form-select-pos").append(
$("<option>", {
value: job,
text: job,
})
);
});
// Create job card
$.each(jobs, (i, job) => {
var $jobCard = $("<a></a>").addClass("job-card").attr("href", job.link);
$(".job-list").append($jobCard);
var $jobPos = $("<div></div>").addClass("job-pos").text(job.pos);
$jobCard.append($jobPos);
var $jobLoc = $("<div></div>").addClass("job-loc").text(job.loc);
$jobCard.append($jobLoc);
var $jobContract = $("<div></div>")
.addClass("job-contract")
.text(job.typeCon);
$jobCard.append($jobContract);
// ADD APPLY LINK
var $applyBtn = $("<a></a>")
.addClass("apply-btn")
.attr("href", "https://flagtick.com/application-form/")
.text("APPLY NOW");
$jobCard.append($applyBtn);
});
});
// filter function
$(document).ready(function () {
const posSelect = document.querySelector(".form-select-pos");
const locSelect = document.querySelector(".form-select-loc");
const conSelect = document.querySelector(".form-select-type");
const jobCard = document.querySelectorAll(".job-card");
const filterBtn = document.querySelector("#filter-btn");
function removeAllDisplayNone() {
jobCard.forEach((card) => {
card.classList.remove("display-none");
});
}
function updateFilter() {
removeAllDisplayNone();
if (posSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[0].textContent !== posSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (locSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[1].textContent !== locSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (conSelect.value !== "") {
jobCard.forEach((card) => {
console.log(card.children[2].textContent);
if (
card.children[2].textContent !== conSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
}
posSelect.addEventListener("change", () => {
console.log("hello");
updateFilter();
});
locSelect.addEventListener("change", () => {
updateFilter();
});
conSelect.addEventListener("change", () => {
updateFilter();
});
});
</script>
• <!-- HTML 4 -->
<!-- HTML 4 -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: poppins;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.display-none {
display: none !important;
}
.job-filter {
background: #fafafa;
padding: 30px 0px;
margin-bottom: 35px;
}
.job-filter .job-filter-row {
width: 900px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
}
.job-filter .job-filter-row .job-filter-col {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
.job-filter .job-filter-row .job-filter-col .btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn {
width: 45%;
margin-right: 10px;
background-color: white;
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: #005FA9;
border: 1px solid #005FA9;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn:hover {
/*background-color: rgba(248, 204, 20, 0.1);*/
}
.job-filter .job-filter-row .select-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.job-filter .job-filter-row .select-item h1 {
margin-right: 8px;
margin-bottom: 0 !important;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #5e5c57;
}
.job-filter .job-filter-row .select-item .form-select {
width: 184px;
height: 30px;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #5e5c57;
border: 1.2px solid #dddddd;
background: white;
}
.job-count {
margin-bottom: 35px;
}
.job-count h1 {
text-align: center;
font-weight: 600;
font-size: 28px;
line-height: 42px;
color: #5e5c57;
}
.job-count span {
color: green;
}
.job-list {
height: 850px;
overflow-y: scroll;
}
.job-list .job-card {
width: 97%;
height: 100px;
margin: auto;
margin-bottom: 16px;
padding: 35px 50px;
background: #ffffff;
border: 0px solid #dddddd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.job-list .job-card:hover {
-webkit-box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
}
.job-list .job-card .job-pos {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
color: #5e5c57;
font-weight: 600;
font-size: 20px;
line-height: 30px;
}
.job-list .job-card .job-loc {
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #5e5c57;
}
.job-list .job-card .job-contract {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
color: #5e5c57;
}
.job-list .job-card .apply-btn {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
.job-list .job-card .apply-btn {
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: green;
border: 1px solid green;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-list .job-card .apply-btn:hover {
background-color: rgba(0, 95, 169, 0.2);
}
/*# sourceMappingURL=style.css.map */
@media only screen and (max-width: 767px) {
.job-filter {
padding: 20px 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 0;
}
.job-filter .job-filter-row {
flex-direction: column;
gap: 20px 0;
width: auto;
}
.job-filter .job-filter-row .select-item h1 {
font-size: 12px;
line-height: 20px;
}
.job-filter .job-filter-row .select-item .form-select {
font-size: 12px;
line-height: 20px;
}
.job-list .job-card {
height: auto;
flex-direction: column;
padding: 20px;
}
.job-list .job-card .job-pos,
.job-list .job-card .job-loc,
.job-list .job-card .job-contract,
.job-list .job-card .apply-btn {
font-size: 12px;
line-height: 20px;
}
.job-count {
margin-bottom: 20px;
}
.job-count h1 {
font-size: 14px;
line-height: 21px;
}
}
</style>
Good luck!
24