CINXE.COM

<!DOCTYPE html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <meta charset="UTF-8">  <title>Search Form Widget » Elementor</title> <meta name="description" content="Learn how to add search anywhere on your site with the Search Form widget"/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://elementor.com/help/search-form-widget/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Search Form Widget » Elementor" /> <meta property="og:description" content="Learn how to add search anywhere on your site with the Search Form widget" /> <meta property="og:url" content="https://elementor.com/help/search-form-widget/" /> <meta property="og:site_name" content="Elementor" /> <meta property="article:publisher" content="https://www.facebook.com/elemntor/" /> <meta property="article:author" content="https://www.facebook.com/itamarbd/" /> <meta property="article:tag" content="Advanced" /> <meta property="article:tag" content="Agency" /> <meta property="article:tag" content="Essential" /> <meta property="article:tag" content="Expert" /> <meta property="article:tag" content="Legacy Essential" /> <meta property="article:tag" content="Pro" /> <meta property="article:section" content="Create forms" /> <meta property="og:updated_time" content="2024-09-19T13:10:04+03:00" /> <meta property="og:image" content="https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget.png" /> <meta property="og:image:secure_url" content="https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget.png" /> <meta property="og:image:width" content="1924" /> <meta property="og:image:height" content="287" /> <meta property="og:image:alt" content="Search Form widget" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2023-08-14T11:01:57+03:00" /> <meta property="article:modified_time" content="2024-09-19T13:10:04+03:00" /> <meta property="og:video" content="https://www.youtube.com/embed/3yj3CN4ogPU" /> <meta property="video:duration" content="78" /> <meta property="ya:ovs:upload_date" content="2017-11-15T08:18:45-08:00" /> <meta property="ya:ovs:allow_embed" content="true" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Search Form Widget » Elementor" /> <meta name="twitter:description" content="Learn how to add search anywhere on your site with the Search Form widget" /> <meta name="twitter:image" content="https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="razohad" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="15 minutes" />  <link rel='dns-prefetch' href='//cdn.jsdelivr.net' /> <link rel="alternate" type="application/rss+xml" title="Help » Feed" href="https://elementor.com/help/feed/" /> <link rel="alternate" type="application/rss+xml" title="Help » Comments Feed" href="https://elementor.com/help/comments/feed/" />  <script type="application/ld+json" class="schema-premium">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/search-form-widget\/#breadcrumb","url":"https:\/\/elementor.com\/help\/search-form-widget\/","name":"Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help#webpage","url":"https:\/\/elementor.com\/help","name":"Blog"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/search-form-widget\/#webpage","url":"https:\/\/elementor.com\/help\/search-form-widget\/","name":"Search Form widget"}}]}</script><script type="application/ld+json" class="schema-premium">[{"@context":"https:\/\/schema.org","@type":"BlogPosting","image":{"@type":"ImageObject","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Search-form-widget.png","width":1200,"height":"88"},"url":"https:\/\/elementor.com\/help\/search-form-widget\/","description":"Learn how to add search anywhere on your site with the Search Form widget","headline":"Search Form widget","datePublished":"2023-08-14T11:01:57+03:00","dateModified":"2024-09-19T13:10:04+03:00","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/search-form-widget\/#webpage"},"dateCreated":"2023-08-14T11:01:57+03:00","publisher":{"@type":"Organization","@id":"https:\/\/elementor.com\/help#organization","url":"https:\/\/elementor.com\/help","name":"Help","description":"","logo":{"@type":"ImageObject","@id":"https:\/\/elementor.com\/help#logo","url":"","width":600,"height":60},"image":{"@type":"ImageObject","@id":"https:\/\/elementor.com\/help#logo","url":"","width":600,"height":60}},"keywords":"Advanced, Agency, Essential, Expert, Legacy Essential, Pro","author":{"@type":"Person","name":"razohad"},"@id":"https:\/\/elementor.com\/help\/search-form-widget#blogposting"}]</script> <link rel="alternate" type="application/rss+xml" title="Help » Search Form widget Comments Feed" href="https://elementor.com/help/search-form-widget/feed/" /> <style id='riovizual-tablebuilder-style-inline-css' type='text/css'> .wp-block-riovizual-tablebuilder .rv_tb-caption{max-width:100%}@media(min-width:768px){.wp-block-riovizual-tablebuilder.is-scroll-on-pc{overflow-x:auto}.wp-block-riovizual-tablebuilder.is-scroll-on-pc table{align-self:self-start;max-width:unset}}@media(max-width:767px){.wp-block-riovizual-tablebuilder.is-scroll-on-mobile{overflow-x:auto}.wp-block-riovizual-tablebuilder.is-scroll-on-mobile table{align-self:self-start;max-width:unset}}.wp-block-riovizual-tablebuilder .active-sticky-row,.wp-block-riovizual-tablebuilder.active-sticky-column table tr>:first-child{background-color:#f0f3f9}@media(max-width:767px){.wp-block-riovizual-tablebuilder .is-stacked-on-mobile .active-sticky-row,.wp-block-riovizual-tablebuilder .is-stacked-on-mobile.active-sticky-column table tr>:first-child{background-color:transparent}}.wp-block-riovizual-tablebuilder table{border-collapse:collapse;max-width:100%;width:100%}.wp-block-riovizual-tablebuilder h1,.wp-block-riovizual-tablebuilder h2,.wp-block-riovizual-tablebuilder h3,.wp-block-riovizual-tablebuilder h4,.wp-block-riovizual-tablebuilder h5,.wp-block-riovizual-tablebuilder h6,.wp-block-riovizual-tablebuilder p{margin:0}.wp-block-riovizual-tablebuilder table td,.wp-block-riovizual-tablebuilder table th{border:1px solid #000;padding:.5em;text-align:inherit}.wp-block-riovizual-tablebuilder tbody,.wp-block-riovizual-tablebuilder td,.wp-block-riovizual-tablebuilder th,.wp-block-riovizual-tablebuilder tr{position:relative}.wp-block-riovizual-tablebuilder td,.wp-block-riovizual-tablebuilder th{height:20px}.wp-block-riovizual-tablebuilder img{-o-object-fit:cover;object-fit:cover}.wp-block-riovizual-tablebuilder .has-fixed-layout{table-layout:fixed}.wp-block-riovizual-tablebuilder .has-fixed-layout td,.wp-block-riovizual-tablebuilder .has-fixed-layout th{word-break:break-word}.wp-block-riovizual-tablebuilder .has-fixed-layout .rv_tb-nowrap{white-space:pre-wrap!important}.wp-block-riovizual-tablebuilder.aligncenter,.wp-block-riovizual-tablebuilder.alignleft,.wp-block-riovizual-tablebuilder.alignright{display:table;width:auto}.wp-block-riovizual-tablebuilder.aligncenter td,.wp-block-riovizual-tablebuilder.aligncenter th,.wp-block-riovizual-tablebuilder.alignleft td,.wp-block-riovizual-tablebuilder.alignleft th,.wp-block-riovizual-tablebuilder.alignright td,.wp-block-riovizual-tablebuilder.alignright th{word-break:break-word}.wp-block-riovizual-tablebuilder.is-align-center,.wp-block-riovizual-tablebuilder.is-align-left,.wp-block-riovizual-tablebuilder.is-align-right{display:flex;flex-direction:column}.wp-block-riovizual-tablebuilder.is-align-left{align-items:flex-start}.wp-block-riovizual-tablebuilder.is-align-center{align-items:center}.wp-block-riovizual-tablebuilder.is-align-right{align-items:flex-end}.wp-block-riovizual-tablebuilder .rv_tb-nowrap{white-space:nowrap!important}.wp-block-riovizual-tablebuilder.is-style-stripes{background-color:transparent;border-collapse:inherit;border-spacing:0}.wp-block-riovizual-tablebuilder.is-style-stripes tbody tr:nth-child(odd)>*{background-color:#ddd}.wp-block-riovizual-tablebuilder.is-style-stripes tbody tr:nth-child(2n)>*{background-color:#fff}.wp-block-riovizual-tablebuilder .editor-styles-wrapper .wp-block-button__link:focus,.wp-block-riovizual-tablebuilder .editor-styles-wrapper .wp-element-button:focus,.wp-block-riovizual-tablebuilder .wp-block-button__link:focus,.wp-block-riovizual-tablebuilder .wp-element-button:focus{outline-offset:0!important;outline-style:none!important;outline-width:0!important}.wp-block-riovizual-tablebuilder .rv_tb-list{overflow:hidden}.wp-block-riovizual-tablebuilder .rv_tb-element{min-height:10px;position:relative}.wp-block-riovizual-tablebuilder .rv_tb-button-wrap,.wp-block-riovizual-tablebuilder .rv_tb-list-wrap,.wp-block-riovizual-tablebuilder .rv_tb-shortcode-wrap,.wp-block-riovizual-tablebuilder .rv_tb-text-wrap{display:flex}.wp-block-riovizual-tablebuilder .rv_tb-text{font-size:16px;overflow-wrap:break-word;padding:5px;width:100%}.wp-block-riovizual-tablebuilder .rv_tb-image{position:relative}.wp-block-riovizual-tablebuilder .rv_tb-image img{box-sizing:border-box;max-width:100%;vertical-align:middle}.wp-block-riovizual-tablebuilder .rv_tb-button{display:inline-block;text-align:center}.wp-block-riovizual-tablebuilder .rv_tb-button .wp-element-button{font-size:16px;overflow:hidden}.wp-block-riovizual-tablebuilder .rv_tb-button a{display:block;overflow-wrap:break-word;text-align:center;text-decoration:none}.wp-block-riovizual-tablebuilder .rv_tb-list{display:flex;flex-direction:column;list-style-position:outside;margin:0;padding:5px 5px 5px 25px;width:100%}.wp-block-riovizual-tablebuilder .rv_tb-list li{font-size:16px}.wp-block-riovizual-tablebuilder .rv_tb-icon{line-height:1}.wp-block-riovizual-tablebuilder .rv_tb-icon svg{box-sizing:content-box;height:16px;vertical-align:-.125em;width:16px}.wp-block-riovizual-tablebuilder .rv_tb-shortcode{display:flex}@media(max-width:768px){.is-scroll-on-mobile .has-fixed-layout td,.is-scroll-on-mobile .has-fixed-layout th{width:100px}}.components-popover{z-index:9999!important} </style> <style id='riovizual-prosandcons-style-inline-css' type='text/css'> .wp-block-riovizual-prosandcons{display:flex;flex-flow:column}.wp-block-riovizual-prosandcons .rv_pac-wrapper{overflow-x:auto;overflow-y:hidden}.wp-block-riovizual-prosandcons.is-align-left{align-items:flex-start}.wp-block-riovizual-prosandcons.is-align-center{align-items:center}.wp-block-riovizual-prosandcons.is-align-right{align-items:flex-end}@media(max-width:767px){.wp-block-riovizual-prosandcons:not(.is-vertical-on-mobile) .rv_pac-row{width:560px}}.wp-block-riovizual-prosandcons .rv_pac-row{display:grid;grid-template-columns:1fr 1fr}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons-wrapper,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros-wrapper{position:relative;z-index:0}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros{display:flex;flex:1 1 0;flex-direction:column;overflow:hidden}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body{height:100%}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-header-item,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-header-item{align-items:center;display:flex;font-size:18px;font-weight:600;gap:5px;line-height:1.3}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-header-item.rv_pac-reverse,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-header-item.rv_pac-reverse{flex-direction:row-reverse}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items{display:flex;flex-direction:column;font-size:16px;line-height:1.6;list-style:none;margin:0!important;padding:15px;row-gap:6px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items .rv_pac-body-item,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items .rv_pac-body-item{align-items:center;display:flex;gap:5px;padding:6px 10px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-body-items .rv_pac-body-item.rv_pac-reverse,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-body-items .rv_pac-body-item.rv_pac-reverse{flex-direction:row-reverse}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-text,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-text{overflow-wrap:break-word}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-icon,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-icon{display:flex}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-cons .rv_pac-item-icon svg,.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-pros .rv_pac-item-icon svg{height:1em}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header-item{align-items:center;display:flex;font-size:18px;font-weight:600;gap:5px;line-height:1.3}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header{display:flex;flex-direction:column;padding:12px 25px}.wp-block-riovizual-prosandcons .rv_pac-row .rv_pac-header .rv_pac-header-item{position:relative;width:100%}.components-popover{z-index:9999!important} </style> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='flexible-table-block-css' href='https://elementor.com/help/wp-content/plugins/flexible-table-block/build/style-index.css?ver=1698918388' type='text/css' media='all' /> <style id='flexible-table-block-inline-css' type='text/css'> .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table{width:100%;max-width:100%;border-collapse:collapse;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) th{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) th{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td{background-color:#ffffff;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{padding:0.5em;border-width:1px;border-style:solid;border-color:#000000;text-align:left;vertical-align:middle;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{background-color:#f0f0f1;}.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td{background-color:#ffffff;}@media screen and (min-width:769px){.wp-block-flexible-table-block-table.is-scroll-on-pc{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-pc table{max-width:none;align-self:self-start;}}@media screen and (max-width:768px){.wp-block-flexible-table-block-table.is-scroll-on-mobile{overflow-x:scroll;}.wp-block-flexible-table-block-table.is-scroll-on-mobile table{max-width:none;align-self:self-start;}.wp-block-flexible-table-block-table table.is-stacked-on-mobile th,.wp-block-flexible-table-block-table table.is-stacked-on-mobile td{width:100%!important;display:block;}} </style> <link rel='stylesheet' id='hc-sidebar-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-sidebar.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='hc-lightbox-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/lightbox-help-center.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='hc-colored-tags-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-colored-tags.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='table-addons-for-elementor-css' href='https://elementor.com/help/wp-content/plugins/table-addons-for-elementor/public/css/table-addons-for-elementor-public.css?ver=1.4.0' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-icons-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.30.0' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-frontend-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='swiper-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=8.4.5' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-32341-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-32341.css?ver=1728545529' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-pro-css' href='https://elementor.com/help/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.22.1' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-5-all-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-4-shim-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.22.3' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-global-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/global.css?ver=1728545530' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-116-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-116.css?ver=1728545804' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-26780-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-26780.css?ver=1730196503' type='text/css' media='all' /> <link rel='stylesheet' id='hc-callout-css' href='https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/css/hc-callout.css?ver=0.1.14' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-28845-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-28845.css?ver=1730877609' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-40845-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-40845.css?ver=1730830279' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-52588-css' href='https://elementor.com/help/wp-content/uploads/elementor/css/post-52588.css?ver=1730633433' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-site-style-child-css' href='https://elementor.com/help/wp-content/themes/elementor-website/assets/css/style.css?ver=1.1.5' type='text/css' media='all' /> <link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=DM+Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto&ver=6.6.2' type='text/css' media='all' /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin><script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/lib/font-awesome/js/v4-shims.min.js?ver=3.22.3" id="font-awesome-4-shim-js"></script> <script type="text/javascript"> var swiftypeConfig = { filters: { posts: { object_type: [ 'post' ], }, }, }; </script> <script> window.dataLayer = window.dataLayer || []; </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://gtm.elementor.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NJK8HW');</script>  <meta name="referrer" content="no-referrer-when-downgrade"><meta name="generator" content="Elementor 3.22.3; features: e_optimized_assets_loading, e_optimized_css_loading, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-auto"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-32x32.png" sizes="32x32" /> <link rel="icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-180x180.png" /> <meta name="msapplication-TileImage" content="https://elementor.com/help/wp-content/uploads/2023/01/cropped-elementor-favicon-512-270x270.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /></head> <body class="post-template-default single single-post postid-116 single-format-standard elementor-default elementor-template-canvas elementor-kit-32341 elementor-page elementor-page-116 elementor-page-40845"> <div data-elementor-type="wp-post" data-elementor-id="116" class="elementor elementor-116" data-elementor-post-type="post"> <div class="elementor-element elementor-element-1eee8e4b e-flex e-con-boxed e-con e-parent" data-id="1eee8e4b" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-42a41994 elementor-widget elementor-widget-heading" data-id="42a41994" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Add the widget</h2> </div> </div> <div class="elementor-element elementor-element-29e121a8 e-flex e-con-boxed e-con e-child" data-id="29e121a8" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-1a33e015 elementor-widget elementor-widget-image" data-id="1a33e015" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style> <img decoding="async" width="163" height="88" src="https://elementor.com/help/wp-content/uploads/2023/08/Search-form-widget.png" class="attachment-large size-large wp-image-50099" alt="Search form widget Search Form widget 1" title="Search Form widget 2"> </div> </div> <div class="elementor-element elementor-element-d50c5fa elementor-widget elementor-widget-n-accordion" data-id="d50c5fa" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-2230" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-2230" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Add the widget to the canvas </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-2230" class="elementor-element elementor-element-647e22f e-con-full e-flex e-con e-child" data-id="647e22f" data-element_type="container"> <div class="elementor-element elementor-element-6b734ecb elementor-widget elementor-widget-text-editor" data-id="6b734ecb" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p data-renderer-start-pos="122"><strong data-renderer-mark="true">To access and use a widget:</strong></p><ol class="ak-ol" start="1" data-indent-level="1"><li><p data-renderer-start-pos="153">In Elementor Editor, click +. <br />All available widgets are displayed.</p></li><li><p data-renderer-start-pos="224">Click or drag the widget to the canvas. <span>For more information, see </span><a href="https://elementor.com/help/add-elements-to-a-page/" target="_blank" rel="noopener"><span>Add elements to a page</span></a><span>.</span></p></li></ol> </div> </div> </div> </details> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-144e852e e-flex e-con-boxed e-con e-parent" data-id="144e852e" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-5d6b3e0d elementor-widget elementor-widget-heading" data-id="5d6b3e0d" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">What is the Search Form widget?</h2> </div> </div> <div class="elementor-element elementor-element-1ce7d77 elementor-widget elementor-widget-text-editor" data-id="1ce7d77" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p dir="ltr">A search bar helps users find information on your website. This is especially important as your website grows and incorporates more content.</p><p dir="ltr"><div class="hbox callout-note"> <div class="hicon"> <span class="material-symbols-outlined"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.36581 2.36386C3.86061 0.869064 5.88798 0.0292969 8.00194 0.0292969C10.1159 0.0292969 12.1433 0.869064 13.6381 2.36386C15.1329 3.85865 15.9726 5.88603 15.9726 7.99999C15.9726 10.1139 15.1329 12.1413 13.6381 13.6361C12.1433 15.1309 10.1159 15.9707 8.00194 15.9707C5.88798 15.9707 3.86061 15.1309 2.36581 13.6361C0.871017 12.1413 0.03125 10.1139 0.03125 7.99999C0.03125 5.88603 0.871017 3.85865 2.36581 2.36386ZM8.00194 1.5293C6.28581 1.5293 4.63996 2.21103 3.42647 3.42452C2.21298 4.63801 1.53125 6.28385 1.53125 7.99999C1.53125 9.71612 2.21298 11.362 3.42647 12.5755C4.63996 13.7889 6.28581 14.4707 8.00194 14.4707C9.71807 14.4707 11.3639 13.7889 12.5774 12.5755C13.7909 11.362 14.4726 9.71612 14.4726 7.99999C14.4726 6.28385 13.7909 4.63801 12.5774 3.42452C11.3639 2.21103 9.71807 1.5293 8.00194 1.5293ZM8.00194 7.25002C8.41616 7.25002 8.75194 7.58581 8.75194 8.00002V11.6104C8.75194 12.0246 8.41616 12.3604 8.00194 12.3604C7.58773 12.3604 7.25194 12.0246 7.25194 11.6104V8.00002C7.25194 7.58581 7.58773 7.25002 8.00194 7.25002ZM7.54165 4.09316C7.7077 3.9822 7.90293 3.92298 8.10265 3.92298C8.37045 3.92298 8.62729 4.02937 8.81666 4.21874C9.00603 4.40811 9.11242 4.66495 9.11242 4.93275C9.11242 5.13246 9.0532 5.32769 8.94224 5.49375C8.83128 5.65981 8.67358 5.78923 8.48907 5.86566C8.30456 5.94208 8.10153 5.96208 7.90565 5.92312C7.70978 5.88416 7.52986 5.78799 7.38863 5.64677C7.24741 5.50554 7.15124 5.32562 7.11228 5.12975C7.07332 4.93387 7.09331 4.73084 7.16974 4.54633C7.24617 4.36182 7.37559 4.20412 7.54165 4.09316Z" fill="black"/> </svg></span> </div> <div class="hboxinfo"> <strong>Note</strong> <div class="hcontent">Starting with Elementor 3.24,聽 the Search form widget was replaced by the <a href="https://elementor.com/help/search-widget/" target="_blank" rel="noopener">Search widget</a>.</p><p dir="ltr">Existing Search Form widgets are not affected by this change. You can still use and edit existing Search Form widgets as described in this article.</div> </div> </div></p><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><a style="font-size: 1rem; letter-spacing: -0.02rem; text-align: var(--text-align); background-color: #ffffff;" href="#settings">See all the options available with the Search Form widget.聽聽</a></p> </div> </div> </div> </div> <div class="elementor-element elementor-element-62bfb503 e-flex e-con-boxed e-con e-parent" data-id="62bfb503" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-6cc7e531 elementor-widget elementor-widget-heading" data-id="6cc7e531" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Common use case </h2> </div> </div> <div class="elementor-element elementor-element-715a6a22 elementor-widget elementor-widget-text-editor" data-id="715a6a22" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Rowan is webmaster of a large law firm Their site is quite large with a blog, lists of lawyers, Press Center and other content. They decide to add a search widget to the website header to make it easier for visitors to find the information they鈥檙e looking for.</span></p> </div> </div> </div> </div> <div class="elementor-element elementor-element-5129ffdb e-flex e-con-boxed e-con e-parent" data-id="5129ffdb" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-b1a3a1d elementor-widget elementor-widget-image" data-id="b1a3a1d" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img fetchpriority="high" decoding="async" width="1024" height="153" src="https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget-1024x153.png" class="attachment-large size-large wp-image-50100" alt="Example of serach form widget Search Form widget 3" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget-1024x153.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget-300x45.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget-768x115.png 768w, https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget-1536x229.png 1536w, https://elementor.com/help/wp-content/uploads/2023/08/Example-of-serach-form-widget.png 1924w" sizes="(max-width: 1024px) 100vw, 1024px" title="Search Form widget 4"> </div> </div> </div> </div> <div class="elementor-element elementor-element-37b4b149 e-flex e-con-boxed e-con e-parent" data-id="37b4b149" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-2114ee04 elementor-widget elementor-widget-heading" data-id="2114ee04" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Additional use case</h3> </div> </div> <div class="elementor-element elementor-element-1a568afd e-con-full e-flex e-con e-child" data-id="1a568afd" data-element_type="container"> <div class="elementor-element elementor-element-73b49e9b elementor-widget elementor-widget-text-editor" data-id="73b49e9b" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <ul><li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Create a full page Search page.</span></li></ul> </div> </div> </div> <div class="elementor-element elementor-element-6388ae64 elementor-widget elementor-widget-heading" data-id="6388ae64" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Video</h2> </div> </div> <div class="elementor-element elementor-element-53f674c4 elementor-widget elementor-widget-text-editor" data-id="53f674c4" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>See a video demonstrating the widget in action.聽</p> </div> </div> <div class="elementor-element elementor-element-370420d0 elementor-widget elementor-widget-video" data-id="370420d0" data-element_type="widget" data-settings="{"youtube_url":"https:\/\/youtu.be\/3yj3CN4ogPU?si=gUqHy9Ph8qe05qRr","video_type":"youtube","controls":"yes"}" data-widget_type="video.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.22.0 - 26-06-2024 */ .elementor-widget-video .elementor-widget-container{overflow:hidden;transform:translateZ(0)}.elementor-widget-video .elementor-wrapper{aspect-ratio:var(--video-aspect-ratio)}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{height:100%;width:100%;display:flex;border:none;background-color:#000}@supports not (aspect-ratio:1/1){.elementor-widget-video .elementor-wrapper{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% / var(--video-aspect-ratio))}.elementor-widget-video .elementor-wrapper iframe,.elementor-widget-video .elementor-wrapper video{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:50%}.elementor-widget-video .elementor-custom-embed-image-overlay{cursor:pointer;text-align:center}.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i{opacity:1}.elementor-widget-video .elementor-custom-embed-image-overlay img{display:block;width:100%;aspect-ratio:var(--video-aspect-ratio);-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center}@supports not (aspect-ratio:1/1){.elementor-widget-video .elementor-custom-embed-image-overlay{position:relative;overflow:hidden;height:0;padding-bottom:calc(100% / var(--video-aspect-ratio))}.elementor-widget-video .elementor-custom-embed-image-overlay img{position:absolute;top:0;right:0;bottom:0;left:0}}.elementor-widget-video .e-hosted-video .elementor-video{-o-object-fit:cover;object-fit:cover}.e-con-inner>.elementor-widget-video,.e-con>.elementor-widget-video{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}</style> <div class="elementor-wrapper elementor-open-inline"> <div class="elementor-video"></div> </div> </div> </div> <div class="elementor-element elementor-element-461c30e9 elementor-widget elementor-widget-heading" data-id="461c30e9" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Adding a Search Form widget: Step-by-step</h2> </div> </div> <div class="elementor-element elementor-element-23cbebea elementor-widget elementor-widget-text-editor" data-id="23cbebea" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Hunter is building a website for his company. While the search form widget is normally added to the header of a website, they decide they want to create a full page search form. </span></p> </div> </div> <div class="elementor-element elementor-element-4457880f elementor-widget elementor-widget-text-editor" data-id="4457880f" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <h3>Create a full page search form</h3><ol><li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Open your website and create a page.<br /><img decoding="async" class="alignnone size-full wp-image-50103" src="https://elementor.com/help/wp-content/uploads/2023/08/2-Search-form-page.png" alt="2 Search form page Search Form widget 5" width="1318" height="368" title="Search Form widget 6" srcset="https://elementor.com/help/wp-content/uploads/2023/08/2-Search-form-page.png 1318w, https://elementor.com/help/wp-content/uploads/2023/08/2-Search-form-page-300x84.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/2-Search-form-page-1024x286.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/2-Search-form-page-768x214.png 768w" sizes="(max-width: 1318px) 100vw, 1318px" /><br /></span></li><li aria-level="1"><span style="font-weight: 400;">Add the Search Form widget to the page.<br /><img loading="lazy" decoding="async" class="alignnone size-full wp-image-50102" src="https://elementor.com/help/wp-content/uploads/2023/08/3-Select-full-skin.png" alt="3 Select full skin Search Form widget 7" width="1319" height="342" title="Search Form widget 8" srcset="https://elementor.com/help/wp-content/uploads/2023/08/3-Select-full-skin.png 1319w, https://elementor.com/help/wp-content/uploads/2023/08/3-Select-full-skin-300x78.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/3-Select-full-skin-1024x266.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/3-Select-full-skin-768x199.png 768w" sizes="(max-width: 1319px) 100vw, 1319px" /><br /></span></li><li aria-level="1"><span style="font-weight: 400;">In the panel, in the </span><b>Skin </b><span style="font-weight: 400;">field, use the dropdown menu to select </span><b>Full</b><span style="font-weight: 400;">.<br />The search box turns into a search toggle.<br /><img loading="lazy" decoding="async" class="alignnone size-full wp-image-50104" src="https://elementor.com/help/wp-content/uploads/2023/08/4-Change-placeholder-text.png" alt="4 Change placeholder Search Form widget 9" width="1325" height="366" title="Search Form widget 10" srcset="https://elementor.com/help/wp-content/uploads/2023/08/4-Change-placeholder-text.png 1325w, https://elementor.com/help/wp-content/uploads/2023/08/4-Change-placeholder-text-300x83.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/4-Change-placeholder-text-1024x283.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/4-Change-placeholder-text-768x212.png 768w" sizes="(max-width: 1325px) 100vw, 1325px" /><br /></span></li><li aria-level="1"><span style="font-weight: 400;">In the </span><b>Placeholder </b><span style="font-weight: 400;">field, enter, </span><b>What are you looking for?</b></li><li aria-level="1"><span style="font-weight: 400;">In the right corner of the top bar, save the page by selecting </span><b>Publish </b><span style="font-weight: 400;">or </span><b>Save Draft</b><span style="font-weight: 400;">.</span></li><li aria-level="1"><span style="font-weight: 400;">In the right corner of the top bar, click the view icon <img loading="lazy" decoding="async" class="alignnone size-full wp-image-50105" src="https://elementor.com/help/wp-content/uploads/2023/08/The-view-icon.png" alt="The view icon Search Form widget 11" width="14" height="9" title="Search Form widget 12"></span><span style="font-weight: 400;"><span style="font-weight: 400;">.<br /><img loading="lazy" decoding="async" class="alignnone size-full wp-image-50106" src="https://elementor.com/help/wp-content/uploads/2023/08/Click-the-search-icon.png" alt="Click the search icon Search Form widget 13" width="1534" height="397" title="Search Form widget 14" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Click-the-search-icon.png 1534w, https://elementor.com/help/wp-content/uploads/2023/08/Click-the-search-icon-300x78.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/Click-the-search-icon-1024x265.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/Click-the-search-icon-768x199.png 768w" sizes="(max-width: 1534px) 100vw, 1534px" /></span></span></li><li aria-level="1"><span style="font-weight: 400;">Click the search toggle.<br /><img loading="lazy" decoding="async" class="alignnone size-full wp-image-50107" src="https://elementor.com/help/wp-content/uploads/2023/08/The-full-page-seach-form.png" alt="The full page seach form Search Form widget 15" width="1312" height="894" title="Search Form widget 16" srcset="https://elementor.com/help/wp-content/uploads/2023/08/The-full-page-seach-form.png 1312w, https://elementor.com/help/wp-content/uploads/2023/08/The-full-page-seach-form-300x204.png 300w, https://elementor.com/help/wp-content/uploads/2023/08/The-full-page-seach-form-1024x698.png 1024w, https://elementor.com/help/wp-content/uploads/2023/08/The-full-page-seach-form-768x523.png 768w" sizes="(max-width: 1312px) 100vw, 1312px" /><br /></span></li></ol><p><span style="font-weight: 400;">A full page search opens up.</span></p> </div> </div> </div> </div> <div class="elementor-element elementor-element-7fe86a18 e-flex e-con-boxed e-con e-parent" data-id="7fe86a18" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-291808e5 elementor-widget elementor-widget-heading" data-id="291808e5" data-element_type="widget" id="settings" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Settings for the Search form widget</h2> </div> </div> <div class="elementor-element elementor-element-f98b32c elementor-widget elementor-widget-text-editor" data-id="f98b32c" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p class="sc-jMbUWg fdTPyi">You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.</p> </div> </div> <div class="elementor-element elementor-element-29ebdf53 elementor-widget elementor-widget-heading" data-id="29ebdf53" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Content tab</h3> </div> </div> <div class="elementor-element elementor-element-6ae4e2cb elementor-widget elementor-widget-text-editor" data-id="6ae4e2cb" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Add, delete, and edit menu items and controls.聽</p> </div> </div> <div class="elementor-element elementor-element-e183ef8 elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs" data-id="e183ef8" data-element_type="widget" data-settings="{"horizontal_scroll":"disable"}" data-widget_type="nested-tabs.default"> <div class="elementor-widget-container"> <div class="e-n-tabs" data-widget-number="236" aria-label="Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys."> <div class="e-n-tabs-heading" role="tablist"> <button id="e-n-tabs-title-2361" class="e-n-tab-title" aria-selected="true" data-tab-index="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-2361" style="--n-tabs-title-order: 1;"> <span class="e-n-tab-title-text"> Search Form </span> </button> </div> <div class="e-n-tabs-content"> <div id="e-n-tab-content-2361" role="tabpanel" aria-labelledby="e-n-tabs-title-2361" data-tab-index="1" style="--n-tabs-title-order: 1;" class="e-active elementor-element elementor-element-7b4e6815 e-con-full e-flex e-con e-child" data-id="7b4e6815" data-element_type="container"> <div class="elementor-element elementor-element-661a4049 elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="661a4049" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="369" height="491" src="https://elementor.com/help/wp-content/uploads/2023/08/Content-tab.png" class="attachment-full size-full wp-image-50112" alt="Content tab Search Form widget 17" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Content-tab.png 369w, https://elementor.com/help/wp-content/uploads/2023/08/Content-tab-225x300.png 225w" sizes="(max-width: 369px) 100vw, 369px" title="Search Form widget 18"> </div> </div> <div class="elementor-element elementor-element-495891f5 elementor-widget elementor-widget-n-accordion" data-id="495891f5" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-1230" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-1230" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Skin </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z" fill="black"></path></svg></span> <span class='e-closed'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z" fill="black"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1230" class="elementor-element elementor-element-11bb9d22 e-con-full e-flex e-con e-child" data-id="11bb9d22" data-element_type="container"> <div class="elementor-element elementor-element-28080830 elementor-widget elementor-widget-text-editor" data-id="28080830" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Search forms can have three skins:</span></p><ul><li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Classic – A search box with a search button</span></li><li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Minimal – A search box</span></li><li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Full Screen – a toggle that when clicked turns into a full page search form.</span></li></ul> </div> </div> </div> </details> <details id="e-n-accordion-item-1231" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="2" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-1231" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Placeholder </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z" fill="black"></path></svg></span> <span class='e-closed'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z" fill="black"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1231" class="elementor-element elementor-element-1160b97f e-con-full e-flex e-con e-child" data-id="1160b97f" data-element_type="container"> <div class="elementor-element elementor-element-240d4372 elementor-widget elementor-widget-text-editor" data-id="240d4372" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Text that will appear in the Search box.</span></p> </div> </div> </div> </details> <details id="e-n-accordion-item-1232" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="3" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-1232" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Button (Classic Skin) </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z" fill="black"></path></svg></span> <span class='e-closed'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z" fill="black"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1232" class="elementor-element elementor-element-7e27c5f6 e-con-full e-flex e-con e-child" data-id="7e27c5f6" data-element_type="container"> <div class="elementor-element elementor-element-39f14c1 elementor-widget elementor-widget-text-editor" data-id="39f14c1" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Determines the size and content of the search button. Does not appear if you select a Minimal skin and is replaced by a Toggle section if Full Screen skin is selected. Options include:</span></p><p><span style="font-weight: 400;"><strong>Type</strong>: The classic search bar has a button that triggers the search. Use the dropdown menu to determine if the button will be represented by:</span></p><ul><li><span style="font-weight: 400;"><strong>Icon</strong>: If you choose to represent the button with an icon, use this field to choose an icon. For details, see <a href="https://elementor.com/help/add-graphic-element/" target="_blank" rel="noopener">Adding images and icons</a>.聽</span></li><li><span style="font-weight: 400;">Text: If you choose to represent the button with text, use the box to enter the text.聽聽</span></li></ul><p><span style="font-weight: 400;"><strong>Size</strong>: Use the slider to increase and decrease the button size.聽</span></p> </div> </div> </div> </details> <details id="e-n-accordion-item-1233" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="4" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-1233" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Toggle (Full Screen Skin) </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z" fill="black"></path></svg></span> <span class='e-closed'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z" fill="black"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1233" class="elementor-element elementor-element-158f3c1e e-con-full e-flex e-con e-child" data-id="158f3c1e" data-element_type="container"> <div class="elementor-element elementor-element-25270047 elementor-widget elementor-widget-text-editor" data-id="25270047" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Determines the size and content of the search toggle. Does not appear if you select a Minimal skin and is replaced by a Button section if Classic skin聽 is selected.聽</span></p><p><span style="font-weight: 400;">Options include:</span></p><ul><li><b>Alignment</b><span style="font-weight: 400;">: Set the toggle to appear on the right, left or center of the search box.</span></li><li><b>Size</b><span style="font-weight: 400;">: Use the slider to increase and decrease the toggle size.聽</span></li></ul> </div> </div> </div> </details> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-6f163e3e e-flex e-con-boxed e-con e-parent" data-id="6f163e3e" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-7c8de857 elementor-widget elementor-widget-heading" data-id="7c8de857" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Style tab</h3> </div> </div> <div class="elementor-element elementor-element-3bcec1f elementor-widget elementor-widget-text-editor" data-id="3bcec1f" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p class="sc-jMbUWg fdTPyi">Determine the look and feel of menu items and controls.</p> </div> </div> <div class="elementor-element elementor-element-73386e1f elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs" data-id="73386e1f" data-element_type="widget" data-settings="{"horizontal_scroll":"disable"}" data-widget_type="nested-tabs.default"> <div class="elementor-widget-container"> <div class="e-n-tabs" data-widget-number="193" aria-label="Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys."> <div class="e-n-tabs-heading" role="tablist"> <button id="e-n-tabs-title-1931" class="e-n-tab-title" aria-selected="true" data-tab-index="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-1931" style="--n-tabs-title-order: 1;"> <span class="e-n-tab-title-text"> Classic Skin - Input </span> </button> <button id="e-n-tabs-title-1932" class="e-n-tab-title" aria-selected="false" data-tab-index="2" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1932" style="--n-tabs-title-order: 2;"> <span class="e-n-tab-title-text"> Classic Skin - Button </span> </button> <button id="e-n-tabs-title-1933" class="e-n-tab-title" aria-selected="false" data-tab-index="3" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1933" style="--n-tabs-title-order: 3;"> <span class="e-n-tab-title-text"> Minimal Skin </span> </button> <button id="e-n-tabs-title-1934" class="e-n-tab-title" aria-selected="false" data-tab-index="4" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1934" style="--n-tabs-title-order: 4;"> <span class="e-n-tab-title-text"> Full Screen Skin - Input </span> </button> <button id="e-n-tabs-title-1935" class="e-n-tab-title" aria-selected="false" data-tab-index="5" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1935" style="--n-tabs-title-order: 5;"> <span class="e-n-tab-title-text"> Full Screen Skin - Toggle </span> </button> </div> <div class="e-n-tabs-content"> <div id="e-n-tab-content-1931" role="tabpanel" aria-labelledby="e-n-tabs-title-1931" data-tab-index="1" style="--n-tabs-title-order: 1;" class="e-active elementor-element elementor-element-381eb367 e-con-full e-flex e-con e-child" data-id="381eb367" data-element_type="container"> <div class="elementor-element elementor-element-108d881b elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="108d881b" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="365" height="595" src="https://elementor.com/help/wp-content/uploads/2023/08/Style-Classic-Input.png" class="attachment-large size-large wp-image-50125" alt="Style Classic Input Search Form widget 19" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Style-Classic-Input.png 365w, https://elementor.com/help/wp-content/uploads/2023/08/Style-Classic-Input-184x300.png 184w" sizes="(max-width: 365px) 100vw, 365px" title="Search Form widget 20"> </div> </div> <div class="elementor-element elementor-element-70ce01ed elementor-widget elementor-widget-n-accordion" data-id="70ce01ed" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-1890" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-1890" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Input </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1890" class="elementor-element elementor-element-6fb3cea2 e-con-full e-flex e-con e-child" data-id="6fb3cea2" data-element_type="container"> <div class="elementor-element elementor-element-9a2bec9 elementor-widget elementor-widget-text-editor" data-id="9a2bec9" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Control the look and feel of the text visitors enter in the text box:</span></p><ul><li style="font-weight: 400;" aria-level="1"><b>Typography </b><span style="font-weight: 400;">– Choose the font and size of the text in the search box. For details, see </span><a href="https://elementor.com/help/what-is-typography/" target="_blank" rel="noopener"><span style="font-weight: 400;">Typography</span></a><span style="font-weight: 400;">.</span></li><li style="font-weight: 400;" aria-level="1"><b>Normal:</b><span style="font-weight: 400;"> How the text appears by default</span></li><li style="font-weight: 400;" aria-level="1"><b>Focus: </b><span style="font-weight: 400;">How the text appears when the search box is selected.</span><b>聽</b></li><li style="font-weight: 400;" aria-level="1"><b>Background Color</b><span style="font-weight: 400;">: Select a color for the search box. For details, see </span><a href="http://elementor.com/help/create-background" target="_blank" rel="noopener"><span style="font-weight: 400;">Create a Background</span></a><span style="font-weight: 400;">.聽</span></li><li style="font-weight: 400;" aria-level="1"><b>Border Color</b><span style="font-weight: 400;">: Select a color for the border of the search box. For details, see </span><a href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-weight: 400;">Choose a color</span></a><span style="font-weight: 400;"> or </span><a href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-weight: 400;">Use global fonts and colors</span></a><span style="font-weight: 400;">.聽</span></li><li style="font-weight: 400;" aria-level="1"><b>Box Shadow</b><span style="font-weight: 400;">: Give the search box more depth by adding a shadow. For details, see, </span><a href="https://elementor.com/help/shadow/" target="_blank" rel="noopener"><span style="font-weight: 400;">What is Shadow?</span></a></li><li style="font-weight: 400;" aria-level="1"><b>Border width</b><span style="font-weight: 400;">: Determine the width of the four borders around the search box.</span></li><li aria-level="1"><b>Border Radius</b>: Round the edges of the text box by adding a border radius. For details, see <a href="https://elementor.com/help/border-radius-tools/" target="_blank" rel="noopener">Border radius tools</a>.<b>聽</b>聽</li></ul> </div> </div> </div> </details> </div> </div> </div> </div> <div id="e-n-tab-content-1932" role="tabpanel" aria-labelledby="e-n-tabs-title-1932" data-tab-index="2" style="--n-tabs-title-order: 2;" class=" elementor-element elementor-element-4096c0ac e-con-full e-flex e-con e-child" data-id="4096c0ac" data-element_type="container"> <div class="elementor-element elementor-element-68089ca1 elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="68089ca1" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="371" height="491" src="https://elementor.com/help/wp-content/uploads/2023/08/StyleClassic-Button.png" class="attachment-large size-large wp-image-50126" alt="StyleClassic Button Search Form widget 21" srcset="https://elementor.com/help/wp-content/uploads/2023/08/StyleClassic-Button.png 371w, https://elementor.com/help/wp-content/uploads/2023/08/StyleClassic-Button-227x300.png 227w" sizes="(max-width: 371px) 100vw, 371px" title="Search Form widget 22"> </div> </div> <div class="elementor-element elementor-element-4bc909 elementor-widget elementor-widget-n-accordion" data-id="4bc909" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-4960" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-4960" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Button </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-4960" class="elementor-element elementor-element-2642c7a9 e-con-full e-flex e-con e-child" data-id="2642c7a9" data-element_type="container"> <div class="elementor-element elementor-element-37214920 elementor-widget elementor-widget-text-editor" data-id="37214920" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">聽Control the look and feel of the search button:</span></p><ul><li style="font-weight: 400;" aria-level="1"><b>Normal</b><span style="font-weight: 400;">: The default setting for the icon or text</span></li><li style="font-weight: 400;" aria-level="1"><b>Hover</b><span style="font-weight: 400;">: The settings for the icon or text when a visitors mouses over them.</span></li><li style="font-weight: 400;" aria-level="1"><b>Text Color</b><span style="font-weight: 400;"> (for buttons that contain text): Set a color for the text in the button.</span></li><li style="font-weight: 400;" aria-level="1"><b>Icon Size</b><span style="font-weight: 400;">: (for buttons that use icons): Set the size for search icon.</span></li><li aria-level="1"><b>Width</b>: Set the width of the search button. A larger button may help users find the button.</li></ul> </div> </div> </div> </details> </div> </div> </div> </div> <div id="e-n-tab-content-1933" role="tabpanel" aria-labelledby="e-n-tabs-title-1933" data-tab-index="3" style="--n-tabs-title-order: 3;" class=" elementor-element elementor-element-366df9c6 e-con-full e-flex e-con e-child" data-id="366df9c6" data-element_type="container"> <div class="elementor-element elementor-element-2d64d831 elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="2d64d831" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="364" height="671" src="https://elementor.com/help/wp-content/uploads/2023/08/Style-Minimal.png" class="attachment-large size-large wp-image-50127" alt="Style Minimal Search Form widget 23" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Style-Minimal.png 364w, https://elementor.com/help/wp-content/uploads/2023/08/Style-Minimal-163x300.png 163w" sizes="(max-width: 364px) 100vw, 364px" title="Search Form widget 24"> </div> </div> <div class="elementor-element elementor-element-63cc0a64 elementor-widget elementor-widget-n-accordion" data-id="63cc0a64" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-1670" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-1670" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Input </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1670" class="elementor-element elementor-element-4170ca2 e-con-full e-flex e-con e-child" data-id="4170ca2" data-element_type="container"> <div class="elementor-element elementor-element-4a0a555 elementor-widget elementor-widget-text-editor" data-id="4a0a555" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Set the look and feel of the icon in the search box, the placeholder text and the text entered in the search box:</span></p><ul><li style="font-weight: 400;" aria-level="1"><b>Icon Size</b><span style="font-weight: 400;">: Set a size for the icon in the search box.</span></li><li style="font-weight: 400;" aria-level="1"><b>Typography</b><span style="font-weight: 400;">: Set the font and size of the placeholder text and the text entered in the search box. For details, see </span><a href="https://elementor.com/help/what-is-typography/" target="_blank" rel="noopener"><span style="font-weight: 400;">Typography</span></a><span style="font-weight: 400;">.</span></li><li style="font-weight: 400;" aria-level="1"><b>Text Color</b><span style="font-weight: 400;">: Set the color of the icon, placeholder text and the text entered in the search box. For details, see </span><a href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-weight: 400;">Choose a color</span></a><span style="font-weight: 400;"> or </span><a href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-weight: 400;">Use global fonts and colors</span></a><span style="font-weight: 400;">.</span></li><li style="font-weight: 400;" aria-level="1"><b>Background Color</b><span style="font-weight: 400;">: Select a color for the search box. For details, see </span><a href="http://elementor.com/help/create-background" target="_blank" rel="noopener"><span style="font-weight: 400;">Create a Background</span></a><span style="font-weight: 400;">.</span></li><li style="font-weight: 400;" aria-level="1"><b>Border Color</b><span style="font-weight: 400;">: Select a color for the border of the search box. For details, see </span><a href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-weight: 400;">Choose a color</span></a><span style="font-weight: 400;"> or </span><a href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-weight: 400;">Use global fonts and colors</span></a><span style="font-weight: 400;">.</span></li><li style="font-weight: 400;" aria-level="1"><b>Box Shadow</b><span style="font-weight: 400;">: Give the search box more depth by adding a shadow. For details, see, </span><a href="https://elementor.com/help/shadow/" target="_blank" rel="noopener"><span style="font-weight: 400;">What is Shadow?</span></a></li><li style="font-weight: 400;" aria-level="1"><b>Border Width</b><span style="font-weight: 400;">: Determine the width of the four borders around the search box.</span></li><li aria-level="1"><b>Border Radius</b>: Round the edges of the text box by adding a border radius. For details, see <a href="https://elementor.com/help/border-radius-tools/" target="_blank" rel="noopener">Border radius tools</a>.</li></ul> </div> </div> </div> </details> </div> </div> </div> </div> <div id="e-n-tab-content-1934" role="tabpanel" aria-labelledby="e-n-tabs-title-1934" data-tab-index="4" style="--n-tabs-title-order: 4;" class=" elementor-element elementor-element-174f6a37 e-con-full e-flex e-con e-child" data-id="174f6a37" data-element_type="container"> <div class="elementor-element elementor-element-11afe63c elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="11afe63c" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="359" height="558" src="https://elementor.com/help/wp-content/uploads/2023/08/Style-Full-Screen-INput.png" class="attachment-large size-large wp-image-50136" alt="Style Full Screen INput Search Form widget 25" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Style-Full-Screen-INput.png 359w, https://elementor.com/help/wp-content/uploads/2023/08/Style-Full-Screen-INput-193x300.png 193w" sizes="(max-width: 359px) 100vw, 359px" title="Search Form widget 26"> </div> </div> <div class="elementor-element elementor-element-71384063 elementor-widget elementor-widget-n-accordion" data-id="71384063" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-1890" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-1890" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Input </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1890" class="elementor-element elementor-element-74f67a27 e-con-full e-flex e-con e-child" data-id="74f67a27" data-element_type="container"> <div class="elementor-element elementor-element-387d0c2c elementor-widget elementor-widget-text-editor" data-id="387d0c2c" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span style="font-weight: 400;">Control the look and feel of the text visitors enter in the text box:</span></p><ul><li style="font-weight: 400;" aria-level="1"><b>Overlay Color:</b><span style="font-weight: 400;"> When visitors open a full page search form it fills with a color. This is called the overlay color. Use this field to set the overlay color.</span></li></ul><ul><li aria-level="1"><b>Typography: </b><span style="font-weight: 400;">Set the font and size of the placeholder text and the text entered in the search box. For details, see </span><a href="https://elementor.com/help/what-is-typography/" target="_blank" rel="noopener"><span style="font-weight: 400;">Typography</span></a><span style="font-weight: 400;">.</span></li></ul><ul><li style="font-weight: 400;" aria-level="1"><b>Normal:</b><span style="font-weight: 400;"> How the text appears by default</span></li><li style="font-weight: 400;" aria-level="1"><b>Focus: </b><span style="font-weight: 400;">How the text appears when the search box is selected</span><b>.</b></li></ul><ul><li aria-level="1"><b>Text Color: </b><span style="font-weight: 400;">Set the color of the placeholder text and the text entered in the search box. For details, see </span><a href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-weight: 400;">Choose a color</span></a><span style="font-weight: 400;"> or </span><a href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-weight: 400;">Use global fonts and colors</span></a><span style="font-weight: 400;">.</span></li></ul><ul><li aria-level="1"><b>Border Color</b><span style="font-weight: 400;">: Select a color for the border of the search box. For details, see </span><a href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-weight: 400;">Choose a color</span></a><span style="font-weight: 400;"> or </span><a href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-weight: 400;">Use global fonts and colors</span></a><span style="font-weight: 400;">.</span></li></ul><ul><li style="font-weight: 400;" aria-level="1"><b>Border Width</b><span style="font-weight: 400;">: Determine the width of the four borders around the search box.</span></li><li style="font-weight: 400;" aria-level="1"><b>Border Radius</b><span style="font-weight: 400;">: Round the edges of the text box by adding a border radius. For details, see </span><a href="https://elementor.com/help/border-radius-tools/" target="_blank" rel="noopener"><span style="font-weight: 400;">Border radius tools</span></a><span style="font-weight: 400;">.</span></li></ul> </div> </div> </div> </details> </div> </div> </div> </div> <div id="e-n-tab-content-1935" role="tabpanel" aria-labelledby="e-n-tabs-title-1935" data-tab-index="5" style="--n-tabs-title-order: 5;" class=" elementor-element elementor-element-3c3269d6 e-con-full e-flex e-con e-child" data-id="3c3269d6" data-element_type="container"> <div class="elementor-element elementor-element-5b0ee4e1 elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="5b0ee4e1" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="294" height="552" src="https://elementor.com/help/wp-content/uploads/2023/10/Style-Dropdown-menu-1.jpg" class="attachment-large size-large wp-image-41394" alt="Style Dropdown menu 1 Search Form widget 27" srcset="https://elementor.com/help/wp-content/uploads/2023/10/Style-Dropdown-menu-1.jpg 294w, https://elementor.com/help/wp-content/uploads/2023/10/Style-Dropdown-menu-1-160x300.jpg 160w" sizes="(max-width: 294px) 100vw, 294px" title="Search Form widget 28"> </div> </div> <div class="elementor-element elementor-element-2f651b43 elementor-widget elementor-widget-n-accordion" data-id="2f651b43" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-7950" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-7950" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Toggle </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-7950" class="elementor-element elementor-element-30725643 e-con-full e-flex e-con e-child" data-id="30725643" data-element_type="container"> <div class="elementor-element elementor-element-7dbb041c elementor-widget elementor-widget-text-editor" data-id="7dbb041c" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Set the look and feel of the toggle that will open the full screen search form:</span></p><ul style="margin-top: 0; margin-bottom: 0; padding-inline-start: 48px;"><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Normal</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: How the toggle will appear by default.</span></p></li><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hover</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> : How the toggle will appear when visitors mouse over it.</span></p></li><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Color</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Set the color for the toggle. For details, see </span><a style="text-decoration: none;" href="https://elementor.com/help/choose-color/" target="_blank" rel="noopener"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Choose a color</span></a><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> or </span><a style="text-decoration: none;" href="https://elementor.com/help/how-do-i-use-global-fonts-and-colors/" target="_blank" rel="noopener"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Use global fonts and colors</span></a><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></p></li><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Background Color</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Set a background color for the toggle. For details, see </span><a style="text-decoration: none;" href="http://elementor.com/help/create-background" target="_blank" rel="noopener"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #1155cc; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: underline; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">Create a Background</span></a><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></p></li><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Icon Size</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Control the size of the toggle</span></p></li><li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre;" aria-level="1"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Border Width</span><span style="font-size: 11pt; font-family: Arial,sans-serif; color: #000000; background-color: transparent; font-weight: 400; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Set the width of the border around the toggle.聽</span></p></li><li dir="ltr" aria-level="1"><span style="background-color: transparent; font-size: 11pt; font-family: Arial, sans-serif; color: #000000; font-weight: bold; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">Border Radius</span><span style="background-color: transparent; font-size: 11pt; font-family: Arial, sans-serif; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">: Round the corners of the border around the toggle. For details, see </span><a style="text-decoration-line: none;" href="https://elementor.com/help/border-radius-tools/" target="_blank" rel="noopener"><span style="font-size: 11pt; font-family: Arial, sans-serif; color: #1155cc; background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-variant-position: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space-collapse: preserve;">Border radius tools</span></a><span style="background-color: transparent; font-size: 11pt; font-family: Arial, sans-serif; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-variant-position: normal; vertical-align: baseline; white-space-collapse: preserve;">.</span></li></ul> </div> </div> </div> </details> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-742074c5 e-flex e-con-boxed e-con e-parent" data-id="742074c5" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-21844189 elementor-widget elementor-widget-heading" data-id="21844189" data-element_type="widget" id="settings" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Advanced tab</h3> </div> </div> <div class="elementor-element elementor-element-358c827e elementor-widget elementor-widget-text-editor" data-id="358c827e" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p class="sc-jMbUWg fdTPyi">Control the placement of your widget, insert links, add custom code and more.</p> </div> </div> <div class="elementor-element elementor-element-82c3e77 elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs" data-id="82c3e77" data-element_type="widget" data-settings="{"horizontal_scroll":"disable"}" data-widget_type="nested-tabs.default"> <div class="elementor-widget-container"> <div class="e-n-tabs" data-widget-number="137" aria-label="Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys."> <div class="e-n-tabs-heading" role="tablist"> <button id="e-n-tabs-title-1371" class="e-n-tab-title" aria-selected="true" data-tab-index="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-1371" style="--n-tabs-title-order: 1;"> <span class="e-n-tab-title-text"> Advanced </span> </button> </div> <div class="e-n-tabs-content"> <div id="e-n-tab-content-1371" role="tabpanel" aria-labelledby="e-n-tabs-title-1371" data-tab-index="1" style="--n-tabs-title-order: 1;" class="e-active elementor-element elementor-element-78835002 e-con-full e-flex e-con e-child" data-id="78835002" data-element_type="container"> <div class="elementor-element elementor-element-7b0f294d elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="7b0f294d" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img loading="lazy" decoding="async" width="365" height="836" src="https://elementor.com/help/wp-content/uploads/2023/08/Advanced-tab.png" class="attachment-large size-large wp-image-50161" alt="Advanced tab Search Form widget 29" srcset="https://elementor.com/help/wp-content/uploads/2023/08/Advanced-tab.png 365w, https://elementor.com/help/wp-content/uploads/2023/08/Advanced-tab-131x300.png 131w" sizes="(max-width: 365px) 100vw, 365px" title="Search Form widget 30"> </div> </div> <div class="elementor-element elementor-element-7548476c elementor-widget elementor-widget-n-accordion" data-id="7548476c" data-element_type="widget" data-settings="{"default_state":"all_collapsed","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-1960" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="false" aria-controls="e-n-accordion-item-1960" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Advanced </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><i aria-hidden="true" class="fas fa-minus"></i></span> <span class='e-closed'><i aria-hidden="true" class="fas fa-chevron-right"></i></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-1960" class="elementor-element elementor-element-2c7a071c e-con-full e-flex e-con e-child" data-id="2c7a071c" data-element_type="container"> <div class="elementor-element elementor-element-d0a5cb7 elementor-widget elementor-widget-text-editor" data-id="d0a5cb7" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Learn more about the <a href="https://elementor.com/help/advanced-tab/" target="_blank" rel="noopener">Advanced tab settings</a>.</p> </div> </div> </div> </details> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-7d650f35 e-flex e-con-boxed e-con e-parent" data-id="7d650f35" data-element_type="container"> <div class="e-con-inner"> </div> </div> </div> <script> document.addEventListener( "DOMContentLoaded", function () { ( () => { const formSelector = document.querySelector( '.elementor-search-form' ); if ( ! formSelector.action.includes( "/search" ) ) { const prefix = formSelector.action.charAt( formSelector.action.length - 1 ) === '/' ? '' : '/'; formSelector.action = formSelector.action + prefix + 'search/'; formSelector.querySelector( 'input[type="search"]' ).name = 'q'; } } )(); } ); </script>  <noscript> <iframe src="https://gtm.elementor.com/ns.html?id=GTM-NJK8HW" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>  <section data-elementor-type="popup" data-elementor-id="52588" class="elementor elementor-52588 elementor-location-popup" data-elementor-settings="{"entrance_animation":"fadeInRight","exit_animation":"fadeInRight","entrance_animation_duration":{"unit":"px","size":1,"sizes":[]},"prevent_close_on_background_click":"yes","entrance_animation_mobile":"fadeInUp","exit_animation_mobile":"fadeInUp","triggers":{"page_load_delay":1,"page_load":"yes"},"timing":{"devices":"yes","times_times":1,"times":"yes","page_views_views":1,"page_views":"yes","times_period":"session","times_count":"close","devices_devices":["desktop","mobile","tablet"]}}" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-6ac41444 e-con-full e-flex e-con e-parent" data-id="6ac41444" data-element_type="container" data-settings="{"background_background":"gradient"}"> <div class="elementor-element elementor-element-130dcb04 e-flex e-con-boxed e-con e-child" data-id="130dcb04" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-363aeb6e elementor-invisible elementor-widget elementor-widget-heading" data-id="363aeb6e" data-element_type="widget" data-settings="{"_animation":"fadeInUp","_animation_mobile":"fadeInRight"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Stuck? <br>Our Elementor Expert is Ready</h2> </div> </div> <div class="elementor-element elementor-element-28f644d1 elementor-align-center elementor-widget elementor-widget-button" data-id="28f644d1" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://my.elementor.com/checkout-2/?add-to-cart=15726257&edata=%7B%22name%22%3A%22ELEMENTOR-SERVICES-CONSULTATION-01%22%2C%22price%22%3A%7B%22EUR%22%3A%2299%22%2C%22ILS%22%3A%22399%22%2C%22USD%22%3A%2299%22%7D%2C%22id%22%3A%2215726257%22%2C%22category%22%3A%22Elementor+Services%22%7D&currency=PLACEHOLDER" target="_blank" data-gtm-event_name="element_click" data-gtm-type="cta" data-gtm-section="popup" data-gtm-element_name="get professional help button" data-gtm-outcome="proceeding to intial site setup page" data-gtm-english_text="get professional help now" data-gtm-additional_description="services promotion popup"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-icon"> <i aria-hidden="true" class="fas fa-video"></i> </span> <span class="elementor-button-text">Unlock Your Session Now</span> </span> </a> </div> </div> </div> <div class="elementor-element elementor-element-6f4b5d14 elementor-absolute elementor-view-default elementor-widget elementor-widget-icon" data-id="6f4b5d14" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <a class="elementor-icon" href="#elementor-action%3Aaction%3Dpopup%3Aclose%26settings%3DeyJkb19ub3Rfc2hvd19hZ2FpbiI6IiJ9" data-gtm-event_name="element_click" data-gtm-type="ui" data-gtm-section="popup" data-gtm-element_name="exit button" data-gtm-outcome="closing the popup" data-gtm-english_text="get professional help now" data-gtm-additional_description="services promotion popup"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2197 5.21967C14.5126 4.92678 14.9874 4.92678 15.2803 5.21967C15.5732 5.51256 15.5732 5.98744 15.2803 6.28033L11.3107 10.25L15.2803 14.2197C15.5732 14.5126 15.5732 14.9874 15.2803 15.2803C14.9874 15.5732 14.5126 15.5732 14.2197 15.2803L10.25 11.3107L6.28033 15.2803C5.98744 15.5732 5.51256 15.5732 5.21967 15.2803C4.92678 14.9874 4.92678 14.5126 5.21967 14.2197L9.18934 10.25L5.21967 6.28033C4.92678 5.98744 4.92678 5.51256 5.21967 5.21967C5.51256 4.92678 5.98744 4.92678 6.28033 5.21967L10.25 9.18934L14.2197 5.21967Z" fill="black"></path></svg> </a> </div> </div> </div> <div class="elementor-element elementor-element-6c39a22 elementor-widget elementor-widget-text-editor" data-id="6c39a22" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p class="p1">Book a <b>45-min video consultation call</b> with an Elementor expert and elevate your site!</p> </div> </div> </div> </div> </div> </section> <script> addEventListener( 'onSiteCreationStart', function () { if ( ! window.braze || ! braze.logCustomEvent ) { return; } braze.logCustomEvent( 'site_creation_start_event' ); } ); </script> <link rel='stylesheet' id='e-animations-css' href='https://elementor.com/help/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.22.3' type='text/css' media='all' /> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-network/assets/js/geo-loader.js?ver=1.4.29" id="elementor-network-geo-loader-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/hc_sidebar/assets/js/lightbox-help-center.js?ver=0.1.14" id="hc-lightbox-js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js?ver=1.6.0" id="slick-js"></script> <script type="text/javascript" id="elementor-addtocart-tracking-js-extra"> /* <![CDATA[ */ var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; var addToCartTracking = {"currenciesCountries":{"default":{"currency":"USD","symbol":"$"},"IL":{"currency":"ILS","symbol":"₪"},"AT":{"currency":"EUR","symbol":"€"},"BE":{"currency":"EUR","symbol":"€"},"CY":{"currency":"EUR","symbol":"€"},"DE":{"currency":"EUR","symbol":"€"},"EE":{"currency":"EUR","symbol":"€"},"ES":{"currency":"EUR","symbol":"€"},"FI":{"currency":"EUR","symbol":"€"},"FR":{"currency":"EUR","symbol":"€"},"GR":{"currency":"EUR","symbol":"€"},"IE":{"currency":"EUR","symbol":"€"},"IT":{"currency":"EUR","symbol":"€"},"LT":{"currency":"EUR","symbol":"€"},"LU":{"currency":"EUR","symbol":"€"},"LV":{"currency":"EUR","symbol":"€"},"MT":{"currency":"EUR","symbol":"€"},"NL":{"currency":"EUR","symbol":"€"},"PT":{"currency":"EUR","symbol":"€"},"SI":{"currency":"EUR","symbol":"€"},"SK":{"currency":"EUR","symbol":"€"}}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-network/assets/js/add-to-cart-tracking.min.js?ver=1.4.29" id="elementor-addtocart-tracking-js"></script> <script type="text/javascript" id="elementor-site-js-extra"> /* <![CDATA[ */ var Elementor_Site_Args = {"ajaxurl":"https:\/\/elementor.com\/help\/wp-admin\/admin-ajax.php","i18n":{"stay_up_to_date":"Download Just a Click Away","get_free_download_link":"Get Free Download Link To Your Email"}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/themes/elementor-website/assets/js/app.min.js?ver=1.1.5" id="elementor-site-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/themes/elementor-website/assets/js/js.cookie.min.js?ver=1.1.5" id="elementor-site-cookie-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.22.1" id="elementor-pro-webpack-runtime-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.22.3" id="elementor-webpack-runtime-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.22.3" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" id="elementor-pro-frontend-js-before"> /* <![CDATA[ */ var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/elementor.com\/help\/wp-admin\/admin-ajax.php","nonce":"9e60fd9467","urls":{"assets":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/elementor.com\/help\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.22.1" id="elementor-pro-frontend-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2" id="elementor-waypoints-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> /* <![CDATA[ */ var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.22.3","is_static":false,"experimentalFeatures":{"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"additional_custom_breakpoints":true,"container":true,"container_grid":true,"e_swiper_latest":true,"e_onboarding":true,"home_screen":true,"editor_v2":true,"ai-layout":true,"landing-pages":true,"nested-elements":true,"display-conditions":true,"form-submissions":true,"mega-menu":true,"taxonomy-filter":true},"urls":{"assets":"https:\/\/elementor.com\/help\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"gradient","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":116,"title":"Search%20Form%20Widget%20%C2%BB%20Elementor","excerpt":"Learn how to add search anywhere on your site with the Search Form widget","featuredImage":false}}; /* ]]> */ </script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.22.3" id="elementor-frontend-js"></script> <script type="text/javascript" src="https://elementor.com/help/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.22.1" id="pro-elements-handlers-js"></script> <script> jQuery(document).ready(function($) { $(".elementor-post").each (function () { var postName = $(this).find(".elementor-post__title").text().trim(); $(this).find("a").attr("aria-label", function () { return "Read more: " + postName }); }); }); </script> <script> jQuery(document).ready(function ($) { setTimeout(function () { if ($('.elementor-toc__body').text().indexOf('No headings were found on this page.') != -1) { $('.elementor-widget-table-of-contents').hide(); $('#hide-toc-title').hide(); } /** * Hide Related Content text if there are no posts found. * Author - Nirbhay ***/ const relatedContent = $('#related-content-section .elementor-loop-container .e-loop-item'); if (relatedContent.length < 1) { $('#hide-related-content').css('display', 'none'); } /** Select specific heading tags (e.g., h1, h2) $('h1, h2, h3').each(function (index) { // Create a unique ID for the anchor link based on the heading's text var headingText = $(this).text(); var headingId = headingText.replace(/\s+/g, '-').toLowerCase(); $(this).attr('id', headingId); // Create an anchor link and append it before the heading var anchorLink = $('<a>').attr('href', '#' + headingId).addClass('anchor-link').html('露'); $(this).append(anchorLink); });**/ $('.anchorlink').on('click', function (e) { e.preventDefault(); var currentURL = new URL(window.location.href); // Remove a specific part, for example, the hash (fragment) portion currentURL.hash = ''; // Construct the modified URL var modifiedURL = currentURL.href; var linkToCopy = modifiedURL + $(this).attr('href'); try { navigator.clipboard.writeText(linkToCopy); console.log('Content copied to clipboard'); $('#notification-box').show().fadeTo(2000, 1, function(){ $('#notification-box, #notification-box p').hide().fadeTo(1000, 0); }); } catch (err) { console.error('Failed to copy: ', err); } }) }, 1000); }) </script> <script> jQuery(document).ready(function($) { jQuery( document ).on( 'submit_success', 'form#elementor_newsletter_subscribe', function( event, response ){ event.preventDefault(); var $thisForm = $( this ); let isNewsletter = $thisForm.find('input[name="form_fields[newsletter_subscribe]"]').val(); if ( 'elementor_newsletter_subscribe' === isNewsletter ) { if ( window.dataLayer && dataLayer.push ) { dataLayer.push( { 'event': 'GAEvent', 'eventCategory': 'form engagement', 'eventAction': 'form submit success', 'eventLabel': 'newsletter', 'customMetricKey': '31', 'customMetricValue': 1 } ); } } if ( 'undefined' !== typeof response.link && '' !== response.link ) { setTimeout( function() { location.href = response.link; }, 500 ); } return false; }); }); </script> <script> document.addEventListener('strattic-form-success', function() { var formElement = document.querySelector('#form'); formElement.classList.add('form-thanks'); }); </script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" /> <style> .bluenote{ background:#DCE6FF; } .greentip{ background:#D9FFF1; } .redwarning{ background:#FFF1E8; } .criticalwarning{ background:#FFE1E1; } .protip{ background:#DCD7FF; } .singleaction{ background:transparent; border:0.06rem solid #B5B5B5; } .contactsupport{ background:transparent; border:0.06rem solid #B5B5B5; } .hbutton a{ display:flex; margin-top:1.25rem; color:#05047E; font-size:1rem; font-weight: 700; text-decoration:none; } .bicon{ margin-left:0.5rem; } .generalnote{ background:#EBEBEB; } .hbox{ padding:1.88rem; border-radius:0.5rem; display:flex; font-family: DM Sans; font-size:1rem; line-height:1.6rem; color:#212121; margin-top:0.5rem; margin-bottom:0.5rem; } .hicon{margin-right:1.25rem;} .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 } </style> <script> document.addEventListener("DOMContentLoaded", function() { const videoElements = document.querySelectorAll(".custom-video"); videoElements.forEach(videoElement => { // Create the video wrapper const videoWrapper = document.createElement("div"); videoWrapper.className = "video-wrapper"; // Create the gradient overlay const gradientOverlay = document.createElement("div"); gradientOverlay.className = "gradient-overlay"; // Create the play icon const playIcon = document.createElement("div"); playIcon.className = "play-icon"; const playIconImage = document.createElement("img"); playIconImage.src = "https://academy.site.strattic.io/wp-content/uploads/2023/05/play_video.svg"; playIcon.appendChild(playIconImage); // Add everything to the wrapper and replace the video with the wrapper videoWrapper.appendChild(videoElement.cloneNode(true)); videoWrapper.appendChild(gradientOverlay); videoWrapper.appendChild(playIcon); videoElement.parentNode.replaceChild(videoWrapper, videoElement); // Now the new video is the one inside the videoWrapper const newVideo = videoWrapper.querySelector('video'); // Add event listeners playIcon.addEventListener('click', function() { if (newVideo.paused) { newVideo.play(); this.style.display = 'none'; gradientOverlay.style.display = 'none'; } else { newVideo.pause(); this.style.display = 'block'; gradientOverlay.style.display = 'block'; } }); newVideo.addEventListener('play', function() { playIcon.style.display = 'none'; gradientOverlay.style.display = 'none'; }); newVideo.addEventListener('pause', function() { playIcon.style.display = 'block'; gradientOverlay.style.display = 'block'; }); newVideo.addEventListener('ended', function() { playIcon.style.display = 'block'; gradientOverlay.style.display = 'block'; }); }); }); </script> <style> .video-wrapper { position: relative; width: 720px; height: 440px; margin: 20px auto 30px; display: flex; justify-content: center; align-items: center; } .video-wrapper video { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; /* Added */ } .video-wrapper .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(53, 55, 58, 0.5) 21.95%, rgba(30, 30, 30, 0) 77.02%); pointer-events: none; z-index: 1; } .video-wrapper .play-icon { z-index: 2; cursor: pointer; } .video-wrapper .play-icon img { margin-bottom: 0!important; } /* For mobile devices */ @media (max-width: 767px) { .video-wrapper { width: 264px; /* Adjust the width as needed */ height: 160px; } } /* For tablet devices */ @media (min-width: 768px) and (max-width: 1023px) { .video-wrapper { width: 640px; /* Adjust the width as needed */ height: 390px; } } </style> <script type="text/javascript"> // Showing/Hiding the feedback forms jQuery(document).ready(function($){ // Hide the forms by default $(".articlelike").hide(); $(".articledislike").hide(); // Toggle the .articlelike form when the .likebutton icon is clicked $(".likebutton").click(function(){ $(".articledislike").slideUp('fast'); $(".articlelike").slideToggle('fast'); }); // Toggle the .articledislike form when the .dislikebutton icon is clicked $(".dislikebutton").click(function(){ $(".articlelike").slideUp('fast'); $(".articledislike").slideToggle('fast'); }); }); // Showing/hiding the share URLs jQuery(document).ready(function($){ // Hide the widget by default $(".shareurls").hide(); // Toggle the .shareurls widget when the .sharebtn button is clicked $(".sharebtn").click(function(){ $(".shareurls").slideToggle('fast'); }); }); </script> </body> </html>