What are /r/elementor's favorite Products & Services?

From 3.5 billion Reddit comments

The base Elementor Pro forms widget will allow you to do this.

https://elementor.com/help/dynamic-request-parameter-pro/

​

You could always just hard map it into the button if it's not a dynamic element you're passing over.

We get this question once a week it seems! Are you a professional web designer? You want to charge people thousands for sites, correct? $200 up front, $100 per year renewal is worth it. If all functions were separate plugins, you'd be looking at thousands, or at least sleepless nights scheming up workarounds with 50+ free, annoying, ads-in-your-face additional plug-ins.

You've got to spend money to make money. The free version is just enough to get you hooked. Plus, if you're worried you can't make $100 per year to break even, you can always make 50% off each elementor purchase via referral link! ;) wink wink

Of course you don't need to purchase Adobe suite for that, even Adobe XD for desktop works;

Or use free alternative, from open source software as Inkscape (alternative to Adobe Ilustrator) , or GIMP (alternative to Photoshop); many youtube channel with comprehensive tutorial ; for these i would recommend youtube channel → Logos By Nick ;

Event simpler, online editor.

You can with, use a online converter, but for it to work, is has to super simple logo;

Hi,
Did you try these steps listed on the Elementor site. https://elementor.com/help/how-to-fix-the-preview-could-not-be-loaded-error/
I will suggest first save the Permalinks settings in WordPress and try.
Thanks

I don’t think there’s a way per page, but Elementor does have a System Info report which counts all the widgets used later in the report. Perhaps this might help. I wish it broke it down further though and told me which pages the widgets were used on.

https://elementor.com/help/systems-info/

Sounds like you're overcomplicating things. Templates are made in the Templates / Theme Builder builder section. Simply click on what type of template you wish to make (header, footer, page, post etc), design the page and then when you publish you set the parameters for where you want this template to be used. https://elementor.com/features/theme-builder/

See below for features.

Yes you can build a great website/page with the free version. You'll get plugins to fill the 'Pro' gaps.

​

https://elementor.com/features/

Totally lost on what you're having problems with here. And there's no image attached.

Are you having trouble getting specific posts to show up on your home page? Here's a video explaining how to create the query to pull the proper ones. (You have to have them set up properly per post, not just the Elementor widget. "Garbage in, garbage out" applies here for sure.)

https://elementor.com/help/posts-widget-pro/

This is a pro feature, so if you're using the free version Google around for plugins that would work for you.

Hope that helps.

Hi!

I've just done a quick video making something similar using only Elementor (pricing table widget and tabs widget)

https://www.loom.com/share/05ad5d57edf54df7a68aedf9c124d7a7

It's only a quick video, but obviously you can style yours much better than mine using Elementor options and some css 😁

Hope it helps!

Hi u/UnbalancedFox,

I found this tool that might be helpful... I haven't used it myself, but it looks very promising and you can enter your own local path for your site to view on many different mobile devices.

It says it's "Free forever" (interesting). Let me know if this works out for you.

https://www.lambdatest.com/lt-browser/

Good luck with the website and have fun testing! ;-)

Yeah as someone else mentioned, just use the free Hello Elementor theme. You don't need it, but if you're using Elementor Pro, then this will be the fastest and most lightweight theme you can use. It doesn't come with any headers, footers, etc. which means it'll load faster, and that's fine because you're going to be building that stuff with Elementor anyway.

Although Astra is a fast theme, it's not faster than Hello Elementor. It's just that you can't really use Hello Elementor without Elementor because it's so stripped down and lightweight that it's kind of useless with Elementor.

But if you're using Elementor, then by far the fastest theme you can get is Hello Elementor. I highly recommend you change your theme (just do backup first to be safe!).

It is possible with Pro if the text isn't too long. You can have the button link to the same URL but with a query string like this:

domain.com/url?message=yourmessagehere

You'd have to use propery URL encoding to get spaces and whatnot in the query string. Then you can use a dynamic request parameter to pull the query string into the from field as the placeholder.

Of course this method is a bit hacky. A proper method would use a small javascript snippet. You can probably find a good starting point on stackoverflow.

The easiest method would be to make the message the default placeholder content but hide it with CSS. Then add a class to the form field when the button is clicked, which removes the 'display: hidden" css rule.

