{"id":1830,"date":"2018-09-06T14:08:00","date_gmt":"2018-09-06T14:08:00","guid":{"rendered":"https:\/\/conceptoriginal.co.uk\/2023\/?p=1830"},"modified":"2023-05-15T14:22:32","modified_gmt":"2023-05-15T14:22:32","slug":"full-page-scrolling-on-divi-with-the-mouse-wheel","status":"publish","type":"post","link":"https:\/\/conceptoriginal.co.uk\/2023\/tutorials\/full-page-scrolling-on-divi-with-the-mouse-wheel\/","title":{"rendered":"Full page scrolling on Divi with the mouse wheel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1830\" class=\"elementor elementor-1830\">\n\t\t\t\t\t\t\t\t\t<section data-exad-particle-enable=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-f91c67f elementor-section-boxed elementor-section-height-default elementor-section-height-default exad-parallax-effect-no exad-background-color-change-no exad-glass-effect-no exad-sticky-section-no\" data-id=\"f91c67f\" data-element_type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-533c51b exad-glass-effect-no exad-sticky-section-no\" data-id=\"533c51b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-345f1b7 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"345f1b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.13.3 - 28-05-2023 *\/\n.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>\t\t\t\t<p>If you are like us and are subscribed to the Elegant Themes Blog you would have noticed that back in May they showed off Full Page Scrolling using some buttons\u00a0<a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-full-screen-sections-with-top-and-bottom-scroll-links-with-divi\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p><p>\u00a0<\/p><p>We then noticed that in the comments below the post and in the YouTube video people wanted it to work with the mouse wheel! Well here is a short and simple tutorial of how to make that work.<\/p><p>\u00a0<\/p><p><em>*Disclaimer \u2013 This is for desktop only as the mobile experience for this would not be great.<\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44ec4ba uael-faq-box-layout-yes align-at-left exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-uael-faq\" data-id=\"44ec4ba\" data-element_type=\"widget\" data-widget_type=\"uael-faq.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n\t\t\t<div id='uael-faq-wrapper-722' class=\"uael-faq-wrapper\">\r\n\t\t\t\t<div class=\"uael-faq-container uael-faq-layout-accordion\" data-layout=\"accordion\" >\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-0dedc20\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-0dedc20 uael-question-span\" tabindex=\"0\" id=\"uael-faq-1\">Step 1<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><div class=\"et_pb_module et_pb_toggle et_pb_toggle_0 et_pb_toggle_item et_pb_toggle_open\"><div class=\"et_pb_toggle_content clearfix\"><p>Install WordPress &amp; The\u00a0<a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44692\" target=\"_blank\" rel=\"noopener\">Divi Theme<\/a> plus the divi builder and updated them to the latest versions.<\/p><\/div><\/div><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-0b8dd17\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-0b8dd17 uael-question-span\" tabindex=\"0\" id=\"uael-faq-2\">Step 2<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><p>Create the page that you would like to have the full screen scrolling on then activate the Dot navigation on the right hand side.<\/p><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-3705186\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-3705186 uael-question-span\" tabindex=\"0\" id=\"uael-faq-3\">Step 3<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><p>Create a Full Width Section and add a background to it, make sure its at least 1920\u00d71080 (Use the 3 lines in the purple area).<\/p><p>Then add a Full Width Header and make sure the background is set to clear. Then add a title so you know what section is what.<\/p><p>Finally in the full width header goto the design tab and activate the full screen option.<\/p><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-802fd76\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-802fd76 uael-question-span\" tabindex=\"0\" id=\"uael-faq-4\">Step 4 &amp; The Code<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><p>Now its time to add the code into your settings so that the page scrolls with a mouse wheel. To do this goto:<\/p><p>Dashboard, Divi, Theme Options and Integration. Then past the code below in the\u00a0<em>Add code to the &lt; head &gt; of your blog\u00a0<\/em>section.<\/p><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-cd20576\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-cd20576 uael-question-span\" tabindex=\"0\" id=\"uael-faq-5\">Step 5 - Using the code on a single page<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><p>If you are like us and only wanted to use this code on one page of your website then we recommend using the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/oh-add-script-header-footer\/\" target=\"_blank\" rel=\"noopener\">SOGO Header Footer<\/a>\u00a0Plugin and adding the js code straight to the webpage.<\/p><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"uael-accordion-e721617\" class=\"uael-faq-accordion\" role=\"tablist\">\r\n\t\t\t\t\t\t\t\t<div class= \"uael-accordion-title\" aria-expanded=\"false\" role=\"tab\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon uael-accordion-icon-left\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-closed\"><i class=\"fas fa-angle-right\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"uael-accordion-icon-opened\"><i class=\"fas fa-angle-up\"><\/i><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"uael-question-e721617 uael-question-span\" tabindex=\"0\" id=\"uael-faq-6\">Step 6 - Optional<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"uael-accordion-content\" role=\"tabpanel\">\r\n\t\t\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t\t<span><p>If you are using the Divi bottom bar you may notice that the page will not scroll down to it, so a work around for that is to re create your footer in the Divi builder and then the webpage will scroll all the way down.<\/p><\/span>\t\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aaa44e1 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"aaa44e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"et_pb_module et_pb_text et_pb_text_1 et_pb_text_align_left et_pb_bg_layout_light\"><div class=\"et_pb_text_inner\"><p>We have also just published a short 8 minute tutorial video on this below:<\/p><\/div><\/div><div class=\"et_pb_module et_pb_code et_pb_code_0 et_pb_text_align_center\"><div class=\"et_pb_code_inner\">\u00a0<\/div><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b62f11 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-video\" data-id=\"9b62f11\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/28myRHSpetc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.13.3 - 28-05-2023 *\/\n.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;left:0;width:100%;height:100%;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%}.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>\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>If you are like us and are subscribed to the Elegant Themes Blog you would have noticed that back in May they showed off Full Page Scrolling using some buttons&nbsp;here. We then noticed that in the comments below the post and in the YouTube video people wanted it to work with the mouse wheel! Well &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/conceptoriginal.co.uk\/2023\/tutorials\/full-page-scrolling-on-divi-with-the-mouse-wheel\/\"> <span class=\"screen-reader-text\">Full page scrolling on Divi with the mouse wheel<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":1846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[17],"tags":[],"_links":{"self":[{"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/posts\/1830"}],"collection":[{"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/comments?post=1830"}],"version-history":[{"count":5,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/posts\/1830\/revisions"}],"predecessor-version":[{"id":1843,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/posts\/1830\/revisions\/1843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/media\/1846"}],"wp:attachment":[{"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/media?parent=1830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/categories?post=1830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/conceptoriginal.co.uk\/2023\/wp-json\/wp\/v2\/tags?post=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}