A Fullwidth Header with a lot of hidden powers. Drag and discover it!
Fullwidth Header section suitable for all kind of websites that want to add a touch of originality at the top of the page.
The main feature of this layout is the fact that the scroll icon is placed at the center of the header and is transformed into a draggable element (from left to right in the diagonal version, from top to bottom in the vertical version).By dragging it, the color of the gradient will occupy more or less space, allowing you to see a smaller or larger part of the image below.
The layout makes a modest use of jQuery; we therefore recommend that you minimize the code according to your needs. You will find the jQuery and Css in the Code module well documented and commented in order to allow you to customize every aspect of the design.
If you need the layout on more than one page/post you can also copy the Css code of the Code module in Divi Theme Options -> Custom Css and the jQuery script in Divi Theme Options -> Integration -> <head>.
The zip file includes:
Layout Sample Image
This layout is a Fullwidth Header made of four sections:
1ST SECTION: Fullwidth Header with a diagonal gradient for Desktop/Tablet;
2ND SECTION: Fullwidth Header with a vertical gradient for Desktop/Tablet;
3RD SECTION: Fullwidth Header with a vertical gradient for Mobile (without the draggable feature);
4TH SECTION: Code Module – A Code Module in which is stored all the advanced css and jQuery to make the design properly work.
You can choose to use only the ‘Diagonal’ version or only the ‘Vertical’ one such as like you can also use one version for Desktop and the other for Tablet (while we strongly recommend to use the ‘Mobile’ version for mobile because the draggable icon will not work properly in mobile devices). If you choose to use just one version, we strongly recommend to delete the entire script relative to the version you don’t use in the code module; doing so you will earn in terms of performance and page loading.
There is a NECESSARY STEP you have to do when loading the layout. You will have to change the Image url for Diagonal and Vertical versions directly in the Code module. You have to paste your image url both in the Style and in the Scripts parts where you will find the comment: /* CHANGE HERE YOUR IMAGE URL */.
You can also enable/disable some css classes for customizing the layout design:
– ‘header_shrink‘ (Enabled by default) -> This class is responsible for the header content shrinking to the left. If enabled the text will automatically occupy just the header portion in which will be the gradient color and shrinking it to the left finally the text will slowly disappear. – ‘header_shrink_vertical‘ (Enabled by default) -> This class is for the Vertical version. If enabled the header content will shrink to the top by dragging the vertical scroll icon. – ‘shadow‘ (Enabled by default) -> If enabled this class add a shadow to the scroll icon; the shadow will be stronger when the icon is in start and stop position. – ‘no-href‘ (Enabled by default on Diagonal/Vertical) -> If enabled the scroll icon will not redirect to the next section as default.
We offer a basic support that includes: a) fixes of any display problems; b) one minor design improvement. This can involve a specific part of the layout and in a way that the improvement doesn’t change the global design: could be for example changing the gradient or styling some elements or adjust some design feature.
The time needed to get support may vary; any fixes will be supported in about 1/2 days while for the improvement support the time needed will be from 1 to 5 days.