Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

I stumbled into this food menu carousel online in code pen and I thought it would be interesting to show the process of how I create this into an elementary widget which is editable from the elementary editor so my approach to doing this first of all I want to clean out HTML CSS and JavaScript make sure I don't have anything I don't need and change the CSS from CS CSS to a regular CSS language so over here I'm going to fork this code pen with just creates a duplicate which I can edit and use as my own and in this small little arrow I'm gonna click on it and click view compiled CSS what this does it just rewrites the CSS and to regular CSS I'm going to copy that CSS in co-dependent settings I'm going into CSS and I'm going to change the CSS processor to none save and close and now I need to replace what I have over here with what I copied before and it's working great another thing I'm going to change in over here is this red background and and this after statement so I'm just gonna delete these because I don't need them and we're left only with the carousel we can't see the arrows right now because they're white and maybe we can find where to change this okay I think it's over here color let's change it to black we can change the border of these also to black perfect so I think that looks good another thing I'm going to change instead of using a dollar sign I'm gonna write J query and with a big Q all the other letters are small and the reason I do this is to avoid conflicts sometimes there might be conflicts in our WordPress when using a dollar sign and jQuery so my food menu carousel is ready right now and now we can copy and paste the code into Elementor so I'm in my WordPress I have unlimited elements installed unlimited unlimited elements has a widget creator which allows users to create their own widgets most of the features in the widget creator are free and anything I'm showing in this tutorial is available in the free version so we're going into food menus category the reason I'm changing the category is because when I add a widget it will add it to the existing category by the way wherever you see the word web the label web this means that this widget isn't installed in our Elementor unlimited elements is a widget library and all of its widgets are in a cloud stored in a cloud and if you decide to use one of the pre-made widgets just hover over them and click install and then it installs it to your website we're creating a custom widget so I'm gonna click add widget I'm gonna give my widget a name I'm gonna call it food menu carousel and click add widget I've done that it's added it over here and to edit our new widget I'm just gonna double-click over here in the first screen what's important is to choose an icon so maybe I need to look for a food icon or something that resembles so here's a sort of food icon I'm gonna choose that and that will be the icon that shows up inside of element the next step is to copy the HTML so I'm just gonna copy the HTML from a cold pen and paste it over here looks good next step CSS I'm gonna copy the CSS and another step is copying the jas I'm just gonna copy and paste that over here into the JavaScript tab perfect so we have HTML CSS and JavaScript what the next step is is adding our includes so let's jump into this tab in this tab and we have some pre-made libraries that we can use or we can include our own libraries using CDN for example so you just paste the CDN over here but the libraries we need right now is jQuery and our carousel so I've marked those two and I'm gonna click update to save I just want to show you in code pan where you can see these so inside of settings if we go into JavaScript you can see over here what's loaded is jQuery and owl carousel perfect so we have everything set up and before creating fields and making this editable I just want to make sure it's working so I'm going into pages and I'm gonna add a new page I'm gonna call it a food menu gonna publish and it with Elementor and over here I'm gonna search for food menu here it is the food menu carousel we created the widget we created and when I put it inside of Elementor I see it's working now this is only the first step we just were just checking the HTML and CSS working as you can see we can't edit the widget yet so the next step is to create fields so this widget can be editable I'm jumping back into the widget creator and over here under item attributes I'm gonna click enable items yes what this does it generates a loop now the way I'm going to use the loop is inside of the HTML in the HTML we can see that whoever wrote this HTML and he marked over here that this is the start of the item item 1 and this is the end of item 1 so the first thing I'm going to do is I'm going to leave only one item the reason I leave only one item and I'm deleting all the other items is because we're only going to need one item to create our loop so I'm gonna copy this one item I'm gonna cut it out and instead of that I'm gonna click on an attribute here inside of the widget crater which is called put items what this does it generates the loop so I clicked on that and what it's going to loop is whatever HTML exists over here over here an item HTML so I'm gonna paste the item HTML and the next step is to start creating attributes for each field we want to be editable inside of the item so the first one which comes by default when creating items is a title if we go back inside of item attributes you can see that it generates this one automatically so we're going to use that one and then we're going to create the ones that we're missing so instead of the title over here I just select that and replace it with the dynamic attribute now whatever we're missing is an image a price and a description very very simple so I'm going into item attributes I'm gonna click Add attribute and the first attribute will be image I'm gonna give it a name click tab and add attribute the next attribute is going to be price for price I'm going to use a number field and you can learn about all of these fields in our documentation each field is used in a different way let's call this one price perfect we can give a default value and let's add our last attribute this one I'm going to use instead of a text field I'm gonna use a text area that just gives us a little bit more amount of space to write in our description I'm gonna call a description and add that inside of the HTML can scroll down and I'm going to replace the image source with the image field we've added on the right side instead of the price I'm going to replace that with the price field and instead of the description I'm gonna replace that with the description we've created let's click update jump back into item attributes and I want to add over here a default value which is the description we had in the HTML and I'm going to allow font editing let's allow font editing also for the title and give that a default value and click update let's save jump back into element or refresh let's say before refreshing perfect now I'm clicking on the widget and as you can see it's empty now if I look inside of items which is a new accordion that has opened for us we can see that it's empty and there are no items that's why it's showing kind of grayish and disabled but if I'll start adding items I can actually see them being added to our carousel they are missing images but we can upload those so let's see if I have any images over here so for example I'm just gonna use this image as an example perfect and you can see I can add an image to each item now of course you can duplicate and delete items or reorder them using an element element or editor perfect so that's our carousel we got it set up and as I said before you can duplicate or delete items or drag and drop to reorder them and which you're familiar already with Elementor the last thing I want to go over is the regular attributes because we didn't add any regular attributes but what this is used for is just some general settings you might want to have for example maybe you want to be able to determine the gap between the items inside of the carousel or maybe you want to be able to determine the background color of each item inside of the carousel so let's just add those two attributes as a example so the first one is going to be background color and I'm going to choose a color picker field I'm going to give it a default value using the color picker and I'm going to add another one which is gonna be called margin between items and for this I'm going to choose a number field over here and the default value I'm gonna give it 30 and a suffix of none let's see where we use these attributes so the background color is going to be coming from our CSS so I think it's over here this details a background color I'm gonna switch that off with the new attribute we created here on the right side and for the margin I think that's coming from the JavaScript so I'm going into the JavaScript app and over here we can see there is a value of 30 for the margin we're gonna replace that with the attribute we created click update to save and over here in Elementor I'm gonna save again and refresh I'm going to click and we can see that we can change the background color of this bottom part as we add it and and maybe also change the margin between the items that's working great as well so that was a quick tutorial of how to create your own Elementor widgets and that have items inside of them in this case of course you can create anything you want which is really unique if you have any questions you can post them in the comments if you have any suggestions please don't hesitate to contact me and see you next time thank you .

Video Discription

Happy New Year to all the awesome web creators from around the globe. Today i made a video showing how i grabbed a food menu carousel from Codepen ( ) and created it to a custom editable Elementor Widget. It took me just 15min and the video is in real time. So if you know some basic HTML and CSS i think this video might help you take advantage of the best page builder in the world. 

 

Leave a Reply