IMPORTANT NOTE :
This video shows you how you can make flexpanels that open/close ON HOVER, but I also made a version where the panels open/close ON MOUSECLICK.
UPDATE 30-01-2021:
ALL CSS-files were updated for DOM enhancement in Elementor 3.0 and later.
LIVE PREVIEWS
-------------------------
(open on click / mobile disabled)
franktielemans.be/blog/flexpa...
(open on click / mobile enabled)
franktielemans.be/blog/flexpa...
(updated 20-04-20)
version with custom scrollbar and fading effect in the flexpanel_content innersection..
franktielemans.be/blog/flexpa...
IMPORTANT NOTE:
When you use Ooohboi's steroids for Elementor plugin, make sure breaking bad is disabled for the flexpanel_content innersection, because it will override the sections width.
IF YOU WANT TO DO IT QUICKLY, SIMPLY DOWNLOAD 3 FREE TEMPLATES!
--------------------------------------------------------------------------------------------------------------------------
(updated 20-04-20)
glyphbox.be/downloads/flexpan...
HERE IS THE CSS FOR OPEN / CLOSE PANELS ON MOUSECLICK
----------------------------------------------------------------------------------------------------------
CSS (disabled on mobile)
glyphbox.be/downloads/flexpan...
CSS (enabled on mobile)
glyphbox.be/downloads/flexpan...
HERE IS THE JAVASCRIPT FOR OPEN / CLOSE PANELS ON MOUSECLICK
----------------------------------------------------------------------------------------------------------------------
(copy/paste it in a HTML widget and drop it BELOW the panels section)
glyphbox.be/downloads/flexpan...
Update your work, and refresh the browser because the script has to be loaded.
HERE IS THE CSS - OPEN / CLOSE PANELS ON HOVER
--------------------------------------------------------
CSS (enabled on mobile)
glyphbox.be/downloads/flexpan...
CSS (disabled on mobile)
glyphbox.be/downloads/flexpan...
VIDEO DESCRIPTION
This tutorial is all about flexpanels and how you can make them in Elementor Pro and CSS (No other plugins needed).
This can be used for all kinds of applications, for categories, for teampages, image galeries,...
Feel free to hit that subscibe button for more tutorials about Elementor + CSS
Timestamps
0:07 What we are going to make
1:00 STEP 1 | Create the section (flexpanels)
1:55 STEP 2 | Create the panel title (flexpanel__title)
2:51 STEP 3 | Add class and background to section column (flexpanel)
3:37 STEP 4 | Add the innersection (flexpanel__content)
4:22 STEP 5 | Add content to the innersecton
5:53 STEP 6 | Name your layers in the navigation window
6:50 STEP 7 | Copy/paste CSS and watch the magic happen!
7:55 Modify content via the navigator
10:38 Modify content , quick & dirty way
12:35 Keep flexpanels active on mobile too
Негізгі бет Тәжірибелік нұсқаулар және стиль Flexpanels in Elementor Pro tutorial no extra plugins
Пікірлер: 34