Boost SEO Pop-Ups: The NEW Off-Canvas Elementor Widget

Elementor v3.22 has finally landed with the Off Canvas Widget that;
Boosts the SEO you were missing with the Off Canvas Pop-Up
Gets you building on the Page where it will appear
Saves you jumping between Pages and Pop Up Templates
Awesome!
👉 Grab our $1 Business Packs: learn.websquad...
👉 WordPress Hosting: be.elementor.c...
👉 The Pro Page Builder: be.elementor.c...
Need 1-2-1 Support: learn.websquad...
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com...

[@BergschWerk]

Another idea for use could be to trigger a "show more" button which lets slide in a (vertical?) loopgrid with all of your posts about certain service, products or simillar

[@Dudeske]

Thank you a lot ! As always it is clear and super simple to follow your instructions.

[@websquadron]

You are welcome!

[@mcbroccolinnen]

Man this is incredible 😮

[@derleuchtturmwaerter]

Hi Imran. Great video, as always! I have one more question on the general subject of the menu: There has been a bug in Elementor for years which has still not been fixed. I wanted to ask if you could make a workaround for this, if you have a solution. I'm sure many users would be grateful: If you apply a submenu to the WordPress menu widget, the submenu indicator always loads with a delay. As a result, the main menu always jumps every time the page is loaded. Hiding the indicator does not work either, as the spacing is maintained even though the indicator is not visible. There are discussions about this in various forums. Perhaps you can find a simple, easy-to-understand way to solve this problem. Kind regards.

[@keysncoffee7733]

I know this is mostly for menus but it may also be good for an online shop. Click item from the main screen and it slides in from the right, for example.

[@websquadron]

Exactly! Share more details of the item with add to cart etc :)

[@keysncoffee7733]

@@websquadron yep! Just what I had in mind. Or if not a full item detail then it can be a nice presentation for a preorder-type item.

[@arenafidemaster]

@@keysncoffee7733 Have you done that? Is it possible that it is dynamic depending on what product that you clicked?

[@PaulHartke]

(Great video) Problem: I added the X to the container to close the off-canvas element, but the X shows up on the initial page when opening.

[@websquadron]

Is it definitely inside the container

[@PaulHartke]

@@websquadron Looks like it. Container->Icon->Title->Off-Canvas(menu)

[@TheOneLin3]

Thanks for all the great tips alllllllll the time 🙏🏼

[@dominmax]

I wonder: A. If you change the name Off-Canvas for something different - does it then appear on select list as the new name? B. Can you save the Off-canvas layer as a global widget and THEN use it all over the site? PS. Great video ;)

[@Rafa_Diogo]

Hi @websquadron Imran, thanks for always being on top of the events! The off-canvas widget looks great. I was thinking it would be amazing to trigger when hovering an icon, and close it when leaving the off-canvas area. Do you think this is possible to achieve?

[@websquadron]

That scenario would be adding this code to the Icon CSS. And you wouldn't need to use an Off Canvas Widget. Just a Child Container will be fine. selector .child_container_class_name {opacity = 0; display: none;} selector: hover .child_container_class_name {opacity = 1; display: block;}

[@Rafa_Diogo]

@@websquadron Thank you master

[@strepkoustly252]

if i use wp meteor to delay js until first user interaction, if i use off canvas menu, will crawlers be able to read it?

[@websquadron]

I don’t use wpmeteor anymore as I found it too harsh in terms of blocking

[@liviub.9363]

Thank you for another great video! Regarding Off-Canvas Widget, there is an inconvenience that might be solved somehow, but I have no idea how: if you put a video widget inside the off-canvas, while you triggered and played it, you'll have to stop or pause the video first and after that to close the off-canvas. On the other hand, the video (audio) is still playing in the background. With the pop-up widget, when you close the pop-up, the video stops.

[@ThatGuyBarrold]

Great content as always. 👌What html tag would you suggest with this?

[@websquadron]

Web Accessibility HTML Tag for Off Canvas Widget

[@designbookInc]

Thanks bro, exactly what I was looking for.

[@mksundstrom]

I've been using this ever since you made the video, but now I have a site where SEO and indexing is of high importance. Would you recommend putting the HEADER tag (under widget/additional options/HTML tag) on the off-canvas widget, or the off-canvas widget's first container?

[@websquadron]

Put it on the parent container where the off canvas widget sits.

[@mksundstrom]

@@websquadron so on the main/outermost "elementor header" container, which contains the off-canvas widget?

[@websquadron]

@@mksundstrom Yes, that one. As all items inside will be part of the Header Tag.

[@mksundstrom]

@@websquadron solid!

[@BrunoMartinAguilar]

very buggy. when you have the icon on a sticky header , the off canvas seems to blinking all the time when you scroll up or down

[@wasdeq6894]

how do i get rid of the white space that is visible

[@websquadron]

Where is the white space? Margins?

[@StanlayForker]

Do you have any idea, how we can close the canvas on link click if we use the off canvas as a on side jump nav?

[@websquadron]

I'm double checking that.

[@websquadron]

See this: kzbin.info/www/bejne/naGqm5iZZdV2pdUfeature=shared

