Σ 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 🙂

hey guys over here and tonight I'm going to show you how to create this crazy good restaurant menu using dynamic content that will display in a grid and then place inside of a tablature I'm then going to show you how you can take the design to the next level and include a carousel that switches when you hover or click on the tab item this is going to be done using the plus add-ons carousel anything widget in this demo I'll be using jet engine to create the custom posts and dynamic use dynamic post widget to display them but don't worry I'll also run you through which free plugins can be used instead to achieve the same thing the only paid plugins you're going to need to replicate this exact design is elemental Pro and the plus add-ons everything else can be done with free alternatives so let's get started okay so the first thing that we need to do is to create the custom post type for our food items and then we're going to create a taxonomy for the menu items and this is to break it up so if we've got a breakfast lunch and dinner menu we can create the taxonomy of breakfast lunch and dinner and you can then use that to separate the menu items in your post grid and you can also use it to filter your items if you're using a post widget that has filter capabilities for this I'm going to be using jet engine jet engine as' allows us to create custom posts and taxonomy I really do love this plug-in but a free alternative would be to use the custom post types new we plug-in to create your custom posts and then the ACF plug-in to create your meta fields for that post type but in this we will be using jet engines so I'm going to go ahead and go to post types and we're going to create a new one then call it food ok we can pretty much leave all of our settings default the only thing I am going to turn off is the editor we don't need an editor for this we're going to create a custom field for the menu and description before I create the post type I'm going to add the meta fields that I need but is if if I was using ACF I would create the post type and then create the meta fields and assign them to the post we can do it directly in here with jet engine so the first one I'm going to create is called food description I'm going to make sure that my permalink structure is the same as all my demo data that I'm going to load in and then I'm going to create a new one and call it price so this will be the price so essentially we're going to have a title a description and a price for our food items so once that's done I'm going to click Add post and then I'm going to go down to taxonomy z' and we're going to add a new one and call it menu we create this I'm going to go to the Advanced Settings and make sure that it's hierarchical and this means that it will be created as a category rather than a tag and I'm also going to tell it I want it to be for the food items once that's filled in I'll press add taxonomy okay so now that we've got our taxonomy created I'm going to head over to food and add a menu item so we click on add new and we're going to give it a title and in this case it's going to be bacon and eggs I'm gonna paste in my description look it's already here there we go two eggs cook to your liking and I'm gonna put a price in here you'll notice on the right-hand side here's our taxonomy items and I have already created the ones I'm gonna use in this demo so there's breakfast but you could always just click add new and add a brand new category to this once those items are filled in we'll hit publish and obviously for this demo we want a couple more than one and I'm not going to go through adding them so I'm just going to restore a bunch of demo ones I've had in the trash okay so now we've got a whole bunch of food items to add to our menu there's a couple of different categories so we've got lunch and breakfast so that way we can separate them inside the tabs so the next thing we're going to do is create the actual design for this I'm using dynamic use dynamic post widgets so I'm able to design a section set my dynamic fields and have that display it however you can use the free alternative of elements or custom skin as a plug-in that does the same thing using the post archive widget but you can design your own layout so I'm going to go ahead and go to templates and we're going to create a new one we're going to set that it's a section and we're going to name it menu looks menu grid item this is how our item is going to display in the grid so just like in my previous tutorial I do like to go through and set a couple things up so that I'm getting an accurate representation of what this is going to look like for my design I won at 50-50 split columns so I'm going to add a section and I'm going to duplicate it and I'm going to design everything in one of these columns and delete out the other one when I'm done and then that way I know in my design it's going to be a 50/50 column it's all going to not look nice and be responsive inside of that so here we go I'm going to add some dynamic content now we're going to add a heading and what we're going to do is click on the bottom left-hand cog and go to preview settings and let elements or know that we want to see whoops we want to see the food post type whoops let me go back and we'll call it bacon and eggs and we'll apply and preview that okay and now we're going to go through and actually tell elements or to pull in the dynamic content so we'll press the dynamic tags button and choose the post title and then I'm going to add another one and tell it to pull in my jet engine custom field of food description and I'm going to add another one and tell it to pull in the price the events tab here and put a dollar sign on the before not after and then that way we don't have to put that into the custom field that's going to display if the client forgets to pop in the dollar sign it's always going to have one now we will actually want to design this up so in my demo I had the title and the price sitting on the same line and the description below so to do that I'm going to pull in a inner section and I'm going to put the title here and the price here and then going to set a global padding of 40 on this column and we're going to make sure there's no margin and on our inner section we're going to make sure there's no margin and we're going to remove the padding from these inner columns okay so now we've got our general layout it's just a case of styling the menu item itself I'm pretty happy with that I'm now going to delete out this other column because I don't need it this is our actual grid design and we'll publish this okay guys now that that's published we can actually get into designing the page so I'm going to head back to the wordpress dashboard and we'll head over to pages and create a new one so I'm going to call this a new menu and for the purpose of this demo I'm going to have it set the elemental canvas because I don't have a header or footer designed at the minute we're going to click on edit with Elementor now the first thing I'm going to show you is how to create a tabbed section for this menu using the elements or tab widget once I've gone over that I'm then going to show you how to do the same thing using the plus add-ons tab widget and that we can then tie in to the plus add-on switcher to get that really cool switcher happening when we change tabs so the first thing we're going to do is create a section and I'm going to browse for the dynamic posts widget okay so now that our dynamic posts widget is in this section I'm going to go through and set it up the first thing we need to do is define that we want it to display our food custom post type and not posts you'll see now it's pulling in the custom post titles we want to scroll down to the dynamic content tab and enable the custom template and we're going to search up the menu grid item that we just created a minute ago so it's pulling in our design but now we need to go configure the grid so we get the ideal layout and in our mock-up we obviously did a two column design so I'm going to go ahead and set our grid to two columns and boom that looks amazing I'm also going to drop it down to tablet mode and set it to two columns and down to mobile and make sure it's on one so that's looking pretty good backups desktop mode so the principle behind this is to curry a section for each of our menu taxonomy so breakfast lunch dinner and then would display those sections inside the element or tab widget so a neat way to do that is configure it all inside of a page save off each section and then load it into the tabbed widget and that's what I'm going to do now this first section I'm going to configure it to be for breakfast items so we'll click on the post widget and we're going to go and edit the query filter we're going to set it to pull menu items and then we're gonna choose breakfast oops okay so now it should display only breakfast items now that we've got this I'm going to set up a little bit on this section I'm going to remove the padding because I'm going to pull this inside of an actual tablet I don't want there to be too much you know space inside the tablet so basically we have a section with zero padding on our column and inside of that we've got the post dynamic post widget displaying our breakfast items I'm now going to duplicate this and I'm going to change the query from breakfast items to lunch items form okay so we've got two sections one breakfast and one lunch so what I'm going to do is actually right click on the section and save it as a template and call it breakfast menu okie dokie and then I'm going to click on the second one and call it lunch menu okay we've got those two items saved in our sections and I'm going to now delete them and add a new section and in this section is where we're going to add the tab widget okay so I'm going to go through and configure a couple of little safe settings on this section to make sure it's not too ugly in this demo all right and now what we're going to do is actually pull in that content so obviously in the Elementor tab we've got the ability to add text we can't pull though Nemec content inside this tab widget but because we've saved those menus in a section we can actually go back to the wordpress dashboard and back into our sections or our templates and grab out the shortcode so I'm going to go to templates go to save templates and I'm going to copy the lunch menu and the breakfast menu shortcode okay so now if we go back to our page we can now pop in that information let's go tablature and Baum Paul okay so now if we update this page and we'll go take a look at it you can see we have a dynamic menu inside a tab widget from Elementor again this whole page can be achieved for free except for Elementor pro by using the advanced custom fields plugin the custom post type Yui plug-in and the elements or custom skins plug-in or in my case I've used jet engine dynamic ooh and Elementor Pro so guys now we're going to head over to the more advanced part of the tutorial where I will be using the plus add ons to create a much more Advanced tab and tie it in with a carousel I hope this part of tutorials been helpful and I hope next part of it takes your designs to the next level okay people with the 'plus add-ons carousel anything widget let's go ahead and take the design on this page up a notch we're gonna go back and edit the page with elemental and we're going to delete out the thing we've just created because we're going to start this from fresh okay so the first thing I'm going to do is add a section in this section I am going to browse for the tab and tools widget from the + add-ons I actually really love this plug-in because it allows us to use dynamic templates so you'll see here we've got a basic tab styling I'm going to go ahead and set this to breakfast and choose a page template instead of content so we should be able to now find breakfast menu and we're going to disable the icon and we're going to go ahead and set the lunch one as well okay so now we've got our breakfast and lunch tabs and obviously we can't see it on the on the back end but on the front and rest assured that the tabs are there I'm going to go ahead and style this now okay guys so as you can see I've created a tab pulling in dynamic content so there the menu sections that we created before I've given it some cool styling here on the buttons and I've also created a little divider that's going to basically overlay onto our page title or you know the hero section of the page so I'm going to go have a look at this page now we'll go check out what it looks like okay there we go that's actually looking pretty cool already so what we're going to do now is create some sections that we're going to cool into a carousel anything widget from the plus add ons so I'm going to go back and edit this page with elemental and we're going to do what we did before we're going to create the section inside the page so I'm going to create a section here I'm going to make it a minimum height of 415 cells and we're going to go through and configure a background and we'll do the breakfast one first let me set it to no-repeat and cover and then center Center okay we're going to give it a slight overlay alrighty and now I'm going to load in a heading widget that I have created there we go and we're also going to pull in the word breakfast okie-dokie looks pretty good so what I'm going to do now is quickly check it's responsive settings and make sure I'm happy with those obviously I need to adjust this all right that looks pretty good what I'm going to do now is duplicate it okay and now we're going to go through and change the settings for lunch all right so we've got our two sections here and now what we're going to do is actually save them so I'm going to call this lunch slider and then I'm going to save this one as the breakfast slider okay now that we've done that we can actually delete these out and I'm going to add a new section and drag it to the top we're going to make this section full width stretch and I'm also going to make sure that the column has zero padding and inside of this we're going to choose a carousel anything widget from the plus add ons so again just like the tabs we can now go through and set the slide templates that we've just created but before we can do that we're going to need to save the page and also refresh it so that the page knows that we've saved those templates into the template library okay so I'm now going to go back to the plus out on switch it okay it's the carousel anything widget here and we're going to go through and select the breakfast slider and then we're also going to choose the lunch slider okay so we essentially have this slider that's just rotating away and it looks beautiful already minimal effort required but we're going to go through and set some settings here so the first thing that we're going to do is choose our slide speed I'm going to make it 600 and I'm going to turn off draggable infinite mode and autoplay for the purpose of this because I just want it to change when we hover over these new tabs here the next thing I'm going to do is turn off the dots and we also have arrow is disabled but guys if you want to have the arrows or the dots obviously turn them on and set them up and it it looks beautiful and works out of the box the next thing I know Jews make sure that we're always set to one column because this is just a full-screen slider then we can now go and change the type of animation that we get so it can be a vertical or horizontal slide and we can also have it set to fade or actually slide in and out so only use vertical for this one and you'll notice that we basically have this slide that we can't do anything with this no navigation it's not changing that's because we need to let it know that it's in sync with these tabs okay so the first thing I'm going to do on the carousel is give it a unique carousel ID so I'm gonna call it karo brash slider and then I'm going to copy out this I agree I'm now going to go down to the tab and tours widget from the plus add ons and under the layout we're going to enable on hover tab and pop in the carousel ID now you'll notice that when I hover on a new tab item it changes the carousel go to this section and we're going to give it a negative margin of 80 pixels maybe we'll do 100 pixels right all right 90 pixels there we go okay so we've got this beautiful design it's now changing the image on the top of the page when we hover over a new tab item so this is a great way to bring images to your menu without having hundreds of images for each of the food items or at least to give a little bit of personality to the page so it's not just static text so let's go have a look at the final product and here's the finished product it looks incredible guys and with minimal effort we've taken a pretty boring you know type of content being a menu and turned it into something really creative and beautiful and really applicable to any type of brand so you could take this and put your own little spin on it to give it a bit of a brand voice and take those designs up to the next level I'm always talking about that I really think we've got a great tool here the sky is the limit we just have to think about things a little bit differently and you know with creative ways to display content and in doing that you'll get better clients better jobs better experience and start to really love what you do so I hope this tutorial has been helpful and I'll see you in the next one peace out and thanks for watching .

Video Discription

Learn how to build a creative cafe or restaurant menu using dynamic content and the Plus Addons for Elementor! In this demo I'll be using The Plus Addons, JetEngine and Dynamic.ooo. However, the dynamic content portion of this tutorial could be done using the ACF, CPT UI and Ele Custom Skins plugins which are all free. Sorry it ended up a bit long, but good things take time and once you learn how to do it you can repurpose the concept for other designs!

▸ Templates –
▸ Hire Me –

Grab yourself a copy of the kick ass plugins used in this tutorial!

▸ Dynamic.ooo –
▸ Jet Engine –
▸ Elementor Pro –
▸ The Plus Addons –

 

InterServer Web Hosting and VPS

Leave a Reply