That's for the 'image' widget--I'm using the 'image box' widget (https://elementor.com/help/image-box-widget/), and the shadow option for the image part of that is missing.

I got impatient, and went ahead and put together an image box, a header, and a text box for what I needed. Inefficient, but it works (and I've got deadlines...). Thank you to everyone that replied, I appreciate the help.

Its a sick problem in elementor.. I faced this in many sites in my working history. There's couple ways to fix this out..

1. Increase Memory Limits & update php version (national solution)
2. Elementor rollback

You can try some debugging, 3. Check console log errors 4. Disable elementor pro & check its working or not. 5. Take backup & re install elementor.

Or you can check their article here

Hi u/planetofthecrepes,

Here's the Elementor video tutorial for hot spots: https://elementor.com/blog/create-responsive-image-hotspots/

If you deleted the "elementor single page #177 - draft" template, it will not delete what you made. The header you are making now is on an actual page, but deleting the template could also cause issues for the other pages like FAQ and About Me. You may just have to style each page a little if you delete the template.

Ideally for the Header, in Theme Builder click "add new" - select header from the dropdown - name it header - copy your sections from the other page you made the header on - publish with the condition "entire site".

The same goes for the footer. Click the link below for more of a guide from Elemntor...

https://elementor.com/blog/header-footer-builder/

*TIP* You can copy full Elementor sections and widgets between pages. Right-click - copy - leave tab open - open template page in new tab - right-click - paste.

Hello, my understanding is you have to put a picture in the background of your entire page or site. Your reference use a single small image (300x300px) who is repeated horizontally and vertically by default and fixed by css property.

You can do that with Elementor on your entire site. You'll found the procedure in this page : https://elementor.com/help/background-site-settings/

By default, your background image will be repeated and you just have to set the attachment option on fixed.

You can do the same thing on an unique page by clicking the gear icon located at the bottom left of the panel, in the Style tab.

After reading up on this again, a LocalHost should not use up a license key.

Not entirely sure if this has to end in a choice of TLD's though, which are; .dev, .local or .test.

Sure it worked fine on my LocalHost and for an online .dev TLD that I bought by chance when Google offered them.

Not sure that your staging site will work for you as you currently have it set up, as it may be considered a different site that requires a key.

Working locally isn't quite the same as a staging website as it can't be pushed through as easily. Requires backup and cloning.

Here is an article masterclass from EM about working in a website staging environment -> https://elementor.com/blog/wordpress-staging-site/

Hopefully, someone can post what they do here for you too.

You don't have downgrade your current version of Elementor pro because they have release a patch and you should update it right now https://elementor.com/pro/changelog

First, before doing anything else you need to understand what the clients site is built with. Go to Builtwith.com and insert your clients URL.

From there, you need to make sure your client is using Wordpress. You can also check to see if they are using any other page builders like Divi or WPbakery. If they are, it can make things a little more complicated when transitioning pages over to elementor.

Have them grant you access to their site. Before doing anything else, make sure to back up their site on their server.

Duplicate their homepage and set the duplicated copy as a draft. Install elementor and edit the draft page using elementor. Once this page is approved by said client, simply publish it and change it to the new homepage.

https://gtmetrix.com/reports/koenigdunne.com/cJcVme94/

Before any other recommendations, you need to fix the files that are 404ing in the waterfall. That alone is majorly hurting your performance, at least it seems to for gtmetrix. Your pagespeed insights mobile score is actually already in the 90's.

Try switching to VW/VH or % units for margins and padding, it can help to alleviate those issues, you can also try responsively.app to check various screen sizes from your PC.

While you definitely want to add 301 redirects for any URL (page, post, etc.) that you unpublish, I believe you were actually asking about how to create a custom 404 page template that would appear when someone browses to a URL that doesn't exist (or isn't properly redirected).

https://elementor.com/academy/how-to-create-a-custom-404-page/

First, make sure you don't expose your email on your website.

Captcha isn't foolproof so some sophisticated bots will be able to pass it. Add honeypot (comes with Elementor Forms) on top of captcha.

If you still getting spam, install third-party plugins like OOPSpam.

https://elementor.com/help/can-i-upgrade-my-license-after-i-have-already-purchased-one/

> you will only need to pay for the difference between your current license and the one you are upgrading to, based on a prorated price, depending upon how much time is left on your current subscription.

Check page layout settings of your front page (and all others for that matter) they should be elementor full width. Not elementor canvas or default. Could also be a conflict with your theme I’d recommend the hello theme by elementor.

Likely the display conditions of the original header are set to entire site. Remove display condition from original header and change the new headers to entire site. https://elementor.com/help/conditions/

This is a pro feature, although I believe someone had mentioned there's ways to do it on Free too with extra plugins.

https://elementor.com/help/posts-widget-pro/

Another option is to use a tag instead of category and flag the posts you want in this area with the proper tag.

In case you're not, use Chrome, Firefox, Edge (v79+) or Safari to do this. Other browsers aren't supported. Update your browser if you're on an older version.

Check with your server host to see if they're blocking for any reason. Could maybe be a firewall issue or some security setting they have in place. Make sure your memory limit is decent, you'll see a bunch of posts on here with people increasing but not enough. And double-check your file size and type, make sure you're not timing out or trying to upload a file format not supported.

https://elementor.com/help/requirements/ -- here are the server minimums and requirements for Elementor.

Have you tried uploading anything at all to your media center? Or connecting via FTP/SFTP?

If you recently updated Elementor Core to 3.5.3 version, there is an issue when adding widget icons to the favorites widgets section on the editor, disable that feature on experiments config...
More info: https://elementor.com/help/known-bugs-and-user-experience-issues/

Elementor strongly recommends not using this on production sites. It is still early access, mostly released for developers and bug testing.

>Important! Use with caution. Please do not use Developer Edition on production sites. Developer Edition releases, just like beta releases, may not be stable. Use it on staging environments only, and back up your entire website before updating.

https://elementor.com/help/container-element/

I use Crocoblock, so forgot how to do this in EM.

From memory, I'm sure you need EM Pro (unless a free plugin exists that you can use). That is one of the downsides to using the free version.

If you have EM Pro -> https://elementor.com/help/create-archive-template/

WP itself has a specific way of controlling how this works. This is mentioned on the page that I've posted a link for above.

There are few ways to do this. The not so confusing way would be remove the post template, and create a new post using elementor for anything other than blog post. The way I would do it will be, get a CPT-UI plugin to help with creating Custom Post Type in wordpress. Then use the Elementor theme builder to create the template and set the display condition to the custom post type you created. You can read more about Custom Post Type and Elementor here: https://elementor.com/blog/wordpress-custom-post-types/

Solved! With the info you gave me I used this guide and solved the problem: https://elementor.com/help/i-changed-the-url-of-my-website-and-elementor-does-not-work-anymore/ Thank you very much

Instead of using a regular background image, select slideshow as the background type and just use 1 image. You can turn on ken burns for the slideshow. Article about background slideshow

Hey, thank you for the response!

Correct, I did a manual installation following a quick tutorial which was easy enough; although, I did not completely understand the process. I do currently have a domain/URL. I do pay for hosting through Squarespace at the moment but am transitioning this to Elementor once I'm finished with my site. I don't know how to create a database with the hosting company and am unsure about FTP access via Squarespace. I also am unsure about creating a sub-domain. These are the things I need to learn about. I'm confident in my design / Elementor abilities, but when it comes to your questions and the guts of setting up the website, I truly am in the dark.

With that being said, I haven't reached the point of doing research as I am still building in Elementor and plan to switch hosts once I'm finished. I just know that I probably will not finish my site before the client needs theirs to be built.

Would I need to manually install Wordpress on their computer? This seems odd and figured their would be a different solution unless wordpress.com is the only route?

Thanks again for the response, i really appreciate it.

Thank you so much, I’ll have a look at them all.

If you’re curious, since posting the question I found a full blog post about Stripe’s globe. It was a very interesting read; thought I’d leave the link for you here: https://stripe.com/blog/globe

Oooh fonts are fun. The script on my home page is Tangerine, all the other H tags are Montserrat. I think my body text is straight up Arial or something like that.

You can go to Google Fonts (https://fonts.google.com/) and play around until you find something you like.

Probably won't work unless the webmail provider wants his page to be embeddable on other pages.

You can read up on the underlying mechanism (X-Frame-Options) and the reasons it exists here.

Since that site is coded as a WP theme, you'd have to juggle a bit but should be able to get close. Probably not perfect without adding some of your own script -- Elementor can take you so far but can't simply replicate everything out there.

Check the paid plugin Advanced Menu (https://essential-addons.com/elementor/docs/content-elements/ea-advanced-menu/) -- this has a lot of tools like vertical menus that should get you close.

Off the top of my head, if you wanted similar responsive elements, you'd probably be best just making separate desktop and tablet/phone menus, hiding your desktop menu on phones and vice versa. They've got a really nice system there, but with things moving location and swapping from vertical to horizontal, probably a bit too much than just clicking a few buttons to make work perfectly.

But with that menu plugin (or any other advanced one you like) you should be able to make some good progress.

https://elementor.com/help/

I think thats what you mean. They explain how to use elementor in steps that each have a few subjects. But to be honest I've learned how to use elementor by watching those videos. Not only the official videos from elementor but from other creators as well. Ferdykorpershoek, LivingWithPixels, Darrel Wilson etc.

Hope this helped!

I believe so. You can deactivate the license from a website, then transfer it to another. You can check what website your license key is currently used on.

https://my.elementor.com/websites/

https://elementor.com/help/can-i-transfer-the-elementor-pro-license-key-from-one-domain-to-another/

The footer is most likely in the elementor templates section. There’s a bug sometimes that once you’re in the templates menu, you need to click “All” to see the existing templates.

I can't help. But just in case you didn't know; there is an 'under construction' setting in Elementor with an option to keep your website indexable for search engines. See: https://elementor.com/help/maintenance-mode/

Right, you want that off if I'm understanding what you're trying to do (and I think it's pretty straight-forward from your explanation).

Here's the settings for the popup. Advanced kinda gets weird sometimes, at least a few times I thought it wasn't straight forward with their instructions and labels. Hope this helps!

https://elementor.com/help/popups/

Try playing around with the z-index in the custom CSS portion of your hero image; if it's lower than your header it should fall behind it.

https://elementor.com/help/how-to-use-z-index-in-elementor/

I'm not sure if you can do that entirely programmatically, that's a question for someone smarter than me. Within the tools provided with Elementor, you could do this with a little bit of finesse. Possibly a good way to display is by showing more and controlling with tags instead of categories... you'd still have to flag your posts with appropriate tags though, so it's not as simple as a Google search or the like.

I'm pretty sure there's a free plugin that does sort of the same as the pro "show more posts" widget here:

https://elementor.com/help/posts-widget-pro/

Tons of ways to do this, although several will require some PHP scripting. This should hopefully help you figure a path forward entirely inside Elementor though.

What kind of description do you have in mind? Do you mean metadata, or just a description you've written? If it's the latter, then one possibility might be to use any one of the million audio players with an autoplay feature. Then, you can embed this player into an Elementor pop-up along with a text editor widget (for your description). Lastly, you can set it up so that a button, image, or any other kind of link you want will trigger the pop-up. You can do that last step by following this article.

If you want the former, then all you need to do is find a WordPress audio player that displays metadata, such as this one called Cue I just found with a quick Google search.

ALT attributes are specifically for HTML "img" tags. If Yoast is reporting non IMG elements with css background images as needing ALT text, it needs to be rewritten by the plugin author.

Check out this thread (https://moz.com/community/q/background-images-and-alt-text) where it is suggested to rename the images used as background images using descriptive naming that would otherwise match your alt text and/or use an aria-label attribute on the element with the background image.

Not sure if this is a Pro feature or not but this can be done within an element's advanced settings under Attributes.

Ofcorse it will work... The fonts elementor use are Google fonts. Meaning if other visitors don't have the font, their browser will download it from Google and display it to them. Just like CSS , Js and image files.

Great vibes font on Google https://fonts.google.com/specimen/Great+Vibes

One thing to mention, on slow networks, there will be a second where your text will appear using default fall back font like serif don't until the font is downloaded to the user browser. It could happen fraction of a second but visible never the less.

So nothing to worry about you can use the font.

I am quite convinced it's something to do with lazy load. In this article, it says:

>In this technique, we use event listeners on the scroll, resize, and orientationChange events in the browser. The scroll event is an obvious one to check when the user scrolls the page. The resize and orientationChange events are equally important for lazy loading. The resize event occurs when the size of the browser window changes. The orientationChange event gets triggered when the device is rotated from landscape to portrait mode, or vice versa. In such cases, the number of images that become visible on the screen will change. Therefore, we'll need to trigger a load for these images.

So something is interfering with the lazy load. Just one more thing to check (perhaps a long shot), I noticed you disable the ability to inspect your codes. Can you disable that and see if this could solve it.

Strangely enough, I can find every item I deleted before but not this particular one !

I had deleted it from the Elementor Library :

https://snipboard.io/aRifhl.jpg

I clicked the three dots and then "Delete".

Really broadly speaking, you can do custom CSS for this for sure.

https://screencast-o-matic.com/watch/crX30QVI44x

Note: The first time I say

flex-column: direction

I am blithering and transposing the correct way to say things. Brain fart. I meant

flex-direction: column

What u/discogeek said is wrong, it's actually very easy to do; you just need the Essential Addons for Elementor plugin and then use Fancy Text widget

https://essential-addons.com/elementor/fancy-text/

That is beyond disingenious, you are testing the http version of the site which introduces additional latency.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.lonecbd.com%2F

That is the real mobile score. No url will be lonecbd.com, which is http.

https://developers.google.com/speed/pagespeed/insights/?url=Lonecbd.com

Sadly, going forward, the only page scores that matter are mobile...

With a VPS running NGINX and gzip/brotli, getting an "A" on desktop scores is somewhat rudimentary until you're running the whole crocoblock suite or something.

In this example I'm only seeing three (thumbail-sized) images loaded. I'd be curious to see this re-tested with a couple full-height background images.

Many teams are composed of both designers and developers. Designers often give devs mockups that are very image heavy compared to the designs we'd come up with on our own. Good to keep in mind.

Follow web performance Best practices that it and know what you're building.

Elementor by default is bloated but it doesn't mean you can't optimize. I am Elementor's fan because of flexibilities it provides, ecosystem, features and you know they are working on Performance too.

I am not trying to promote my blog post but if you have will to do it, you can optimize

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ffoxscribbler.com%2Fremove-unused-css-in-wordpress%2F&tab=desktop

Yes, it's a live environment. The cache being part of the problem makes sense but I worry about breaks things I don't fully understand. I found this article .. https://elementor.com/help/caching-prevents-live-site-from-showing-changes-in-editor/

..and tried the regenerate the CSS option out and things seemed to work fine this time. I edited a post and created a new post and the changes appeared on my phone (I'm editing on my desktop) without having to do the clunky change something in wordpress thing I was doing. I understand some times servers take some time to update things but previously I couldn't get the changes shown unless I did my previous "work around". I may have also been impatient before but the changes almost went through immediately with the work around.

Either way for the time being it looks like the problem I was having has been resolved. Worst case scenario I go back to the old workaround.

For future reference when you mentioned disabling all caching while developing. Where you referring to disabling the caching in wordpress, elementor, or the site's server itself? I want to keep studying so I'm better prepared for future problems.

Thank you all for your time and info, best of luck to you all!

u/HighOnBonerPills

Good point, yes, sometimes there are always work-arounds needed.

I have used Elementor's "Custom Code" at times to add something "special" and set the conditions to sitewide to inject some code inside a header. That might be an Elementor tool / area that a lot of people may not know about or use (but it's only in the Pro version).

Here's a link for those who want to check that out: https://elementor.com/help/custom-code-pro/

Elementor recently introduced a feature "Export Kit". https://elementor.com/help/export-kit/

You are able to export all templates from one page, to another. You could create a staging website and import all of these from your various websites onto one. May not work perfectly, but the option is there.

Hi u/tenegade

If it's a global CSS style then I add it to Elementor's "Site Settings" CSS area.

• Open any page and click the hamburger menu (top left red bar in the Elementor sidebar menu), click on Site Settings and towards the bottom use that "Custom CSS" area.
  

However, if you are targeting a specific "widget"

• Edit the widget / choose "Advanced" tab use it's own "Custom CSS" area
• This is where you would use "selector" to style just that widget.
  

Here's a helpful link for that: https://elementor.com/help/how-to-use-selector-in-the-custom-css-tab/

​

There's no need to go into the child theme or WP dashboard unless you intend to stop using Elementor.

Check this: https://elementor.com/help/gallery-widget/ and look for lazy load.

If this does not work, are you using Smush or something similar for your images?

You could do that, although if you're using the Pro version of Elementor you'll need two licenses for certain domains. Your "test" URL denotes that it's a dev site and you'd be fine there, but if others they'll have to follow the rules for dev URLs.

https://elementor.com/blog/elementor-expands-license-to-include-staging-sites/

You'll still need to register Elementor with the new URL, and it's always good form to make sure you don't have things pointing to the dev site instead of live.

What you're suggesting on doing isn't the cleanest way, but it should work. (Unless you're doing some crazy non-regular stuff on the site....)

Auto Login

Draw Attention

Duplicate Post

Elementor

Elementor - Header, Footer & Blocks

Elementor Pro

Jetpack by WordPress.com

Livemesh Addons for Elementor

Starter Templates

Ultimate Addons for Gutenberg

WPForms Lite

Takes anywhere from 15 minutes to 1 minute for Zapier to update, depends on what plan you're on: https://zapier.com/pricing

And yes, it would work with woocommerce products as well. In this case, woocommerce products are just a custom post type.

>lazy load

I'd never heard of Lazy Load, so I'm guessing no. Reading up on it now, I discovered optimole.com/ and am curious if you had any thoughts on this vs another image optimization plug-in (ie: fully free), not only for cost, but also for method - if lazy load is indeed the culprit here, as this simply suggests a 'smart lazy load' which means nothing to me, other than a potential red flag based on your comment. I have put zero time into priming images for the site, but intended to templatize any hero image sizes as projects, with documentation on hand for ideal file specs when updated / replacing - once the site is 'complete' and ready for bandwidth-tweaking. Or am I approaching this like a pilgrim... are image optimizing plug-ins pretty standard fare for WP / Elementor veterans at this stage in the game?

I tried the text margins/padding - didn't solve the problem, though I did find a horde of minutia on all the various sub-elements repositioning themselves, which ultimately useless - but what I found ironic was that in Elementor itself, on the top section (comprised simply of a background image and a single alpha logo, the brand icon but not dynamic linked via the site itself) that when I scroll over its single element, the background behaves similarly, with the image hiccup. It doesn't do that while viewing the sites, no do the sections that do this in view mode behave this way in Elementor. Related, or funny coincidence?

Most puzzling is that this only happens on one section at a certain computer, while it happens on all three sections (of this style) on another computer. Does this mean it's something beyond Elementor?

You can try ShortPixel Image Optimizer. They have an online image optimizer, that you can use for free to see how your images look. Make sure you select Glossy, as it is a compression type specially designed for photographers. For the online image optimizer, if you use it for free, the files shouldn't be heavier than 10MB.

If you are happy with how your images look, you can then check the plugin, that offers a free plan.

https://screencast-o-matic.com/watch/cr6jD4VXqVM ( 3mins 19secs )

P.S. The slidery bit I was referring to at the end just has the goal of using Swiper's documented events to take advantage of the recorded info we want to inject into it. Basically, "hey, if someone just changed a slide, that needs to fire off our thing" where "our thing" is just injecting a tiny tag with the string of text we stored in the bit in the video.

I have the two video bits and an example of the slidery bit that I can send you in a pastebin.

I was referring only to how to display the terms, really, but in the documentation for JetBlog one of the post widgets lets you pick a nice clean grid layout like that: https://crocoblock.com/knowledge-base/articles/how-to-arrange-the-blog-posts-in-the-form-of-attractive-tile-layout-jetblog-smart-posts-tiles-widget-overview/

Theirs are capped, but what you could also do for free since you have Elementor Pro is use three post widgets in a row, set all three to have unique offsets (in other words ignoring X number of posts ahead of them in terms of how recent/new they are) and style them independently: https://screencast-o-matic.com/watch/crQiVpVQBqw

Would this work? https://screencast-o-matic.com/watch/crjwFtVQqdR (15 seconds, no sound)

https://pastebin.pl/view/9bccf320

I just made a fake overlay with a pseudoselector and set it to display itself on hover only.

I have checked it. It doesn't seem like it's what I'm referring to.

The problem I'm having is with Dynamic Search Tag. Here is a video showing what I'm having problem with

Watch this

See this loom: https://www.loom.com/share/2d3dc2cbe09343ba8100ce55deccb57d

Tested against (1) Google Chrome, and (2) Microsoft Edge. Windows 11.

I have achieved this using EA Elementor Addon https://essential-addons.com/elementor/advanced-accordion/ using the advanced accordion

And using the woocomerce product addon where in each accordion the query is set by category.

I have this achieved here but using advanced tabs instead of accordion here https://www.munajemcs.com/category/products/poultry/

I used Eccential Addon's Advanced Tabs, but I really did not love the look of it.

https://essential-addons.com/elementor/advanced-tabs/

That was ~18 months ago, though. I might need to revisit it to see if it will do what I need.

Or, were you referring to something else?

Personally I'd use this to design a table with monthly prices: https://essential-addons.com/elementor/table/

Then duplicate it and update the values to annual, and use this to toggle between them: https://essential-addons.com/elementor/content-toggle/

There's not much info provided to troubleshoot. You can control button size responsiveness in Elementor; if you've done that and still having trouble, check if your CSS settings are overwriting it or otherwise different aspects of your theme.

https://elementor.com/help/mobile-editing/

The easiest way would be to use the free Insert Headers and Footers plugin. Here's a short guide on it. If you want to track when certain buttons are clicked, you can use the button widget in tandem with the HTML widget, to which you would add your tracking script. Here's some info on that approach (scroll to where it says "How to Track “Button onClick” Event").

Not sure if you’ve already seen this but—https://elementor.com/blog/wordpress-sidebar-guide/

I think I still need a little more context—are you trying to do this without having to create multiple templates for each department? I’m trying to understand why you would use ACF instead of just creating custom sidebars and the respective sub-nav menu for each department template.

I know you don't want videos, but there's an awesome YouTube channel for learning Elementor called Living With Pixels. Better yet, the guy who runs it (Rino) has a Udemy course on creating a blog using Elementor. I've taken it, and it helped me learn Elementor from scratch. If there are any gaps that need to be filled in, then I use Elementor's tutorials on YouTube, but this course will help you learn your way around Elementor, understand how it works, know how to use templates, etc.

Just be aware that Udemy runs sales every couple days, so you can get this course for like $12 easily.

Otherwise, just see Elementor's official documentation. Everything is nicely organized and it should help you.

https://elementor.com/blog/design-your-single-post-template/

You need Elementor Pro, though. The ability to create single post templates requires pro.

If you're limited to the free version, you can't design templates per category, but you can still call blog posts on an elementor-created page by getting one of the free plugins related to post widgets (I don't remember which one I used a couple of years ago when I didn't have Elementor Pro, but there's a number of them on WP repository.)

Regardless, maybe using shortcodes would do. I haven't done it before but hope this helps: https://elementor.com/help/wrap-text-around-widget/#:~:text=Wrapping%20The%20Widget%20In%20The%20Text%20Editor.%201,not%20display%20until%20the%20editor%20is%20refreshed.%20

Sometimes

https://elementor.com/help/systems-info/

off of the Dashboard can report logs of specific errors when this kind of thing happens (usually at the bottom of that page).

At the very, very bottom of that page there's a copy and paste area where you'd usually send what gets copied off to support. In skimming it does anything stand out?

Elementor recommends BuddyPress — here's the article. I'm not sure how you'd style it (I've never used it), but if Elementor recommends it, then I assume it integrates well.

At the start, I feel that too. But no worries
https://elementor.com/help/mobile-editing/

Using this link you can easily understand what wrong
If this doesn't help let me know

Thanks And Regards

elementor is independent of the astra theme. it's a plugin. one of its features is a header and footer builder.

the astra theme has a header and footer builder out of the box whether you use elementor or not.

Easy. First, go to the Mobile view (if you're not sure how, check out this page and scroll down to where it says "Device Preview"). Then, select your widget. Finally, go to the Style tab > Width, choose %, and make it 100%. This should only affect the width on mobile devices.

If this doesn't work, you can always enter in custom CSS for the widget:

@media only screen and (max-width: 360px) {width: 100%;}

This will make the width 100% only on devices 360px and below (judging from that article, the mobile breakpoint in Elementor is 360px, meaning that devices of that size and below are what is considered "mobile" in Elementor).

The code snippet above uses what's called a "media query", which you can read about here if you're curious.

You shouldn't need to use the custom code; the first method should work fine. But if it doesn't, the custom CSS is always an option. Just so you know, you could also change 360px to some other number, like 768px if you wanted it to be 100% width on both tablet and mobile.

Disable default colors and default fonts by going to Elementor > Settings and placing a check in the boxes next to Disable Default Colors and Disable Default Fonts.

Source : https://elementor.com/help/theme-style-global-settings/?\_\_cf\_chl\_captcha\_tk\_\_=pmd\_6657be250527fc8fc9367e02e9f6ad54943215d1-1627745724-0-gqNtZGzNAw2jcnBszQxO

I think anchor links are what you are looking for

https://elementor.com/help/menu-anchor-widget/

You basically add an 'Anchor link' widget, one per section you want to navigate to, give them names and then call these names in the menu.

​

Hope this helps!

Posting for anyone else who comes here looking for an approach... I contacted Elementor support and was advised of an alpha release capability called Export Kit which will do something similar to what I'm looking for: https://elementor.com/help/export-kit/

I'm running the most recent version of Elementor Pro and I do not have the Google Maps Embed API field in Elementor settings. Is the website wrong? Where do I find this field to paste my API key?

https://elementor.com/help/google-maps-integration/

You can A) choose "elementor canvas" as page template (Note - this will also remove the themes header and footer on that page). Or b) change the theme (astra or "hello elementor" are good options). Or C) add a page template to the theme. Or D) use the "stretch section to full width" option in each section on the page

https://elementor.com/help/how-to-create-a-full-width-page/

I have done this on one site, and I am not sure I will do it again. (well for the right price lol)
Even tho Elementor states it can do vertical menus, it's very hard to set it up.
Let me see if I can find you the article I used
https://elementor.com/blog/how-to-create-sticky-sidebar-menu/

You need to know some Javascript / jQuery in order to do that. Just using a click event to display your submenu, disabling the hover effect first.

You can add custom code in different ways, I read Elementor is implementing his own method on the Pro version https://elementor.com/help/custom-code-pro/ or you can do it with some other plugins like "Code Snippets", "Inset Headers and Footers", etc.

This. Go to “display conditions” on the template and select include > single > pages > type in the name of the page and select it. Do that for all of the pages that you want to use the template.

https://elementor.com/help/conditions/

For clarity, can you explain the missing features you are looking for compared to a widespread existing widget/plugin? IE what is this one missing that you need for your website? https://elementor.com/widgets/form-widget/

Hi u/istrategy,

When you insert the gallery widget and click on add images it should open your media library "images" and you check (select) the images you want added... if only one, add just one.

Change your layout grid to (one) image.

This is a little outdated, but check out Ben's video from Elementor: https://elementor.com/blog/introducing-pro-gallery/

Hi, yes you can create a Lottie with After Effects and Illustrator and then set the trigger to be on scroll with the built in widget. Here's the official knowledge page.

I am not sure what you mean by "displayed as lists," but if I'm understanding your question correctly, you should be able to make a template for your product page that lays out the information exactly how you want it and then either embed that page in a modal or as a popup. Then, depending on how you've stored your product information, you just dynamically populate the template with that info. See https://elementor.com/help/dynamic-content/.

Elementor Pro allows for several movement options, but there are plugins out there that add even more options. Most of Elementor Pro's motion effects are entry/exit or interaction with scrolling/mouse. Other plugins allow for more constant movement without user interaction.

Elementor has a great blog post from last year where they make some cool things, using just Elementor Pro.

https://elementor.com/blog/introducing-motion-effects/

On the page editor, what is your template set to? Default template, Elementor canvas, Elementor Full width? I've added menu to my sites using the the Elementor Full width template and then the Nav Menu widget.

Here's a link that may be helpful too: https://elementor.com/blog/custom-navigation-menu/