Hero
Section
Notes: Adding the class hero is important to use for main hero banner images, as it not only adds the small cutout seen in the bottom-left of the image automatically, but adds code to ensure visibility on older browsers and shorter viewports (i.e. laptops and tablets).
A element can be used to change the color for specific sections of text. Simply add where color is the color you want to change the text to. Allowed classes are yellow, black, white , grey, light-grey , dark-grey, green, and blue.
Header / Nav Menu Notes
To enable the transparent header (as seen on this page), you must go to the main WordPress dashboard, then navigate to Elementor > Templates. From there, you will need to open both the Static Header and Main Header templates. Click the small arrow next to the Update button in the bottom-left, and select Display Conditions. On the Static Header template, add a line excluding the desired page from showing the standard header, and then on the Transparent Header add a line enabling that header for the desired page. The transparent header has a default negative margin to ensure the Hero image shows behind the header. Do not edit the margins of the transparent header.
Holding transparent SVG Clip-Paths here for testing
Add Your Heading Text Here
Add Your Heading Text Here
Note: There are a few options for the 50/50 text and image sections. Above uses clip-path and is unreliable at multiple viewports. It is being looked at, but I do not recommend using it on the site yet. Below is a simpler layout that works at any size. The angle cut is a part of the image. The template above is 50/50 Quote and Photo A and the one below is 50/50 Quote and Photo B
Add Your Heading Text Here
Add Your Heading Text Here
Looking for
Something Specific?
Note: For proper interstitial search form styling, use class hp-search on the ‘Search Form’ widget. Button or input text may appear skewed in the Elementor editor; utilize the preview icon to properly review.
Add Your Heading Text Here
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
We've got answers
Frequently Asked Questions
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.
Placement of the chevron can be adjusted in the widget’s Custom CSS section. Use selector:before, and then adjust the values for top and left. Make sure to check tablet & mobile viewports and add relevant media queries if needed. For example:
selector:before {top: 3rem; left: -3rem;}
@media screen and (max-width: 768px) {
selector:before {top: 0; left: 1rem;}
}
Note: To add arrows after an element, use the class LARR for left-pointing arrows and RARR for right-pointing ones. Due to the way the element is constructued, padding should not be added to any element with either of these classes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Note: Use the Blockquote widget to add a pullquote as above. Make sure to add the class angle-quote to add the stylized border and chevron graphic. This section works best when the following section is full-width with a defined break (as shown here), to give the illusion of the angled quote line continuing behind it.
To add a subtitle under the quote author, use HTML inside of the “Author” field and add a line break <br /> and <span class=”subtitle”>Subtitle</span> around the subtitle.
Note: This is the “Testimonial Carousel” widget with the same angle-quote class added, for when multiple testimonials should be shown in a slider.
Subheadline
Section Headline
- Unique Selling Point
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
- Unique Selling Point
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
- Unique Selling Point
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
- Unique Selling Point
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
Note: To ensure accurate title alignment, make sure to add the class usp-title to the ‘Icon List’ element added above. The 2-column layout is saved as a template named 2-Column USP Layout.
Components
Lorem ipsum dolor sit amet, onsectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, onsectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Note: This is an alternate hero section layout. The hero class still provides for the cutout in the bottom left, and also places width caps on the text to ensure it stays on the background shape for proper legibility. This template is titled Hero Section w/ Text
Below are two additional alternate sections. irst is identical to the above, but with the text on the left, called Hero Section w/ Text (Left). After is a short hero section for use on pages that do not need a lot of action at the top. Standard hero sections can also adopt this style by adding short to the class list (so the section’s classlist is hero short )
Add Your Heading Text Here
Components
Lorem ipsum dolor sit amet, onsectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, onsectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Short Hero Section
Note: Full-width sections can add an angle cut (pictured above) on either side by adding the class angle-cut-l or angle-cut-r.
New Dealer Application
Patches
Custom Patches
With 39 years of experience under our belt, our team knows patches like the backs of our hands and we walk customers through every step of the process from choosing patch type, border, backing and beyond.
Fast Quoting
Quotes within 24 hours
Design & Production
Personal guidance through the design and production process by our talented team of patch experts
New or Existing
Create a Brand New Patch or reproduce an Existing Patch
Note: This section is pulled from the ‘Patches Landing Page’ wireframe
Note: The section above uses the 3 dutygear subgroups as examples but can be used as intra-page navigation in other sections as well. The version above uses text for title, below shows images for titles (to help use sub-brand logos)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
<h5> is for accented text and subheaders. By Default it will appear slightly larger than any <p> tags that follow it.
Built Tough. Action Ready.
Duty Gear
Cross-Sell
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus.
1 of 2Feature 2
Lorem ipsum dolor sit amet.
2 of 2Note: The section above is Elementor’s built-in tooltip widget and is styled by default to recall the styling from the sketch.
Below is a custom coded version that more closely resembles the sketch. HOWEVER this one is more tricky as it has to be manually set up, and the JS code needs to be edited for each instance of the component. See beneath that component for specific instructions.
Duty Gear
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Heavy Duty Closures
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus,.
- Select the main overarching section (named Custom Tooltips in the navigator), and give it a unique ID. I usually use ‘tooltip-CATEGORY’ where category is Airtek, Ballistic, Patches, whatever is most relevant. Again, this must be unique on the page.
- Make sure that your tooltip icons have a link to some kind of anchor. It doesn’t matter what it is, since it won’t actually lead anywhere, but using /dead/ or # will refresh the page and won’t work and is a bad UX. I’ve been using #tooltip-1, #tooltip-2, etc to help keep track of what is what
- In the ‘Advanced’ tab of the tooltip opener icon (the plus sign), add the class ‘tooltip-open’. The open the Attributes panel. Add the attribute data-tooltip, then the ‘|’ (pipe) character, then the number of the corresponding tooltip (1, 2, 3, whatever). No spaces. It should look like this:
data-tooltip|1
- Now go to the text that corresponds to tha tooltip (it might only be visible in the navigator, and hidden in Elementor’s visual editor). In the navigator these are named “TOOLTIP X TEXT” where the X is the number of the tooltip. Add the same data attribute for this as you did for the opener icon. You’ll also need to add the class ‘tooltip-information’
- Finally, click the HTML widget at the bottom of the component. It will show you the raw javascript inside of <script> tags. In this code you will see multiple references to an ID (indicated with a #). Take the unique ID you created in step 1 and replace each ID in the Javascript with it. Kind of like this:
... jQuery('#tooltip-airtek .tooltip-open').each(function(){ ...The area highlighted in yellow is one of the locations you need to change the ID. Make sure each time is preceded by the # sign. Leave the rest of the code alone.
- This should link everything up and you’ll be all set. If it doesn’t work, don’t panic – just call Max and he’ll fix it.
