{"id":6,"date":"2021-03-12T05:09:01","date_gmt":"2021-03-12T05:09:01","guid":{"rendered":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/?page_id=6"},"modified":"2022-10-19T10:25:30","modified_gmt":"2022-10-19T10:25:30","slug":"particle-html-template-documentation","status":"publish","type":"page","link":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/","title":{"rendered":"Particle HTML Template Documentation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a657f30 bajbaj elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"a657f30\" data-element_type=\"section\" id=\"ponuda\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d8c9b3 exad-glass-effect-no exad-sticky-section-no\" data-id=\"5d8c9b3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df303eb ponuda-closer-wrapper exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"df303eb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<i class=\"fa fa-times ponuda-closer\"><\/i>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35dc43a exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"35dc43a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<p class=\"ponuda-heading\"><i class=\"fa fa-arrow-down\"><\/i> GET A FREE 3D HOVER EFFECT<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa30942 ponuda-subhead exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"fa30942\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">EXCLUSIVELY FOR PARTICLE THEME OWNERS<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cc69ba ponuda-3rd-heading exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9cc69ba\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3D PARALLAX IMAGE HOVER EFFECT<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d01e379 ponuda-p-subtext exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"d01e379\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #ffffff;\">Subscribe to our Newsletter (we never SPAM!) and be the first to get the coolest image hover effect for FREE!<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-83461e8 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"83461e8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-28f28b7 exad-glass-effect-no exad-sticky-section-no\" data-id=\"28f28b7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc39a2b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"bc39a2b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n.pa-3d-hover {\n\tfont-family: 'Blinker', sans-serif;\n\tline-height: 1.8;\n\tcolor: #666;\n}\n\n.pa-3d-hover h1,\n.pa-3d-hover h2,\n.pa-3d-hover h3,\n.pa-3d-hover h4,\n.pa-3d-hover h5,\n.pa-3d-hover h6 {\n\tfont-family: 'Blinker', sans-serif;\n\tcolor: #333;\n\tmargin: 0em 0 0em;\n}\n\n.pa-3d-hover a {\n\ttext-decoration: none;\n\tcolor: #9999ff;\n}\n\n.section-title {\n\ttext-align: center;\n\ttext-transform: uppercase;\n}\n\n.pa-3d-hover {\n\twidth: 100%;\n\tfloat: left;\n}\n\n.pa-3d-hover:not(:last-child) {\n\tmargin-right: 4%;\n}\n\n.pa-3d-hover-list:after {\n\tcontent: \" \";\n\tdisplay: block;\n\tclear: both;\n}\n\n.pa-3d-hover__image {\n\tdisplay: block;\n\tposition: relative;\n}\n\n.pa-3d-hover__image img {\n\twidth: 100%;\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n}\n\n.pa-3d-hover__image:after {\n\tcontent: \" \";\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tbackground: rgba(0, 0, 0, 0.7); \/* Tint Color *\/\n\ttransition: opacity .3s ease;\n\topacity: 0;\n}\n\n.pa-3d-hover__card {\n\tposition: relative;\n\twill-change: transform;\n\ttransition: box-shadow .3s ease;\n\t-webkit-transform-origin: center center;\n\ttransform-origin: center center;\n\tbox-shadow: 0 10px 30px transparent;\n}\n\n.pa-3d-hover__card.hover-in {\n\ttransition: -webkit-transform .2s ease-out;\n\ttransition: transform .2s ease-out;\n\ttransition: transform .2s ease-out, -webkit-transform .2s ease-out;\n}\n\n.pa-3d-hover__card.hover-out {\n\ttransition: -webkit-transform .2s ease-in;\n\ttransition: transform .2s ease-in;\n\ttransition: transform .2s ease-in, -webkit-transform .2s ease-in;\n}\n\n.pa-3d-hover:hover .pa-3d-hover__card {\n\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n}\n\n.pa-3d-hover:hover .pa-3d-hover__image:after {\n\topacity: 1;\n}\n\n.pa-3d-hover:hover .pa-3d-hover__detail {\n\tborder-width: 6px; \/* Border Thickness *\/\n\tbox-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);\n}\n\n.pa-3d-hover:hover .pa-3d-hover__title,\n.pa-3d-hover:hover .pa-3d-hover__category {\n\t-webkit-transform: translateY(0) scale(1);\n\t-ms-transform: translateY(0) scale(1);\n\ttransform: translateY(0) scale(1);\n\topacity: 1;\n}\n\n.pa-3d-hover__detail {\n\tposition: absolute;\n\tleft: 30px;\n\tright: 30px;\n\ttop: 30px;\n\tbottom: 30px;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-flex-direction: column;\n\t-ms-flex-direction: column;\n\tflex-direction: column;\n\t-webkit-justify-content: center;\n\t-ms-flex-pack: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tpointer-events: none;\n\t-webkit-transform: translateZ(30px);\n\ttransform: translateZ(30px);\n\tborder: 0 solid #9300F5; \/* Border Color *\/\n\ttransition: border .3s linear;\n}\n\n.pa-3d-hover__title {\n\t-vebkit-transform-origin: center bottom;\n\ttransform-origin: center bottom;\n\tmargin: 0 0 10px;\n\tfont-size: 36px;\n\tfont-weight: 700;\n\ttransition: .4s ease;\n\topacity: 0;\n\t-webkit-transform: translateY(40px) scale(0);\n\t-ms-transform: translateY(40px) scale(0);\n\ttransform: translateY(40px) scale(0);\n\twill-change: transform;\n}\n\n.pa-3d-hover__title a {\n\tfont-weight: 700;\n\tcolor: white;\n}\n\n@media all and (mix-width: 768px) and (max-width: 1280px) {\n\t.pa-3d-hover__title {\n    \tfont-size: 19px;\n\t}\n}\n\n@media all and (max-width: 768px) {\n\t.pa-3d-hover__title {\n\t\topacity: 1 !important;\n\t\t-webkit-transform: translateY(0) scale(1);\n\t\t-ms-transform: translateY(0) scale(1);\n\t\ttransform: translateY(0) scale(1);\n\t}\n}\n\n@media all and (max-width: 500px) {\n\t.pa-3d-hover__title {\n\t\tfont-size: 24px;\n\t\topacity: 1 !important;\n\t\t-webkit-transform: translateY(0) scale(1);\n\t\t-ms-transform: translateY(0) scale(1);\n\t\ttransform: translateY(0) scale(1);\n\t}\n}\n\n.pa-3d-hover__category {\n\topacity: 0;\n\ttransition: .4s ease;\n\ttransition-delay: .1s;\n\t-webkit-transform: translateY(40px) scale(0);\n\t-ms-transform: translateY(40px) scale(0);\n\ttransform: translateY(40px) scale(0);\n\twill-change: transform;\n}\n\n@media all and (max-width: 768px) {\n\t.pa-3d-hover__category {\n\t\topacity: 1 !important;\n\t\t-webkit-transform: translateY(0) scale(1);\n\t\t-ms-transform: translateY(0) scale(1);\n\t\ttransform: translateY(0) scale(1);\n\t}\n}\n\n.pa-3d-hover__category a {\n\tcolor: rgba(255, 255, 255, 1);\n\tfont-size: 1.3em;\n}\n<\/style>\n\n\n<div class=\"row pa-3d-parallax-hover-area\">\n\t\t\t\t<div class=\"col-12 col-lg-6 offset-lg-3\">\n\t\t\t\t\t<div class=\"pa-3d-hover\">\n\t\t\t\t\t\t<div class=\"pa-3d-hover__card\">\n\t\t\t\t\t\t\t<a href=\"#your-link\" class=\"pa-3d-hover__image\" target=\"_parent\"><img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/temp-img.jpg\" alt=\"\"><\/a>\n\t\t\t\t\t\t\t\t<div class=\"pa-3d-hover__detail\">\n\t\t\t\t\t\t\t\t\t<h2 class=\"pa-3d-hover__title\"><a href=\"#\">SUPERB HOVER<\/a><\/h2>\n\t\t\t\t\t\t\t\t\t<small class=\"pa-3d-hover__category\"><a href=\"#\">Amazing Bonus CSS 3D Image Hover Effect!<\/a><\/small>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\n<script>\n\n(function($){\n\t\n\t$.fn.hover3d = function(options){\n\t\t\n\t\tvar settings = $.extend({\n\t\t\tselector      : null,\n\t\t\tperspective   : 1000,\n\t\t\tsensitivity   : 20,\n\t\t\tinvert        : false,\n\t\t\tshine         : false,\n\t\t\thoverInClass  : \"hover-in\",\n\t\t\thoverOutClass : \"hover-out\",\n\t\t\thoverClass    : \"hover-3d\"\n\t\t}, options);\n\t\t\n\t\treturn this.each(function(){\n\t\t\t\n\t\t\tvar $this = $(this),\n\t\t\t\t$card = $this.find(settings.selector);\n\n\t\t\tif( settings.shine ){\n\t\t\t\t$card.append('<a href=\"#your-link\" target=\"_parent\"><div class=\"shine\"><\/div><\/a>');\n\t\t\t}\n\t\t\tvar $shine = $(this).find(\".shine\");\n\n\t\t\t\/\/ Set perspective and transformStyle value\n\t\t\t\/\/ for element and 3d object\n\t\t\t$this.css({\n\t\t\t\tperspective: settings.perspective+\"px\",\n\t\t\t\ttransformStyle: \"preserve-3d\"\n\t\t\t});\n\t\t\t\n\t\t\t$card.css({\n\t\t\t\tperspective: settings.perspective+\"px\",\n\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t});\n\n\t\t\t$shine.css({\n\t\t\t\tposition  : \"absolute\",\n\t\t\t\ttop       : 0,\n\t\t\t\tleft      : 0,\n\t\t\t\tbottom    : 0,\n\t\t\t\tright     : 0,\n\t\t\t\t\"z-index\" : 9\n\t\t\t});\n\t\t\t\n\t\t\t\/\/ Mouse Enter function, this will add hover-in\n\t\t\t\/\/ Class so when mouse over it will add transition\n\t\t\t\/\/ based on hover-in class\n\t\t\tfunction enter(){\n\t\t\t\t$card.addClass(settings.hoverInClass+\" \"+settings.hoverClass);\n\t\t\t\t\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t$card.removeClass(settings.hoverInClass);\n\t\t\t\t}, 50);\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ Mouse movement Parallax effect\n\t\t\tfunction move(event){\n\t\t\t\tvar w      = $this.innerWidth(),\n\t\t\t\t\th      = $this.innerHeight(),\n\t\t\t\t\tax \t   = settings.invert ?  ( w \/ 2 - event.offsetX)\/settings.sensitivity : -( w \/ 2 - event.offsetX)\/settings.sensitivity,\n\t\t\t\t\tay     = settings.invert ? -( h \/ 2 - event.offsetY)\/settings.sensitivity :  ( h \/ 2 - event.offsetY)\/settings.sensitivity;\n\t\t\t\t\tdy     = event.offsetY - h \/ 2,\n\t\t\t\t\tdx     = event.offsetX - w \/ 2,\n\t\t\t\t\ttheta  = Math.atan2(dy, dx),\n\t\t\t\t\tangle  = theta * 180 \/ Math.PI - 90;\n\t\t\t\t\t\n\t\t\t\tif (angle < 0) {\n\t\t\t\t\tangle  = angle + 360;\n\t\t\t\t}\n\t\t\t\t\n\n\t\t\t\t$card.css({\n\t\t\t\t\tperspective    : settings.perspective+\"px\",\n\t\t\t\t\ttransformStyle : \"preserve-3d\",\n\t\t\t\t\ttransform      : \"rotateY(\"+ax+\"deg) rotateX(\"+ay+\"deg)\"\n\t\t\t\t});\n\n\t\t\t\t$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY \/ h * 0.3 + ') 0%,rgba(255,255,255,0) 80%)'); \/\/ Glow Amount (in this line, after event.offsetY \/ h * 0.3)\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ Mouse leave function, will set the transform\n\t\t\t\/\/ property to 0, and add transition class\n\t\t\t\/\/ for exit animation\n\t\t\tfunction leave(){\n\t\t\t\t$card.addClass(settings.hoverOutClass+\" \"+settings.hoverClass);\n\t\t\t\t$card.css({\n\t\t\t\t\tperspective    : settings.perspective+\"px\",\n\t\t\t\t\ttransformStyle : \"preserve-3d\",\n\t\t\t\t\ttransform      : \"rotateX(0) rotateY(0)\"\n\t\t\t\t});\n\t\t\t\tsetTimeout( function(){\n\t\t\t\t\t$card.removeClass(settings.hoverOutClass+\" \"+settings.hoverClass);\n\t\t\t\t}, 50 );\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ Mouseenter event binding\n\t\t\t$this.on( \"mouseenter\", function(){\n\t\t\t\treturn enter();\n\t\t\t});\n\t\t\t\n\t\t\t\/\/ Mousemove event binding\n\t\t\t$this.on( \"mousemove\", function(event){\n\t\t\t\treturn move(event);\n\t\t\t});\n\t\t\t\n\t\t\t\/\/ Mouseleave event binding\n\t\t\t$this.on( \"mouseleave\", function(){\n\t\t\t\treturn leave();\n\t\t\t});\n\t\t\t\n\t\t});\n\t\t\n\t};\n\t\n}(jQuery));\n\njQuery(document).ready(function($) {\n    \n    \n\t$(\".pa-3d-hover\").hover3d({\n\t\tselector: \".pa-3d-hover__card\",\n\t\tshine: true,\n\t\tsensitivity: 40, \/\/ 3D Effect Sensitivity (1-50)\n\t});\n\n\t$(\".movie\").hover3d({\n\t\tselector: \".movie__card\",\n\t\tshine: true,\n\t\tsensitivity: 40, \/\/ 3D Effect Sensitivity (1-50)\n\t});\n\n    \/\/ touch devices fix\n    function isTouchDevice() {\n    \treturn (('ontouchstart' in window) ||\n    \t\t(navigator.maxTouchPoints > 0) ||\n    \t\t(navigator.msMaxTouchPoints > 0));\n    }\n    var touchDevice = isTouchDevice();\n    if (touchDevice) {\n    \t$( '.pa-3d-hover__title' ).css( 'opacity', '1' );\n    \t$( '.pa-3d-hover__title' ).css({ transform: 'translateY(0) scale(1)'})\n    \t$( '.pa-3d-hover__category' ).css( 'opacity', '1' );\n    \t$( '.pa-3d-hover__category' ).css({ transform: 'translateY(0) scale(1)'})\n    }\n    \n    \n    setTimeout(function(){\n        $('body').prepend('<div class=\"zatamnjivach\"><\/div>');\n    }, 2500);\n    setTimeout(function(){\n        $('.zatamnjivach').addClass('mrki');\n    }, 2520);\n    \n    setTimeout(function(){\n        $('#ponuda').removeClass('bajbaj');\n    }, 3000);\n    \n    \n    $('.ponuda-closer').click(function() {\n    \t$('#ponuda').addClass('bajbaj');\n    \t$('.zatamnjivach').removeClass('mrki');\n    \tsetTimeout(function(){\n        \t$('.zatamnjivach').detach();\n    \t}, 510);\n    \tsetTimeout(function(){\n    \t\t$( '#ponuda' ).detach();\n    \t}, 1500);\n    });\n    \n    $('zatamnjivach').on('click', function(e) {\n    \t$('#ponuda').addClass('bajbaj');\n    \t$('.zatamnjivach').removeClass('mrki');\n    \tsetTimeout(function(){\n        \t$('.zatamnjivach').detach();\n    \t}, 510);\n    \tsetTimeout(function(){\n    \t\t$( '#ponuda' ).detach();\n    \t}, 1500);\n    });\n    \n});\n\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-cc310ac exad-glass-effect-no exad-sticky-section-no\" data-id=\"cc310ac\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dbdcb28 ponuda-span-tryout-wrapper exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"dbdcb28\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<p class=\"ponuda-span-tryout\"><i class=\"fa fa-arrow-left\"><\/i> TRY IT<\/p>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af5f8fd exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"af5f8fd\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode710-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 80% !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tcolor: #d7e4ed !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #9300f5 !important;\r\n\t\t\tfont-size: 17px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 15px 14px !important;\r\n\t\t\tborder-color: #9300f5 !important;\r\n\t\t\tborder-radius: 3px !important;\r\n\t\t\t-moz-border-radius: 3px !important;\r\n\t\t\t-webkit-border-radius: 3px !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #b44aff !important;\r\n\t\t\tborder-color: #b44aff !important;\r\n\t\t\tfont-size: 17px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 15px 14px !important;\r\n\t\t\tborder-radius: 3px !important;\r\n\t\t\t-moz-border-radius: 3px !important;\r\n\t\t\t-webkit-border-radius: 3px !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #262a3f !important;\r\n\t\t\tborder-radius: 3px 0 0 3px !important;\r\n\t\t\t-moz-border-radius: 3px 0 0 3px !important;\r\n\t\t\t-webkit-border-radius: 3px 0 0 3px !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #262a3f !important;\r\n\t\t\tborder-radius: 0 3px 3px 0 !important;\r\n\t\t\t-moz-border-radius: 0 3px 3px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 3px 3px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #cecece !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #cecece !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #dddddd !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #a700ef !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #cc00e2 !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #9300f5 !important;\r\n\t\t\tborder-radius: 3px !important;\r\n\t\t\t-moz-border-radius: 3px !important;\r\n\t\t\t-webkit-border-radius: 3px !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #b44aff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 3px !important;\r\n\t\t\t-moz-border-radius: 3px !important;\r\n\t\t\t-webkit-border-radius: 3px !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #9300f5 !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #00e0af !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Blinker, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode710-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode710-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode710-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t<img fetchpriority=\"high\" decoding=\"async\" class=\"dae-shortcode-download-file-image\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/file-image.png\" width=\"679\" height=\"496\" \/>\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">3D Parallax Hover Image<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">DOWNLOAD NOW<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"3D_Parallax_Hover_Effect_Bonus_Section.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8b73cab elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"8b73cab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f9795c exad-glass-effect-no exad-sticky-section-no\" data-id=\"4f9795c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2823765 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"2823765\" data-element_type=\"widget\" id=\"mobajl-worn\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\njQuery(document).ready(function($) {\n    \n    \/\/ START CODE\n    \n    \/\/ Insert Socials\n    \n    \/\/ setTimeout(function(){\n\t\t$('ul#menu-main-menu').append('<li data-nav-custom-content class=\"custom-content pa-menu-socials\">' +\n\t\t\t'<div class=\"pa-social-section\">' +\n\t\t\t\t'<h4 class=\"pa-h1-v3 pa-bright fadeInDelay03Duration10\"><strong>Connect<\/strong> with us<\/h4>' +\n\t\t\t\t'<a class=\"pa-social-icons\" href=\"https:\/\/www.facebook.com\/SkilltechWebDesign\" target=\"_blank\"><span class=\"fadeInDelay03Duration10\"><i class=\"fa fa-facebook\"><\/i><\/span><\/a>' +\n\t\t\t\t'<a class=\"pa-social-icons\" href=\"https:\/\/twitter.com\/SkilltechStudio\" target=\"_blank\"><span class=\"fadeInDelay03Duration10\"><i class=\"fa fa-twitter\"><\/i><\/span><\/a>' +\n\t\t\t'<\/div>' +\n\t\t'<\/li>');\n\/\/ \t}, 500);\n\n    $('#mobajl-worn').prependTo('body');\n    \n    \/\/ END CODE\n});\n<\/script>\n\n\n<h2 class=\"mobile-warn\" style=\"color: #fc2154;\">Please use a desktop computer if possible for best experience. This documentation was designed for larger screens.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78800cf exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"78800cf\" data-element_type=\"widget\" id=\"theme-info\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ece2b05 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"ece2b05\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Particle HTML Theme<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc436e3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"bc436e3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Created: 02\/09\/2017<br \/>Latest Update: 19\/10\/2022<br \/>Version: 2.0.1<br \/>By:\u00a0<a href=\"http:\/\/www.skilltechwebdesign.com\" target=\"_blank\" rel=\"noopener\">Skilltech<\/a><br \/>Website: <a href=\"http:\/\/www.skilltechwebdesign.com\">www.skilltechwebdesign.com<\/a><\/p><p>Thank you for purchasing Particle HTML Theme! If you like our template, please give it 5 stars on <a href=\"https:\/\/themeforest.net\/downloads\" target=\"_blank\" rel=\"noopener\">Envato<\/a> so we can create even better themes. If you have any questions that are beyond the scope of this help file, please feel free to email us.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe5639 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"cbe5639\" data-element_type=\"widget\" id=\"update-history\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c4e887 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"6c4e887\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Update History<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be53e09 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"be53e09\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35e89b9 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"35e89b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>V2.0.1 (OCt.19.2022)\u00a0<\/strong><\/h5><ul><li>&#8220;Simple Forms&#8221; update to Version 3.0.10 &#8211; This is the bundled forms plugin that you get with Particle. For users who have set up simple forms before version 2.0.1, you will need to overwrite the old files and set up the new form configuration files. Here&#8217;s how:<ol><li>Main &lt;form&gt; id was changed from id=&#8221;contact-form&#8221; to id=&#8221;contact-form-1&#8243;, also, change minlength=&#8221;2&#8243; to min=&#8221;2&#8243; (minlength is now just min). Our suggestion is to open up all files in your code editor and mass-replace id=&#8221;contact-form&#8221; with id=&#8221;contact-form-1&#8243; and in a second search replace minlength=&#8221;2&#8243; with min=&#8221;2&#8243;.<\/li><li>&#8220;assets\/js\/form.js&#8221; must be replaced and set up again by following the instructions<br \/>WE RECOMMEND BACKING UP YOU OLD form.js FILE JUST IN CASE.<\/li><li>The entire folder &#8220;assets\/vendor\/simple-forms\/&#8221; must be replaced with the new one. WARNING! THIS WILL DELETE YOUR config.php FILE WHICH IS OK BECAUSE YOU WILL NEED TO SET UP THE NEW BLANK config.php FILE (NEW VERSION) BUT NEVERTHELESS YOU MIGHT WANT TO KEEP A BACKUP OF YOUR PREVIOUS SETUP.<\/li><li>After you&#8217;ve done these replacements, you can continue to <strong><a href=\"#forms\">Forms<\/a><\/strong> section and follow the instructions like you did the last time (to set up form.js and config.php with your email and ReCaptcha info)<\/li><\/ol><\/li><\/ul><h5><strong>V2.0.0 (Apr.1.2021) &#8211; MAJOR UPDATE<\/strong><\/h5><ul><li>Complete code rewrite<\/li><li>Design upgraded<\/li><li>Improved responsive behavior<\/li><li>Fixed Apple related issues<\/li><li>Added Blog static pages<\/li><li>Added fully working Premium forms (&#8220;Simple Forms&#8221;, added value $15)<\/li><li>Contact Forms<\/li><li>Subscribe Forms<\/li><li>Added &#8220;Dark Mode&#8221; option\/switcher<\/li><li>Added sub-menus option CSS\/Design (3 levels in total)<\/li><li>Redesigned mobile menu, Slide-in style<\/li><li>Re-added jQuert Easing Dependency<\/li><li>Added animated page preloader<\/li><li>Added animated page transitions<\/li><\/ul><h5><strong>V1.0.2 (Feb.2.2019)<\/strong><\/h5><ul><li>Fixed layout issues on IOS on smaller screens<\/li><li>Removed jquery easing dependency<\/li><li>Fixed HTML5 videos issues on Chrome<\/li><\/ul><h5><strong>V1.0.1 (Nov.7.2017)<\/strong><\/h5><ul><li>Initial Release<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6de167f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"6de167f\" data-element_type=\"widget\" id=\"previous-versions\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e151d3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9e151d3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Previous Versions<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fd2e08 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"5fd2e08\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c55303c exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c55303c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you&#8217;re using previous versions, you can open the &#8220;_Documentation &#8211; Old&#8221; folder and launch the old documentation. <span style=\"color: #ffffff;\">IMPORTANT: Version 2 has a complete code rewrite so it is NOT advisable to try and update from V1 to V2, instead, it is more efficient to replace text and images on the new template and do your custom tweaks on it<\/span>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b696458 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"b696458\" data-element_type=\"widget\" id=\"getting-started\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0134577 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"0134577\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Getting Started<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f6a692 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"7f6a692\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-095cd71 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"095cd71\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>When you download the theme files, you will see a large number of HTML files (including favicon.png) and the &#8220;Website\\assets&#8221; folder. The first thing you will do is to choose the layout you want and delete the unneeded files. The &#8220;Website\\assets&#8221; folder contains all other files including images, videos, CSS, JS, PHP&#8230; After deleting the unneeded HTML files you will do the same with the assets. Here&#8217;s what you need to do:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75b35cb exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"75b35cb\" data-element_type=\"widget\" id=\"selecting-files\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b852ea exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3b852ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Selecting the files (and deleting unneeded ones)<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27845a5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"27845a5\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31daac8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"31daac8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>1. Duplicate the &#8220;Website&#8221; folder (entire project folder)<\/strong><\/h3><p>Make a copy of the &#8220;Website&#8221; folder from your downloaded files. This way you\u2019ll always have the original code handy. Rename the duplicated folder to what you want and open it. You will continue working on files inside this new folder.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6583ee5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"6583ee5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\nspan.pa-wizzy-launcher:hover {\r\n    transition: all 0.3s ease 0s;\r\n}\r\nspan.pa-wizzy-launcher:hover {\r\n    color: #c067ff !important;\r\n}\r\n.pa-wizzy-launcher {\r\n    cursor: pointer;\r\n}\r\n.pa-no-wizard {\r\n    max-height: 10000px;\r\n    height: auto;\r\n}\r\n.pa-no-wizard.pa-zbogom {\r\n    transition: all 0.6s ease-out 0s;\r\n    max-height: 0;\r\n    margin-bottom: 0;\r\n    overflow: hidden;\r\n}\r\n.pa-choice.otvoren {\r\n    transition: all 0.6s ease 1s;\r\n    max-height: 400px;\r\n    height: auto;\r\n    margin-bottom: 20px;\r\n}\r\n.pa-choice {\r\n    transition: all 0.6s ease 0s;\r\n    max-height: 0;\r\n    margin-bottom: 0;\r\n    overflow: hidden;\r\n}\r\n.pa-theme-helper {\r\n\tposition: relative;\r\n    transition: all 0.6s ease 0s;\r\n    max-height: 0;\r\n    max-width: 800px;\r\n    margin-bottom: 0;\r\n    margin-top: 0;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    border: 1px solid #253243;\r\n    background: #1e2836;\r\n}\r\n.pa-theme-helper.wizard-aktivan {\r\n    transition: all 0.6s ease 1s;\r\n    max-height: 1000px;\r\n    max-width: 800px;\r\n    height: auto;\r\n    margin-bottom: 20px;\r\n    margin-top: 30px;\r\n    opacity: 1;\r\n    padding: 20px;\r\n    border: 1px solid #253243;\r\n    border-radius: 3px;\r\n    background: #1e2836;\r\n}\r\n.pa-theme-helper span {\r\n    transition: all 0.3s ease 0s;\r\n    display: block;\r\n    background: #50647e;\r\n    color: #ffffff;\r\n    padding: 8px 15px;\r\n    margin-bottom: 8px;\r\n    max-width: 220px;\r\n    width: auto;\r\n    text-align: center;\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n}\r\n.pa-theme-helper span:hover {\r\n    background: #8698b0;\r\n}\r\n.pa-theme-helper .pc-4 span {\r\n    padding: 4px;\r\n    margin: 0;\r\n    display: inline-block;\r\n    width: 98px;\r\n    height: 121px;\r\n    border-radius: 0;\r\n    margin-right: 3px;\r\n}\r\n.pc-4 span p {\r\n\tmargin: 10px auto;\r\n    color: #e5e8e9;\r\n    font-size: 17px;\r\n}\r\n.pa-th-result {\r\n    overflow: hidden;\r\n}\r\n.pa-th-result {\r\n    transition: all 0.6s ease 0s;\r\n    max-height: 0;\r\n}\r\n.pa-th-result.prikazan-rezultat {\r\n    transition: all 0.6s ease 1s;\r\n    max-height: 800px;\r\n    overflow: hidden;\r\n    height: auto;\r\n}\r\n.pa-th-result .pa-th-pre, \r\n.pa-th-result .pa-th-pre-deletables {\r\n    transition: all 0.6s ease 0s;\r\n    transform: translateY(-200px);\r\n    opacity: 0;\r\n}\r\n.pa-th-result.prikazan-rezultat .pa-th-pre, \r\n.pa-th-result.prikazan-rezultat .pa-th-pre-deletables {\r\n    transition: all 0.6s ease 1s;\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\npre.pa-th-pre, pre.pa-th-pre-deletables {\r\n    margin-top: 10px;\r\n}\r\n.pa-resohead {\r\n    transition: all 0.3s ease 0s;\r\n    opacity: 0;\r\n}\r\n.prikazan-rezultat .pa-resohead {\r\n    transition: all 0.6s ease 1.5s;\r\n    opacity: 1;\r\n}\r\nspan.th-progress {\r\n    cursor: initial;\r\n    display: inline-block;\r\n    margin-right: 2%;\r\n    border-radius: 0;\r\n    margin-bottom: 0;\r\n    width: 40px;\r\n    width: 15%;\r\n    border: 1px solid #3b495b;\r\n    background: rgb(137,158,186,0%);\r\n    border: 1px solid #212d3c;\r\n    background: rgb(33,45,60);\r\n    vertical-align: middle;\r\n}\r\nspan.th-progress:hover {\r\n    border: 1px solid #3b495b;\r\n    background: rgb(137,158,186,0%);\r\n    border: 1px solid #212d3c;\r\n    background: rgb(33,45,60);\r\n}\r\nspan.th-progress:last-child {\r\n    margin-right: 0;\r\n}\r\nspan.th-progress.woken, \r\nspan.th-progress.woken:hover {\r\n    background: #51647e;\r\n    border-color: #51647e;\r\n}\r\n.pa-span-packer {\r\n    background: #18222e;\r\n    padding: 10px;\r\n    margin-bottom: 20px;\r\n}\r\n.pa-choice h5 {\r\n    margin-bottom: 15px;\r\n}\r\nspan.pa-wizzy-killer {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    background: #141d28;\r\n}\r\nspan.pa-wizzy-killer:hover {\r\n\tbackground: #50647e;\r\n}\r\nspan.wiz-footer-divider {\r\n\tpadding: 0 !important;\r\n    width: 100% !important;\r\n    height: 1px !important;\r\n    margin-bottom: 15px !important;\r\n    margin-top: 15px !important;\r\n    background: rgba(255,255,255,0.1) !important;\r\n}\r\n<\/style>\r\n<h4>Now you can follow step 2. below or use our <span class=\"pa-wizzy-launcher\" style=\"color: #A344FD; text-decoration: underline;\">Wizard<\/span> to quickly select your layout.<\/h4>\r\n<div class=\"pa-theme-helper\">\r\n\r\n    <h2 style=\"color: #A344FD;\">Layout Selection Wizard<\/h2>\r\n    <h4>It's easy and you can reset at any time.<\/h4>\r\n    <div class=\"pa-span-packer\">\r\n        <span class=\"th-progress thp-1\"><\/span><span class=\"th-progress thp-2\"><\/span><span class=\"th-progress thp-3\"><\/span><span class=\"th-progress thp-4\"><\/span><span class=\"th-progress thp-5\"><\/span><span class=\"th-progress thp-6\"><\/span>\r\n    <\/div>\r\n\r\n    <span class=\"pa-wizzy-killer\">CLOSE<\/span>\r\n\r\n    <div class=\"pa-choice pc-1 otvoren\">\r\n        <h5>Which homepage do you want to use?<\/h5>\r\n        <span data-home=\"hero-image-light\" class=\"pa-th th-home th-home-hero-image-light\">Hero Image - Light (default)<\/span>\r\n        <span data-home=\"hero-video-light\" class=\"pa-th th-home th-home-video-light\">Hero Video(HTML5) - Light<\/span>\r\n        <span data-home=\"hero-yt-video-light\" class=\"pa-th th-home th-home-yt-video-light\">Hero YouTube Video - Light<\/span>\r\n        <span data-home=\"hero-image-dark\" class=\"pa-th th-home th-home-hero-image-dark\">Hero Image - Dark<\/span>\r\n        <span data-home=\"hero-video-dark\" class=\"pa-th th-home th-home-video-dark\">Hero Video(HTML5) - Dark<\/span>\r\n        <span data-home=\"hero-yt-video-dark\" class=\"pa-th th-home th-home-home-yt-video-dark\">Hero YouTube Video - Dark<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-choice pc-2\">\r\n        <h5>Will you use blog?<\/h5>\r\n        <span data-blog-yesno=\"yes\" class=\"pa-th th-blog-yesno th-blog-yes\">Yes<\/span>\r\n        <span data-blog-yesno=\"no\" class=\"pa-th th-blog-yesno th-blog-no\">No<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-choice pc-3\">\r\n        <h5>Which blog would You like?<\/h5>\r\n        <span data-blog-ld=\"light\" class=\"pa-th th-blog-ld th-blog-ld-light\">Light<\/span>\r\n        <span data-blog-ld=\"dark\" class=\"pa-th th-blog-ld th-blog-ld-dark\">Dark<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-choice pc-4\">\r\n        <h5>What Blog Feed style do you want?<\/h5>\r\n        <span data-blog-style=\"magazine\" title=\"Magazine Style\" class=\"pa-th th-blog-style th-bs-magazine\"><img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/blog-feed-style-1-default.png\"><p>Magazine<\/p><\/span>\r\n        <span data-blog-style=\"casual\" title=\"Casual Style\" class=\"pa-th th-blog-style th-bs-casual\"><img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/blog-feed-style-2-stretched.png\"><p>Casual<\/p><\/span>\r\n        <span data-blog-style=\"classic\" title=\"Classic Style\" class=\"pa-th th-blog-style th-bs-classic\"><img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/blog-feed-style-3-classic.png\"><p>Classic<\/p><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-choice pc-5\">\r\n        <h5>Do you want sidebar on your blog?<\/h5>\r\n        <span data-blog-sidebar-yesno=\"yes\" class=\"pa-th th-blog-sidebar-yesno blog-side-yes\">Yes<\/span>\r\n        <span data-blog-sidebar-yesno=\"no\" class=\"pa-th th-blog-sidebar-yesno blog-side-no\">No<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-choice pc-6\">\r\n        <h5>On which side to put the sidebar?<\/h5>\r\n        <span data-blog-sidebar-side=\"right\" class=\"pa-th pa-th-last blog-sidebar-side blog-side-lr-right\">Right<\/span>\r\n        <span data-blog-sidebar-side=\"left\" class=\"pa-th pa-th-last blog-sidebar-side blog-side-lr-left\">Left<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"pa-th-result\">\r\n        <h5 class=\"pa-resohead\">These are the .html files you should <srtong style=\"color: #A344FD;\">keep<\/srtong><\/h5>\r\n        <pre class=\"pa-th-pre\">\r\n            <code class=\"pa-th-code\">\r\n                service-item.html<br>\r\n                portfolio-item.html\r\n            <\/code>\r\n        <\/pre>\r\n        <h5 class=\"pa-resohead\">These are the files from the \"assets\" folder you can <srtong style=\"color: #A344FD;\">Delete<\/srtong><\/h5>\r\n        <pre class=\"pa-th-pre-deletables\">\r\n            <code class=\"pa-th-code-deletables\">\r\n            <\/code>\r\n        <\/pre>\r\n    <\/div>\r\n\r\n    <span class=\"wiz-footer-divider\"><\/span>\r\n\r\n    <span class=\"pa-th-reset\">Reset and Go Again<\/span>\r\n\r\n<\/div>\r\n\r\n<script type=\"text\/javascript\">\r\njQuery(document).ready(function($) {\r\n\r\n    \/\/ START CODE\r\n\r\n    \r\n    $('.pa-wizzy-launcher').click(function() {\r\n        $(this).closest('.elementor-widget-html').next('.elementor-widget-text-editor.pa-no-wizard').addClass('pa-zbogom');\r\n        $(this).closest('.elementor-widget-html').find('.pa-theme-helper').addClass('wizard-aktivan');\r\n    });\r\n\r\n    $('.pa-wizzy-killer').click(function() {\r\n        $(this).closest('.elementor-widget-html').next('.elementor-widget-text-editor.pa-no-wizard').removeClass('pa-zbogom');\r\n        $(this).closest('.elementor-widget-html').find('.pa-theme-helper').removeClass('wizard-aktivan');\r\n        \r\n        \/\/ do the reset\r\n        $(this).closest('.pa-theme-helper').find('.pa-th-reset').click();\r\n        \/\/ $(this).closest('.elementor-widget-html').find('.pa-th-result').removeClass('prikazan-rezultat');\r\n        \/\/ $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        \/\/ $(this).closest('.pa-theme-helper').find('.pc-1').addClass('otvoren');\r\n        \/\/ finalString = '';\r\n        \/\/ home = 'hero-image-light';\r\n        \/\/ blogYesNo = 'no';\r\n        \/\/ blogDarkLight = 'light';\r\n        \/\/ blogStyle = 'magazine';\r\n        \/\/ blogSidebarYesNo = 'yes';\r\n        \/\/ blogSidebarLR = 'right';\r\n        \/\/ endStringHome = 'You haven\\'t selected the home properly';\r\n        \/\/ endStringBlog = '';\r\n        \/\/ $('span.thp-1').removeClass('woken');\r\n        \/\/ $('span.thp-2').removeClass('woken');\r\n        \/\/ $('span.thp-3').removeClass('woken');\r\n        \/\/ $('span.thp-4').removeClass('woken');\r\n        \/\/ $('span.thp-5').removeClass('woken');\r\n        \/\/ $('span.thp-6').removeClass('woken');\r\n    });\r\n\r\n    \/\/ WHICH HOMEPAGE\r\n\r\n    var finalString = '';\r\n    var home = 'hero-image-light';\r\n    var blogYesNo = 'no';\r\n    var blogDarkLight = 'light';\r\n    var blogStyle = 'magazine';\r\n    var blogSidebarYesNo = 'yes';\r\n    var blogSidebarLR = 'right';\r\n    var endStringHome = 'You haven\\'t selected the home properly';\r\n    var endStringBlog = '';\r\n\r\n    var filesToDelete = 'page-home-dark.js';\r\n\r\n    function insertStrings($finalString) {\r\n        finalString = $finalString;\r\n        addition = 'service-item.html<br>' +\r\n                    'portfolio-item.html';\r\n        totalString = finalString + addition;\r\n        $('.pa-th-code').html(totalString);\r\n\r\n        var youTube = '';\r\n        var lightJS = '';\r\n        var darkJS = '';\r\n        var darkVideoFiles = '';\r\n        var lightVideoFiles = '';\r\n        var blogFiles = '';\r\n        var finalDeletables = '';\r\n        if (totalString.indexOf('yt') >= 0) {\r\n            darkVideoFiles = 'assets\\\\video\\\\particle-video-dark.mp4 <br>' +\r\n                            'assets\\\\video\\\\particle-video-dark.jpg <br>';\r\n            lightVideoFiles = 'assets\\\\video\\\\particle-video-light.mp4 <br>' +\r\n                            'assets\\\\video\\\\particle-video-light.jpg <br>';\r\n        } else {\r\n            youTube = 'assets\\\\js\\\\youtube-video.js <br>';\r\n        }\r\n\r\n        if (totalString.indexOf('video') >= 0) {\r\n\r\n        } else {\r\n            darkVideoFiles = 'assets\\\\video\\\\particle-video-dark.mp4 <br>' +\r\n                            'assets\\\\video\\\\particle-video-dark.jpg <br>';\r\n            lightVideoFiles = 'assets\\\\video\\\\particle-video-light.mp4 <br>' +\r\n                            'assets\\\\video\\\\particle-video-light.jpg <br>';\r\n            youTube = 'assets\\\\js\\\\youtube-video.js <br>';\r\n        }\r\n\r\n        if (totalString.indexOf('index') >= 0) {\r\n            if (totalString.indexOf('dark') >= 0) {\r\n                lightJS = 'assets\\\\js\\\\page-home.js <br>';\r\n            } else {\r\n                darkJS = 'assets\\\\js\\\\page-home-dark.js <br>';\r\n            }\r\n        }\r\n        if (totalString.indexOf('index-video') >= 0) {\r\n            if (totalString.indexOf('dark') >= 0) {\r\n                darkVideoFiles = '';\r\n                lightVideoFiles = 'assets\\\\video\\\\particle-video-light.mp4 <br>' +\r\n                                'assets\\\\video\\\\particle-video-light.jpg <br>';\r\n            } else {\r\n                darkVideoFiles = 'assets\\\\video\\\\particle-video-dark.mp4 <br>' +\r\n                                'assets\\\\video\\\\particle-video-dark.jpg <br>';\r\n                lightVideoFiles = '';\r\n            }\r\n        }\r\n\r\n        if (totalString.indexOf('blog') >= 0) {\r\n\r\n        } else {\r\n            blogFiles = 'assets\\\\js\\\\page-blog.js <br>' +\r\n                        'assets\\\\js\\\\page-blog-single-post.js <br>' +\r\n                        'assets\\\\css\\\\particle-blog.css <br>';\r\n        }\r\n\r\n        finalDeletables = youTube + lightJS + darkJS + darkVideoFiles + lightVideoFiles + blogFiles;\r\n\r\n        $('.pa-th-code-deletables').html(finalDeletables);\r\n\r\n    }\r\n\r\n    function getEndStrings( $home, $blogYesNo, $blogDarkLight, $blogStyle, $blogSidebarYesNo, $blogSidebarLR, $endStringHome, $endStringBlog ) {\r\n\r\n        var home = $home;\r\n        var blogYesNo = $blogYesNo;\r\n        var blogDarkLight = $blogDarkLight;\r\n        var blogStyle = $blogStyle;\r\n        var blogSidebarYesNo = $blogSidebarYesNo;\r\n        var blogSidebarLR = $blogSidebarLR;\r\n        var endStringHome = $endStringHome;\r\n        var endStringBlog = $endStringBlog;\r\n\r\n        if ( home == 'hero-image-light' ) {\r\n            endStringHome = 'index.html <br>';\r\n        } else if ( home == 'video-light' ) {\r\n            endStringHome = 'index-video.html <br>';\r\n        } else if ( home == 'yt-video-light' ) {\r\n            endStringHome = 'index-yt-video.html <br>';\r\n        } else if ( home == 'hero-image-dark' ) {\r\n            endStringHome = 'dark-index.html <br>';\r\n        } else if ( home == 'video-dark' ) {\r\n            endStringHome = 'dark-index-video.html <br>';\r\n        } else { \/\/ ( home == 'yt-video-dark' )\r\n            endStringHome = 'dark-index-yt-video.html <br>';\r\n        } \r\n\r\n\r\n        if ( blogYesNo == 'yes' ) {\r\n\r\n            if ( blogDarkLight == 'light' ) {\r\n\r\n                if ( blogStyle == 'magazine' ) {\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'blog-magazine-sidebar-right.html <br> '+\r\n                                            'single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'blog-magazine-sidebar-left.html <br> '+\r\n                                            'single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'blog-magazine-no-sidebar.html <br> '+\r\n                                        'single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                } else if ( blogStyle == 'casual' ) {\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'blog-casual-sidebar-right.html <br> '+\r\n                                            'single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'blog-casual-sidebar-left.html <br> '+\r\n                                            'single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'blog-casual-no-sidebar.html <br> '+\r\n                                        'single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                } else { \/\/ blogStyle == 'classic'\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'blog-classic-sidebar-right.html <br> '+\r\n                                            'single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'blog-classic-sidebar-left.html <br> '+\r\n                                            'single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'blog-classic-no-sidebar.html <br> '+\r\n                                        'single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                }\r\n\r\n            } else { \/\/blogDarkLight == 'dark'\r\n\r\n                if ( blogStyle == 'magazine' ) {\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'dark-blog-magazine-sidebar-right.html <br> '+\r\n                                            'dark-single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'dark-blog-magazine-sidebar-left.html <br> '+\r\n                                            'dark-single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'dark-blog-magazine-no-sidebar.html <br> '+\r\n                                        'dark-single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                } else if ( blogStyle == 'casual' ) {\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'dark-blog-casual-sidebar-right.html <br> '+\r\n                                            'dark-single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'dark-blog-casual-sidebar-left.html <br> '+\r\n                                            'dark-single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'dark-blog-casual-no-sidebar.html <br> '+\r\n                                        'dark-single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                } else { \/\/ blogStyle == 'classic'\r\n\r\n                    if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n                        if ( blogSidebarLR == 'right' ) {\r\n\r\n                            endStringBlog = 'dark-blog-classic-sidebar-right.html <br> '+\r\n                                            'dark-single-sidebar-right.html <br> ';\r\n\r\n                        } else { \/\/ blogSidebarLR == 'left'\r\n\r\n                            endStringBlog = 'dark-blog-classic-sidebar-left.html <br> '+\r\n                                            'dark-single-sidebar-left.html <br> ';\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        \/\/ blog no sidebar\r\n                        endStringBlog = 'dark-blog-classic-no-sidebar.html <br> '+\r\n                                        'dark-single-no-sidebar.html <br> ';\r\n                        \r\n                    }\r\n\r\n                }\r\n\r\n            }\r\n\r\n        }\r\n\r\n        return endStringHome + endStringBlog;\r\n\r\n    }\r\n\r\n    $('.pc-1 span.th-home-hero-image-light').click(function() {\r\n        home = 'hero-image-light';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    $('.pc-1 span.th-home-video-light').click(function() {\r\n        home = 'video-light';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    $('.pc-1 span.th-home-yt-video-light').click(function() {\r\n        home = 'yt-video-light';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    $('.pc-1 span.th-home-hero-image-dark').click(function() {\r\n        home = 'hero-image-dark';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    $('.pc-1 span.th-home-video-dark').click(function() {\r\n        home = 'video-dark';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    $('.pc-1 span.th-home-home-yt-video-dark').click(function() {\r\n        home = 'yt-video-dark';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-1').addClass('woken');\r\n    });\r\n    \r\n    \/\/ NO BLOG\r\n\r\n    $('.pc-2 span.th-blog-no').click(function() {\r\n        $(this).parent().closest('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-theme-helper').find('.pa-th-result').addClass('prikazan-rezultat');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        insertStrings(finalString);\r\n        $('span.thp-2').addClass('woken');\r\n        $('span.thp-3').addClass('woken');\r\n        $('span.thp-4').addClass('woken');\r\n        $('span.thp-5').addClass('woken');\r\n        $('span.thp-6').addClass('woken');\r\n    });\r\n\r\n    \/\/ YES BLOG\r\n\r\n    $('.pc-2 span.th-blog-yes').click(function() {\r\n        blogYesNo = 'yes';\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n        finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n        $('span.thp-2').addClass('woken');\r\n    });\r\n\r\n    \/\/ if ( blogYesNo == 'yes' ) {\r\n\r\n        \/\/ DARK OR LIGHT BLOG\r\n\r\n        \/\/ DARK BLOG\r\n\r\n        $('.pc-3 span.th-blog-ld-light').click(function() {\r\n            blogDarkLight = 'light';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-3').addClass('woken');\r\n        });\r\n\r\n        \/\/ DARK BLOG\r\n\r\n        $('.pc-3 span.th-blog-ld-dark').click(function() {\r\n            blogDarkLight = 'dark';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-3').addClass('woken');\r\n        });\r\n\r\n\r\n\r\n        \/\/ BLOG STYLE\r\n\r\n        \/\/ MAGAZINE BLOG\r\n\r\n        $('.pc-4 span.th-bs-magazine').click(function() {\r\n            blogStyle = 'magazine';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-4').addClass('woken');\r\n        });\r\n\r\n        \/\/ CASUAL BLOG\r\n\r\n        $('.pc-4 span.th-bs-casual').click(function() {\r\n            blogStyle = 'casual';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-4').addClass('woken');\r\n        });\r\n\r\n        \/\/ CLASSIC BLOG\r\n\r\n        $('.pc-4 span.th-bs-classic').click(function() {\r\n            blogStyle = 'classic';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-4').addClass('woken');\r\n        });\r\n\r\n\r\n\r\n        \/\/ BLOG SIDEBAR YES NO\r\n\r\n        \/\/ YES SIDEBAR\r\n\r\n        $('.pc-5 span.blog-side-yes').click(function() {\r\n            blogSidebarYesNo = 'yes';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-choice').next('.pa-choice').addClass('otvoren');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            $('span.thp-5').addClass('woken');\r\n        });\r\n\r\n        \/\/ NO SIDEBAR\r\n\r\n        $('.pc-5 span.blog-side-no').click(function() {\r\n            blogSidebarYesNo = 'no';\r\n            $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n            $(this).closest('.pa-theme-helper').find('.pa-th-result').addClass('prikazan-rezultat');\r\n            finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n            insertStrings(finalString);\r\n            $('span.thp-5').addClass('woken');\r\n            $('span.thp-6').addClass('woken');\r\n        });\r\n\r\n\r\n        \/\/ if ( blogSidebarYesNo == 'yes' ) {\r\n\r\n            \/\/ BLOG SIDEBAR LEFT\/RIGHT\r\n\r\n            \/\/ RIGHT SIDEBAR\r\n\r\n            $('.pc-6 span.blog-side-lr-right').click(function() {\r\n                blogSidebarLR = 'right';\r\n                $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n                $(this).closest('.pa-theme-helper').find('.pa-th-result').addClass('prikazan-rezultat');\r\n                finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n                insertStrings(finalString);\r\n                $('span.thp-6').addClass('woken');\r\n            });\r\n\r\n            \/\/ RIGHT SIDEBAR\r\n\r\n            $('.pc-6 span.blog-side-lr-left').click(function() {\r\n                blogSidebarLR = 'left';\r\n                $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n                $(this).closest('.pa-theme-helper').find('.pa-th-result').addClass('prikazan-rezultat');\r\n                finalString = getEndStrings( home, blogYesNo, blogDarkLight, blogStyle, blogSidebarYesNo, blogSidebarLR, endStringHome, endStringBlog );\r\n                insertStrings(finalString);\r\n                $('span.thp-6').addClass('woken');\r\n            });\r\n\r\n        \/\/ }\r\n\r\n    \/\/ } else { \/\/ if ( blogYesNo == 'no' )\r\n\r\n        \/\/ endStringBlog = '';\r\n\r\n    \/\/ }\r\n\r\n    $('.pa-th-reset').click(function() {\r\n        $(this).closest('.elementor-widget-html').find('.pa-th-result').removeClass('prikazan-rezultat');\r\n        $(this).closest('.pa-theme-helper').find('.pa-choice').removeClass('otvoren');\r\n        $(this).closest('.pa-theme-helper').find('.pc-1').addClass('otvoren');\r\n        finalString = '';\r\n        home = 'hero-image-light';\r\n        blogYesNo = 'no';\r\n        blogDarkLight = 'light';\r\n        blogStyle = 'magazine';\r\n        blogSidebarYesNo = 'yes';\r\n        blogSidebarLR = 'right';\r\n        endStringHome = 'You haven\\'t selected the home properly';\r\n        endStringBlog = '';\r\n        $('span.thp-1').removeClass('woken');\r\n        $('span.thp-2').removeClass('woken');\r\n        $('span.thp-3').removeClass('woken');\r\n        $('span.thp-4').removeClass('woken');\r\n        $('span.thp-5').removeClass('woken');\r\n        $('span.thp-6').removeClass('woken');\r\n    });\r\n\r\n    \/\/ END CODE\r\n\r\n});\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75bd1ac pa-no-wizard exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"75bd1ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>2. Choose a homepage<\/strong><\/h3><p>NOTE: If you used the wizard and got and deleted your files you can skip to <a href=\"#html-structure\">HTML Structure<\/a>.<\/p><p>When you choose the homepage, you can delete the rest of the homepage files from this list below (to preview, open any HTML file in your browser).<\/p><pre>index.html ===============&gt; (Hero Image - Light - Default)<br \/>index-video.html =========&gt; (Hero Video(HTML5) - Light)<br \/>index-yt-video.html ======&gt; (Hero Video YouTube - Light)<br \/>dark-index.html ==========&gt; (Hero Image - Dark)<br \/>dark-index-video.html ====&gt; (Hero Video(HTML5) - Dark)<br \/>dark-index-yt-video.html =&gt; (Hero Video YouTube - Dark)<\/pre><h3><strong>3. Delete JS files you won\u2019t need <\/strong><\/h3><p>Open the \u201cassets\u201d folder and inside it open the \u201cjs\u201d folder.<\/p><p>If you selected a light homepage, delete the \u201cdark\u201d titled .js file and vice versa.<br \/>If you\u2019re not using YouTube homepage, delete the youtube js file.<\/p><pre>page-home.js ======&gt; JS for light homepages<br \/>page-home-dark.js =&gt; JS for dark homepages<br \/>youtube-video.js ==&gt; JS for YouTube video background<\/pre><h3><strong>4. Delete videos you won\u2019t need<\/strong><\/h3><p>Open the \u201cassets\u201d folder and inside it open the \u201cvideo\u201d folder.<\/p><p>If you are using light video (HTML5) homepage, delete the dark video files and vice versa. If you are using YouTube video homepages delete both videos. For the videos you delete, you can delete the .jpg files as well.<\/p><pre>particle-video-dark.mp4 ===&gt; Video for index-video.html<br \/>particle-video-light.mp4 ==&gt; Video for index-video-dark.html<\/pre><h3><strong>5. Delete Blog HTML files you won&#8217;t need<\/strong><\/h3><h5>If you will NOT use blog, you can delete ALL .html files that start with:<\/h5><ul><li><span style=\"color: #ffffff;\">blog-<\/span>&#8230;html<\/li><li><span style=\"color: #ffffff;\">dark-blog-<\/span>&#8230;html<\/li><li><span style=\"color: #ffffff;\">single<\/span>&#8230;html<\/li><li><span style=\"color: #ffffff;\">dark-single<\/span>&#8230;html<\/li><\/ul><div><span style=\"color: #a7b7bf;\">Also, if NOT using blog, you can also delete the JS and CSS blog files:<\/span><\/div><pre>assets\\js\\page-blog.js<br \/>assets\\js\\page-blog-single-post.js<br \/>assets\\css\\particle-blog.css<\/pre><h5>If you will be using blog<\/h5><p>You will need <span style=\"color: #ffffff;\">one &#8220;blog&#8221; page<\/span> (for the feed) <span style=\"color: #ffffff;\">and one &#8220;single&#8221; page<\/span> (for your individual articles). Based on whether or not you want to use a sidebar (and on which side) and whether you want light or dark Blog (and of which style) version you will select select your two files.<\/p><h6 style=\"padding-left: 40px;\">This is an example of selecting the files:<\/h6><ul><li style=\"list-style-type: none;\"><ul><li style=\"list-style-type: none;\"><ul><li>Do you want a light or a dark blog? ==&gt; <span style=\"color: #ff6600;\">DARK<\/span><\/li><li>What style (Magazine, Casual or Classic)? ==&gt; <span style=\"color: #00a2ff;\">CLASSIC<\/span><\/li><li>Sidebar Position (left, right, no-sidebar)&gt; ==&gt; <span style=\"color: #00ff00;\">LEFT<\/span><\/li><\/ul><\/li><\/ul><\/li><\/ul><h6 style=\"padding-left: 40px;\">Based on these choices, I would keep:<\/h6><ul><li style=\"list-style-type: none;\"><ul><li style=\"list-style-type: none;\"><ul><li><span style=\"color: #ff6600;\">dark<\/span>-blog-<span style=\"color: #00a2ff;\">classic<\/span>&#8211;<span style=\"color: #00ff00;\">sidebar-left<\/span>.html<\/li><li><span style=\"color: #ff6600;\">dark<\/span>-single-<span style=\"color: #00ff00;\">sidebar-left<\/span>.html<\/li><\/ul><\/li><\/ul><\/li><\/ul><p>Here is the entire list of blog pages:<\/p><pre>-----<br \/>Blog page (pick one, delete the rest)<br \/>-----<br \/>blog-casual-no-sidebar.html<br \/>blog-casual-sidebar-left.html<br \/>blog-casual-sidebar-right.html<br \/>blog-classic-no-sidebar.html<br \/>blog-classic-sidebar-left.html<br \/>blog-classic-sidebar-right.html<br \/>blog-magazine-no-sidebar.html<br \/>blog-magazine-sidebar-left.html<br \/>blog-magazine-sidebar-right.html<br \/>dark-blog-casual-no-sidebar.html<br \/>dark-blog-casual-sidebar-left.html<br \/>dark-blog-casual-sidebar-right.html<br \/>dark-blog-classic-no-sidebar.html<br \/>dark-blog-classic-sidebar-left.html<br \/>dark-blog-classic-sidebar-right.html<br \/>dark-blog-magazine-no-sidebar.html<br \/>dark-blog-magazine-sidebar-left.html<br \/>dark-blog-magazine-sidebar-right.html<br \/>-----<br \/>Single page (pick one, delete the rest)<br \/>-----<br \/>single-no-sidebar.html<br \/>single-sidebar-left.html<br \/>single-sidebar-right.html<br \/>dark-single-no-sidebar.html<br \/>dark-single-sidebar-left.html<br \/>dark-single-sidebar-right.html<\/pre><p>Note: All blog pages have the ability to change the style and dark mode so no matter which two pages you select you will be able to let your users change it live to their liking (see Blog Feed Styler and Dark Mode Switch).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e74c885 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"e74c885\" data-element_type=\"widget\" id=\"html-structure\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa74ca6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"fa74ca6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML Structure<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a68b19b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"a68b19b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f80c739 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"f80c739\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This theme consists of five starting pages:<\/p><ul><li>Homepage<\/li><li>Inner Service page (service-item.html &#8211; template for creating inner pages for services)<\/li><li>Inner Portfolio page (portfolio-item.html template for creating inner pages for projects)<\/li><li>Blog page (template for creating blog feed pages)<\/li><li>Article (single) page (template for creating inner pages for blog articles)<\/li><\/ul><div><span style=\"color: #a7b7bf;\">\u00a0<\/span><\/div><h3><strong>Homepage<\/strong><\/h3><p>The main page, as well as other pages, is structured into sections, which are marked with large HTML comments, so you can navigate through the code easily.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5f51d3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a5f51d3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/html-structure-homepage-p4fcngrzhheblu6jfn7ls4gew2hz9petbmdq25ziw8.jpg\" title=\"\" alt=\"Depicting code structure of the Homepage\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1b4401 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"f1b4401\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Inner Service Page<\/strong><\/h3><p>The &#8220;Service&#8221; section from the homepage links (if you want) to the &#8220;inner&#8221; pages for each service. Duplicate the service-item.html page for as much services as you need. Particle theme&#8217;s design has a designated services section for six services with but you can create as many service pages as you&#8217;d like and link to them from wherever you like.<\/p><h3><strong>Inner Portfolio Project Page<\/strong><\/h3><p>The &#8220;Portfolio&#8221; section from the homepage links\u00a0 to the &#8220;inner&#8221; pages for each project. Duplicate the portfolio-item.html page for as much projects as you need. Particle theme&#8217;s design has a designated Portfolio section for four projects but you can create as many project pages as you&#8217;d like and link to them from wherever you like.<\/p><h3><strong>Blog Page<\/strong><\/h3><p>Blog page is comprised of 4 main sections:<\/p><ul><li>Hero section<\/li><li>Posts Ticker and Search<\/li><li>Featured section (pa-blog-featured)<\/li><li>Main content (Blog Feed and Sidebar)<ul><li>Blog Feed column (pa-feed-col)<\/li><li>Blog Sidebar column (if used &#8211; aside tag)<\/li><\/ul><\/li><\/ul><h5>\u00a0<\/h5><h5>Blog Page &gt; Posts Ticker and Search<\/h5><p>&#8220;Blog Posts ticker&#8221;\u00a0 is the mini slider where you can put headings for the latest posts and link to articles from there.\u00a0 NOTE: Search function does not work. After all, this is a HTML template. Search design is there in case you integrate your own search functionality.<\/p><h5>Blog Page &gt; Featured Section<\/h5><p>Featured section contains 3 differently styled, accented articles before the feed starts.<\/p><h5>Blog Page &gt; Article<\/h5><p>Each article on the blog page (including the featured ones) is marked with &#8220;Article&#8221; comment and main blog feed articles are wrapped with &#8220;Articles Wrapper&#8221;.<\/p><h5>Blog Page &gt; Blog Feed Styler<\/h5><p>The Blog Feed Styler is a cool option that lets your users restyle the blog on the live site. Explained in more detail later in the documentation.<\/p><h5>Blog Page &gt; Sidebar and Widgets<\/h5><p>Sidebar contains useful widgets such as in real blog. NOTE: Search and share do not work. Related posts,\u00a0 tags, categories, calendar etc. are static. If you want search or share, you will need to integrate this functionality yourself. After all, this is a static HTML template, but we provide the design to take it further. Related posts, tags, categories, calendar etc. can work of course, after you create the content and link the demo content properly to your actual content. Each widget in the sidebar is marked with &#8220;Widget&#8221; comment. Subscribe form does work, but more on forms later.<\/p><h5>Blog Page &gt; Pagination<\/h5><p>At the bottom of the Blog Feed column, you can find the &#8220;Pagination&#8221; navigation which you can use to create said navigation in case your blog has more than one page.<\/p><h3><strong>Article (single) Page<\/strong><\/h3><p>Each article from the Blog links to its &#8220;inner&#8221; page, called &#8220;Single&#8221;. Duplicate the &#8220;single&#8221; .html file you saved for as many articles as you want. Particle theme&#8217;s Blog design holds nine articles per blog page plus three featured articles (and the posts ticker with headings also linking to articles). Specific section worth mentioning on the &#8220;Single&#8221; page template is the &#8220;Post Bottom Details&#8221; which contain meta information about the post and its author. There is also the &#8220;Related Posts&#8221; section with a carousel of posts (owl-carousel), where each post is wrapped in the &#8220;pa-related-item&#8221; CSS class.<\/p><h3><strong>Ads<\/strong><\/h3><p>There are designated zones for ads throughout the blog and single pages. These zones are marked with &#8220;pa-ads&#8221; CSS class.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5853a6b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"5853a6b\" data-element_type=\"widget\" id=\"css-files-and-structure\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5eb50f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"d5eb50f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Files and Structure<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fee514 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"2fee514\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca32553 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ca32553\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Besides the 3rd party libraries CSS files, Particle has 3 main CSS files located in &#8220;assets\\css\\&#8221;. These are:<\/p><ul><li>particle-theme.css<\/li><li>particle-colors.css<\/li><li>particle-blog.css<\/li><\/ul><p>As with the main HTML File, CSS is organized in sections which are also marked with large comments for easy navigation. CSS file is structured to follow the sections order of the HTML file, so for each section of the main page, you have corresponding sections in the CSS but with one key difference &#8211; the beginning of the CSS file contains general rules (such as structure, fonts, forms, buttons&#8230;) and reusable classes (such as .pa-image-back) as well as priority code and navigation styling. At the end of the file (or a major\/complex section), there are media queries, and for each viewport width, all the code follows the same principle, the sections that come in first in main HTML page, also come first in media queries. particle-blog.css also has &#8220;Dark Mode&#8221; colors right at the beginning of the file, for easy access and tweaking. Most of Particle&#8217;s CSS classes start with &#8220;.pa-&#8221; so you could differentiate them from e.g. Bootstrap&#8217;s classes or classes used by 3rd party scripts.<\/p><p>We are using some of the latest features of CSS, but all of the main things you will want to customize are very straight forward, as you will see later in the documentation.<\/p><p>Here is an example of the CSS code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bdcba5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"1bdcba5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/css-code-p4fk45wux2p9rm8npou5dion1agwi7uwxtf3a8ftlu.png\" title=\"\" alt=\"Depiction of CSS code structure\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-730e669 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"730e669\" data-element_type=\"widget\" id=\"javascript\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ce3fb6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"3ce3fb6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b64254 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"7b64254\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b023853 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"b023853\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Other than JS libraries (explained later), the theme includes several JavaScript files, all located in &#8220;assets\\js\\&#8221;. The files are:<\/p><ul><li>particle-theme.js (Main Theme File)<\/li><li>page-blog.js (used on Blog page)<\/li><li>page-blog-single-post. (used on &#8220;Single&#8221; blog page)<\/li><li>page-home.js (used on light homepages)<\/li><li>page-home-dark.js (used on dark homepages<\/li><li>page-portfolio-item.js (used on portfolio item page)<\/li><li>page-service-item.js (used on service item page)<\/li><li>youtube-video.js (used for YouTube video homepages)<\/li><\/ul><p>If you want to add your own custom code, you will probably want to add it to particle-theme.js as this is the main theme file.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f62705a exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"f62705a\" data-element_type=\"widget\" id=\"third-party-libraries\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1ba827 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"e1ba827\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Third Party Libraries<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ced6784 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"ced6784\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0579cac exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0579cac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Included with Particle comes third party content including CSS and JS as well as Premium forms solution.&nbsp;&nbsp;<span style=\"font-weight: var( --e-global-typography-text-font-weight ); font-size: 1em;\">All third party content is located in &#8220;assets\\vendor\\&#8221; folder. Each folder inside that folder is named by the what it contains. These 3rd party libraries are included:<\/span><\/p>\n<ul>\n<li>Animate<\/li>\n<li>Bootstrap 4<\/li>\n<li>CounterUp<\/li>\n<li>jQuery<\/li>\n<li>Offcanvas Nav<\/li>\n<li>Owl Carousel<\/li>\n<li>Parallax by PixelCog<\/li>\n<li>Particles<\/li>\n<li>Simple Forms<\/li>\n<li>Typed<\/li>\n<li>Waypoints<\/li>\n<li>WOW<\/li>\n<\/ul>\n<p>If you know how to code, you can visit documentation pages for each of these libraries if you wish to use them for your own custom work. The main customization specific for Particle Theme is explained below, under Customization.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f02bae exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"2f02bae\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29f0592 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"29f0592\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Customization<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c289809 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"c289809\" data-element_type=\"widget\" id=\"colors\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f701a43 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"f701a43\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Colors<\/strong><\/h3><p>Probably the first thing you want to do is to change the main colors to suit your brand. All CSS code for the main colors is located in the &#8220;assets\\css\\particle-colors.css&#8221; file, so the customization can be done in one file.<\/p><p>NOTE: This file contains the Accent Colors, these are the 6 colors applied to important elements such as buttons, links, gradients, headings. On our demo, these colors are purple and neon-like greens and blues.<\/p><p>We made this customization incredibly easy, as you probably noticed on our demo page. You can choose the desired colors with our color picker, and see it in real time. When you are satisfied with the look, click on the &#8220;GET CSS&#8221; button, then on the &#8220;Copy The Code&#8221; and paste the copied code over the existing code in &#8220;assets\\css\\particle-colors.css&#8221; file.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ebd0c7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"4ebd0c7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/copy-colors.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c37ba00 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"c37ba00\" data-element_type=\"widget\" id=\"logos\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1acef4b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1acef4b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Logos<\/strong><\/h3><p>There are two logo images used for menu and an additional &#8220;hero logo&#8221; image in case you are using a light homepage. To prepare your logos, do the following:<\/p><ul><li>prepare the &#8220;logo-normal.png&#8221; file (258px width, 100px height)<\/li><li>prepare the &#8220;logo-mobile.png&#8221; file (120px width, 66px height)<\/li><li>(if using light homepage) prepare the &#8220;hero-logo.png&#8221; file (928px width, 271px height)<\/li><\/ul><p>When done, you can overwrite the existing logo files in &#8220;assets\\images&#8221;<span style=\"color: #ffffff;\"><strong>\u00a0Make sure you follow these dimensions for the best aesthetic results. And your logo should be white or very bright.<\/strong><\/span><\/p><p>There are helpful AI files in &#8220;Mockups\\AI&#8221; folder (inside your main download folder) for those of you using Adobe Illustrator which will let you create the same exact logo effect as on the hero section of light homepages. For those of you not using Illustrator, the font used in logo design is Prometo Bold, size 261pt.<\/p><p>Finally, you can use a .png compression website like <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">tinypng.com<\/a> to drastically reduce .png file size (we&#8217;ve loved this website, ever since we found it). This is helpful for the hero logo, which is pretty large.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e48b64 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"1e48b64\" data-element_type=\"widget\" id=\"psd-ai-mockups\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9f0e58 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e9f0e58\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>PSD and AI mockups<\/strong><\/h3><p>As a bonus we included our own Premium PSD and AI files that are used in this theme. You can find them in the &#8220;Mockups&#8221; folder. There are two separate folders with AI and PSD mockups.<\/p><p>In PSD files, look for the &#8220;Your Design Here&#8221; or &#8220;PUT YOUR DESIGN HERE&#8221; object in the layers, double-click it, then paste your image in the new tab&#8217;s canvas area, press &#8220;X&#8221; to close the .psb tab and when prompted about saving click &#8220;Yes&#8221;. Then export your file using CRTL+ALT+SHIFT+S. Additionally, depending on whether you&#8217;re using light or dark theme, on some mockups you can change the background to dark (in the layers panel) by making the light background invisible.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-193b1e5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"193b1e5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/psd-setup-p4oq8842uv2dgbfxhn8xam5m75ix3sw2rleamau43o.jpg\" title=\"\" alt=\"Showing where to double-click to insert your own artwork into our PSD mockup.\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a375ff exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"1a375ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In AI files, simply follow the instructions inside the file.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21fcaa5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"21fcaa5\" data-element_type=\"widget\" id=\"typed-js\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7917fb3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"7917fb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Typed JS<\/strong><\/h3>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-948fa0a exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"948fa0a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"600\" height=\"75\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/typed.gif\" class=\"attachment-large size-large wp-image-461\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7f0b85 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"b7f0b85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Typed.js controls, you guessed it, the headings with the &#8220;typed&#8221; style effect. This is pretty easy to do, you just need to go to &#8220;assets\\js&#8221; folder and enter your own text in JS files for each page where typed.js was used (the filenames start with &#8220;page-&#8220;):<\/p><ul><li>For homepage, open &#8220;page-home.js&#8221; or &#8220;page-home-dark.js&#8221; depending on which home you used<\/li><li>For Blog, open &#8220;page-blog.js&#8221;<\/li><li>For portfolio item inner pages, open &#8220;page-portfolio-item.js&#8221;, and<\/li><li>For service item inner pages, open &#8220;page-service-item.js&#8221;<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-205e11e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"205e11e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/typed-js-code-chunk-p4n03rqesves4uq4qe93mlz7u16506w0nh1quacq4c.jpg\" title=\"\" alt=\"Used to show a chunk of code containing example of typed.js script\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec7a2cd exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"ec7a2cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As shown in the image above, you need to find the line of code which contains &#8220;.typed({&#8220;, and then, inside the strings option replace our demo sentences with your own. You can use as many sentences as you&#8217;d like, whether it&#8217;s more or less than three. Finally, see the &#8220;startDelay&#8221; option. If you remove page preloaders we suggest commenting out that line with \/\/ in front of that line so your text doesn&#8217;t wait for 3.2 seconds before it starts the effect.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be94b2e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"be94b2e\" data-element_type=\"widget\" id=\"skill-bars\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a77e540 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"a77e540\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Skill bars<\/strong><\/h3><p>You have already set up the colors, the only thing left is to enter the percentages and labels to your skill bars.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98e87a6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"98e87a6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/skill-bars-p4n15ok2pyos3dd9css2449vpqjzyb492ae1of3y76.jpg\" title=\"\" alt=\"Showing how to edit skill bars info in the code\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f9d0aa exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"0f9d0aa\" data-element_type=\"widget\" id=\"videos\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3e8fbf exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e3e8fbf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Video backgrounds<\/strong><\/h3><p>There are two type of video backgrounds available. So there are two different ways of customizing them. Before we continue do explain how to customize videos here are pros, cons and tips for each type of video background.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-14b676f elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"14b676f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-15e6bd2 exad-glass-effect-no exad-sticky-section-no\" data-id=\"15e6bd2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0cab3d2 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0cab3d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>HTML5 Video Pros<\/strong><\/h5><p>Much more reliable to load since you depend on HTML international standards rather than Google, which is a private company and has on numerous occasions changed the API which broke YT video backgrounds.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-907fe29 exad-glass-effect-no exad-sticky-section-no\" data-id=\"907fe29\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e9c2e6f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e9c2e6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>HTML5 Video Cons<\/strong><\/h5><p>Video must be loaded fully in order to start. Large videos will choke your page load and make your website fail to pass speed tests.<br \/>Quality must be lowered and length of the video should be as little as possible.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-52f96aa exad-glass-effect-no exad-sticky-section-no\" data-id=\"52f96aa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0f3ca5f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0f3ca5f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>HTML5 Video Tips<\/strong><\/h5><p>We suggest using a very short, but beautiful, video with small dimensions and to use a pattern overlay (dotty patterns are know to achieve an effect of a better quality image, which is perfect for covering pixelation).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-f0395b6 elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"f0395b6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-c78a84c exad-glass-effect-no exad-sticky-section-no\" data-id=\"c78a84c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ba578b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"6ba578b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>YouTube Video Pros<\/strong><\/h5><p>You have the worlds leading video algorithm which will load high quality long video blazing fast, and you don&#8217;t burden your servers (hosting) with serving large files. In other words, saves money, better for long and HQ videos.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-a204081 exad-glass-effect-no exad-sticky-section-no\" data-id=\"a204081\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2d99cd exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"a2d99cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>YouTube Video Cons<\/strong><\/h5><p>Google will surely change the API in the future making it more possible to break your site (or one you done for a client). These videos behave inconsistently across mobile devices and you can never bee entirely sure that your video will work everywhere.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-61d7eec exad-glass-effect-no exad-sticky-section-no\" data-id=\"61d7eec\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fbffbe7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"fbffbe7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5><strong>YouTube Video Tips<\/strong><\/h5><p>We suggest using YouTube video backgrounds for special occasions, where longer video background is more important than being compatible with all devices out there.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-0972e57 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"0972e57\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: #a7b7bf; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1em;\">To sum up, video backgrounds are exactly what they&#8217;re called, backgrounds! You should use them to emphasize your already beautiful website and you shouldn&#8217;t plan on your users watching a 10 minute video when it&#8217;s used as a background on your homepage. For that purpose exist normal videos with play controls, volume etc. And you should be mindful about the fact that video standards change and you can never be sure your videos will work 100% of the time across all devices, especially mobile.<\/span><\/p><h3><strong>HTML5 Self-hosted video backgrounds<\/strong><\/h3><p>You will need to prepare a .mp4 file and a .jpg &#8220;poster&#8221; file, which will be served as a backup. TIP: make your video short, in small dimensions and use a dotty pattern overlay (you have a dedicated pattern-overlay div already in code). When your files are ready, place them in the &#8220;assets\/videos\/&#8221; folder and update the filenames in the HTML file, shown below.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-358f59e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"358f59e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/video-html5-p4n2b65knvcijnwbag3mii4i5dv0w244079vrpzpo2.jpg\" title=\"\" alt=\"Showing how to enter your video and image info in the HTML code\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c0bb31 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3c0bb31\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>YouTube video backgrounds<\/strong><\/h3><p>Upload your video to YouTube or, if you already did, copy the video ID, this is the 11 character code located in the URL of every video, starting after &#8220;v=&#8221; characters.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6613fe5 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"6613fe5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/video-id-p4n2jktkz527u4tuai1vk3wmdz6tr2zhysdl7k0wyg.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-715b20b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"715b20b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Open the HTML file and paste in your copied ID over the existing one for the data-youtube-video-id attribute, as shown below.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b763ebf exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"b763ebf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/youtube-video-id-p4n2q6mtp57kiizlnk7ll6y3w2oc6xcckahyvv123c.jpg\" title=\"\" alt=\"Showing how to insert YouTube video ID in our HTML code\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6becde1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"6becde1\" data-element_type=\"widget\" id=\"page-transitions-and-preloader\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b50c74d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"b50c74d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Page transitions and Preloader<\/strong><\/h3><p>By default, Particle has page transitions effect a page loading animation known as page preloader integrated.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7696fd7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"7696fd7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"540\" height=\"304\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/preloader.gif\" class=\"attachment-large size-large wp-image-607\" alt=\"Animation showing page transitions and preloader effects\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7edc54 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"d7edc54\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you want to remove these effects you need to:<\/p><ul><li>remove divs used for overlay on the HTML pages<\/li><li>remove HTML inserting code from particle-theme.js file<\/li><li>remove the typed text effect delay (optional but worth it)<\/li><\/ul><p>Firstly, on your HTML pages, find the comment marked &#8220;Page Transitions&#8221; at the very beginning of the body and remove the two divs below:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-944dc6e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"944dc6e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/remove-transitions-and-loader-step-1-p4on5ws5eue0z8eotnmjpr5ul8378p8tc50y6tks8o.jpg\" title=\"\" alt=\"Showing where in our code are the divs for page transitions that need to be removed.\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6319fc exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"c6319fc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Second, open the &#8220;assets\\js&#8221; folder and then open the particle-theme.js file. Now delete (or comment-out)\u00a0 the code between comments marked with\u00a0 \/\/ &#8212; START: Page Transitions and Preloader &#8212; \/\/ and \/\/ &#8212; END: Page Transitions and Preloader &#8212; \/\/\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df2db97 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"df2db97\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/preloader-remove-from-js-p4onjqygnmyu5b3duddyf9su8cbtjttqt5wwjksb6q.jpg\" title=\"\" alt=\"Showing how to remove page transitions and preloader effect code from the main js file\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92911de exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"92911de\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Finally, while still inside the &#8220;assets\/js&#8221; folder, you can open every .js file that starts with &#8220;page-&#8220;, and remove (or comment-out) the line that delays the typed text effect as shown below:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a94c75b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a94c75b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/elementor\/thumbs\/preloader-remove-from-page-js-p4onvf4fzyt2lbghrbl9g4ssqsx0mzic3nonjxujwu.jpg\" title=\"\" alt=\"Showing how to remove preloader delaying code from js files for each page\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e27e2c1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"e27e2c1\" data-element_type=\"widget\" id=\"dark-mode\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-894fcd7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"894fcd7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dark Mode<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54e7f0d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"54e7f0d\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a54cacf exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"a54cacf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"210\" height=\"54\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/dark-mode-button-presentation.png\" class=\"attachment-large size-large wp-image-423\" alt=\"Depicting the dark mode switch button\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42c7fb6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"42c7fb6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"304\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/dark-mode-switching.gif\" class=\"attachment-large size-large wp-image-422\" alt=\"Animation depicting changing page design from light to dark mode\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5441d8d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"5441d8d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The theme includes a &#8220;Dark-Mode Switch&#8221;, a custom built menu button that changes the theme from light to dark and vice versa. Dark mode works on Blog pages.\u00a0 It works technically on all pages but Blog has been specifically restyled for this type of switching. How it works is simple, when clicking on the dark mode switch, body will receive &#8220;pa-dark-mode&#8221; class. To add the dark mode switch to the menu simply add this code (it&#8217;s already added where needed across the theme) after the &#8220;Regular Menu Items End&#8221; comment, like so:<\/p><pre>&lt;!-- Regular Menu Items End --&gt;<br \/><br \/>&lt;!-- Light Mode Switch --&gt;<br \/>&lt;li data-nav-custom-content class=\"custom-content menu-light-mode-panel\"&gt; <br \/>\u00a0 \u00a0 &lt;div class=\"light-mode-panel\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"lm-switch-container\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"lm-switch\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"lm-switch-back-light\"&gt;&lt;\/div&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"lm-switch-back-dark\"&gt;&lt;\/div&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"lm-button go-light\"&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"lm-button go-dark\"&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"lm-indicator light-on\"&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"lm-indicator dark-on\"&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/>\u00a0 \u00a0 &lt;\/div&gt;<br \/>&lt;\/li&gt;<\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db27447 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"db27447\" data-element_type=\"widget\" id=\"blog-feed-styler\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d1ede3 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"0d1ede3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Blog Feed Styler<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20ae645 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"20ae645\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca76699 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"ca76699\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"304\" src=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-content\/uploads\/2021\/03\/feed-style-switching.gif\" class=\"attachment-large size-large wp-image-434\" alt=\"Animation showing how blog feed changes style after using the Blog Feed Style Switcher UI\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c82a60 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"2c82a60\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The Blog Feed Styler is a cool option that lets your users restyle the blog on the live site, i.e. they can switch between Magazine style, Casual style and Classic style in one click. Blog styler UI is present on the Blog Page(s). If you don\u2019t want this functionality, simply remove the section marked with \u201cFeed Style Switcher\u201d comment from the Blog Page:<\/p><pre>&lt;!-- Feed Style Switcher<br \/>================================================== --&gt;<br \/>&lt;div class=\"container pa-supercontainer pa-feed-styler-container\"&gt;<br \/>\u00a0 \u00a0 &lt;div class=\"row\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"col text-right\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"pa-feed-styler\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"pa-feed-styler pa-fs-magazine active\"&gt;&lt;i class=\"fa fa-th\"&gt;&lt;\/i&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"pa-feed-styler pa-fs-stretched \"&gt;&lt;i class=\"fa fa-align-justify\"&gt;&lt;\/i&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;span class=\"pa-feed-styler pa-fs-classic \"&gt;&lt;i class=\"fa fa-square\"&gt;&lt;\/i&gt;&lt;\/span&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/>\u00a0 \u00a0 &lt;\/div&gt;<br \/>&lt;\/div&gt;<br \/>&lt;!-- \/.pa-feed-styler-container --&gt;<\/pre><p><!-- \/.pa-feed-styler-container --><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a026348 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"a026348\" data-element_type=\"widget\" id=\"html-meta-tags\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96801e7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"96801e7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SEO &amp; HTML meta tags<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5eb39f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"d5eb39f\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3de3b9e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"3de3b9e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Additionally to following HTML5 standards and having semantic code, the theme&#8217;s HTML files are already populated with useful HTML Meta tags. You should update or delete these:<\/p><ul><li>meta name=&#8221;description&#8221; &#8211; Description of your page<\/li><li>meta name=&#8221;author&#8221; &#8211; Author of the page (e.g. your company)<\/li><li>meta name=&#8221;keywords&#8221; &#8211; for SEO purposes, write up to 15 keywords, separated by commas<\/li><\/ul><p>Facebook related meta tags (og tags), used when sharing the page on Facebook, to load the pretty image and text instead of a generic one:<\/p><ul><li>meta property=&#8221;og:title&#8221; &#8211; Facebook share title<\/li><li>meta property=&#8221;og:description&#8221; &#8211; Facebook share description<\/li><li>meta property=&#8221;og:image&#8221; &#8211; Facebook share image (suggested dimensions 1200(w) by 630(h) pixels, since 2021.)<\/li><li>meta property=&#8221;og:site_name&#8221; &#8211; Facebook share &#8220;Site&#8221; (e.g. SkilltechWebDesign.com)<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb71d64 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"cb71d64\" data-element_type=\"widget\" id=\"nav-menus\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d50eb6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9d50eb6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Navigation Menu<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a27110 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"9a27110\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7c4ca8 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"e7c4ca8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The menu now supports top level items (regular menu) and two levels of sub-menus. In the supplied HTMLs we have provided examples of normal menu items, menu items with sub-menu and menu items with two levels of sub-menus. Here are the examples isolated:<\/p><p>Normal Menu Item:<\/p><pre>&lt;li class=\"nav-item\"&gt;<br \/>\u00a0 \u00a0 &lt;a class=\"nav-link hvr-underline-from-center\" href=\"#\"&gt;Menu Item&lt;\/a&gt;<br \/>&lt;\/li&gt;<\/pre><p>Menu item with a sub-menu:<\/p><pre>&lt;li class=\"nav-item menu-item-has-children\"&gt;<br \/>\u00a0 \u00a0 &lt;a class=\"nav-link hvr-underline-from-center\" href=\"#\"&gt;Menu Item&lt;\/a&gt;<br \/>\u00a0 \u00a0 &lt;ul class=\"pa-submenu-ul\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item\"&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Sub-menu Item&lt;\/a&gt;&lt;\/li&gt;<br \/>\u00a0 \u00a0 &lt;\/ul&gt;<br \/>&lt;\/li&gt;<\/pre><p>Menu item with two levels of sub-menus:<\/p><pre>&lt;li class=\"nav-item menu-item-has-children\"&gt;<br \/>\u00a0 \u00a0 &lt;a class=\"nav-link hvr-underline-from-center\" href=\"#\"&gt;Menu Item&lt;\/a&gt; <br \/>\u00a0 \u00a0 &lt;ul class=\"pa-submenu-ul\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;li class=\"nav-item menu-item-has-children\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;a class=\"nav-link\" href=\"#\"&gt;Sub-menu Item&lt;\/a&gt; <br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;ul class=\"pa-sub-submenu-ul\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;li&gt;&lt;a class=\"nav-link\" href=\"#\"&gt;Sub-sub Menu Item&lt;\/a&gt;&lt;\/li&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/ul&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/li&gt;<br \/>\u00a0 \u00a0 &lt;\/ul&gt;<br \/>&lt;\/li&gt;<\/pre>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d23c2b1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"d23c2b1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5>Drop-down behavior<\/h5><p>In short, we recommend never linking an item that has sub-menu items inside (i.e. if you have a &#8220;Services&#8221; menu item with 5 services as sub-menus but also want to link to &#8220;Services&#8221; section, then put the link to &#8220;Services&#8221; section as the first sub-item and call it &#8220;All services&#8221; as in our example.<\/p><p>And longer explanation, on desktop layout, the first-level drop-downs react &#8220;on hover&#8221; and second levels dropdowns react &#8220;on click&#8221;. On mobile layout, dropdowns can be both linked and unlinked. If you link an item that has sub-items, then clicking it will follow the link URL, and clicking the drop-down arrow on the side will open the drop-down. Our advice is to never link an item which has a drop-down (sub-menus) because a large number of users will click on this item expecting a drop-down to open (indicated by an arrow) and not a lot of users will intuitively click on the arrows.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd0f295 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"bd0f295\" data-element_type=\"widget\" id=\"forms\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f21c7c6 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"f21c7c6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Forms<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99a6d9b exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"99a6d9b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f0be56f exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"f0be56f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>About Particle Forms<\/strong><\/h3><p>We have used Simple Forms premium plugin so you get an additional $15 worth robust solution for your forms. Even though this plugin was created by another team,<span style=\"color: #ffffff;\"><strong> it is important that you follow our instructions, because we&#8217;ve customized the forms specifically for Particle<\/strong><\/span>, making the installation as minimal as possible (and on the other hand limiting the full possibilities of the plugin).<\/p><h3><strong>Form types and locations<\/strong><\/h3><p>There are two types of forms we created: contact forms and subscribe forms. They both contain &#8220;Email&#8221; and &#8220;Name&#8221; fields and contact forms additionally contains the &#8220;Message&#8221; field. The forms are located on:<\/p><ul><li>Homepage(s) &#8211; contact form<\/li><li>Blog page(s) &#8211; subscribe form (excluding pages without sidebars)<\/li><li>&#8220;Single&#8221; page(s) &#8211; subscribe form (excluding pages without sidebars)<\/li><li>Service Item page &#8211; contact form<\/li><li>Portfolio Item page &#8211; contact form<\/li><\/ul><p>All code on the HTML files is already done for you, but you can change the labels (e.g. write labels in your own language). Additionally, we have loaded all the form scripts and styles on existing pages.<\/p><h3><strong>Form setup<\/strong><\/h3><p>NOTE: If on localhost (on your local computer), leave setting up forms for last step because from the moment you turn them on, Google ReCaptcha checks will interfere with JS and in turn make the pages load\u00a0 for 20 seconds. The pages will load normally on live hosting with Google ReCaptcha V3 properly set up.<\/p><ul><li>Firstly find uncomment these scripts and links on your html pages:<pre>&lt;!-- Simple Forms --&gt;<br \/>&lt;!-- &lt;link rel=\"stylesheet\" href=\"assets\/vendor\/simple-forms\/css\/simple-forms-skilltech-mod.css\"&gt; --&gt;<br \/><br \/>&lt;!-- Delivery Form Scripts --&gt;<br \/>&lt;!-- &lt;script src=\"assets\/vendor\/simple-forms\/js\/simple-forms-translations.js\"&gt;&lt;\/script&gt; --&gt;<br \/>&lt;!-- &lt;script src=\"assets\/vendor\/simple-forms\/js\/simple-forms.min.js\"&gt;&lt;\/script&gt; --&gt;<br \/>&lt;!-- &lt;script src=\"assets\/js\/form.js\"&gt;&lt;\/script&gt; --&gt;<\/pre><\/li><li>Open the &#8220;assets\\vendor\\simple-forms&#8221; folder and open the config.php file<\/li><li>Follow instructions inside config.php file (IMPORTANT, create\/use ReCaptcha V3)<\/li><li>TIP: in the SMTP_SETTINGS, SMTP_USER is actually an email from your domain name ( e.g. peter.lee@petersdomain.com ) and SMTP_PASSWORD is the password for that email. So as to not get confused.<\/li><li>Open the &#8220;assets \\js\\&#8221; folder and open form.js file from that folder<\/li><li>Follow the instrunctions inside form.js file (you should literally only enter your ReCaptcha V3 public key here)<\/li><li>Done!<\/li><\/ul><h3><strong><br \/>Form translation<\/strong><\/h3><p>You can create a translation for your language (out of the scope of our support).\u00a0<\/p><ul><li>Open the file translations.php from the &#8220;assets\\vendor\\simple-forms\\&#8221; folder<\/li><li>Look for<span style=\"color: #ffffff;\"> $info_strings[&#8216;en&#8217;]<\/span> and you will see the the English translation<\/li><li>Duplicate everything starting from &#8220;<span style=\"color: #ffffff;\">\/\/ English<\/span>&#8221; to before &#8220;<span style=\"color: #ffffff;\">\/\/ \u0420\u0443\u0441\u0441\u043a\u0438\u0439<\/span> &#8220;<\/li><li>In your duplicate, change the two letter abbreviation to the one for your language<\/li><li>In each line after &#8220;<span style=\"color: #ffffff;\">=&gt;<\/span>&#8220;, change\/translate the text in between single quotation marks<span style=\"color: #ffffff;\"> &#8216; &#8216;<\/span>.<\/li><li>Save the file<\/li><li>Open the form.js file from the &#8220;assets\\js\\&#8221; folder<\/li><li>Look for &#8221; <span style=\"color: #ffffff;\">lang: &#8220;en&#8221;,<\/span> &#8221; and replace &#8220;en&#8221; with your abbreviation<\/li><li>Finally, use your own language on the form (labels and button) on the HTML page<\/li><\/ul><h3><strong><br \/>F<\/strong><strong>orm setup on new page<\/strong><\/h3><p>If you want to add forms on other pages you will need to insert the following:<\/p><p>1. Style link inside the head tag<\/p><pre>&lt;head&gt;<br \/><br \/>... other code ...<br \/><br \/>&lt;!-- Simple Forms --&gt;<br \/>&lt;link rel=\"stylesheet\" href=\"assets\/vendor\/simple-forms\/css\/simple-forms-skilltech-mod.css\"&gt;<br \/><br \/>&lt;\/head&gt;<\/pre><p>2. Form scripts at the end of the body tag<\/p><pre>&lt;body&gt;<br \/><br \/>... scripts at the bottom ...<br \/><br \/>&lt;!-- Delivery Form Scripts --&gt;<br \/>&lt;script src=\"assets\/vendor\/simple-forms\/js\/simple-forms-translations.js\"&gt;&lt;\/script&gt;<br \/>&lt;script src=\"assets\/vendor\/simple-forms\/js\/simple-forms.min.js\"&gt;&lt;\/script&gt;<br \/>&lt;script src=\"assets\/js\/form.js\"&gt;&lt;\/script&gt;<br \/><br \/>&lt;\/body&gt;<\/pre><p>3. Actual form HTML, where you want to place the form:<\/p><pre>&lt;div class=\"sf-wrapper\"&gt;<br \/>\u00a0 \u00a0 &lt;form id=\"contact-form\" action=\"assets\/vendor\/simple-forms\/sendmail.php\" method=\"post\"&gt;<br \/><br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"form-group\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;label&gt;Name&lt;\/label&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;input type=\"text\" name=\"name\" value=\"\" class=\"validate-name\" minlength=\"2\" required&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/><br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"form-group\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;label&gt;Email&lt;\/label&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;input type=\"text\" name=\"email\" class=\"validate-email\" value=\"\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/><br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"form-group\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;label&gt;Message&lt;\/label&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;textarea name=\"message\" required&gt;&lt;\/textarea&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/><br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"form-submit\"&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;button type=\"submit\" class=\"pa-hvr-sweep-to-right\"&gt;Send now&lt;\/button&gt;<br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br \/><br \/>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"server-response\"&gt;&lt;\/div&gt;<br \/><br \/>\u00a0 \u00a0 &lt;\/form&gt;<br \/>&lt;\/div&gt;<\/pre><p>It is important that the &#8220;action&#8221; attribute leads to the correct path to the sendmail.php (which is located in &#8220;assets\\vendor\\simple-forms\\&#8221; folder. The path is already correct unless your HTML file is in a sub folder for example.<\/p><p>You can copy these code snippets from existing pages.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6df7f4e exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"6df7f4e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3><strong>Custom form builds and changing the original code<\/strong><\/h3><h5><span style=\"color: #fc2154;\"><strong>WARNING: For changing forms behavior, adding other fields and any type of customization other than what&#8217;s described here, we will NOT provide support.\u00a0<\/strong><\/span><\/h5><p>In other words, we only provide support for our template. But, if you know what you&#8217;re doing, <a href=\"https:\/\/codecanyon.net\/item\/ajax-contact-form-mobile-first\/25185499?ref=Skilltech\" target=\"_blank\" rel=\"noopener\">Simple Forms<\/a> is a very powerful solution and you can add other types of fields such as file uploads etc. You can also use Google ReCaptcha V2 instead of V3, or use a simple math captcha. Before doing so, it is important to completely remove our forms integration. To do so:<\/p><ul><li>Remove the link to the form.js file from the bottom of the body<\/li><li>Remove the link to the simple-forms-skilltech-mod.css from the head (this is our modification of the original .css)<\/li><li>Remove our form HTML from the HTML file (the form is located inside a wrapper div &#8220;sf-wrapper&#8221; remove that div as well<\/li><li>NOTE: we&#8217;ve left simple-forms.min.js and simple-forms-translations.js at the bottom of the body tag. You can delete\u00a0 those and start from scratch but you&#8217;ll have to add them at some point.<\/li><li>Follow the instructions from &#8220;assets\\vendor\\simple-forms\\help\\index.html&#8221; file<\/li><li>NOTE: their CSS from simple-forms.css will probably clash with our particle-theme.css &#8211; you will have to address this yourself.<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9ae42d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"e9ae42d\" data-element_type=\"widget\" id=\"final-words\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9260602 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-heading\" data-id=\"9260602\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Final words<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccc2239 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"ccc2239\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-649185d exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"649185d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Once again, thank You for purchasing Particle HTML template. We really appreciate your support. And remember, if you like Particle go ahead and give it five stars on <a href=\"https:\/\/themeforest.net\/downloads\" target=\"_blank\" rel=\"noopener\">themeforest<\/a>\u00a0now, it would mean the world to us.<\/p><p>\u00a0<\/p><p>Have a great time using Particle!<br \/>Sincerely,<br \/>SkilltechWebDesign.com team<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00cec22 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-spacer\" data-id=\"00cec22\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f89bdef elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-glass-effect-no exad-sticky-section-no\" data-id=\"f89bdef\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8598cfe exad-glass-effect-no exad-sticky-section-no\" data-id=\"8598cfe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f681b51 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"f681b51\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script>\njQuery(document).ready(function($) {\n\n    \/\/ begin code\n    \n    $('.page-id-6 #header.side-header').prepend('<div class=\"nav-border-helper\"><\/div>');\n    \n    \/\/ end code\n\n});\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>GET A FREE 3D HOVER EFFECT EXCLUSIVELY FOR PARTICLE THEME OWNERS 3D PARALLAX IMAGE HOVER EFFECT Subscribe to our Newsletter (we never SPAM!) and be the first to get the coolest image hover effect for FREE! SUPERB HOVER Amazing Bonus CSS 3D Image Hover Effect! TRY IT Please use a desktop computer if possible for<\/p>\n<p class=\"more-link-wrapper\"><a href=\"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/\" class=\"more-link\">Continue Reading<span class=\"screen-reader-text\"> &#8220;Particle HTML Template Documentation&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":10,"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":917,"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/pages\/6\/revisions\/917"}],"wp:attachment":[{"href":"https:\/\/www.skilltechwebdesign.com\/html-theme-docs\/particle\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}