Create a new collection with categories (5:48 minutes)

In this video we’re going to learn how to make filters in real time. Just like these ones here. So we’re going to create a new filter, a music genre filter.

And we’re going to filter this list of albums by music genre. To do this I’m going to exit the preview mode.

And the first thing I'm going to do is go to this collection panel. And create a new collection, a collection for music genres. And now I’m going to come to this new genres collection and I’m going to add two new music genres - electronic and jazz.

So we have our newly generated genres here. Now we need to connect the music genre collection and the album collection. Each album will need to have a music genre associated to it. For this to happen, we have to connect these two collections.

So go to the album collection, settings and add attribute. Here in title we’re going to choose single reference.

What I want to do is connect the album collection and the music genre. So I’ve selected the genre collection and I’m now going to save.

Now I’m going to go here to the album collection, to the two entries where I can confirm that this new field has been created. In this field, I can select electronic and jazz. I’m going to select electronic and now I’m going to select jazz.

I’m just going to fill out these two albums for now, this is enough for the tutorial.

Now that we’ve got the data modeling ready, we need to go to the layout and verify what was created.

So the structure that we can see is a flex layout structure, you can find it here in ZY objects. And here in the grid item we have a filter button that you can also find in ZY objects.

This element is really necessary and has a lot of specific properties, we’ll take a look at these further ahead.

There is also a text element in the filter button.

Now you’ll need to select flex layout, and then come here to the data panel and activate dynamic data.

Here in the collection we’re going to select the collection we want to list. In this case, music genres, so that the music genres appear here.

So, we can see that our music genre names, in this case, jazz and electronic still aren’t appearing here.

For these music genres to appear, select the text element, go to the data panel and down here in dynamic data and styling and in get text from genre, choose the title field.

What we’re doing is linking the text element to the title field in the music genre collection. Ok, so now we can see both our music genres.

But the filter still isn’t working. To make this work you’ll need to select the filter button, go to the data panel and select the flex layout zero list to filter.

And now here you’ll have to choose the type of selection, I’m going to choose single since I want to use one filter at a time.

And here in attribute, I need to select how I want to filter, in this case, by music genre. And now the condition should be the same as the current item - this means that I want to filter based on the item that is selected.

If I click on jazz I want to filter by jazz and the same for electronic. So in other words, the same as the current item. The current item is the item I am currently clicking.

After this, for the method, choose toggle - toggle filters when you click it and un-filters when you click it again. This is exactly what we want.

Now I’m going to enter preview mode, to make sure the new music genre filter is working. As you can see, it is working.

So now I’m going to get out of the preview mode, and there’s still something I need to do.

It’s important to customise your filter button. So to do this, go to the panel view and here in this dropdown menu select current state. It’s important to customise the current state of the filter button so that you know when it’s selected. In this case we can customise by using an underline.

And that’s you how easy it is to create a realtime filter.

Change CMS script (3:46 minutes)

In the next two videos, I’m going to swap this banner for a slider that will allow us to highlight various entries from different collections simultaneously - which is a lot easier than it looks.

Since each list structure, whether it’s a slider, or a flex layout or even an accordion - can only be linked to one single collection. In this video, we’re going to look at how to prepare the CMS for what we want to accomplish.

So let’s have a look at the CMS, we’ve got a collection that has already been created - this tells us that we’re going to need to create a new collection that will be linked to this slider. This will be responsible for linking the rest of the collections.

that have the entries that we’re interested in highlighting on the slider. For this to work, we’ll need to use the single ref attribute. So as we can see we’ve only got two entries for this collection, each one corresponds to a highlighted slide within the slider.

So if we want to create a new highlighted slide, all we have to do is select add a new entry. Let’s have a look at this one here, we have various fields to populate, but the most important are these last three entries. These are single refs, and this is where we select the entries that we want to highlight.

Each one of these fields creates a link with another collection, in this case we have three possible options. We can highlight entries in the food/drink collection, the sites collection and the articles collection.

So let’s review this for a second, we know that this is a slider, and we want it to exhibit entries from other collections. We need to link this structure or a collection with this homepage highlight element that establishes a connection with one or more collections. This can be done by adding single ref attributes to the collection, it’s super easy, let’s do this now. I’m going to modify this collection so that we can add entries from the ‘tickets collection’ to this collection.

So that you can see how simple this is. Let’s go back to our app now, come here to the collections panel, open the highlights homepage collection settings. And let’s add a new attribute here by clicking ‘add attribute’. I’m going to call it ‘tickets’, I’m going to select ‘single reference’, and here in ‘collection I’m going to select the ‘tickets collection’.

Let’s save, the attribute has now been created, I’m just going to move it up here. I’m going to close this panel and I’m going to confirm the changes that have been made to this collection. I’m also going to close the collections panel, I’m going to save and I’m going to have a look at the CMS.

I’m going to quickly refresh so that the fields can update themselves, and let’s go down there to see if the field has been added. Here it is, the field, so we can now highlight entries on the ‘Tickets’ collection. I’m just going to have a look at the entries in the ‘Tickets’ collection.

To highlight one of these entries, all you have to do is create a new entry, populate the necessary fields and in this field, all you have to do is select the entry you want to highlight. We don’t need to populate any other single ref fields.

And that’s it in terms of what we need to do with the CMS, it’s as easy as creating a collection with single ref attributes. In the next video, we’re going to create a layout taking the necessary precautions to finish the slider.

Flex layout (6:32 minutes)

In this video we’re going to learn how to create a dynamic list with different items.

