90 MINUTE CHALLENGE | AI WEBSITE COURSE

AI WEBSITES

WIDGETS 

Paul Davenport

  Paul Davenport  |    06:26

Widgets are used to manage your website like a Pro with dynamic content feeds for Galleries, Products, Events, News, Blogs, Directories and display your content in Sliders, Multi-Sliders, Grids, Masonry and Mix filters. With all this power you could build a site like Netflix or the BBC in moments.

1. Make Dynamic Content Feeds with Widgets.

2. Learn the basics with 9 Pro Tips.

3. Build a site like Netflix or the BBC in moments. 

   AI Website Transcript 

WIDGETS

Widgets are used to manage Dynamic Content Feeds. You can see here the Homepage of DirtyFeet is using many different Widgets on the same page. You can see the Page has a Photo Gallery. An Event Slider. A Video Slider and a Directory of performing Artists, known as 'DirtyFeeters' 

This is how we set it up:

In the Editor, each content feed is created with a 'Widget'. 

You can see the first one is a Photo Gallery showing 'Images' tagged with 'Home Gallery'. 

The second is a Multi Slider (often called a Carousel) showing 'Events' that are Tagged with 'Out of the Studio'. 

Next is another Multi-Slider for Videos, this time tagged with 'The Right Foot' and 'Reel'.

Finally, this one is another multi-slider showing a Directory of all their Artists. 

This time we have 'Pages' that are tagged with 'DirtyFeeters'. 

Well, that is all that we need to manage widgets. 

FIRST: 

You choose the 'Type' of Widget, like a 'Slider' or 'Grid'. 

SECOND: 

You choose the Type of Content that you want. 

Notably you can add all types of content in the same feed, like 'Products' and 'Videos' and 'Blogs'. 

For example, you could make really cool product pages. With Products, Videos, Images and Blogs all Tagged with that Product. 

This is not like those add-on Plugins or modular apps.

You can dynamically feed all your website content into the same feed. 

Making our website extremely powerful to the level that you’d expect on Enterprise level software costing thousands of dollars. 

And THIRD, you Tag your content. 

Whether it's a Page, Product, Image or Video. 

You give your content Tags, just like we covered earlier, when we tagged the Video with 'The Right Foot' and 'Reel'. 

Simply tag your content, and it will appear in the Widget. 

Now. For example, the power of Widgets.

If you bulk uploaded a zip file of images, and tagged them when uploading, all those images would instantly feed into the Widget Slider, without even having to go into the Page. 

AND another example.  

If you upload a CSV of Products, and put Product Tags in your spreadsheet, Those products will go straight into the Product Categories, without you even having to edit the Product Pages or the Categories. 

OK. So I think you get that. 

Now for my 9 TOP TIPS. 

ONE

If using a Grid. Notice that my Grid was 4 Columns, and I had 4 items. If I change the number of Items to 8, then it would now be two rows of 4 columns. I could change it to 3 Columns with 3 Rows by changing the Items to 9.

TWO

If I have two Tags, like 'The Right Foot' and 'Reel,' I should set the tag Combos to 'Must Match All.' Now, it will only show Videos that have both Tags. If I don't select Must Match All, it will show all videos with only 1 tag. So this gives me exact control of what appears in each Widget.

THREE

I can change the sort order. For the Events MultiSlider, for example, I want Display Date Latest to show Events with Latest Date first.

FOUR

I can also change the view between Grid which has the Text over the image, or a Card with Text below the image, or a List with Text on the side of the image. You can see here in the Shop I like my Text and Price below the Image.

FIVE

I can change the Order of the meta information here. For example, I could put the Price on top. Incidentally, all the Widget text is managed in the Settings Screen of that Page, Product, or File. Just Click the Widget Tab in the settings screen to add meta information like Dates or, if it's a Blog, the Author. 

SIX

If it's a Shop you may wish to have people to Add to Cart before they click to a Page. You can select an Add to Cart button and other actions like More Buttons.

SEVEN

I can force the height to be taller. For example, I could make the carousel full height.

EIGHT

I can adjust the Gutter Width or remove it altogether.

NINE

Finally, I can also choose one of the Hover Effects we set up earlier in this session.

So now bringing it all together in our Netflix Style reel, back on the Homepage of DirtyFeet. 

Let's click into the Out of the Studio category Page. 

Here we have a Tall Banner notably with a Read More Block dropped in on the left. 

Our Widget is 4 columns with a 4x3 aspect ratio and the Meta information is showing the Data and it's using the Author field to Show the Choreographer. 

If we click into the Page we can see the video of the SHow at the top, and note the Multi-Slider at the bottom of the page, acting as category navigation to browse more shows. BACK on the Homepage we can click into the Artists Category Page. 

This time it's set to 3 columns, the aspect ratio is Square, again using the same Hover Effect. 

If we click into a Page, on the right, we have a Photo Gallery of the Artist, and again we have a Multi-Slider at the bottom for related items. || If we click up to the Shop we can see a shop category page 3 column showing the price. || 

Now something cool for a category page, there are lots of category pages in the Layouts Drawer for you to Drop. But to bring this all together here I have a MIX Widget showing the Artists, the productions and the shop. 

This is a Mix widget. Showing Pages (for the artist), Events (for the productions), Products (for the shop). The aspect ratio is Square. Now since there are a lot of items I'll show this with 5 Columns and I'll make the height - 500px. So now we had a good look at categories pages, it's a good time to move on to setting up your online shop. And at the end of the video we'll be looking at how an AI Shop Bot can help your customers with finding products and getting order updates.

Course Quick Clips

70 Award
Winning AI Themes

Start your AI Website now
Start your AI Agency now

GETTING AROUND

GET A QUOTE

A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for AI development, custom website design, website development, ecommerce websites, directories, intranets and social networks.