Happy Addons For Elementor Tutorial - See All 45 Free & 51 Pro Widgets + 14 Free & 7 Pro Features

in the sponsor tutorial we're going to check out happy add-ons for elementor we're going to see both the free version and the paid version the free version has 14 features and 45 widgets the paid version has an additional 7 pro features and 51 pro widgets so there's a lot going on in this video we're going to cover all of it and if you have any questions or comments please leave them down below i try to answer the best i can my name is bjorn i'll pass the wp learning lab where we help you get better wordpress so you can earn more for yourself for your customers and for your business if you haven't done so yet click subscribe ring the bell so you don't miss any future videos now let's get started and before we get started if you end up deciding to get happy ads for elementor i've negotiated a 10 percent off coupon for anybody who wants it using the coupon code wp learning lab all one word you enter that during checkout and you get 10 off whatever plan you end up choosing and there's a link below to take you there it's also an affiliate link it does not cost you more to purchase an affiliate link but i do get a commission if you end up buying through that and i really appreciate it that commission helps me keep making these videos for you on youtube so if you want to check out happy add-ons click the link down below and also make sure you use the 10 off coupon this is the website for the happy add-ons plugin for elementor you'll see the widgets tab the features tab and you can see pretty much everything we're doing in this video and check it out on this website if you want to there's also a free version and a pro version and i'll make it clear throughout this video which widgets and features are on the free version which are on the pro version the first thing you'll do is come to your website and install the free version of happy add-ons and when you do you're going to come to a splash page like this where you can walk through some basic setup for happy add-ons so i'm going to choose i'm a power user so we can configure it for ourselves then click on next you can choose which options you want to have turned on if you have the pro version installed which we do for this video you can activate pro widgets if you have the free version activate free widgets and these are all the widgets that happy add-on has and so if there's ones that you know you aren't going to use turn them off then that code won't be included on your site making your site faster for this video i'm going to enable all of them just in case we want to see anything regarding any of these widgets and this can also be changed in the settings afterwards so what you do here is not set in stone in the happy add-ons settings inside of wordpress you can turn them on and off as you please as well so they're all on click on next here we can choose which features we want to turn on we see all the free features here i'm going to turn them all on as well and then go to next here's a call to action to get the pro version outlining extra features and widgets you get we already have installed so we're just going to go to next here they'd like you to share usage statistics let's say i don't want to contribute but you can turn that on if you want to all data collection is anonymous so they won't know it's actually from you personally it'll help them make a better plugin click on next and then done when we are done and now happy add-ons is configured and we have a new menu item on the left hand side here and if we go to the widgets tab we can see all the widgets that we turned on right here or the widgets that we have for the plugin and you can turn them on and off individually as you see fit you can also filter by the free version pro version you also disable all enable all with one click feature same thing you can turn them on and off as you see fit the credentials tab could also be called the integrations tab you can connect with various external services mailchimp twitter advanced data tables facebook instagram and connect those to the widgets and happy add-ons and analytics is pretty cool because it shows you how many times you've used each individual widget when you're on the big widget list and you want to turn off the ones you're not using it might be really difficult to figure out which ones you're not using on this list right here you'll be able to see at a glance which ones you're not using and then you can go back and go to the widgets tab and turn those ones off individually or even faster you can just click on disable all unused add-ons that way you don't have to go back and forth and do it yourself individually this disables all the ones that aren't being used on your site at that moment you can activate license if you have the pro version the very first thing i want to show you is what i think in my humble opinion is the most important feature of the happy add-ons plug-in if you go to their website which i encourage you to do to check out the widgets and features and we go to the features page and we scroll down a little bit we will find a feature called we'll go through most of these in this video by the way we'll find a feature called live copy this allows you to copy sections and widgets from the demo site directly into your elementor site if you have happy add-ons pro the pro version has this pro tag on here i'm going to show you how this works right now let's go into our website let's go to pages and add new edit with elementor so here we have an elementor page and over here let's go to widgets and let's open info box an icon box if you've ever worked with a third party add-on i'm sure you've encountered this frustration you see these beautiful widgets and layouts on the demo website and you think wow that looks great and then you go to add that widget to your website and it doesn't look like this you can customize it to make it look like this with a bunch of work and trial and error unless you have lots of experience that you do in your first try but chances are it's your first time working with that add-on first time working with those specific settings for that add-on it might take you a while to reproduce this for example as another example the icon box this one right here is pretty cool you might want to have this exactly like this on your website just change the colors or change the background images or what have you but you want to have this thing on your website you don't want to go through the frustration of adding just this widget if we look up or find the icon widget or the icon box we add that here and it doesn't look like the one over here it can with a bunch of customization let's add some more columns now let's copy this into the other columns and now we can get to work making it look like the one we want which is right over here or we can click on live copy click on that wait till live copy turns to copied which takes a few seconds and there it goes now we come back into our website we double click on the six dots the settings for the section and we choose x paste live paste now it's processing that widget and bam there it is now we can customize it with the settings on the left however we want to you can also customize these however you want to it's just that this gives you a much faster head start and you can copy any widget on the demo site any section any widget that you find there's a live copy button which they pretty much all have you can quickly and easily copy and paste that whole thing in there i'm not sure if the background image comes with it let's try this one right here i don't believe it does it'll just have these icon boxes let's give that a try and if you're finding this tutorial helpful click the like button because that helps this video show up for more people on youtube so we can spread the knowledge and help more people with this information so make sure you click like if you like this video the background image came too so it gives you the exact thing even the headline so it gives you the exact thing that you see here this info box right here is a super nice info box let's copy that let's see what the info box looks like by default info box right here let's add our columns just to make it legitimate i might have to copy the live widget again because i just copied and pasted those but let's give it a try live paste different clipboards that still worked so now we have the originals the default ones that you can customize and we have these that get us up and running way way faster so technically you could go through the demo site copy and paste all the different kinds of sections and widgets from the demo and build a functioning website pretty darn quickly just tweak and customize a few things and you're off to the races so that is in my opinion the most important feature of the happy add-ons plugin now if we go back to our feature list here we have another one of similar importance and it is the cross domain copy paste this is copying pasting from one domain to another for example let's go into wp speedify a different website let's go to pages and add new i've installed happy add-ons here as well the pro version just to make this demo work creating elementor page notice the domain wp speedify we can copy this one right here i'm not going to copy this because you might think i'm live copying but i'm actually not so we're going to copy x copy i want to copy up here before down to x copy or copy all i'm going to go to x copy go over here add a new section and then i'm going to right click on the six dots and this falls under live paste as well even though we're not live pacing from the website we're live pasting from our other website i click on this it's now going to paste that section in here and let's see what copy all does i wonder if it copies the whole page x copy all and then come back over here and live paste processing this might be pasting the entire page and it is but it didn't catch some of the images let's see if we do those individually if it gets those x copies section and then life paste so it's not pulling in some of those images not because i haven't didn't save this let's try saving this let's try it for this one up here now x copy x paste and then the images are still not pulled in the background images in this case i did a little research and the cross domain copy and paste works from live site to live site i'm currently working on a local site for the main tutorial and wp speedify is a live site so copying between those is hit or miss and it usually doesn't work so it's live to live local to local doesn't work live to local doesn't work and local to live doesn't work it might work sometimes you have to update and refresh the page and that might get to work but more often than not it won't so make sure you're going live to live it also works best in google chrome you can go copy and paste within different tabs in the same browser if you want to do that that's okay but again use google chrome because you get the best results there the copy all and copying from one domain to another isn't perfect apparently but it still is a lot faster and it might be something i'm missing as to why this isn't working properly however the cross domain copy paste will save you a lot of time and this is from domains that you have access to or that you own that both have happy add-ons for elementor the pro version installed so between copy and paste across domains and live copy you can cut your workflow down a lot we also have unlimited nested sections or section nesting what does that mean well when we add a new section or an existing section doesn't really matter with wordpress by default we can do things like add a column we can add an intersection and that's as far as our nesting goes we can't add another intersection into our intersection we can add them to columns but not into another section intersection so that's as far as our nesting goes with happy add-ons let's add a new section here we have the option to if we right click within the section itself not the six dots we have add nested section that puts a section inside of the section if we have an intersection here we can add a section in there too we can add nested sections anywhere so now i have a nested section inside of the intersection and then we can add a nested section inside of the intersection nested section so you can't add an intersection into a nested section but you can have as many nested sections as you need you can obviously go crazy with it and each intersection adds more code to the front end so you may want to be careful and not go overboard with nested sections but that's a great feature that you do not get with elementor out of the box we also have the ability to easily add image masks changing image from a regular rectangular shape or you can round the corners with elementor by default to crazy shape like this one you see over here and it's super simple to do you can do this with any image it can be an image inside of another image or sorry not another image you give me an image nested inside of a different widget like this icon widget here that's an image go to icon and image choose image masking this guy's a bad example because he has a cut out shape already but let's see if we can add this there we can see he's cut out even more and so that's image masking and can be added to any image let's add it to a full size image because that'll give you a better idea of how it works pick an image any image let's take this guy here all blurred out acting pretty cool in the background there and we go to image masking we see it applied live right there the edges are cut off even though in the demo it shows that it's rounded that's because the widget width is a little bigger than that image so if we change this to custom sizing we can scale down the size and make it so it's not cut out change the image map just by clicking you can have other images be the image map or the image mask i mean take one like this right here might have to have transparency that might not work so that image masked the circular shape it's not quite what we wanted this one has some transparency so now we have the image of the guy with the microphone actually be the text let's change that image so we can see a little more clearly something colorful how about this one right here now we can see much more clearly that image isn't wide enough so it you can't see the first part of the m the last part of the end or podcast so you have to have an image that is wide enough to make that work let's see if we can find a wider one the free images over here pretty wide let's take this one right here insert media and insert media why are you inserting there we go so this image is wide enough and so we see all the text so when you use these image masks with an image make sure the image that you use is wide enough to cover the entire text and that's how easy image masking is it's a super awesome effect and it's really simple and we also have display conditions if you want to display certain things on your site based on certain conditions being met you can do that let's take this for example this middle icon box here we want to have display only when certain conditions are met let's go to advanced let's go to happy features and turn on display condition now the options we have for the conditions are to show or hide the element when all conditions are met or when any condition is met and we can set the server time zone local time zone you might think that's kind of weird but it's actually not actually one of the conditions is the time of day so we have a condition right here auto added called login status we can just change this one the condition options we have are login status user role operating system browser date range date time and day so for login status if the user is logged in then this will display because we have it set to show element or if it's set to hide element it will hide that element when someone is logged in i'm currently logged into the site so let's just go and see how this works scroll down and we have our middle box gone now if i go to an incognito window or i'm not logged in middle icon box is back and you can apply these conditions to anything it can be buttons it can be linked text it can be text on a page it can be images icon boxes what have you whatever you want if you choose user role you could choose someone to be logged in for example and add a new item and then define it based on user roles so you have to be logged in and you have to be an editor and then it shows you a certain element maybe instructions for editing who knows you can also set this based on operating system and these are the options you have here you can show different things based on operating system or hide different things based on operating system and browser a lot of the major browsers are here if it's not one of those you want to target you can choose others and then it chooses others as a big group it's not ideal but there's a lot of browsers out there and a lot of them don't have a lot of usage so it might not be worthwhile to program that functionality in here date range have things appear or disappear based on date range the date if it's a specific day something can disappear or up here christmas day would be a good example for that or new year's day or like the one day holidays valentine's day you have things appear and disappear for time of day this would be a recurring thing so maybe every night at midnight you have a sale that goes on for the early birds and so you can have something appear for them every night at midnight or it could be noon or 1 pm or whatever you want and then a specific day of the week this would also be recurring choose any day of the week and if you want to do multiple days you can do maybe a monday and then we can add another one tuesday and make it a thursday so on monday and thursday something is going to appear or not appear based on what you said here and these settings that i've been tweaking here this is specific to this one widget this isn't site wide or anything so this is one widget we've been adjusting conditions over here you can do this for any number of widgets on the page any number of images or buttons or whatever sections and then they're either be shown or not based on whatever conditions you choose we also have the happy particle effect this is a pro feature and if we go here you'll see what i mean almost instantly it's backgrounds with animated borders or sorry automated particles in the back this one's not animated but i can guarantee you've seen them before that's a pretty cool feature that's in the pro version as well you have the equal height feature and this is in the free version this is when you have widgets or elements that are side by side in a column like this and maybe they don't have the content be the same height but you want a border for example or background image to be all the same height across the row which can be difficult to do by adjusting padding then you add some more words you can adjust padding again it can be a giant pain and this equal height feature allows you to make that really easy the floating effect also in the free version is a pretty cool effect we see these objects even this guy right here in the middle just floating it's bouncing around a little bit a little bit of dynamic visuals so it's not quite as intrusive as say a gif even though it's kind of like a gif or a video but it adds a subtle little bit amount of movement this one's pretty cool where he's overlaid over top of this widget over here that little bit of movement is very cool we even have the background here changed where the background is moving as i move the mouse and we have css transform this allows you to rotate text for example which is not something you can do in elementor really easily if you have elementor pro you can add custom code and you can make this css transform work through that or you can do it easily using the settings that happy add-ons gives you this is not image this text here this is regular text this transformed this big destination here in the background as well so that's pretty cool on demand asset loading this is kind of what we touched on at the very beginning we were able to turn on or off specific widgets that's what this is on-demand asset loading just loads what you need for your pages and also just loads whatever you have turned on the widget background overlay this allows you to overlay on backgrounds any widget you want there's 500 plus different outlined icons see if we can see a more complete list of these guys here they are right here happy icons these are being indeed in addition to the font awesome libraries that come with elementor and yeah just the font awesome comes built in font awesome five you can have custom column order if when you're designing something a lot of columns you want to make it responsive for mobile then you have to have columns go in certain orders the the order is selected from left to right so the first one will be on top second one will be in the middle third one will be on the bottom when you're switching to mobile devices but you can rearrange that using the custom column order you can easily clone whatever you want so if we come in here we don't have much on this website but if we search for something let's search for image and we can choose this button right here and we can just clone that and we just cloned our page so that's pretty awesome big time savings fix button size this allows you to make a circular button which believe it or not is pretty hard to do if we were to add a button to the page here let's just add a button just a regular old button we go to style and we see up here a fixed size option this has added by happy add-ons let's go to here and make it a fixed height and width and we can make it a circle there's a circle right there click here doesn't fit quite right we can add some padding to make that fit a little better actually you know what now it looks pretty good actually and then we have a circular button right there super easily and like i said believe it or not elementor out of the box it is not easy to make a button circular like that and we also have the grid layout if you're a designer of any kind of education as a designer you know that having grid layout really helps making aesthetically pleasing pages if we go to settings over here we have the grid layer turn that on and there's our grid out of the box it might not be exactly the grid you want but you can make lots of adjustments you can make this 8 columns instead of 12 if you want we can change the max width to fit the perfect size of the page or if you have boxed content if you're not stretched across the full page you can adjust it to the page you need let's go full width here and then go full width you can do this hundred percent instead of just choosing a random pixel number and offset you can have v10 and that's offset from the sides you see the the grid goes right to the edge when this is set to zero and if i make this 10 or whatever other number has 10 pixels of space on the sides and the gutter is the space between these grid columns we can change that if we want as well let's make that 10 or 1 or 50s depends on what your design is and what you're doing z index means where does it display on the page z and x being a thousand means pretty much every element on the page is going to be behind it which is what you want you want this overlay on the page you don't want it actually to be on the finished product but we want this to be overlaid everywhere so when we're designing we can see where the grid is you can also change the color of the grid and the opacity maybe you want it to be light blue and be barely visible so you can set the grid however you want to set it up and we also have a wrapper link in elementor by default it is quite hard to make an entire widget a link or entire section a link it's really easy to make buttons a link or images in link but not a whole section we can do that just click on anywhere and you'll see a wrapper link option i clicked on the column in that case i'll click on the widget there's the option again click on the section and there's the option again and you make the whole thing a link so if i put my website in here and then update refresh this page we don't have this a link you can see the the link pointer appears on the entire section so there's if there's other clickable stuff on the section this overwrites it so keep that in mind click on here anywhere and it goes to whatever website you link to so that's pretty slick to add a shape divider let's go back into our website here we're going to turn the grid off it's a little distracting at the moment we're making these videos let's just add a new section and let's give it a min height let's give it a background color like so and then go to shape divider shape divider is part of elementor choose top or bottom then choose type we'll see the default shapes which are elementary shapes then we have a happy shapes section and these are all the ones that happy add-ons ads we have abstract web you can change the width and the height of all these you can flip them you can bring them to the front if there's something behind them you can change the color so if your upper section is red and this one is purple you can make sure the colors match up and those options are available for all these different shape types just going to set this back to nothing at all so the default heights that are pulled in cross line and droplet flame that's pretty cool looks better on the bottom i bet but flame on the bottom that's pretty cool let's go back to the top half circle multi-cloud multi-wave smooth zigzag splash splash 2 torn paper a brush a drop and a mask there we have i kind of like the torn paper with the flames on the bottom so we have the shape dividers for happy add-ons we also have happy tool tips and these can be added to any element let's just choose an existing one let's take this guy for example and then we go to advanced happy tool tip enable it give it some text hello there it also accepts html tags the ones that are listed right here you can add a significant amount of text in your tooltip if you want to you can change the position you can have it be animated let's make it bounce from the top animation duration is one second or one thousand milliseconds you can have an arrow or not depends on what you want you can have it activate on hover or on click you can change the distance how far it is away from the element and that's not how you spell hello there and we can see when we hover over it we see our tooltip right there that bounce feature is pretty cool or the bounce animation for that tooltip you can also change the text alignment to be whatever kind of alignment you like as long as it's one of these three options that's the happy tool tip you can add that to any element you want there's also the text stroke which allows you to create outlines for text which is something you also can't do in elementor by default this headline here for example let's just make it a bit bigger there we go text stroke right down here we can see the happy add-ons icon let's make the text stroke color purple let's give it a thickness of that's pretty interesting those artifacts in the letters so we have a stroke now and then we go back to our text color and we change the opacity to be zero and then we have our outline this font type appears to not be done very well and so it looks a little funny what if we change to a different fan like ariel so the ariel is nice and clean so if you have artifacts like you just saw a moment ago it's because the font type itself is not done very cleanly so in this way you can have outline text that's pretty slick there's also a couple more that's the bottom of the page there there's also a few more features up at the top because we just kind of started in the middle another big old time saver is presets let's go back into our page here let's go to these standard icon boxes click on them and we have a presets tab under the content tab we can choose preset designs just cycle through these find the one that's pretty close to what you want and you can customize those further but at least some of the customization is done for you and quite quickly and a lot of the widgets that come with happy add-ons have this ability as well so let's add some random widget the review widget presets nine different presets allowing you to get the speed a whole lot faster team member presets so that's a good time saving option especially if you've used it a couple times you know which presets you like that will save a lot of time there's template import this allows you to import 400 plus sections and 70 plus full and elementor pages this is in the free version and the pro version you can see what these sections and pages are if you come to this page here you can have a little gander here they're all laid out right down here and the way you import these is really simple it's not live copy which you may have guessed there is actually a happy add-ons icon right in the section builder or section chooser click on that there's 448 blocks you can choose from summer pro some are free 78 pages to choose from and you just click on any one of them and it brings them right into your site if you insert this is a really nicely done halloween page right here pretty spooky halloween just ended so it's not appropriate should he chosen the christmas one or thanksgiving i guess pumpkins are good for thanksgiving anyway it's a nice feature to have 400 plus 448 blocks and 79 complete pages you can add on really easily and those are the features and happy add-ons that's just the features we also have 45 free widgets and 51 pro widgets we saw some of these in action already let's just open all four of these the info box we saw just quickly scroll through here again we didn't go right to the bottom a lot of different designs already done for you and remember live copy on the right if you like what you see live copy it and you're off to the races the icon box we played with this a little bit as well i really like this one with the different paper type backgrounds and the images elementor skill bar pretty standard fare for elementor just a bunch of different ways to display it i'm going to say it again and again live copy because it makes it so easy to get these things onto your site before and after that's a pretty cool one i wonder if they this was that that girl that took a picture of in the 90s like won all kinds of awards and went viral this picture what if this is her in older years i guess so 1985 not the 90s second one's in 2002. it's interesting the before and after well that's pretty cool if you have a kind of like that t-shirt but if you have a company that that prints logos or text onto products it's a pretty cool before and after color and black and white anyway before and after super cool and these are all free widgets we're checking out all the free ones first and we'll check out all the pro ones after that let's open all these guys the dual button these are infamously hard to do in elementor especially with this ore in the middle here it's almost impossible by default in elementor this one here is not so hard you can use an intersection to do that pretty sweet testimonials these are always great to have on your site a lot of different designs review widgets also good very similar to testimonials the team member widget super common on websites and with elementor add-ons i think every third-party elementor add-on has a review widget and by review widget i mean a team widget not review that sounds pretty cool though that hover effect let's check out the step flow 360 rotation calendly and news ticker step flow is a sequence of steps as you'd imagine this is pretty explicit here one two three these all pretty much look the same 360 rotation click and hold and drag and you can rotate things 360 degrees you of course need to have the images to make this work you can't just upload one image from one direction and have a go 360. you need to actually have all the images taken all around the product and you add them in in the correct order and then you have the ability to rotate calendly integration you have this widget right on your site with your calendar calendar so people can book super easily right through your site news ticker we have a blog that publishes a lot of news or a lot of posts or a news site new stickers are great to have now let's check out data table horizontal timeline image accordion and event calendar the data table widget has data tables as you'd imagine these don't appear to be sortable but you can add a lot of frills and bells and whistles they highlight on hover if you want i like it if they're sortable as well though every title being a button to sort the column that'll be great horizontal timeline has a timeline that is horizontal and scrollable if it goes beyond the size of the screen the images are lazy loading as the new card comes in the image loads in and loops back around to the beginning different designs for those here's one without pictures more of a minimalist look here's one in dark mode you could say multi-colored with icons for the circles this one's minimalist actually much more than the other one image accordions if you click on the image it spreads out like an accordion here's one that spreads out on hover or accordions on hover here's a vertical one on click here's uh images with spacing not scrunched together and when you click on them they have overlaid links with a pop-up so you can see the image or probably whatever else you want to put into that pop-up and again if you like this setup here live copy right on your website vertical hover i do like those image galleries event calendars these integrate with the event calendar plugin or google calendar or you can even create your own calendar manually and you can display your calendar on the website that's pretty super and then we have three more for the free logo grid image grid and content switcher the logo grid is a bunch of logos say companies you work with or places where your product has been has been featured what have you just uh logos there's an image grid which is a grid of images here they're all even sized a little bit of a zoom effect on hover different ways to present these images of a content switcher which allows you to switch the content so here we have prices on an annual plan click the toggle and it switches to prices on a lifetime plan team members on the design team on the development team free widgets pro widgets and a very different design toggle as well in this one monthly yearly three toggles for menu breakfast lunch and dinner that's a nice toggle right there so that's the free widgets under the general category under the creative category we also have more free widgets so check these out card gradient heading number widget image hover effect the card display is a card you can put it here pretty much anything you want but they come pre-designed you can customize these however you like of course product cards are quite handy to display and highlight items on different pages of your site say you want to display products on your homepage where you want to display featured stories on a page this is a very unique design this right here i like that and the gradient heading has gradient heading just like you'd expect from the title you of course pick the font and the size and the the font weight and all that kind of stuff and then you just choose the gradient colors and makes a gradient heading this one is really cool where it's transparent it looks like this guy is actually in front but he's actually behind because the he's black and the transparency of the gradient color looks like it's behind him that's pretty cool if you choose just the right pictures you can get pretty cool designs the number widget adds numbers kinda like a timeline kind of like uh steps in a process you have numbers that count up it's a pretty cool design right there these aren't even numbers but they're in the number widget i do like the color overlays they put in these images now we have image hover effects lots of different styles to be had here layla it's the name of our dog let's get a nice image hover effect this one's pretty cool there's lots to choose from and then we have animated link fun factor image stack group and justified grid the animated link has anime links and this one is really cool that scribble down below looks almost hand drawn lots of different link animations this looks like an error happening that's the idea but some people might think something's broken if it looks like that that's pretty cool that wave the fun factor introduces interesting styles for various elements these are mostly number counters pro and i can tell different designs for those image stack group allows you to stack images so you have your team right here stackable social media icons which is interesting way to do it very unique i'd say don't see that very often the justified grid make sure your images are justified and take up equal amount of space a nice portfolio widget there and again if you like any one of these live copy copy right to your site super simple and then for free last one we have creative button different button styles hover over these guys you see the different effects i like this one can't use that too often though they'll get annoying but a little highlight button or an accent button will be quite nice it follows your mouse around in a contained area i don't know if those gaps around the edge are supposed to be there i feel like they're not i feel like it's just barely not making it all the way out to the border but that's adjustable as well in the settings so this one goes right to the edge so clearly there's a little bit of a setting adjustment required on a couple of these demos like this one here might also because i'm zoomed in let's zoom back to normal size that seems to fit quite right so it could be because of my zooming in to 150 percent that's pretty cool where an icon replaces the text there's a lot of different button hover hover effects that you can choose from see that one let's see how that looks zoomed out does have that gap on the outside that one too so those ones are supposed to have a gap those first ones i don't think are supposed to have a gap so that's the creative free widgets in the creative category we have two free in slider and carousel category slider and image carousel let's take a look at those slider is of course a slider this one has a little arrow right there and over here just like you'd expect for a slider there's a different style same idea different style this one doesn't have arrows but it has little dots for navigation this one has square arrows and it navigates up or it slides up instead of side to side and she looks very cold or old young and old at the same time image carousel circular arrow navigation there's the cold girl again arrow dotted navigation we have the dots and arrows the other arrow is behind the live widgets live copy just barely click that one another carousel style another one here oh that image also got a lot bigger i like this one it's an image slider but it's not shaped like usual image sliders just a slightly different design looks pretty cool so that's the slider and carousel category free widgets we have three free in the social media category so let's open these guys up social icon by the way i should mention this earlier you've probably seen a play button for all these things near the top this is a video tutorial specific to the social icon created by the developers and so all these widgets have documentation they have videos by the developer documentation is very thorough with screenshots so anytime you need any help your the help is there you can also contact them directly for more personalized help if you need it different social media button styles i kind of like that one dark mode lots of options and of course these are just examples you can create your own there's lots of settings to create these exactly how you want them social share widget demo so those first ones were the buttons that take you to your company's social profiles these ones are for sharing your content so they take you to or when a visitor clicks it it takes it to their social profile to share the content on whatever social social platform they chose there's no reason these couldn't be designed the exact same way as the social icons in the previous tab the previous widget we looked at so there's more unique designs for you to choose from the twitter feed imports tweets displays them on your page there's a problem with the happy elementor add-ons image on twitter it's not being pulled in quite right showing is broken a bunch of different designs to highlight tweets on your website if you want to do that you have this at the bottom of your homepage or something so that's the social media widgets that are free marketing widgets there are no free widgets three pro ones though there's a bar chart under the chart category hover over these and it gives you information about whatever those bars represent vertical bar chart horizontal bar chart negative value bar chart both vertical and horizontal and different ways to display bar charts and then for posts we have three free widgets post list post tab and taxonomy and the post list is as you guess a list of posts and different ways to show those and these ones wouldn't have to be inside of a post template this could be in your sidebar this could be wherever you want lots of different ways to present your posts with this one you can display posts to multiple tabs based on categories this one's thinking pretty hard right now that one's thinking too that one as well so there might be an issue with this demo or there's just no posts in those categories and it's trying a blank and thinking too hard about it that's how you put them in different tabs with that widget you can visualize your tags and categories these are categories so you click on these and take you to the category page or tag page or whatever it is you're just playing here this looks like it might have been an accordion that you could open let me click on it goes to the pottery tag that's totally cool just checking out how it works those are the free options inside the post category then we have woocommerce we have eight paid options zero free for forms we have eight free zero paid so let's check out the first four forms or forms our forms are forms so these will all look pretty similar but the the form builders themselves can have vastly different capabilities contact form 7 is a free form builder it has a lot of add-ons to extend the functionality but it's not the easiest to use it's not drag and drop or anything like that ninja forms is a pretty popular form builder much easier to build forms than contact form seven weave forms i've never used but it's a form builder caldera forms i've used also much simpler than contact form seven and really what you're getting here is is the form the form integration with caldera forms everything else like the headline and the subtitle and the address that's all in the background image that's all elementor we're just looking at the forms and the forms are pretty much the same we're just showing that they can integrate with these different form builders wp forms gravity forms fluent forms and mailchimp again great design but you could use this design for any one of the form builders it's just that they integrated wp forms and wanted to have a dedicated page to show that should to showcase that integration gravity forms one of my favorite form builders unfortunately it's premium only but it's really powerful fluent form and these fluent forms there there's more going on there's there's checklists and radio buttons here there's drop downs extra fields the other form builders can do that too it's not just fluent forms that can do that even contact form seven the free form builder can do that and mailchimp we have subscribe buttons subscribe fields you can also build contact forms in mailchimp now there's different ways to display your opt-ins and that's the end of the widgets down here is all features so that's all the free widgets there are 45 of them i believe yes they're 45. there's 51 pro widgets as of this recording so under the general category let's open up the pro widgets and take a look at those advanced tab advanced accordion advanced heading business hour and timeline add some tabs these ones aren't thinking as much as the other ones were a moment ago we have our tabs and tabs or tabs or tabs just different ways to align them and design them i like how we have a bunch of different content in this one we've got links we have headline and text over here or we have a timeline on this tab image with business hours in this tab vertical tabs don't see that very often and this one let's see if we can click on these yeah so we have tabs and then i guess you'd call these tabs as well tabs inside of tabs that's pretty cool and this one here has icons for the tabs had a map fly in there that's pretty cool in a form that's a pretty great looking advanced tab system there more tabs with icons vertical tabs vertical tabs again dark mode advanced accordion accordion opens a section and closes a different section similar to tabs but not the same and the advanced accordion means you can add more advanced stuff inside of the accordion like here we have an image with a button and a link here we have different or here we have a map here we have an accordion with the tab in there recording with an icon beside it according where the accordion tab has a gradient when you click on it what's active dark mode lots of options advanced heading advanced headings are always cool because you can be very creative with your advanced headings i like this one right here that's a cool look partial underlines like this one and this one are eye-catching here we have the headings differently displayed with no background with a grading background that's pretty cool all in the same heading that one's pretty neat and we have a business hours widget pretty standard stuff different ways to display your business hours then we have a timeline widget which is similar to the timeline widgets we had in the free version just a different way of displaying things and the free versions don't have this where you see the this line right here the red and the blue the red travels down as i scroll travels into the green travels into the purple you don't see that in the free version lots of different timeline displays here we have that again i quite like that feature i like how it fills the icon with color as it gets closer to it and then we have the advanced toggle list group countdown and source code the advanced toggle is kind of like an accordion but it stays open so an accordion when you open one it stays open then you open the second one the first one closes like this and the second one opens with the advanced toggle you can have them all open at the same time if you want so that's the big difference between this and an accordion a lot of the same content as our recording example you know the tabs inside of here lots of different design types dark mode we have list groups which allows you to make lists these are lists of links in this example they don't go anywhere right now but you can have these be clickable to take you places it's different ways to display your lists list with icons lists with numbers lists with people and if you like any of these widgets live copy don't forget with a live copy countdown is a countdown pretty straightforward i think most elementor add-ons have a countdown widget different ways to display the numbers that's what we have here i like this one where we have different background images for each number that sounds pretty neat too source code allows you to display source code and there's a candy copy to clipboard button so if you want to provide code to your visitors this is a pretty good widget to use different displays based on code type and you can customize all the colors and everything as well but i'm sure if you you enter css into here and you choose that as the preset then this is what it's going to be designed as with with the preset but then you can customize it further as needed this is a highly stylized one you don't usually see that kind of thing for a source code widget then we have breadcrumbs sticky video advanced data table and modal pop-up lots of different ways to visualize your breadcrumbs of course you can customize each and every one of these you can customize pretty much everything to do with every widget that we're looking at in this video i like this one i also like this one quite a bit i usually prefer my breadcrumbs to be subtle though this one's pretty subtle this one is in your face i think my favorite is this one it's nice and simple and clean elementor sticky video is video that will follow you down the page so you have to actually click play and then the video is right down here it's going to follow us down the page so that's a youtube video here's a vimeo video we scroll past the video and it pops in down below there's a self-hosted video health hosted someplace like amazon s3 there's a bit of a glitch as it first sets up could be because we're near the bottom of the page i'm not sure but there's the video and there's a video thumbnail the custom icon and there's our video right there you can define which corner of the page it goes in and you can get it from all kinds of different sources the advanced data table there we go this one sorts columns the free version data table does not sort columns but the advanced version does so that's awesome sort by age sort by office alphabetically sort by position alphabetically i like that a lot multiple pages you can define how many entries you show if you show 10 and you sort it shows all the ages for those 10. if you have 50 in here it's only 29 entries in total but they're all sorted according to whatever you sort them by whichever column you choose you can also search let's search for tokyo all the entries with tokyo what about finance all the entries with finance how about h all the 23 year olds ah you see it's picking up number 23 not necessarily 23 years of age this one's 46 but in the date there's a 23 so we can't define which column to search in we can also export the table that's being exported as a csv so you can all your wizards to export tables of data if you want that's a pretty cool widget modal pop-up gives you pop-up options it's a simple text pop-up with image with a video different animations as it pops in full size one it'll pop up in the corner you can use images as the trigger you can probably use buttons as the trigger well these ones are buttons you probably use regular text links as a trigger those are the modal pop-ups and we have the happy mega menu feature list and unfold a mega menu is a menu that has media and not just links so a regular menu would be one like this it just has links and maybe even a flyout menu when you hover over one of these there's another menu that pops out whereas a mega menu has things like this headlines a little extra design columns and i'm sure one of these demos is going to have pictures in the menu here's one of the icons here's a picture right there there's gonna be one with videos as well more icons there's one with a picture thought that was a video that's a major size menu there's one with your products right in the menu i haven't seen a video yet although i'm i'm 100 99.9 certain that you can add a video to the mega menu as well there's a feature list which is basically a fancy way of saying lists with different icons so we have check marks here numbers different colors and hover effects different icons not just the boring little this one it has images horizontal list with icons if you want you can use the unfold widget to unfold parts of the site so if i click on here read more it unfolds that section so you can read more so you can keep your site a little more organized a little more neat and then when people want to see more they can choose the more option which is also a really good way of handling situations where your column size might not be the same i think this one up here is a good example where we have these are all pretty much the same this one's a little bit longer but you might have cases where this column only goes to here the other ones go all the way and looks a little silly and then you can have the read more just appear in a place where they're all equal that's pretty cool yeah i like this widget although i don't see what we're unfolding here or click on the image or hover even and it pops open and then that is the end of the pro widgets in the general section following that we have the pro widgets in the creative section one page nav off canvas hotspot and flip box one page nav you can see it on the right hand side over here you can click on any one of these and it takes you down to whatever section you clicked on you can also have dot navigation icon navigation a docked navigation multi-color with icons and the creative option which is what we have over here different ways to display icons as we scroll you can see our menu updating on the right as we get to those sections that show the different styles in this case but every different sections of your page so you can use something like this instead of a progress indicator to show how far you've gone down you have a little menu that that goes down as you scroll down off canvas menus are menus that are off canvas this one comes in from the left this one comes in from the right this one slides in this one is revealed and the whole site pushes over this one does the same thing this one slide alongs they are pretty similar just different ways of bringing content in from whatever direction you want custom icons this is a great way to have a lot of content in your menu and have it not be in the way people just click a button and then it comes in whenever needed it's also a nice way of having your team information on here the hotspot widget allows you to add hotspots to images that's where you want to highlight certain places on an image so all you have to do to make this happen you have to have the image if you want to put the hot spot on you upload it and used to add these hot spots with the tooltips wherever you want to highlight something you can use icons for the tooltips dollar amounts images we have a flip box as well when we hover over it flips this is a 3d flip box it looks a little bit 3d when you flip over because the the text and images move at a different speed than the actual box i do like flip boxes another 3d flip box if i flip too much it makes me dizzy though so i don't want to flip too much that's pretty cool where it's kind of like this is like a door a revolving door opening it hinges on the side and this one is same thing on the side another 3d with a different design that's pretty cool too it's like a flap over a window and then we have the hoverbox scrolling image animated text and single image scroll the hoverbox has different effects as you hover in this case we have posts in hover boxes you can also have images and usually you have an image something that has an image in here otherwise the effect would kind of be lost wouldn't be great if it was a text only box that you had here and we have a scrolling image here we have scrolling logos other scrolling logos in two different directions and three columns that's pretty neat this i've never seen this before where you have this lady looking at the scrolling logos in the back that's pretty cool scrolling text vertical scrolling scrolling images with title gradients on the headlines a separator between each one we have animated text there's different ways of animating different words elementor pro has an animated text add-on this just adds more designs don't forget anytime you like any one of these live copy copy it right to your site makes your design time a lot shorter single image scroll as you hover over the image scrolls if the image is longer it will scroll more these ones aren't scrolling these ones aren't either these ones are they're scrolling on scroll so you have to hover over them and then you can scroll these ones go side to side horizontally and that's the pro widgets inside the creative category then we have the slider carousel category advanced slider team carousel testimonial carousel and logo carousel advanced slider this allows you to add more stuff to a slider and more effects versus the regular slider this one's like a 3d cube although there's only three so maybe a 3d triangle lots of cool effects to be had creative horizontal slider lots of options for sliders the team carousel is a carousel that allows you to scroll through your team different ways of displaying that most of them with arrows or dots in fact maybe all of them don't do this one very often where it's like a line down the bottom so it kind of separates it that has the arrows on the sides it's a different style this one you don't see very often either of course this is your design option the widget's over here and this over here is not part of the widget but it's a nice way of displaying these guys although i'd like it if they disappeared behind the rounded right now they disappear right here they disappear behind the rounded piece here that'll be great and you can do that in the elementary settings using z index and negative margins probably lots of cool team carousels testimonial carousel same idea but for testimonials lots of different ways to display those i prefer the ones with pictures logo carousel carousels with logos same ideas the team and the testimonial carousel this with a bunch of logos so that's the pro widgets in slider and carousel then we also have pro widgets for social media we have a facebook feed twitter feed carousel and instagram feed here we have the facebook feed pulls in facebook posts look really great even has likes and comments doesn't show the comments but for the number of comments if they were left there nice and clean different design layouts minimalist without the picture i prefer the ones with the picture it really depends on your site design which one works best i like this one nice and wide these are pretty good looking facebook posts facebook post feeds and then we have the twitter feed carousel unlike the twitter feed and the free version this is a carousel in the free version they're static where they don't really move you gotta have like three or four or one or two on the page just stays there where it is these ones can be set to automatically scroll or you can scroll with the navigation this one same idea a little more data here's dark mode and it pulls in tweets here's just one tweet for the whole slide here's two here's a nice backgrounds and dot navigation and we also have the instagram feed that can be easily pulled in these are quite nice and clean instagram is very minimalist to begin with the feeds are almost always just pictures which is fine and it looks great dark mode those are good looking instagram feeds those are the social media widgets under marketing we have the pricing table price menu and promo box these are very important if your website that sells something or if your clients do lots of different pricing table designs you'll notice in most pricing tables there's always one that stands out and these ones as well there's always one that has some kind of highlighting of some kind it's usually a good practice for your pricing tables dark mode this one's pretty cool with the character over here we have pricing menus for a restaurant or even for services maybe a unique way of displaying your services i don't know i'll probably stick with restaurants for these pricing menus lots of different designs promo box allows you to create promo boxes that you'd add to pages or sidebars or someplace nice where they stand out so you can drive traffic to your sale or whatever your promotion is so those are the pro widgets inside of marketing we have pro charts line chart pine doughnut chart polar area chart and radar chart if you hover over the dots they show information on the chart i like how these charts materialize as you scroll they're not just static images are actually moving around i like that the pine doughnut chart different way to display similar data as a pi or a donut polar area chart i don't know what kind of data is ideal for a polar area chart but you have them if you need them radar chart same thing i don't know what type of data is good for radar chart i am not well versed in my chart types and what they're good for but you have chart options there's those four for you for posts we have a post grade for the pro version post tiles smart post list post carousel and author list check out the post grid it's a grid of posts as you might imagine you can put a lot more data into this post grid than you can for the free version of the post grid or you can just have not as much data if you want you can turn data sources on and off in your designs depending what you want to have in there i like these with the dividers different divider styles which is a feature for happy happy add-ons if you recall these different divider styles lots of different designs and of course this is the sampling of what you can make your creativity your imagination is the limit and here we have post tiles instead of cards with hover effects on some of them the smart post list allows you to feature articles this one looks like a new site right here those guys aren't working right now probably not enough data in that post list but you could definitely create a post template or home page that looks like a newspaper with this post list widget here we have two of them side by side training articles one trending articles two so that's two post widgets i would guess side by side post carousel puts the posts into a carousel if posts are important for your site or your client's site happy add-ons has a lot of options for you to display posts just the way you want them the author list if you're a multi-author website it's great to have an author list somewhere you don't have to but you can here it even shows how many articles they wrote beside their name here's their bio then we have the pro woocommerce widgets there are eight of them product grid product carousel product category grid and product category carousel first let's check out product grid a bunch of nice designs and layouts for products click on more products and takes you to the shop or to the store nice and clean and the product carousel is kind of the same idea only it's a carousel instead of a grid all the information a prospective customer would need about a product to see if they'd like to take a closer look and add to the cart they can add to the cart right on these cards as well product category grid is a grid of the product categories woocommerce category optimization is very important i'm willing to bet most people only have an image for the category but if you do have images for your category this is a nice set of widgets or a nice widget with a set of settings to make it display really nicely on your site product category carousel same idea as the grid only it's carousel we have single product mini cart cart and checkout so here we have a widget for a single product you can put these wherever you like really build them into your blog templates put them on your homepage you can put these widgets wherever you think of the biggest impact the mini cart this is what shows up in the header when you have a woocommerce site quite often you can have a little cart in the menu system when you hover over it it opens a window like this and that is the mini cart and shows what items you have in your cart your subtotal then you can view cart or go to checkout there's lots of settings to customize that but the basics are you have the products that are in your cart you can press x to get rid of them you have the subtotal you can view the cart and you can check out and lives up in the menu system like this one right here and then the cart page looks like this just some styling added on top of the regular woocommerce cart and the checkout page looks like this same idea some different styles applied on top of the existing woocommerce checkout page and we also have forms down here but those are all free and we're down to the features so now we covered all the pro widgets all the free widgets and all the features if you liked what you saw throughout this video i highly encourage you to come to happyaddons.com i've negotiated a 10 off coupon for anybody who wants it using the coupon code wp learning lab all one word you enter that during checkout and you get 10 off whatever plan you end up choosing and there's a link below to take you there it's also an affiliate link it does not cost you more to purchase an affiliate link but i do get a commission if you end up buying through that and i really appreciate it that commission helps me keep making these videos for you on youtube and check out the widgets that are available happy add-ons is one of the first third-party add-ons for elementor so they've been developing for the longest time out of most add-ons that are out there and so you have lots of high-quality widgets and features and some of those features and widgets are quite unique and you don't see them anywhere else so if you like what you saw come check out happy add-ons the free version will get you a long way the pro version will get you even farther so click the link down below to check out happy add-ons next up check out this playlist right over here where i teach you how to speed up your elementor based websites because it's one thing to have a cool website but it has to be fast as well so check out those tutorials if you haven't done so yet click subscribe bring the belts don't miss new future videos my name is bjorn from wp learning lab till next time keep crushing it and i will see you in the next video

Channel: WordPress Tutorials - WPLearningLab

Views: 1,988

Keywords: addons for elementor, best elementor addons, best elementor free addons, bjorn, elementor addons, elementor addons elements, elementor addons free, elementor addons tutorial, elementor happy addons, elementor page builder, happy addons for elementor, happy addons for elementor tutorial, happy addons pro, happy addons pro free, happy addons wrapper link, happy elementor addons pro, wordpress elementor, wordpress elementor plugin, wp learning lab

Id: oEJCr9eUyqk

Length: 84min 45sec (5085 seconds)

Published: Wed Nov 17 2021