So, to show you what I’m talking about I’m going to click preview and I’m going to go here to articles. As you can see, we already have a list of articles where all of the items have the same structure but have different content.

The content is different but the composition the same - so we always have an image, a date, a title and a description with this configuration.

What we’re going to do, is create a list where the items have different configurations, making this flex layout more dynamic.

So I’m going to get out of the preview. We’re going to need the flex layout on our page.

So we’ve already added it on here, what I did was go to the view panel and customised. I added two column span cells with 0 vertical gutter and 1 REM for it’s horizontal gutter.

Now we’re going to have to place a block within this flex item. I’m going to expand the doc map, so it’s easier to see. To place the block, I’m going to come here to UI objects and all you have to do is click, so here is our block.

Now as I had mentioned before, we’re going to create a dynamic flex layout. So I’m going to select flex layout and then come here to the data panel and enable dynamic data.

Now we’re going to select the collection, in this case we’re going to select the collection called photo album.

We can automatically see that the block within this flex item was repeated twice. It was duplicated as there are two entries in the photo album collection. If there had been three entries, this flex item would have replicated itself three times and so on.

What we want is this flex item duplicated, to do this I’m going to select our flex layout. Here in the data panel we can add new flex items or duplicate, in this case I’m going to duplicate - this way I only have to change the colour of the second block.

The difference between the first and second block is going to be it’s background colour. So here in the second flex item, I’m going to select the block. I’m going to come here to the view panel, to background and I’m going to change this colour, I’m going to select this colour here. And what we want to happen is for the second block to change to blue.

What’s happening now is that the first block is the only one that is repeating. To indicate that we want all of our flex items to repeat we will need to select flex layout, come here to the data panel and activate repeat all items.

So we’re going to select this option, repeat all items that will make all items within the flex layout repeat.

As we can see on the canvas, our second block is appearing with the colour here, so if we had one more flex item with another block that had a different colour and we had more entries in our collection, it would appear here with its third colour, and if we had four, a fourth colour and so on.

So if I add a new entry to our collection, it would appear here with the first flex item’s configuration, the third block would be grey. The fourth entry would be blue and so on.

To better understand the possibilities of this repeat all items function we’re going to go here to modules, I’m just going to delete these blocks and I’m going to add a flex item module.

So I’m going to go here to UI objects, to modules and down here we have a bunch of different cards - I’m going to select this one here.

Ok great. I’m now going to go to the second flex item and I’m going to add another module, so if we go to the cards, I can find it here.

Now, I’m going to enter preview mode and as we can see, the layout is starting to take shape. I’m going to come out now.

Now I’m going to take a look at the collections, I’m going to go to the collection photo album and now I’m going to click into an entry. In this collection we have the option to insert three images.

I’m going to come out now, and what we are now going to do is to link each one of these elements to each one of these fields to insert images.

So here we’re going to do the same because these are different elements.

I’m going to select the image, and then go here to the data panel, and down here in dynamic data and style, in get image from photo album. I’m going to select image one, we can see the image here.

Now let’s move on to the second, we’re going to select top, we’re going here to get background image from photo album and we’re going to choose the second photo.

Here I’m going to select ‘bot’ again, and then the data panel, dynamic data and style, and I’m going to click the background image from photo album and I’m going to select photo number three.

So now I can see these three images that correspond to the first entry from the photo album collection.

Now we’re going to take care of the second flex item, so we’re going to go here to top, and do exactly the same thing as before, and then we’re going to link this to photo number one.

We’re going to go here to ‘bot’ and link the photo two. And we’re going to go here and link photo number three.

So here we can see the images that correspond to the second entry of the photo album collection.

As you can see it's very easy to create more dynamic layouts for lists. All you have to do is enable the ‘repeat all items’ option and work with the items that create the flex layout structure.

SEO and Opengraph (1:06 minutes)

To edit opengraph and a page’s SEO within your project, the first thing you’ll need to do is select the page element.

Once you have selected the page element, go to the data panel where you can find an option called SEO and opengraph.

Open this to find the SEO meta title, populate this field with the page’s title.

In SEO meta keywords, populate with the keywords that will make it easy for your site to be discoverable via the various search engines such as Google.

For meta description, write a description that will appear in a list on a search engine, like Google, when searching for your site.

In opengraph title, write a title that will appear when you share this page. In opengraph description write a description that will also appear when you share this page.

And for opengraph image, select an image that will appear when you share the link to this page.

And that’s a quick look at how easily you can edit the SEO and opengraph fields for your project.

Settings (2:27 minutes)

In this video we’re going to explore the project’s panel settings, in this case for web. To do this we’re going to come here to menu settings and we’re going to confirm that we have a series of options here.

In general settings we can give our project a name, as well as choosing the project languages. We can also select a principal language. We can also render the project fonts with anti-aliasing. Here we can edit the favicon, which is the icon that can be found in the browser tab.

Over here in integrations we have the option of adding a Google Analytics ID, a Google Tag Manager ID, Google Search Console ID and a Facebook Pixel ID.

Here in custom code, we can write customer code, both CSS and Java script. We can also add style sheets or java script.

Here in font, we can add custom fonts in the following formats: EOT, WOF, TFF and OTF.

Now in terms of the domain, we have two options a staging domain and a production domain.

For the staging domain, you’ll have to keep bondlayer.site and in this case we’re going to swap this number for a more relevant name and then click update.

The production domain works in the same way but we can choose our personal domain as long as it’s valid.

Over here we have the different backup options, these include: manual and automatic back ups. The automatic back ups are done approximately every 30 minutes - and these can be recuperated, eliminated or renamed at any time.

You can click here to start a backup.