Headspin Logo
1.2.3
Wireframes
Hero 9

Hero 9

Published
March 13, 2024
Category

Make better products faster than ever.

Achieve faster innovation, crafting high-quality products with ease.

7+
15,000 happy customers
Add to collection

Overview

This section is designed to incorporate a DIV with attribute [lazy-hero-slider="9"] that spans 50% of the screen's width, extending beyond the container's boundaries. This effect is achieved through the application of custom CSS, utilizing a grid layout.

Instructions:

  1. To establish a gap between the content and the image element within the main section, navigate to: Section -> Advanced -> Custom CSS. It is advisable to utilize the clamp unit for spacing. This approach eliminates the need to define different spacing values for smaller screens.

Tips:

  • To alter the positioning of the content relative to the image slider, simply interchange their placements. This modification will be automatically accommodated.

Image slider configuration:

All configuration settings for this image slider can be located within the Custom CSS section of the element "Slider" whose name includes "CSS".

Capabilities:

  • To adjust the gap between images and columns, modify the value of the --image-list-gap variable.
  • The animation duration can be set using --image-list-duration.
  • Image height is controlled via --image-item-height.
  • Image width is controlled via --image-item-width.
  • For a reduced height on mobile devices, utilize --image-item-height-mobile.

You might also like

Find more about Headspin UI

Headspin Logo
1.2.3

Products

Copilot Wireframes Sites Components

Resources

Documentation Guides Inspiration Tutorials Blog Support Pricing Changelog Roadmap Testimonials

Community

Facebook X Discord

Legal

Privacy Policy Cookie Policy Terms and Conditions License
Built with
Breakdance
and
Headspinui
@ 2024 HeadspinUI. All rights reserved.
'; //document.body.appendChild(iframe); var html = document.querySelector("html").outerHTML; var body = target.outerHTML; target.replaceWith(iframe); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); //document.querySelector("iframe").contentWindow.document.querySelector("body").innerHTML = body; iframe.onload = (event) => { iframeCleaner(); }; var doc = iframe.contentDocument || iframe.contentWindow; var _timer = setInterval(function() { console.log("timer-load"); if (doc.readyState == 'complete') { clearInterval(_timer); iframeCleaner(); } }, 100); } function iframeCleaner(){ var doc = document.querySelector("iframe").contentWindow.document; var sections = doc.querySelectorAll("body > *"); sections.forEach(section=>{ if(section.tagName != "MAIN") section.remove(); }); if(doc.querySelector(".mbfp-btn")) doc.querySelector(".mbfp-btn").remove(); } /**/ const targetNode = document.querySelector("html"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: false, subtree: false }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === "childList") { console.log("A child node has been added or removed."); } else if (mutation.type === "attributes") { var att = targetNode.getAttribute("data-hsx"); var iframe = document.querySelector("iframe"); if(iframe) { iframe.contentWindow.document.querySelector("html").setAttribute("data-hsx",att) } } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); })