Happy Addons for Elementor - Free Widgets and Features

[Music] hey this is peter from the ultimate wordpress guide thanks for joining me on another exciting tutorial where you'll learn how to use wordpress and elementor to create breathtaking websites in this video we'll talk about happy add-ons for elementor and i'll take you through a full feature tour of everything that this add-on has to offer happy add-ons for elementor has over 80 widgets 35 feature-rich free and 40 plus elegant premium widgets it sports 21 exclusive and unique features which includes things like section nesting live copy motion effects and much much more it has an extensive library of over 400 design templates that you can easily include into your design all of which we'll cover in this two-part series happy add-ons for elementor features six unique pricing options three annual and three lifetimes starting from as low as 31 for a starter package which is one site for one year which includes all of the widgets unlimited nesting presets over 400 of them on demand asset loading specific happy add-ons line icons live copy image masking so much more and updates for one year the professional plan is 67 you get five sites the business plan is only 132 dollars for a thousand sites over to the lifetime plan you can see the same one site lifetime license for just under a hundred dollars just over two hundred dollars for the professional license and a little over three hundred dollars for a thousand sites for a lifetime license so without further ado let's dive right in first we'll look at the card widget i already have a few card widgets dragged out onto the canvas but let's take a look at all the available settings and styling options that we have available for this particular widget so over to the content tab you can already see i've referred to them earlier there are a couple of presets that are available on this particular item so i'll go through just a couple of them just to give you an idea of all the styling changes that have applied and these are available out of the box with a happy add-ons for elementor pro license so you'll see that there's quite a couple which changes the overall look and feel of these widgets and you can set this up and style them appropriately as you wish afterwards these are just a few starter templates to to really get you going with some basic styling okay let's take one of the ones that have already been set up and we'll go through the content settings so first off we have the icon or the image and the badge section this is where you'll upload an image that will be featured in this area i can set up image masking if i wish there are a couple of different preset options available i can position the image i can size it appropriately and i can set it to repeat or not repeat in this instance i'll leave that as is the next item down is where i set the image size and i can set the image size on the card widget as well but in this instance i want to keep it at the top the badge text that's this little area right here so i can change the content of that badge text next over to the description area this is where i specify the title and the description just above the button and lastly we go to the button itself where i can change the text i can link it dynamically to a dynamic tag or something that's already stored in my dynamic library i can link this to a url either within the website or externally and i can set it up to open in a new window or add a no follow tag to it i can also specify whether the button needs to be full width in this instance then i can align it either to the left i can justify it but i'll just keep this as a center aligned and i'll keep the button in the left hand corner i can specify a specific icon that i want to choose alongside the text on the button specify whether the icon needs to be before or after the text and obviously also just adjust the icon spacing between the text and the icon [Music] if i head over to the style tab this is where i can really go and style the content of this i can set up the image width i can set the image height i can set up specific offsets related to the image themselves so i can offset the image off the card either horizontally or vertically i'm not going to do that so i'll just click there to reset it back into position i can set up the padding around the image on the card widget i can set up a border for the image none is specified now and as you can see there is a 25 pixel border radius applied to each one of the corners if i wish i can also add a box shadow so i'll just put that up to show you what that looks like but as you can see with a padding applied it does the box shadow around the entire container for the image not really what i want to do there so i'll just go ahead and reset that in terms of the image again i can set up opacity on the normal and the hover states so on the other state you can see if i hover over the image nothing happens but if i change that opacity and i hover over the image you'll see that it applies that translucency factor so we'll just keep that as is furthermore also i can add css filters like a blur i can set the brightness contrast saturation and u on the image itself um or i can set up a hover animation yeah so let's put a grow animation so i can see if i click on that it changes let's change it to a pulse and so on but i'm not going to set a animation in this instance next over to the badge which is this little guy over here on the badge i can set various positioning on the card and i can specify an offset both horizontally and vertically so you'll see that if i move that around it it moves the badge along i can specify the padding on the top bottom left and right of the inner part of the content of this badge i can set up the text color badge color in this instance i can set up a border which is solid at border width so at this point you can see that there is a border replied but because this is from a preset this is already default so if i go and change that to a different border size you'll see that that takes effect so that looks like about the border size that was applied on the preset obviously the border color i can choose from either the global colors that i have set up for the website or i can go into the color picker and specify the color that i want i can apply a border radius and again here you won't see any border radius applied but because it has been set up on the preset itself if i go and change that to a different border you'll see that changes so that just tells me looking at this that the border radius on the preset is set to 15. again here i can set up a box shadow as you can see it just lifts that badge up i'm not going to do that so i'll just reset i can set up the topography specify the family text size weight transformation style decoration letter spacing and so on next over to the title in the description so here again very simple very basic elementor stuff where i can set the content padding around the content area on the title section i can specify the amount of spacing that i want between the title and the description you can specify the text color and typography and on description itself same thing the spacing that i can apply between the description and the buttons so let me just perhaps change that to a value that you can see okay so we'll set that to let's say 30 pixels that's fine and same thing here i can set the text color and the typography here you can see there's a slight opacity factor or translucency factor applied to this text so if i just drag that all the way up you'll see that the text becomes completely white okay um typography again same thing and lastly on the button so i've got a button down here that changes color on hover state so i can see that there's padding applied to the inside of the button left and right 20 pixels top and bottom 12 pixels i can set the typography i can see that it has a border a solid border applied in normal state which is about 2 pixels wide the border color is white no border radius applied no box shadow applied so again here on the normal state i can see that the text color is white and the background color is completely translucent and if i go on to the hover state that is inverted so i've got the text color that is a dark gray or a black a background color and a border color i have a few info box widgets dragged onto the canvas already and it's a lot of the same really so we'll go through each of the settings a lot quicker most of the styling options and content options are very much the same across the widgets so we won't spend too much time on it on the content side again you can see there's a preset section where i can go and change a couple of the presets to some of the predefined styling options that the plugin has out of the box [Music] on the image and icon section you can see that i have the option to set either a icon or an image where i can set a image from the image library i can set the media direction whether the media needs to sit in media that means the icon or the image sits on the side or on the top of the info box in terms of vertical alignment i can set that to the middle the bottom or the top i'll leave that at the top for the title in the description field again here i can set up the title i can set up the description various title html tags i can set up the alignment of of the content i consider two left align middle aligned lighter line and so on the button at the bottom i can see that there is some button text um and i can again set the link of this particular button which in this instance is just text to either route to a link within the website or externally over to the style tab like i said very much the same i can set up the icon on the image size i can set up offsets spacing and padding between the icon and the text itself i can set up border types around the icon in the image as you can see there i'll leave that to none i can set up the border radius box shadows the color of the icon on the image background color or if i want to rotate the background as well you won't be able to see that right now as the background is currently the same color as the as the info box on the title and the description area here again i can set up the content padding within the title and description area i can set up the bottom spacing text color typography on the title the description same thing and over on the button i can set up the padding the typography border type border radius the button and the various states so normal text color background color and the translation of the icon itself and also on the hover state [Music] the icon box widget is very much the same like the info box the exception obviously only is that there's a lot less content on it i already have a few um icon boxes dragged onto the canvas so let's go ahead and look at the settings so on the content side once again as with everything else there are a couple of preset options as you can see so i'll go through a couple of these [Music] on the content side not much to change i can upload an svg file or i can pick an icon from the icon library i can specify the title i can specify the batch text and the box as a whole can be hyperlinked so i can set up a link to the box and then obviously again the title tags that can be set uh one through six um on the on the icon box on the style tab i can set the icon size the padding around the icon the bottom spacing between the icon and the title i can set up a border type border radius so in this instance it's set up to 100 pixels based on the size of the icon i can set up a box shadow the color of the icon itself the background color the icon box rotation on the title area i can set up the typography i can set up a text shadow and obviously also a normal and a hover state on the text so if i change that on the other state you can see if i hover over the text that changes color the badge itself so i can set up the badge offset this is where i control the positioning of the badge i can drag it horizontally i can drag it vertically anywhere i want to place it on the canvas or off campus for that matter i'll just go ahead and reset that to its position i can set up the text color within the badge i can set up the background color so let's go ahead and change that again to a preset color i can set up the border type border radius box shadow and typography [Music] [Applause] [Music] the skill bars widget is a very nice widget to showcase abilities or skills for a designer or a design agency and as you can see here i already have a skill bar widget dragged onto the canvas where it highlights proficiency or abilities on html css photoshop graphic design php wordpress so let's take a look if i go on to the widget itself onto the content tab again here you can see there's a couple of design presets i'll select one there you can see the color changes and also where the text is located i'll change that back to design two which was the default in this instance over to the skills area as you can see the four skills and that are currently displayed on screen so if i go into each one of the skills i can specify a name the level out of a hundred percent so if i change that to 95 you'll see that that adjusts and that updates and here also i have the ability to either customize the details of this on this screen by just toggling this on where i can set the text color the level color and the base color or i can go over to the style tab and set it from there and the same settings apply on each of these items i can go ahead and add an additional item same here where i can specify the name specify the level customize it here or customize it elsewhere and then the text position i can specify whether i want the text to be inside or whether i want the text to be on the outside if i go over to the style tab on the skills bar section you can see that the skill bar is currently very thin i can change the height of that skilled bar as i need to so let's make it a 15 i can change the spacing between so currently it's fairly close together let's take it a little further apart and so on i can set the border radius which is this radius on the end of the skills bars set up a box shadow and on the content side i can specify the text color the level color so let's change that level color to green i can specify the typography of the text there and i can add a text shadow now the review widget is very much like a testimonial widget with a bit of a twist as you can see there's actually also star ratings inside of this review widget so let's take a look again on the content tab under the preset section you'll see that there is a couple of presets available so let me just change a few so we can see what they look like that one's a bit out of shape yep that one looks okay let's change that to three yep i like that one on the review side you can set up the star rating so i can set that up to be a rating of five in this instance i want to display the rating as either a star or a number it'll show up like this i can set up the review specifically and i can specify whether i want to have the review before or after the writing yeah so we're just going to change that back to after the writing in terms of the reviewer this is where i can upload an image from my media library i can set up the image size the image position so if i drag that image there to the left hand side the right hand side i'll leave it at the top it looks cool in this design specify the name and the job title of this particular person where i want to align the text and again specify the type of html tag that i want to apply on the style tab for the writing i can specify the size of the rating yeah so we'll just increase that to a little size that's the two big bottom spacing so the spacing between the writing and the review itself the padding around the text color the background color as you can see here these have already been predefined by the preset if i want to specify a border or a border radius for the reviewer the text box padding the name bottom spacing text color typography the job title spacing text color typography and the review itself and on the photo for the styling i can set up the image width height again here i can specify whether i want an offset in this instance you'll see that it has a vertical offset applied just to bring it outside of the box a little bit i can set the batting the border type the width of the border here you can see in this preset there's a 10 pixel width ball reply to this and border color so if i change that watercolor you can see that it updates there border radius again border radius is applied and i can also apply a box shadow [Music] [Applause] next we have the image compare widget which is a very cool way to show the before and after states of a photo by just dragging the slider across the image let's take a look at how it works on the content i can see that there is the before image that i upload from the image library and a modified version of it in the after also from the image library i can set up the label yeah for the after state as after before as before i can set up the image size to a specified size i'll leave this as full on the settings side i can set up the visibility ratio so the visibility ratio is where the slider starts i move that over to 0.8 you'll see that that slider moves across so let's just move that back i can also change whether i want the orientation of this slider to be horizontal or vertical which means i'll drag it up and down to reveal the image in its before and after stack so i'll just push that back on the height overlay hide overlay you can see that this is currently hidden so if i flick this back you'll see that now the overlay is available so if i hover over the image i can see that there's the before and after tags but i'll leave that as is on the move handle i can set that to on hover so if i set that to on hover and i move to the image you can see that that changes as i hover over um on swipe that's specifically for mobile devices really i'll just leave that let's put that back on hover for now and i can see that as i hover across the image on the style tab so for the handle itself this is where i specify the details of the handle or the slider so in this instance it is white the handlebar size itself i can adjust the size here the handlebar arrows that's the arrow in the middle i can set the box width i can set the box height i can set a border type border radius and so on and for the labels as you've seen if i just go back let's go to the settings area here so on the overlay let's bring that back to on click um so we can see that when it hovers so if i go back to the style area here and i go to the label this is where i can set up the padding around the label the positioning of it if there's a border around it border radius set up the color of the the text itself the background color box shadow and typography [Music] now the gradient heading widget is a very cool widget that allows you to apply gradient colors to a title widget very much like a normal title widget with the exception obviously that you can add primary and secondary colors so over to the content tab under the presets you can see that there are a couple of predefined presets that comes out of the box with the plugin so if i flick through these you can see the different variations that are available so i'll quickly jump back to this one let's take design three a bit more basic and onto the title area this is where i define the text that i want to show inside of the title widget i can put a url to it to link the title text the gradient heading to another area of the website or an external link so that's pretty much it on the content side on the style side is where i can now define whether this is a classic single color heading or where this is a gradient heading so when i select the gradient heading option this is where i can now set a primary and a secondary color currently it is set to a radial type so you'll notice that the one color is on the inside and it sort of circles out and if i change the location here you can see it increases or decreases the size of the primary color and the same as well on the secondary color if i change this over to a linear color you'll see that it swaps over to sort of a left right where the primary color is on the one end the secondary color is on the other and i can do the same in terms of location moving where it switches or where it blends from the one side to the next and obviously also changing the angle of it to sort of top bottom left right or an angle other than that i can also change the typography as with any normal text element i can add a text shadow and a blend mode and one other cool feature which will talk a little bit more about later in this video is the text stroke which is one of the unique features that you get with the happy add-ons for elementor plug-in and this is where i can apply a stroke to the text itself so i can apply a stroke color and a stroke with but we'll look at this in a bit more detail later on [Music] so next up we have the t member widget which is perfectly and ideal for displaying team members of an organization or a design agency in a very cool looking way i quite like these i've already pasted these in available from a preset on the happy add-ons website so if i head over to the content tab again as you'll see here there are a couple of pre-defined templates that are available which you can flick through and look at the different variations under the information section is where i'll add the photo of the person that i'm linking this team member box to so i can choose the image from the library i can add an image mask this is again one of the unique features available with the happy add-ons pro feature and we'll touch on that in a little bit more detail later on but here you can see i can add a different masking to the image i'll just reset that for now i can set up the image size down to the person's details i can set up the name job title and the short bio down to the profile social profile section so here you can see i've got a couple of social profiles already listed to this person but i can very easily add a new one by clicking on the add item button and you'll see that there is a fairly large list of items available so if you scroll all the way down you can see there are quite a few so it's very easy to add a new icon or a new profile and as you add the new profile you'll see that the new icon appears and i then i then add the social profile link which i can of course open in a new window as to not redirect or direct people away from from my website and just back into that area if i go down to the want to customize section so this is where i can customize the social icons what the normal state of the icon is what the hover state of the icon is but i'll leave that as is for now because i can change these in the style area as well which we'll look at in just a moment i have the option to also show or disable the social profile so if i just toggle that to to hide you'll see that the social profile icons disappear so i can just have a sort of a blank box with the with the team members information but i'll leave that in it it creates a nice little touch towards the bottom so the details button you'll see that currently there's no details button in this particular preset so if i add the button it'll add a piece of text so you just in this instance it's only show details and i think in this regard it's a rather nice feature to add if you have a dedicated page for this person that you would like to redirect to where people can go and read more about this person given that this is only a very short bio so here you can link the the details of this person or a new page that you might create to the button that you specified so i'll just leave that off for now over to the style area this is where i can set up the width and the height of the image i can set the bottom spacing so that's the spacing between the image and the text i can set up padding around the image i can see that a border type or a border radius there you can see the radius applied in this instance i can apply a box shadow to the image set a background color if necessary over to the name job title and bio area pretty much the same like any text element editing i can set up content padding around the content area for the name job title and short bio section pretty much the same settings i can define bottom spacing text color typography text shadow and so on on the social icons area i can specify spacing so spacing that's available on the right hand side i can set up padding in between the icons i can specify icon size whether i want to show a border around the icon what the border radius would be and then as we've seen on the content tab earlier where i create the social icons this is where i can now uniformly set up the normal and the hover states and colors of these items globally yeah so text color and background color over to the details button pretty standard for for any type of button i can set up margins around the button padding within the button specify typography border type border radius box shadow and again the text color and background color of the hover states the deal button widget is sort of a cool two-for-one type of deal because very simply i could go ahead and place two individual buttons in in a section but in this instance it won't be necessary um and you'll see exactly why so if i click on the deal button widget when i go over to the presets area you can see that there are a couple of presets available as well for this i'm not going to change anything that right there now we'll get back to that in just a moment so under the deal button section you'll see immediately i've got a primary a connector and a secondary so under the primary area this is the primary text or the text for the primary button i can specify a link i can specify an icon icon position whether i want it to be before or after the text what the icon spacing is between the text and the icon and whether i want this to be a a vertical a cue or a stack layout so i can see if i change this around that becomes stack or vertically or horizontally or inline if i go to the connector you can currently see that the connector is hidden so if i just go ahead and unhide this you'll see that it adds that additional connector option between the two buttons which is pretty cool and here i can specify a connector type which is either a text which is this now or i can change that to an icon and if it is text this is where i specify the text area and again if i want to change the layout i can change it to a inline or a stacked option up here and then over onto the secondary button this is where i specify the text the icon the link the icon position and spacing and layout of the of the secondary button so onto the style tab i can go and style these individually so common settings are pretty much padding around the buttons the space between buttons these are global settings for the entire widget what the typography is if i want a box shadow whether i want to align the buttons to the left to the center or to the right of this of this container on the primary area i can then individually style apart from the common settings the button padding itself border type border radius typography and then normal and hover states in on text color and background color if i head over to the connector you'll see that the connector is currently set to the presets yeah so i can set up the text color the background color the typography and the box shadow so just quickly if i head over to the content area under the dual button settings for connector if i just switch that off and i go back to the style area and connect you'll notice that it prompts me with a message saying that the connector is currently hidden and it prompts you to enable the connector in the content tab if you want to see the styling apply as you go along if i go down to the secondary button pretty much the same settings as i had on the primary button i can set up the padding border type border radius typography box shadow as you can see there is a box shadow it's like box shadow applied and i can set the text color and the background color on the normal and hover states [Music] the number widget is a very simple very easy to customize animated counter or number widget as you can see here i've got a very simple layout i've got some text on the left and i've got three columns where i've placed three number widgets inside so if i go over to the content area you can see that there are again a couple of presets that are available so i'll just pick one of the presets available just to see what it looks like and then as you can immediately see when i made the change there is an animation that happens up to a maximum number so if i go to the number section this is where i can change the details so if i change that to the number 20 for instance you'll see that that starts at zero and it counts up to 20 and this is where i specify the animation duration so here i can toggle the animation off and only the the number shows so it won't show any animation but if i turn the animation back on and let's change that back to 10 i'll go back and select another preset okay that looks pretty cool you can see that the animation happens not too much to this particular widget if i go over to the style tab again um so there's some general settings where i can change the size of the widget in itself um i can set up the padding around the text area i can set up a border border radius box shadow i can set up the text alignment within this box from a background standpoint i can set up the background either to be a gradient as you can see here or i can specify just a normal flat classy color and here is where i specify that color i can also add an image as a background to the counter which which is a pretty cool feature i can back uh put in a background overlay if i need to and blend that background into a number of different options and here i can also specify the background overlay to be either a static single color or a gradient color and i can set the opacity now on the text area i can specify text color typography text shadow pretty basic stuff and as you can see here now i have the option to also add a certain rotation to the text if i need to but i'm just going to leave that as a zero as you see it's at zero there because the entire icon is rotated in this regard so let's see if i change that to a 45 that should be lined up perfect [Music] the justified grid widget allows you to very stylishly place your images in a justified grid using what is very similar to sort of a smart filter display type where i can display images and place them in various filters so the setup is quite easy if i go over to the gallery section in the content tab you can see that i already have four filters defined the lifestyle the portrait the travel in the shop if i expand each of these this is where i specify the filter name i can set this up to be a default filter and under the images section is where i would edit the images that i want to display within this particular filter so if i click on the images i can go here and i can add images to the gallery i can remove images from the gallery but i'll leave that as is and as i go through each of the filters you can see filter name default filter images selected and so on i can add additional filter items if i wish the image size this is where i can set the image size and resolution that it needs to display in the justified grid under the advanced section where i can show the filter menu show or hide the filter menu whichever i wish yeah so there i've hidden the filter menu i'll go ahead and just add that back in i can decide to show or hide the all filter and what i'd like that filter label to display if i have captions enabled or captions defined which i would advise you do for all of your images this is where you can then add the caption and the caption will show up in the image here is where i specif specify the height of the justification so here i can see that all of these are set to 200 pixels with a 10 pixel margin and i can hide the last row as well if if the last row doesn't contain a full line of images yeah which gives me a [Music] nice rectangular a square block which is perfectly justified now i can enable or disable the lightbox feature which means if i click on an image it'll expand this image into a lightbox and then from a responsive standpoint i can choose to disable or enable these on tablet and mobile devices and what i'd like the image size when the light box appears what the image size needs to display so on the style section not a lot of settings i can set up the border radius as you can see there's a 4 pixel border radius assigned to each one of the images i can set a background color to this if i wish currently this is set to transparent i can set up normal and hover states so when i hover onto the image you can see by default it already has that zoom effect applied but i can also go ahead on the normal or the hover state i can add a opacity and as you see under the transition section for the hover so there you'll see there's the grow hover animation i can set the transition duration of that animation and if i select the drop down list there are a couple of options that i can choose from in terms of other animations and have a cursor so here i can set up the different type of hover cursor effects that i can select from from this area on the caption area this is the styling for a caption if i've got the caption applied what the padding on the text area is the text color the background the typography and lastly on the filter menu the menu itself what sort of margins do i want to apply on the filter buttons themselves what are the padding what is the spacing between these buttons if i apply a border type what should the border width and the color and the border radius be if i want to apply a box shadow i can change the typography and in this instance i can also set up the alignment of of where that menu needs to display so in terms of hover states and active states i can change the text color and the background color for the normal state the hover state and the active state [Music] the testimonial widget is yet another cool very simple way to display testimonials on your website something nice that a client or someone has to say about your business and it's very easy to set up so i've got a few dragged in already and you can see their style quite nicely if i go over to the content area and the presets again like most of the widgets from happy add-ons you'll see that there are a couple of presets that are available out of the box and i can toggle through these and choose the one that i like or i can go down the road of setting it up manually as we've done before so very simply if i go to the testimonial area very basic this is the text area where i'll place the testimonial text in the reviewer area i can choose an image yeah which will be a little thumbnail image that can display next to the person's name yeah so let's take that as an example let's take this lady we'll add her in yeah and there you can see there's the reviewer's image i can specify the image size who the person is this is definitely not a david so let's call her sally and sally is the it officer for decor llc so that's pretty much it that i can set up from there if i go over to the style tab from a testimonial standpoint here's where i set up the padding within the testimonial area what the bottom spacing would be between the testimonial text and the reviewer the text color the background color the typography pretty standard stuff and i can set up a border radius as well so you can see there's no border radius applied but if i go ahead and add a border radius you'll see that that border radius is not applied where is that going to okay so that's actually set up on this area over here let me just select this and change the port radius back okay i think that's not part of the preset i can also set up a box shadow from an image i can set up the width the height of the image i can set up the spacing between the image and the actual reviewer text and here is the border radius obviously for the image which gives me that perfectly round image but i can change that if i want to i can specify a box shadow and from the reviewer here is where i set up the the text color and the typography for the reviewer the bottom spacing between the title itself and the detail the name and the title and i specify the text color and the typography as [Music] well the logo grid widget is the perfect way to show people you're affiliated with or customers that you work with on your website and it's fairly easy to add and configure [Music] so on the content area under the presets you can see once again as usual there are a couple of presets and under the logo grid section this is where i configure each of the logos now you'll see that each of these logos has sort of a gray scale default state and if i hover over you'll see the full color logo so if i go into each of the logo areas you'll see that there is where i place the logo from my image library i can specify a url that i want this logo to link to and of course i can set that to open in a new window and i can specify the brand name so if i go through each of these logos you'll see that all of the logos that have been defined here are the color versions of this logo so what is very nice is that it actually places a grayscale version um of this so when you hover over it it gives you that nice colorful effect so very basic under the seconds area is where i go to image size so i can define the image size i've got a couple of different options for grid layout so box border tic-tac-toe and i can specify obviously the number of columns that i want to display which in this instance if i change that you'll see that it just stacks that on top of each other and because i have a specific number of logos it looks pretty cool in this layout another style area not much to do um i can set up the panning around the logos i can specify logo height set borders if i need to if i want to specify a specific background color and a border radius if i need to in this particular instance you don't really get to see the border radius but any other settings that get applied um you will most likely see it under the normal and the hover states um here you can see that we've got the option to define opacity and certain css filters so in this regard we have some css folders applied where you can see that the hue and saturation contrast brightness and blur being set up to give us that grayscale effect under the hover state i can also set up some css filters i can specify a transition duration and as with most of the other widgets i can also go ahead and set up the hover animation and there are a couple to choose from [Music] next up is the slider widget nothing new nothing you haven't seen before but fairly easy to set up if i go to the slider over to the content area and again here i've got a couple of presets to choose from under the slides area this is where i can go and add all the carousel or slide items the images that i want to display and so i can upload an image from my media library i can give it a title and a subtitle i don't have to but you'll see if i navigate over to the first image none of these images at the moment has a title or a subtitle item on it but if i go to the first image just wait for that to slide by there you can see the image and the subtitle text that display on top of the image so i can add as many carousel items here as i like and you'll see that they will be displayed in terms of quantity by the navigation dots below i can specify the image size preferably that these images should be all the same size to make sure that this is uh relative in size from a settings perspective this is where i can set up the animation speed so how quickly um the image animates and then obviously the auto play speed or do i want to auto play or do i want to use the navigation options to navigate through these so i can turn this off for instance and the animation will stop and i physically have to go and click the navigation arrow to move these along so i'll leave the auto play on and this is where i can change the auto play speed in terms of how long that animation takes should this be on an infinite loop so infinite loop means it will continue looping through all the images indefinitely if not i can switch that off and it'll run through the first from the first through the last and then obviously it will stop there's an option to set this up in a vertical mode so currently it is sliding horizontally over the screen so if i change that to vertical mode you'll see that the images slide from the bottom upwards okay in terms of navigation i've got arrows and dots so the arrows on the side of the image and i've got the dots for the navigation below i can change that to show arrows only or dots only so if i change that to arrows only the navigation dots below disappear and i can only navigate um with the arrows um the previous and the next icon these are preset from the icon library and with the left and the right chevron i can decide to not show any or i can upload my own svg or i can pick um from any other icon that's available in the icon library so over to the style tab um slider items i can specify whether i want to see a border around the slider item if i want a border radius you can see that there is a slight border radius applied under the slide content slide content effectively is the text area that we have within the slide so i can set up some content padding i can set up a background type if i want to title details button spacing on the title and the subtitle text color typography and so on in terms of navigation um specifically on the arrows here i can specify the size of it whether i want to see a border what the width of that navigation item needs to be if it has a border radius because it has a preset none of the values are filled in because these have already been predefined and in terms of normal and hover states this is where i can change the text color which is effectively the icon color within the navigation and the background color so just to make this a little more legible let's make that slightly darker we'll go back to the text color and we'll change that to white just to make this a bit more prominent for you to see but other than that nothing much here to change if i want to change the way this displays in a hover state i can change the text color again the background color or if i want to show a border now we've switched off the navigation dots but this is where you would style them nevertheless um i can specify vertical positioning yep so how far from the slider do they need to show what the horizontal spacing between the dots needs to be what is the alignment should they be central line left line right line and then again also if i go to the normal hover and active states i can set up the size of the dot i can set up the color hover nothing changes but the color and then on the active state i can set up the size and the color of the navigation dots also [Music] the image carousel widget has very similar settings to the slider widget that we looked at just a moment ago and i'll show you how there are a couple of presets of course um as as we've seen with all of the other widgets before if i go to the slide section again there are some carousel items so this is where i upload all the images that i want to see from my media library and as you've seen before as well i can specify a title a subtitle and a link that i can associate to every image i'm not going to do so here now i can add any additional slides or items as i wish to i can set up the image size that will display under the settings area again here this is where very similar to the slider widget i set up the animation speed the auto play speed the auto play yes or no i can set this up into an infinite loop um and if i set up a center mode this is where i can have a slide that effectively starts from the center yeah center mode and this as you can see from from the note here it works best with a odd number of slides otherwise you'll probably have a slide that is um split over the center yeah so this works perfectly because we only have five slides in this in this image carousel and again here i have the option to set this to vertical mode i can change my navigation from arrows and dots dots arrows or none this line number of slides to show so if i change this to five you'll see that it adjusts and it shows me all of the slides or the five images the five slides that i've selected from from the city here so i'll just change that back to three slides um and again here i can set up the the previous icon either show no icon upload an svg or select one from the icon library so over to the style tab again very similar and here i can specify a slight spacing so at the moment you can see that there's currently no spacing applied but i can change that putting a spacing between the slides and obviously if i want to i can specify a border radius to each of these but i quite like the original layout i'll set that back to zero set that back to zero in terms of slide content again as you've seen before because we didn't add any title and subtitles to the image carousel you won't see any content but this is where you would configure the padding around the content if there is a background type whether it's a classic colored type or gradient and the details around the title and the subtitle spacing text color typography and again here as well there you can see the navigation so the arrow i can specify the position so i can set up a horizontal and in vertical offset if i want to see a border what that border with needs to be border color border radius the color of the arrow and the background color for both the normal and the hover states same applies to the navigation dots i can specify the vertical position so i can move that up and down i can put those within the slider or drop them down below wherever i wish to um i can change the spacing of these dots how close or how far apart they are what the size of these dots are in normal state you know so you can see i can make them really big or i can make them really small so let's change that to a 10. um on the hover state nothing changes except for the color and on the active state obviously i want the active state to be slightly larger than what the hover state is so you can see that if i hover over the button the size changes and that's it [Music] next up is the image grid and it's pretty much the same as the justified grid widget we looked at a little earlier in the sense that we can place images in a grid layout you'll see that all the images obviously in this compared to the justified grid are all the same size i can set up a filter to filter through the different in this instance male and female images that i've set up and i've got a filter defined just to bring all of them back in as well so let's take a look at how it's configured again pretty similar to the justified grid i've got two filter groups defined within the filter group i can give that a name i can set it as the default filter and i can set up all of the image that i want to display i can move these around change the order i could specify captions as i've mentioned earlier i'll leave that as this and the same applies to the female group as well i can add any additional items if i need to i can change the image size under the advanced area i can show or hide the filter menu i can show the all filter and if i do this is where i can change the the label of the oil filter and i can specify the number of columns and here i can specify between one and six columns and i can specify whether it's fit rows masonry or even rows so let's just take a look if i change that to masonry you'll see that it looks like a sort of masonry layout um but i'll leave that back to even so we'll keep them all the same size and again here i can enable or disable the light box so if i click on a particular image you'll see that that pops up into a light box um where i can just click the x there and it'll take me back and close that image down okay and then again responsive details do i want to disable them on mobile or tablet these are all set to know and that i can choose from a responsive standpoint to to disable these what is the image size that i want the light box to display over to the style tab i can set up the image height in this instance they set up all at 250 so let's uh let's change that to 200 you'll see that that adjusts but unfortunately now um all the image a little cut off so let's see if we change that back to let's say something slightly bigger let's say 275 um you can see that all of these all these models fit in beautifully on screen um i can add a padding uh in between these so you can see that there's a padding applied and also a very slight border radius but if i didn't want to show that and i want to have these stacked up right against each other let's uh let's remove the border radius let's remove the padding and you can see a sort of uniform grid here again i can set up the opacity and some css filters on the normal and the hover states and for the filter menu a couple of settings here again in terms of the menu what are the margins um top left bottom right that i want to show what should the the padding be between the faulty buttons themselves uh what should the splicing be between does it have a border type if so what is the border width what is the color uh border radius you can see that there is a border radius applied but if i change that to zero you'll see that these buttons square out a little bit i can set up any box shadows if i want to typography alignment of the menu so here again i can change the menu to be middle aligned right lined i quite like how it looks and in the middle and from a text color and background color standpoint for the normal hover and active states this is where i can configure these [Music] next up is the step flow widget and this is a pretty cool widget to display potentially steps in a checkout process steps in an order process or whatever you need for the purpose of your website pretty easy to configure as well a couple of elements we need to take into account so again as before we've got a couple of presets that we can choose from and down to the step flow area this is where i can specify the the icon that i want to see and i can select an icon from the icon library or i can upload an svg file and the badge text as you can see there step one we've got a title we've got a description and we've got a link that we can redirect to another page on the website or an external link the text alignment or the alignment itself i can set that to be left aligned completely central line justified etc and here i can choose to show the direction arrows or to hide them so if i switch that off you'll see that it switches off the direction arrow for each one of these items independently yeah so we'll have a flow direction for this one we'll have a flow direction for this one and obviously as you can imagine the direction for that one will be switched off so i'll keep that on over to the style and area start on the icon so here i can set up the icon size i can set up the padding around the icon bottom spacing so that's the spacing between the icon and the text below it if i want to have a border type what the border radius should be so as you can see this is again set up against the preset if i want a box shadow so there is already a box shadow applied but i can reset that and change that in this area this is the color of the icon and obviously the background color of the container and that the icon sits in next up is the badge so on the badge i can put a padding so i've got separate paddings here for top right bottom left i can specify these here do i want to show a border and what the border radius needs to be so i can go ahead and change the border radius here the color the text the background color and the typography very straightforward nothing new to see here we've got the title and the description area where i can specify the bottom spacing between the title and the description i can set the text color the text shadow and the typography same for the description title uh the color text shadow and typography and lastly on the direction area is where i can decide how i want to display these direction arrows so it's currently set to solid i can change that to dotted and you can see that this changes i can set up the width so that's the length of the arrow and what the angle needs to be so you can see i can rotate this in any direction 360 degrees i'll leave that at zero and obviously from an offset standpoint this is where i can offset the top so i can move that up or down so vertical offset and then horizontal offset as well just to move that into position in between the step flow icons and that's all [Music] the fun factor fun fact widget is very similar to the number widget we looked at earlier with the exception that i can now add additional text to this area so let's take a look by selecting the fun factor widget over the content area i can choose whether i want to display an icon or an image let me change that back to an icon i can select an icon from the icon library i can upload an svg i can set up the positioning so if i want the icon to the left and the text and the counter to the right i can do so and again here i can change the values around and that will show up as an animation based on the animation speed that i've defined so currently it's set to 500 milliseconds if i change that to something a little higher you'll notice that that timer or that counter obviously runs through a little slower and you can set that up in whichever way you prefer obviously we've got the title text which is the text that displays just below the number counter on the options not too much to set up i've got a divider this is pretty much the divider that i can show in between the number and the title and i can set up the text alignment to be center aligned left aligned inside that widget but i'll leave that at center heading over to the style tab here very basically i can set up the icon size i can set up the icon color i set up the padding around the icon whether i want to display a border around what that border radius should be if i want to display a box shadow i can set up the bottom spacing so that's from the icon or the image down to the number counter or the fun factor i can set up the background color of this of this widget behind the icon or the area and i can set up an offset so the offset would allow me to again set up a vertical or a horizontal offset in terms of where that image or icon needs to sit within within the widget to the number and title area again nothing new here this is where i set up the padding around the text areas around the number what is the bottom spacing between the number and the text below it what is the color of the text what is the typography do i want to apply a text shadow and so you can see there is a faint text shadow applied i'll go ahead and reset that the title itself so that's the the title area or the text area just below the divider that you can see and again here i can set up bottom spacing what the color the typography and the text shadow is and lastly obviously the divider in between what is the width of the divider let's make that 25 pixels you can see that that updates what is the height so here i can specify a thickness obviously of what that divider needs to be if i want to show it as a border radius so let's make that something like 15 and let's add a border radius of eight and you can see that updates here's where i set up the color and lastly obviously the bottom splicing between the divider and the description and the title [Music] the calendly widget allows you to integrate your free or pro calendly account uh with your wordpress or elementor installation calendly is a free meeting booking booking application and that allows people to go onto your website um select the time slot select a a type of booking it could be a 15 minute 30 minute 60 minute time slot booking and that integrates with your your calendar now they obviously also offer a pro plan but for for this example in this tutorial the free plan will do so with the calendly widget on the canvas there are a couple of very very basic settings that you that you need to take care of first things first is the username so your username is available on if you go to your calendly account um onto the my calendly page you'll see that your my calendly username will be there calendly.com forward slash and that's your username so just go ahead and copy that username and paste it into the username section and that will bring up your calendly account booking form you have a couple of options 15 minutes 30 minutes 60 minutes on the free plan you can only have one booking option available so in this option i've used the 60 minutes booking and here i can show or hide the booking or the event type details so that just shows up the calendar so it doesn't tell you anything about um what the booking time is but i'll leave that open so that the user can see what he's actually booking on the height section this is where i set up the height of the widget you obviously want to set this up sufficiently with a sufficient height so that the entire widget fits onto the page not much to do on the style tab particularly if you don't have the pro plan if you are on the pro plan you can set up things like customizing what your your widget from calendar looks like in terms of text color button and link color and background color next we have the new sticker widget this is a pretty cool sort of a bar type like widget that you can place anywhere on the websites anywhere on your website um where you can display uh post content um and it's pretty easy to configure um not too much to it on the content area you can see that there's a new sticker area um which has a sticky title yeah so this could be anything from latest posts to breaking news or whatever the case may be um and you can lift or right align this um if i change that to the right hand side you'll see that there's a border now we'll sort that out in just a moment so i'm going to bring that back to the left hand side um just so that i don't have too much to change there in terms of posts what do i want to display inside of the sticker area um so you can see i've got a couple of posts already and if you click on the plus icon i can go down to pretty much any other post that i have so let me take another one i'll add a few more and all the posts that i add will then display in these in the sticker area okay slide direction i can specify um what the slide direction needs to be it makes sense uh that the slide direction in this instance is to the right since my my sticky title is on the left and as you can see i've got a border radius defined here and the the sort of ticket text moves out of the border radius and something you probably also have noticed is whenever i hover over a title it actually freezes the content and you can see that my my mouse cursor also changes which means that this content is clickable so if i click on this post title it will redirect me to that post page so the the space between items here i can configure the number of pixels that i want to have between post titles and obviously what the slide speed needs to be so the default is set to 30 i can change that to any value that i like and that will determine the speed at which these titles move across the screen on the style tab not much to change so i can set up the background type to be either a classic color single color or a gradient color and if i select a color a great classic color this is the color that i'll select i can also choose a background image um to to put onto this border type but there's currently a border applied of two pixels all the way around and this is the border color and as you can see i have a border radius as well so if i wanted to change that back to something that's a bit more square i just remove the border radius there is currently a box shadow applied i can change if i want to if i want to reset back to a default no box shadow that's also fine and then obviously i can set up the batting so if i want to set a uniform or a global padding all the way around you'll see that i can do that but you can now also see that on the left hand side of the sticky um that the the the text there it comes out because of that that padding so let me just unlink this uh we'll change that the left padding will make that zero we'll change that to zero um and let's give this let's say a bounding of 20 on the right between top 20 bottom and there we go um in terms of the sticky title a couple of things that i can set up here title color typography background type again so i can set up a background color um whether it be a classic single color or a gradient again here i can put an image in i can put a border and in this instance like i said earlier i've got a border here but it's only on the right hand side so you can see i've got a two pixel border on the right hand side of the text and this is where the post content will flow out of and here i specify the color of that border if i want to border radius but this is a straight vertical line so i don't need a border radius there and then obviously also here i can set up the padding so this is the padding around the text itself so there's some padding to the left and the right top and bottom in terms of title so these are the titles and that you can see ticking across or sliding across the new sticker i can specify the title i can specify the typography and if i really want to i can specify the text shadow [Music] next we have the social icons widget pretty much everybody i'm sure has a social media account of some sort at this stage and it's very likely that you'd want to place your social media account on your website or customers website so very simple to configure really under the content area icons and this is where i can add all the different types of social icons i've got facebook twitter google plus instagram and i can add a few more um you can see this is wordpress i can go into the icon library and i can go and select from the social media icons that i have available snapchat telegram pinterest and so on [Music] going back to the settings themselves so if i go into the social icon i can see that i've got the icon library i don't have to show an icon and then obviously there you would get the link to your social media account i can enable or disable text and this is where i would put in the social media network name so here i would put facebook twitter google plus etc and then very specifically i can under the style tab set up global style settings for each or for all of these collectively but i can also go and customize them individually obviously to suit the background color border color text color that that is native to this particular social network and so you'll see what i mean in just a moment so under each of these social icons you'll see that it is set up to be individually or locally customized for both the normal and the hover states which means each of these are styled independently um on the separator side so you can see that there's a little separator in the middle i can customize these as well whether i want that to be a stroke or a custom type with the stroke size and what the color needs to be i'll turn that off over here i can specify obviously the alignment in terms of where it sits within the container left right or center aligned and i can enable or disable sticky self-explanatory um if i want the social icons to stick in a certain area on the web page under the style area as i've mentioned before there are a couple of common settings and these are the settings that i would set up in terms of the color the background color the border color for each of these on a global level um obviously the local the ones that we've set up in the content area under this area overrides the common or global style settings so here again if i wanted to apply some global settings some of them do make sense yeah i can set up global padding and the spacing between the social icons what the border thickness and the border radius needs to be if i have a box shadow and so on under the icon section this is where i can specify the icon size the padding between the icon and the border and specific animations so there are a couple available i can set that to none 2d animation background animation which is just the background of the icon itself or the shadow and glow animation again just apply to the icon and then i have a couple of a couple of options available um under the animation section so from a social name if i had added a social name within this icon so let me go back quickly and let's do that so let's put the social name on and i'll put facebook not face to book just facebook i'll put facebook in i'll go back over to the style tab and under the social name section this is where i can set up the typography i can set up the spacing in between the icon and the text and lastly from styling i can set up the separator typography [Music] the twitter feed plugin is the perfect way to display your or anybody else's twitter account feed on your website or a client website and there's a couple of things that you need to know before you get started so on the twitter feed section um obviously you'll have your twitter handle or your customers twitter handle or any twitter handle for that matter but very importantly there are two things that you'll need which is the consumer key and the consumer secret key uh both of which you can only get if you have a twitter developers account um and under the twitter developers account you need to have created a a project app and within that project app there's an area called keys and tokens and this is where you'll find your consumer keys so under the api and secret you click on regenerate it'll regenerate or generate for that matter the two keys that you need the consumer key and the get consumer or this consumer secret key which you need to paste in this area and that will display the twitter feed for that particular account so under the twitter section area you can set up various types of other items how you want to display the twitter feed where you want to display recent posts all posts favorites or retweets the number of tweets you want to show the number of columns you want to display so obviously if i change that to a three column layout i'd want to change that to only show six posts so you can customize this and show as many posts as you want i can show or hide the twitter logo i can show or hide the profile image so in this instance we've got the happy add-on elements or happy add-ons by elementor twitter feed showing and this is the icon that it pulls directly from their twitter feed so i'll leave that off for now we'll get back to that in just a moment um i can show the account name i can show the username or twitter handle show the date and time at which this this tweet was published and i can show the favorite count i can show the retweets count and i can show the read more icon but as you can see this clutters up the feed quite a bit so i'm going to remove some of these i'll keep the favorite count but i'll remove the retweets account leaving it nice and simple [Music] i can add the content or i can customize the content word count that i want to display so that's effectively the number of words that i want to display in this content area so if i change that to 20 you'll see that that increases the amount of content that it displays in the feed and then lastly i can set up the load more buttons so obviously if you have more than just the six tweets you can add the load more button just to show some additional content under the general section this is where i specify the alignment of the tweets so i can set them up to display middle left or right aligned the footer alignment this is where we've got the retweet and the favorite count so i can change that to wherever i'd like i'll keep that on the right hand side and as you've seen the button that we had earlier i can also align that to show either left center or right light the user info position so that's this area here i can decide whether i want to display that below or above the two content so we'll leave that below between content for now another style area this is where i specify the layout of the entire widget so the spacing between tweets and the padding the border type now if i have a border around the border radius i can see there is a slight border radius applied a box shadow background type so this is the color of the widget or the tiles themselves i can either make that a gradient or a static classic color and i'll pick the color there and i can also even add an image to the background a background overlay not quite sure what the content glossy or glossy effect is um i've turned that on and this just looks like it places an overlay on the text i can't really see it making anything significant that would what that would look good um so i'm going to leave that off for now under the user info section um a couple of things here the user info spacing so that's the spacing around the user info the twitter icon i can specify the size of the twitter icon and i can change that color i'm going to change that to close enough to the actual twitter icon color name and username typography so name typography username type typography the name and the twitter handle or username color which i can customize here as well so let's just keep that fairly consistent we'll change that to pretty much the same color blue there i think that looks pretty cool on the content area this is where i can specify padding around the content the description bottom spacing below the description the typography the color of the text you read more area here you can see that it says the read more is hidden in the twitter settings so if you remember going back to the twitter settings here we actually deactivated the read more button yeah so if i activate the read more button and i go back to the styling tab under the content area now you'll see that i'm able to customize the read more button as well but i'm going to go back and just deactivate that again read more button there we go down to the style area again content i think we've covered pretty much everything except the footer and the button area so the favorite and the retweet so i've currently got a favorite area there what do i want the icon color to be it's uh again make that a little bit consistent roughly there i'll change the icon color i can change the text color as well and for the load more button i can also make some changes there to make it look fairly consistent and style it nicely [Music] the bar chart widget is a very nice way to visualize or display data pretty much very similar to what you would do in an application like excel now you can see we've got two options i have a horizontal bar chart with both both positive and negative values and the same on the vertical bar chart so on the content area under the bar chart section you can see that there's a drop down where i can select the type of chart that i want to create either a vertical or a horizontal and then i've got the labels so you can see on the on the x-axis and on the y-axis here i've got a number of labels which i'll assign data points or data bars too so i'll set up all of my labels there are a couple of months and they are separated by commas then we've got the data points so i've created a data point group here that is called happy add-ons and i'll give it a label and you'll see that that label also transposes over into the legend area and then i can add some data points now these do not necessarily as you can see just be positive or just be negative data points so you can see i've got a positive and a negative set of data points and but if i go and change these i can always just have a flat bottom bar chart to display and i can add additional items if i need to display multiple sets of data points on the same bar chart that's definitely possible so under the settings area this is where i'd specify the chart height the chart height end to end this is the area that i want to display the chart in so i can shrink that down by reducing that number or increase it by increasing that number so i can hide or display the x-axis and the y-axis grid lines on the chart i can show or hide the labels so these are the the the names of the months and the data point the data point axis range and then i can also show or hide tool tips so here you can see if i hover over every data point um i get a tooltip that gets displayed um i can show the title so here you can see the title of the chart but i've already got a title up there so i'll just go ahead go ahead and remove this this title and then we've got the scale axis range as you can see that's a zero to 100 scale i can set that up to any increment that i like um but because all these values are below 100 it makes sense to just make that value 100 and then we've got the step size so you'll see that there are step sizes uh going from zero all the way up to 100 but i can go and change those step sizes and make that chart a little bit more compressed with a 20 step size and then we've got the legend so the top area as i said earlier the data range that i have is happy add-ons and that's also part of the legend and i can show the legend either in the top left bottom or right position and i can set up animation so as i create the chart as you draw up the chart or as you scroll through there will be a chart animation that shows how these data points grow and then there are a couple of different easing options in terms of how the animation displays next onto the style section there are a couple of common settings which is more related to the chart element itself in general so i can set up padding i can set up the bar width it's currently set to you know 50 i can change that or 80 i can set that to 50 so that just makes these chart bars a little narrower and i can change that back to 80. the category width so that's the area here i can stretch this out i can make these category widths a bit more and then the bar border width so you'll see that there is a slight border around each of these bars and i can go and customize that and change them as well and you'll see how that updates the legend is very fairly simple to set up the pretty much the box width so that's the area in which the legend sits if you've got more than one item some short some long text you want to be what you want to be able to play around with the box with and then obviously the typography so on the labels i've got x-axis and y-axis label typography which i can set up and also the padding around each of these label areas and then lastly we've got the tool tip so the tool tip has some padding so that's the padding internally around the text areas um i can set up the border width border radius carrot size a carrot size is this little carrot or this triangle icon that sits over there so you can see if i change that value to let's say a value of 15 and the chart updates you can see that that carat symbol size updates as well now i've not really been able to figure out all the details around the display mode because as you'll see if i set that to nearest and i hover over that area you'll see that it sort of jumps to to the end of that data point with that bar and if i change that to an index value it pretty much does the same so i'm not really able to see the purpose of this however if i change this to a y value and i hover over these data points you can see that it actually shows me some of the data points aggregated and it shows me all the y values so not quite sure what that mode type is for and then i can go and set up the the tool tip background color border color title typography and body typography so that's it for the bar chart [Music] so next we have the 360 degree rotation feature which is effectively you know exactly like it says it allows me to drag an image around a 360 degree view now as you may think um this should probably be a a 3d element but you'll be surprised to see that it's not so if we go into the elementor settings under the 360 rotation section you'll see that it actually consists of a number of different images that have been photographed at different angles around the same rotation axis and by adding all of the various images the 3d the 360 rotation widget then allows you to cycle through these images and create a 3d rotation effect so you can add as many images in here as you want [Music] to display the various steps of rotation so under the settings section i can set this up to auto play have a button play or none so if it's none as you saw on the front end if i click and drag the mouse it rotates if i set this to auto play um this will just auto play by itself and if i set the button play option you'll see that a button appears at the bottom which i can click to play the rotation and also click to stop the rotation okay the magnify zoom i've played around with this a little bit i've not been able to to quite see the extent of the change that happens i'm not quite sure whether it's what it's supposed to do i would imagine that this would be your ability to click on the item and zoom in but unfortunately i have not seen this this work at all on the alignment section same thing i've played around with some of the alignment settings i've not been able to see exactly what the alignment settings do maybe the configuration is wrong so if you tend to figure it out please let us know on the style section there are a couple of things so we've got the entire wrapper here i can specify the wrapper width currently it's set to 100 to fill the entire column i can set a background type to be a classy color or a gradient color i can set a border around it i can set a border radius box shadow and padding around the site the sequence of images and again here on the magnify um as you've seen a moment ago i've got a magnify icon on the top right hand side this is where i set up the icon size the icon color and the width and then lastly we've got the auto play button which is this button over here i can specify a title background type border on both the normal and the hover states i can set the button width color border radius box shadow padding and spacing at the top between the button and the image [Music] next up we have the data table widget now the data table widget as you can see allows me to add data to a table similar like i would in excel again and display them quite nicely with all icons and texts and numbers and so on so the table is broken up into two main areas the table head which is this header area and then the table row section and each of them are defined quite differently so under the table head area you can see that i've got four items which represents the four columns that you see right at the top and if i go into one of the columns i can see i've got two options a content and a style area so under the content area this is where i'll specify the column header name i can specify the column span so the span is effectively the width of that column and i can set up whether i want to not display an icon display an icon from the icon library so i can load from the font awesome icon library or the happy add-ons line icon library or i can upload an svg file or i can also add an image if i have one on the style area all i can pretty much change in this regard is the icon color now just below that is the alignment this is where i can set the the content within the header row to left align center line or right line i can also set the icon position to left right top bottom and so on you'll notice here that the spacing looks a little bit off depending on where i place the logo i'll show you in just a moment when we get into the style section where i can adjust the spacing between the icon and the title in the header next over to the rows section this is where all of me all of my tables content will sit and you can see there's quite a lot of data here and very importantly you'll see a couple of things and this is where it denotes where my row effectively starts and ends so you'll see that there's a line item here where it says row starts and then there's a bunch of data in between and then there's another row starts so very importantly since i have four columns it is important to ensure that i only have four rows of data which will each be populated in each one of these columns on the data table so under the row starts area you can see this is where i have the option to either create a row or an additional column and then i start populating the data below so first up on the first line we've got the bootstrap design system so if i go into this you can see that this needs to fit into this particular column so this is set up as a column value because this will go down into this column [Music] next i have the value which is the budget value same thing it sits in a column the name sits in a column and the status also sits in a column so if i look at some of the content settings here i can see that there is a title value i have a link that i can associate to this title value again here i can specif specify the columns span so how wide that needs to be if it needs to be something different than the header row and also the the row span i can then also add media in like an icon an image or nothing for that matter and i can specify the icon from the icon library or upload and these are all pretty much the same so as i go through all of this content you can see pretty much the same settings all the way through and under the style section this is where i would set up the background color of the cell the text color and the icon or the image size so if i just go ahead and change that value oh that's pretty spot on here you can see i can change the size of the icons okay moving on to the style tab this is where i set up the styling for the table head and the table row on the table head section here you can see i've got some padding defined to the top the right the bottom and the left i can set up a border radius but this is a square table so no border radius required i can specify a border type which i have in this instance so you can see that there's a border radius one pixel and the color of that board radius is sort of a light gray the background type is also a classic single color and the color is defined in that area over there and the title section i can specify the typography and the color of the title itself the icon in the image and this is where i referred to earlier since we now have the icon on the left and the text on the right i want to focus on the spacing of the icon or the image since the icon or the image is on the left i will add a padding to the right or a spacing to the right so if i update that to 20 pixels you'll see that that adjusts i'll change that back to 10. here i can specify the icon size so if i change that back to a little smaller you'll see that the icon size just adjusts if i have a border radius around the icon this is where i can specify this and also the icon color but here you'll see a message that says if you've added custom style then the icon color will be overwritten for that cell so since these are global settings if i go and update the icon color here it will update this as a global setting so back to the content area here if i change the icon color under the style area these are local settings so it allows me to change the icon color of each one of these columns to an independent color should i wish to do so so moving on to the table row area again here i can set up some padding for the table row i can set up a border type so in this case there's a very thin border type one pixel wide border type defined very with a very light gray color and then i set up the normal and the hover states for this column so i've got a background color for all the even columns so two four six eight and all the odds 135 etc and then i can set up a color as well so the background the color and on the hover state as well i can then also as you can see as i hover over these rows you'll see that there's a slight color adjustment which is what i said on the other area from a title standpoint this is where i can set up the typography for each of the each of the rows and this is again this is a global setting so this will apply to all the text in that particular row on the icon and image here again this is where i can set up the the image spacing so if i change that value to let's say 25 you'll see that all the text next to the images in this entire row moves out to 25 pixels so we'll just move that back to 10. i can set up the icon size so here again if i change the icon size you'll see that that adjusts all the way through that makes all of the images rather small so let me just bring that back up to a 25 size now what you've noticed here and again this is because this is a global setting the image size or the icon size adjusts across the row if i wanted to go back to the content area and i just wanted to update the size on the status row i'll go back to the row i'll look for the status area under the icon area the style i want to change the icon style there back to 10 and you can see that that adjusts independently of the other settings so back to the table row that's pretty much all the information we can add here as i said you can add the icon size the image border radius yeah so that gives us a nice round radius and if here is a message if you've added a custom style in the background color icon size icon color will be overwritten for that cell so pretty much what i've just shown you all of the settings on the style tab is uh is a global setting and if i want to adjust any of these independently i need to go back to the content section and to the item of that row to modify it from there [Music] the horizontal timeline widget allows me to place icons on a timeline by date for whatever reason it could be the maturity of a company the steps in the process of a a project etc and as you can see if i scroll to the side it will keep flagging up and bringing up the amount of items that i have on my timeline you'll notice that it keeps flowing though um and i've ended up in may and now i'm back in january and as i keep flicking through it'll just keep going through the dates over and over and we'll look at we'll look at that in just a moment so another content area under the timeline you can see that i have a couple of timeline elements and i can add as many as i want but into the timeline area this is where i'll specify the event date um i can then specify an icon from the icon library upload an svg or i don't have to show an icon if i don't wish to do so on the image selection this is the image that gets displayed in the actual timeline icon and this is where i can set up the icon size now we get to the content itself we've got the title which is that area over there we've got a subtitle so let me just bring that back to the january 1st item so there's the subtitle and then obviously there's the copy inside of it and as you can see on the next item down if we move over that is the image item that is uh in the timeline area over there i can specify a custom style again locally um which in this instance would override the global settings so if i wanted each of these to be styled differently yeah not all the same i can put on the custom style area and i can set up the icon color background color the content background color and the content color itself okay moving down to the settings on the settings area is where i set up all the alignment the animation the number of slides i want to show etc etc so on the settings area the content alignment i can choose to align the content left center or right i can choose to hide the content arrow so that's this little carrot over here you can see if i switch that off um that little arrow is gone but it looks quite cool with that with that content arrow there lightbox obviously self-explanatory um if i click on something it will pop up into a light box giving me more details the animation speed is the rate at which this animation happens when i click on the next button so i can adjust that here and adjust that here to set the speed of that animation and like i've mentioned before when you keep clicking on the right or the next arrow it will go into an infinite loop so it'll keep passing through all the items indefinitely start to end and then to start if this item is selected the next item down is the number of items i want to show in this particular view so it's currently set to three so if i change that to four it'll just compress all the content and give me the number of slides that i've selected within this view i can set up the previous and the next icons over there and on the style section is where we can adjust the styling so heading over to the style tab on the timeline area this is where i can set up the line so that's my timeline over there that sits behind the icons um i can set up the line thickness i can set up the color i can specify the date so what the spacing is on the left with the typography is what the color is on the icon i can set up some padding around the icon the size of the icon the border radius if i wanted this to be more rounded i'll just change that border radius and you'll see that it applies that there i can see that there is a border radius applied or a border type and a border width to these icons these are applied there color background color icon color and so on under the arrows section this is where i get to set up the vertical position so where on this on this timeline do i want it it doesn't necessarily have to sit on the timeline so i can move them either up or down but i think they look pretty cool on the timeline itself it is purpose i can set up the horizontal position how far in or half how far out do i want this to display what the size is the border type the border width so you can see that there is a border applied the color the border radius and obviously also like any other button i can set up the normal and the hover state text color background color and border colors and then lastly around the content so i've got some content that has a border radius i can see that there is a border radius applied so if i wanted to remove that border radius and make it more square i can do so i can set up the padding i can set up the spacing between content border types border width so i can't see that there is a border applied and what the color of that border is if i want to show a box shadow and what the background color is on the image itself the image within the content here i can specify the width and the height of that image the bottom spacing between the image and the title and border radius box shadow pretty much standard stuff on the title again bottom spacing what is the space between the title and the subtitle area typography and color same for the subtitle what is the bottom spacing typography and color and then also the description [Music] the social share widget is very much like the social widget we looked at earlier in this video with the exception that this one allows me to set up share links so this is perfect for a blog post if i want people to share it to social media after they've read the post these buttons allow me to do so by configuring a particular share link to my social media accounts so very basic very simple to set up and here i can see the share icons and i can add as much as i want and as you scroll down through the list you'll see that there are quite a few social media networks or networks that are available that i can that i can add to the social media bar so going through the settings um here is why i select the network this is where i create the or select or put in the custom share link which is a little different than the usual social media link which just redirects you to your social media page and again as usual i want to avoid taking people away from my website so you would ideally want to set this to open in a new window next we've got the button text so by default based on the network selection you'll see that it places the network name next to the icon but if i wanted to change this to share i'm sure that everybody is familiar with the icon of facebook and the icon of twitter and linkedin and so on i want to be able to ask them or tell them prompt them to share when they click this button now here again as with most of the other widgets i can customize the styling of each one of these buttons locally which means if i go to the global style settings and i look at the color and the typography color background color these are not the same as the defaults that i see on here this is because we've set this up on icon level independently so you'll see that we've got the sort of dark blue for facebook we've got the light blue for twitter and we've got the red for pinterest yeah so i can customize each button's color independently of the global settings under the content area so in terms of view here i can select what i want to view so i just want to see i want to see icon and text i only want to see the icon or i only want to see text up to you and then display type so currently it's inline and i can also set that to block and then based on the alignment obviously and the size of the buttons and you'll see how these uh these stack up i can add a separator in between um you probably won't be able to see but if i hover over the button here you can see that there's a separator which adds a nice little touch to the button just separating the icon and the text over to the style tab this is where i'll set up the global settings which is effectively the padding around the content within that button the spacing so here i can see a spacing on the right is applied between the two so if i adjust that to a value let's bring those a little closer together so you can see so i can set that value on the right hand side i can see that there is a slight border radius applied but i can change this quite significantly if i wanted to so make that more of a rounded effect i can put in a border type so you can see that there is a border type applied um and obviously then the colors but i'm not going to change any of the colors here as i've shown you a moment ago so if i go to this area this is where i would ideally if i wanted to retain the colors of the actual networks i would set them up on a on a local level rather than a global level so here i can specify the icon size the spacing to the right of the icon the separator spacing so the spacing to the right for the text and then also the typography that i want to use and then in terms of normal and hover states again here i would want to set these up independently of the global settings which allows me to give it that unique color the event calendar widget will allow you to embed a calendar on your web page it can either be a manually populated google calendar or from the event calendar widget now in order to use the events calendar you have to have the events calendar widget installed on your website on the google calendar side you'll see that if i select google calendar there are a couple of things required i need to specify an api key and a calendar id all of which you can find by following the instructions on the link below where it shows you how to create a new project under the google apis and set up a calendar api and then how to generate these credentials so back onto the manual option which we'll work with in this tutorial so here you can see i've got a couple of manual options or manual events defined if i open that event there are a couple of things that i can display so here we've got the event title we've got the guest or the speaker we have a location i've got a specific image that is associated to be a descriptor to this event that i'm showcasing on the calendar i can specify the image size if i have a specific page that this links to with more details on the on the event this is where i can link this to i can specify whether this is an all-day event yeah and if this is an all-day event what the text needs to display so here you can see that there is an event title and it doesn't show all the details because it is an all-day event otherwise i can specify a start date and time and an end date in time and i can also style this individually so i can set up the details around the text the background color the dot color everything else of that event on the calendar okay but we'll set that up to global for now on the description area this is the detail description that will go into the pop-up that you'll see in just a moment and that's effectively the description around the event type [Music] on the settings area they've got a we've got a couple of settings language settings you know what is the language of my calendar a number of different languages to choose from what the default calendar view is so you can see in the top bar here is currently set to month but i can set that to week day or i can show a list view what is the first day of the week is it monday is it a sunday i'm in the uae so it is a sunday for me but let's change that to a monday for everywhere else in the world pretty much and do i want to show the event pop-up so if i click on this event you'll see that it brings up a pop-up about the event which gives me the start and the end time who the speaker is what the address is the event title that we've populated earlier and also the description text i can close that down and again if i have an all day event this is the all day text if there are read more text within i can specify that there here i can specify what the time zone is the title of the speaker and the location title address so if i just go back to the events pop-up you'll see that the time zone is reflected over here there you can see the speaker title and you can see the address title onto the style tab for the calendar itself i can set up the calendar font family that displays a unique font for the calendar i can set up the background color of the calendar the border color you can see there's a border color applied and obviously the today's background is slightly different just so that it stands out from the rest then we've got the calendar heading so that's the days of the week over here i can set up some padding around this i can set up the font size the color of the text the background which could be slightly different so if i wanted to change that let's say to a a darker color you can see that that changes i also then maybe want to change the text okay moving along date and time so date and time area this is what i see in the body of the calendar and i can also set the color as you can see on the top bar that's the bar at the top that shows me the navigation between the different weeks shows me the today the month month view week day list view etc and i can set the margins how far that is away from the calendar if i need a background to this i think it looks quite cool with the translucent background on this uh sort of light purple uh background we have i can set up the title the title color typography the buttons yeah the space between the buttons the typography should have borders yes this has a solid border all the way around all of the buttons and it's a very faint one pixel if i update that to a two pixel border you'll see that that bolds out just a little bit then on the normal and hover state so you can see here when i hover on a button it changes to a darker blue so normal state i can set all the colors up here and the hover state the same then i can specify border radius if i wanted to apply a border radius to each of these buttons just to give them some rounder edges i can do so and then on the event itself which is this little guy over here i can specify the font size i can specify the color the background and the dot color now if you remember going back to the content area into the event itself right at the bottom i can apply an individual style so if i wanted this particular event to show in a different color i can set up the text color to something else yeah so let's change that maybe to let's make that a red color change the background to also red color and we draw the translucency down just a little bit so we can see the text there we go and then we change the dot color as well so i can style each of my events individually based on category whichever way i like to [Music] the image hover effect widget allows you to create very cool hover animations on very basic images let's see how it works on the content area in the image content is where i'll upload the image from my image library which is the image in the background and i can set up an alt text and i specify a title and a description which will be visible on the image as i hover over the text or hover over the image and i can specify a link url this can link to a page on the website or something externally if it links externally i'll add a open in a new window then we've got the hover effects this is where the magic happens yeah so there are a couple of very nice hover effects available so you can see if i change that to a different hover effect that changes and it's all based on the title and the description that i've added so we'll change that to the roxy style which does that [Music] moses [Music] and so on very basic setup onto the style area not too much to set um do i want to max the container with so the container width effectively is the column area that i have what is the image width does the image have a border do i want to place a border radius so let's put a border radius of 25 and you can see what that looks like um the title typography the description typography and then on the hover and normal states normal and hover states what do i want the title and description color to be so in this instance you'll see that both of them are just white and that's okay then i can set up a background overlay so when i hover over the image what is the overlay that gets displayed so if i just go ahead and set that to something different you'll see when i hover over the image that gets applied [Music] the animated link widget gives me 15 different very cool animated link options that i can use to customize link text on the website very simple to set up let's see how it works on the link content area you'll see that i can have all any or all of these animation styles applied so on the drop down menu i can go and select any of the 15 animation link styles that are available as you can see on screen i can specify the title information so we're looking at this one let's change that to something that says review if i hover over the text you can see that the text animation is applied i can specify the alignment middle right left i can specify link text as well very very basic setup and on the style side on the link content i can specify within the container what the content box padding is what the link color is by default what the link hover color is and lastly the typography [Music] the free version now also comes with a mailchimp widget which allows you to embed a mailchimp subscription form on your website the setup is actually quite easy let's take a look so under the mailchimp section you have one of two options one is to specify the custom details of your mailchimp api that you can find within your mailchimp account and which you'll need to paste here on that global section you need to go and paste the mailchimp api in the happy add-ons dashboard under the credentials section so if i go over to the happy add-ons dashboard you can see under the credentials section this is where i'll paste in my api key so once that is in you can select from any of the predefined lists that you have within your mailchimp list library and that's it then we start building the form so i've got two options available i can either use a horizontal or a vertical form vertical form will place the field and the button one below the other i'll keep this at horizontal for now then i have two options additionally to add the name and the phone so if i add the name you'll see that it adds two new fields for the first name the last name if i scroll down a bit we just push down because of the name details and if i enable the phone it'll also enable a field just before the email where i can enter the phone details i'll deactivate that for now and let's move through the settings on the name and email details so first off i can set up a label the label will display above the input field um obviously i can change the placeholder text and i can enable or disable the icon if i disable the icon i'll just be left with an empty input field but i quite like the the visibility or the view of the icon here i can select an icon from the icon library or upload an svg file and i can decide whether i want to put the icon before or after the input field under the last name same thing i can specify a label specify the placeholder text do i want to enable or disable the icon select the icon before or after as we've seen already to enable or disable the phone number field and then lastly i have the email field again where i can also input the label place all the text and specify whether i want to or not have the icon then lastly i have the button uh the button text which i can customize currently it's set to subscribe and it's got this little check mark icon so i can customize all of this um and again here i can decide whether i want to display the icon or not so the success and error area this is where you can see these display by default and these are purely for styling purpose so when i start styling the form these are available so that i can see them and under the success an error area is where i can then go ahead and activate or deactivate these messages to show them or hide them in the in the content editor area i'll keep them on for now as i want to show you where the styling options are applied so heading over to the style tab a couple of areas label input input icon button success and error message that i've just mentioned before so on the labels we haven't got any labels defined but if i did this is where you would set up the details um like the typography color margins around the fields and the label themselves on the input area this is where i can specify the spacing between the input fields so if i wanted to reduce that to let's say 10 pixels instead would give me a bit more real estate to work with in terms of the form styling themselves and i can specify the color which is the icon color the typography the background type and style if i wanted to have some on the input the border radius border type box shadow pretty standard stuff um and then padding as well so i can set up padding on the input fields on the left and the right of the content do i want to use width yeah with effectively do i want to use the width of the content that is within that field on the placeholder place all the text within each of these fields i can specify the color and the font size if i'm not happy with that font size i can reduce it to something smaller and even if i wanted to make the text a little more opaque or translucent i can change that in the color area as well so next on the input icon so these are these little icons on the input fields i can set up a background type either as a classic sort of standard color or a gradient where i can set a primary and a secondary color what is the icon color the font size the size of the icon effectively do i want to display a border padding around the icon border radius and so on for the button on the right hand side pretty standard stuff again typography border radius padding box shadow border type text shadow etc and also do i want to use the full width of the content within i can set up some additional margins and like with any other button i have the opportunity here to also set up the normal and the hover states for color and the background type i can also again set a classic single color or a gradient color and then for the icon within the button i can set up the icon spacing between the icon and the text and the icon size and then last but not least the styling of the error and success messages so by default success message is green error message is red here i can set up the padding the margin the border radius of these messages if i wanted to select or remove the background type make them translucent and only have the text display in a certain area or in a certain color i can do so so for the typography on the success message i can set that the background type border type the error message what the color of the text needs to be the background type and also the border type pretty straightforward the free version of happy add-ons for elementor also comes with a few post type widgets one of which is the post list widget so very simple to set up if i go on the content section on the list area i can also use this for posts pages landing pages or products once i've defined the source i can then specify what the type of post is that i want to select either recent posts or selected posts i can then specify the item limit so if i have more than three posts on my blog i can then change this and i can show in list view as many as i want under the settings area i can have this as a list view or an inline view if the width of my website allows allows me to do so i can then show or hide the featured image i can display or decide where i want the featured image to display to the left or to the top i can set the image size do i want to show the content or not now so here i can add in some content i can show the metadata no so if i don't want to show the metadata that's the the author and the publish date etc i can also switch that off from there so let's remove the content let's show the metadata under the metadata i can specify some icons for the author for the date for the category as you can see there and we'll style them a little bit later here i can also set the alignment on the text so i do i want the post to display in the middle on the right or to the left over then to the style area here i can set up the list view so i can set up various margins on the list view themselves i can set up padding top right bottom left within each of these list view items i can set a background type as either a single full color or a gradient and i can then also specify the color if i wanted to display an image in the background i can also do so here set up a box shadow border type border width border color bought a radius as you can see there is a border applied there is a slight border radius but if i wanted to remove the border radius here just to make that a bit more square i can do so but i quite like that little border radius that it had on there gives it a nice touch in terms of advanced styling i can now go in and set up various styling for the first and last items if i wanted to style them independently from the other ones i can set them up to do so on a local level then deeper into the styling of the the list item itself i can set up the type the typography the normal and the hover state colors on the title the icon in the featured image what the size of the image needs to be the border type the border radius if i wanted this to be a square image i'll take the border radius off but again here i like the look of that little round image i can set up the margin so the margin is the space between the featured image and the text content and then finally on the metadata i can specify the typography the color the space between the icons and the text themselves so let's change that perhaps to 10 pixels you'll see that that space is up a little bit you can set up margins between the items and also the meta icons so if i want to have a space between uh let's set that up to let's say 15 pixels that's a little bit too much that's where we make that eight pixels and that spaces out the the content from the icons and that's it [Music] then there's also the post tab widget which gives me a bit more of a robust full feature look on the posts that i have on my blog and it also gives me a nice little filter by category tab set that i have to filter through the different posts that i have on my blog so on the query section here again i can set up the different source types so i can set up for posts landing pages or products and based on taxonomy what do i want do i want to filter by category tags or formats and then under the categories section this is where i can define the categories that i want to display the post types of i can specify the item limit the number of items that i want to show if i have more than three items for each one of these categories i can do so and that will just add a couple more rows of the posts that i can display under the settings area here i can specify whether i want a three column or a one to six column whether i want to show the excerpt text from the blog post the filter position do i want to display it at the top or on the left or on the right hand side i'll leave that at the top it looks pretty cool up there and then the tab action one of two options i can either choose to change the filter by click or on hover in terms of styling pretty comprehensive pretty basic stuff on the tab set itself here i can set the margins the padding the box shadow border types and width and colors of each of these items the tab item itself i can set up the margin of each of these individual tab items what the padding is i've got some top padding bottom padding a bit more on the right hand side just to give some space for the text and then the normal and the hover states i can set up the various colors for the normal the hover states and also typography if i move down i can add a background image to each of these tabs if i really wanted to set up the typography border width color border radius and so on pretty standard stuff if i head over to the columns i've got a three column layout at this point in time what is the space that i would like to see between these columns what is the margin at the bottom so if i have multiple rows how much space do i want to leave between the first and the second row what is the padding within these column types background type colors and gradients box shadows border types border radius over to the content itself a couple of items to look at i have the image i can set up the margin below the image so above the the description of the post or the title of the post i can set up a border type border radius around the image if i wish to over to the title element i can set up the margin again so that's the spacing between the title text and the metadata in this instance or if i had a post excerpt that post excerpt would also be down there and set up the typography and also the normal and the hover states of the title itself then over to the metadata again here i can set up the typography the normal and the hover states colors and the various margins as well the last of the free post type widgets is the taxonomy list and this is really just a basic list that allows me to list out all the taxonomies or certain taxonomies available on my website so over to the source i can see that i can do this by category tag format product categories product tags or even product shipping classes so you can see i currently have three items defined and i can select categories i can add more categories if i wanted to but in the category area is where i would then customize the title if i wanted to display anything other than the default category name i can then specify individually an icon if i wish to i'll show you how to set up common icons and images on the styling area on each of these as i go down you can select the available category from the list by typing in a couple of characters so there you can see all the categories i have available and i can then add that particular category to this list item under the settings very basic i can have a list or an inline view depending on the number of items that i have and the the real estate that i have available to work with and here is what i mentioned just a moment ago in terms of the the common icon so i can enable or disable the common icon so that will just let that disappear so if i enable it i can either use a icon from the icon library or uploading an svg file or i can upload a common image that allows me to view uh all of these images exactly the same on each of the taxonomy list items i can specify the alignment to either left center or right and then over to the styling tab very basic stuff for the entire taxonomy list area i can set up some margins i can set some padding within the taxonomy list items i can set up a background type as either a solid background or a gradient i can even upload a background image if i wish to do so set up some box shadows you can see that there is a box shadow applied in this instance and set up some border radius so i can see a border radius of 10 pixels all the way around now if i go into the advanced styling the same as we've had before on the previous post type widget i can individually style the first and the last items in this list by specifying different types of margins and different types of borders if i really wanted them to stand out so over to the styling of the content itself very basic stuff the title here i can set up the typography the color on the normal and the hover state and on the icon and the image is where i can specify the icon size if i wanted to reduce the size of that icon a little bit i'll change that i'll specify the icon line height the image width if i had an image defined so the icon is not visible at the moment but if i wanted to change the image size here then i can change the image size any css filters applied so you'll see that we've actually uploaded a color image but because we have a css filter applied and that has put this into into this list as a grayscale image border type if i wanted to around the content the icon in the image i can specify a border radius border type and and last but not least i can set up the margin around the icon and the text area [Music] happy add-ons free also integrates with a number of contact form plugins we have contact form 7 installed and we've created a very simple contact form and we've placed it onto the elementor canvas now this is not the only option available if you head over to the happy add-ons for elementor website you'll see that it also integrates with six others including ninja forms weforms caldera w forms gravity forms fluid forms so very simple and easy to set up um once i drag in the contact form widget i'm asked to specify the the form that i've selected in this instance i only have this single contact form and i can specify a is a special html class if i want to add custom css class to this form so on the styling side pretty basic stuff i have the ability to customize form fields uh form fields labels and the submit button so on the form field section i can specify the width of the form the spacing at the bottom so i can space these form fields out if i want to set up particular padding and border radiuses set up the typography and the text color and the placeholder text if i have placed all the text defined in in my contact form 7 setup of course i can set up the normal and the focus states of each of these fields so when i hover over that particular field do i want to show a particular border around it so let's change that to a solid border we'll give that a border of one and let's give the color let's make that a red color to be a bit more bold so you can see that when i focus on that area so if i type in [Music] or if i click into the box you'll see that the focus color changes to the color that i've selected under the form fields label area again here i can set up some spacing so if i want to set some spacing between the labels and the form fields themselves just to space that out a little bit more here again i can set up the typography of the field names and the text color and then last but not least i can set up margins around the button padding on the in in the internal of the button around the text just to give that a bit more space so if i wanted to maybe stretch that out let's just remove the link there and we'll remove the bottom and top let's make that 10 10 and you can see that is the padding that's applied to the button i can set up the typography border type border radius if i wanted to so let's add a 25 border radius there let's maybe increase this a little bit let's make that 35 and 35 just to space that out a little more i can set up a box shadow and then also set up the text color and the background color on the normal and the hover states happy add-ons have added some cool features on top of the out-of-the-box elementor features to help you enhance your design experience so first up part of the free plan is the background overlay this effectively helps me to create a background overlay on pretty much any section or widget that i have on the canvas let's see how it works on the advanced tab if i go to the background i currently don't see a background overlay option available but as soon as i select the background color you'll see that the background overlay option appears the happy icon next to it so you can see that it's unique to them so if i go into the background overlay section this is where inec can now specify a background type apply some css filters and blend modes so i want to add a background overlay over this icon box widget so i'll select the background type i'll go into the color picker i'll select a background color and here you can see i already have this background overlay applied to the widget the css transform feature allows me to manipulate widgets on the screen in a number of ways so heading over to the advanced tab under the css transform section here i can enable the css transform which gives me a couple of options i can translate rotate scale or skew these objects in either the normal or the hover state so if i go into the normal state just to give you an idea translation effectively moving an object out of position in the x or the y axis so i can move that in a positive or a negative position and that just moves it out of place taking it effectively offsetting it pretty much out of the out of the um the predefined section area so i'll just move that back to zero the next option is to rotate so i can rotate either in the x axis the y-axis or the z-axis so if i change these back to zero you can see that i can rotate that around pretty much any degree that i want to next we have the scale option so if i go over to the hover state and i want to set up a scale i can then set this up to scale up to 2 if i hover over this so that's another form of transformation that i have available and then lastly obviously the skew option as well so here i can set up a skew of let's say 10 across x 10 across y so if i hover over this element you'll see that it skews that out pretty cool the equal column height feature allows me to sort out issues like this where i've got multiple widgets that has different sizes of content in them and what i'd like to do is to realign and basically make these widgets all the same size so this gets applied on section level so if i go on to the section go into the advanced tab you can see the equal height feature available and here i can set to enable and in this area i can then choose to apply that to whatever is in this section area so i've got widgets in the section area and here i need to choose the type of widgets that i want to apply this to so i select the card widget and immediately you'll see that all of these widgets are resized unfortunately it doesn't solve the problem with the buttons but that's something you'll sort out separately with some custom css the floating effect is a motion effect that helps me manipulate content like these images in such a way that they can constantly move or behave in a certain way on screen so for this example because i've got a couple of things in this area it's quite crowded i'll use my elementor navigator to get to the images that i want to use and i want to use these two images of the girl looks like she's jumping and the guy jumping holding a guitar so let's start with him choosing that particular image i go over to the advanced section and into the floating effects and here i can see i've got the floating effects enabled if i switch that off you'll see that that image becomes static so switching that back on i've got a couple of options that i can set here the translation the rotation and the scale i'm not going to go through all of them but this is just to give you an idea of what i can do if i select the edit this is where i can set up the parameters in which this guy needs to move in so if i change that in terms of x and i change that to 50 you'll see that he starts moving quite a bit and the same on the y-axis you'll see that he starts moving up and down a bit okay fairly simple so if i reset that back you'll see that that becomes static if i wanted to rotate this guy you can see i can do that as well and if i wanted to scale him you see that that allows him to bounce as well i can mix and match these um let's take that and make him translate a little bit as well so let's make him move jump forward jump backwards that's quite a cool effect or maybe just dim this down a little bit to here and then also i can set up the duration that this needs to take in milliseconds yeah how quickly or how slowly that motion effect takes place what i'd like to do here as well just as an additional cool effect it's not part of the floating effect but if i go on to the advanced section here i can set up the z index i'd like his guitar to show up in front of this card so i'll just go and change that to a z index of let's say three and you can see how that has an effect so this is a very simple way to add very cool animated motion effects to your website with the happy add-ons floating effects feature [Music] the next one is pretty cool if you've ever heard of or if you're familiar with the the grid layout or the grid layer settings in graphic design that pretty much helps us keep our design in check helps us space things out more appropriately on screen i think you'll really love this one you probably didn't even know that it existed but let me show you so if you open up a page like this and you're looking for a layout that will help you position and space things and in general just use good design principles to put all your graphic elements on screen you would definitely need this grid layout so with the page open if you go to your page settings you'll see that there is now a feature by happy add-ons for grid layer which you can click on and here you can then activate the grid layer and that shows up a grid layer grid layout in such a way um so by default here it's set up to show 12 columns but i can change that to show four and this really helps me put things into perspective based on the screen width that i'm designing for the offset that i have in between the gutter between the different columns and the z index so z index is just this places it right on top of or over all of your elements and this is just a really cool guideline to help you streamline the design process of your website so the shape divider is already part of elementor if you didn't know it but what happy add-ons have done is they've added a few extra shapes and that you can add to the shape divider if you didn't know it existed let me show you where it is so if i go on to this section area into the style tab you'll find that there is a shape divider area and what the shape divider effectively allows me to do is add really cool content or shape divider effects to the bottom and the top of section areas yeah so i can increase the size i can increase or change the color increase the width so let's change the height you'll see what i mean let's change that to something a bit more curvy [Music] and these are the standard ones that are available the default shapes so there are a couple of new ones that happy add-ons have added and these are the ones below so you'll have quite a few of them there so we've got an extract web we've got multi-cloud etc etc so play around with them there are quite a couple um very few cool ones that happy add-ons have added and as i said you can change width you can change height you can flip them around put them upside down invert them left to right bring to front put them in the back and when you bring to front obviously it'll put all the content that's currently on the page behind or if you leave it behind the content will sit on top of it very cool additional features about it sometimes when you design you don't necessarily need a button to click on to redirect or you don't want a button to click to redirect to a certain page or or an external website you want to be able to to add a link to pretty much any section or any area on the website and the happy add-ons wrapper link allows you to do just that it gives you the ability to add a link to pretty much any area of the website a full section a column an entire widget and it's quite easy to do on the column selected with the column selected here i can go into the advanced section sorry into the layout section and under the wrapper link area this is where i can specify a link so we'll just link this to let's just bring that to google.com and i want this to open in a new window so as i can see here currently it doesn't really show me the ability to to open this in a new link but if i if i save the page and i go over to the front end of the website you will now see that i have a dynamic link or a link applied to the entire widget area if i now click on this item or if i hover on this item first off you can see that the entire area is now a live link and not just the button as opposed to the one on the opposite side where i can click anywhere and nothing really happens but let me click on this one anywhere on the widget really and you'll see that it redirects to that external link and that's a wrap for part one of this two-part full feature series on happy add-ons for elementor in this video we covered all the widgets and features you'll get on the free plan i hope you stay tuned for part two where we'll do it all over again looking at all the widgets and features available in the happy add-ons pro package and will also take you on a tour through all of the templates and sections available with this plugin to get you started with building a new website in no time i hope you enjoyed this video if you found it useful or helpful please let us know if you haven't done so already please subscribe to our channel hit the bell for notifications and stay tuned for more great content i've put a few links to tools services and plugins that i use in the description below these are affiliate links if you purchase a product through them i will receive a commission at no additional cost to you of course i only endorse products that i've personally used and your support helps me put out more great content so thanks bye for now

Channel: The Ultimate WordPress Guide

Views: 471

Keywords: happy addons for elementor, addons for elementor, wordpress tutorials, wordpress elementor, wordpress elementor plugin, happy addons widgets, happy elementor addons free, happy addons pro, happy addons for elementor free, elementor addons, best elementor addons, best elementor free addons, elementor happy addons, happy addons elementor, happy addons tutorial, happy addons pro free, happy addons wrapper link, happy addons for elementor pro, happy addons live copy

Id: uwe709du9u4

Length: 150min 7sec (9007 seconds)

Published: Tue Jun 22 2021