[@noelawill]

I can't insert templates and can't copy and paste into the canvas

[@FokaMoka]

THX!

[@tonyclarkson2009]

It doesn't seem to like submenus. It would be good to make it deal with submenus in the same way as a regular mobile dropdown menu so that one fits all. Hopefully it's really easy and I'm just not getting it 🤞🏻

[@websquadron]

I'll have a look at that.

[@tonyclarkson2009]

@@websquadron Any chance you could figure it out for this afternoon? 😂

[@robertagiurbino8643]

Hi Imran. If we want to use the off-canvas menu widget only for mobile view, should we add another menu inside the widget and not show the desktop view? Can you share more details about creating the mobile menu using this widget when you can? Thank you!

[@websquadron]

Yup exactly that. Add a normal Menu and responsively hide for mobile. Then build the off canvas and only show the toggle for that and the OC widget for the mobile.

[@robertagiurbino8643]

@@websquadron thank you so much!

[@waran.t]

when we using this technique, then there would be two nav in the page, either one is hidden depend on desktop or mobile, in this case of two navs in one page, would that confuse the SEO? if yes, then would it be better for this technique to load the off canvas when we need only by using popup template, instead of off canvas widget? in terms of performance, would it be faster to load the page with out off canvas loading together with the page? in that case using popup template would be faster for page loading?

[@rg-web-design]

How strange. Updated Elementor (free and Pro) to 3.22 and not seeing this widget. Checked features and Element Manager.

[@websquadron]

Hmmmm even when you type Off Canvas?

[@rg-web-design]

@@websquadron Tried that too.

[@rg-web-design]

@@websquadron Jiust had a look on 8 different sites and it's only showing on one! How strange.

[@rg-web-design]

@@websquadron I just found that Nested Elements in Features has to be enabled.

[@abhyaskhanal]

Is this available only in pro version?​@@websquadron

[@RaffetAli2006]

Hi Imran, I have updated my Elementor & Elementor Pro to 3.22, but there was no Off-Canvas widget. Did I miss something?

[@websquadron]

Have you enabled nested widgets in your features?

[@RaffetAli2006]

@@websquadron Thank you so much, I have just enabled the nested widgets and was able to find the Off-Canvas.

[@navidfallah]

♥Great content

[@natalielundquist2838]

Can the widget only work with an active gesture (e.g. clicking on a button)? Or can it also be activated just by a visit to a page (like a traditional pop-up that pops up without any interaction)?

[@websquadron]

Not sure about that yet. Would need investigation.

[@deyoglines]

Strange, I don't have an animation duration slider. (?) Anyone else?

[@xsiete25x]

i just noticed that...weird

[@deyoglines]

It is. Oversight maybe? Hope they catch that too 😂

[@awildmyth]

Same here its missing: Off-Canvas--> Content--> Setting --> MISSING ( *Animation Duration* ) | Has anyone recieved a reply relating to this issue?

[@ened42]

Think I asked this on another video before but could this be used for hiding filters off canvas (specifically WP Gridbuilder filters) on mobile, then have them appearing on click of a button? Haven’t found a good solution for it in Wordpress yet it seems standard on most online shops.

[@websquadron]

Yes, because the OffCanvas is built on the Page. So if the Grid is on the page, and you add the Filters Off Canvas it will still work. I tested this with the Elementor Taxonomy Filter in a video last month.

[@ened42]

@@websquadron excellent, thanks Imran! I’ll check out the video.

[@resistenzainutile]

The link to open the off canvas doesn't work on firefox mobile on android... no issue on chrome.

[@KurtVortex]

Sounds like a caching issue, clear the cache and test on incognito.

[@ruslanstarushenko6180]

What do you think about off-canvas for a mobile menu? Is it worth making an HTML tag - nav?

[@websquadron]

I think it's fine to use :)

[@ruslanstarushenko6180]

​@@websquadron Thanks ❤

[@MrCleverFox]

We're seeing some funky stuff happening when using off-canvas widget with a vertical Wordpress menu that has child dropdowns. Essentially, this Wordpress vertical menu seems to be pushing the child dropdowns outside of the off-canvas area - rendering it impossible to click on child menu items. Any suggestions?

[@websquadron]

In that scenario, I would use an Accordion (though not great for SEO unless you hide the WordPress Menu to still get the SEO tick). Alternatively, consider an Apple Style Menu: kzbin.info/www/bejne/m4XZf6KJZ96kmpYfeature=shared

[@CaZper.]

a multilevel menu would be nice in this case

[@websquadron]

See my Apple Menu video :)

[@openskyphotography]

Do you think this or the mega menu would be better for SEO? Currently I use popups for mega menu functionality (in a header), but I know that’s bad for SEO.

[@websquadron]

Meta menu is great for the hover effect. Off canvas is better than pop up for seo.

[@openskyphotography]

@@websquadronthanks! Is mega better then off canvas for SEO?

[@warblog6165]

How’s about you have a ‘buy me a coffee’ box somewhere; as it’s optional nobody is put out yet I think it would be nice to say more than “thank you” sometime?

[@websquadron]

Agreed :)

[@rafaeln.castrom.6453]

OMG.!