Hello, my name is Braden Gerard and today I'm going to talk to you about how you can create a landing page using Strapi. We're going to look at the content type builder and how we can build a single type in it so that we can power a landing page such as the one on the right here. So this is The Newsroom landing page in Strapi. We're going to create this page inside of the Strapi admin. So I have a fresh Strapi admin set up here.
Now, before we create this single type, we're going to actually create the components for the page, and then we'll create the single type which will be the page itself and add the components to it. So as we look at the page here on the right, we see that we have a header with a title and subtitle. So let's create that component first. So let's create a component, and it's going to be called Header, and then we will add it to the components category. And we will give it an icon, just give it that one. And then we'll give it some text. So the text will be the title for the header; short text is fine. Add another field, and then we'll also give it another text field. This time it will be the subtitle; again, short text is fine. And we'll hit finish.
So now we have our header component. We'll save that.
Creating a Reusable Title Component
We'll come over here and we'll create a new component, and we're going to create this title component now because if we scroll down the page, we'll see that the title is used in a couple different places. So we'll create a new title component just to hold that. It'll be very simple. It'll just be called title. We'll give it this icon again and add it to the components, hit continue, and it's just going to be text that has title and short text. Finish. So we just have a very simple title component. We'll save that.
Now these two buttons are a call to action. There's two buttons linking to different call to actions. If we make this page bigger, we can see that these can go side by side. So I'd say that this can be a component itself, a two button call to action. So let's add a new component. We'll call it Two Button CTA, and we'll add that to the components, and we will make it an icon. And then let's now add two separate components to this two button CTA which will be the buttons themselves. So we'll nest these components inside of the Two Button CTA component, and we'll call them buttons. Add it to components and the name can be first button for this specific component, and a single component, that's fine.
Add a field to the first button. We're going to give it the text field, which will be the title of the button. We will give it another text field, which will be the link that the button goes to. And then we will give it an enum field, which will be the type of button. So in this case, we have a primary button, we have a secondary button, and you can use these enumeration values to set the styling for the buttons. We'll also add an outline button, and we'll add an outline icon button if we want to add a button with an outline and an icon. And we'll see where we can use this later. And then we'll finish that one.
So here we have first button in our Two Button CTA component. And then we'll add another field to this component which will also be a button component. So now we can use an existing component and we will select the button component that we just created, give it a name of second button, and this is a single component. Finish. Now we have our first button and our second button with the title, link, and type on them in this Two Button CTA component. So we can save that.
Creating the Article List Component
And then we'll create another component, and this component is going to be for these cards here. So this is a list of cards, so let's call this article list. And we'll put that in the components. We'll give it this icon to continue. And then we want to add a sub-component to that, which is the individual articles. So we'll call that article, and we'll put that in the components. And we'll pick an icon for that, let's just say something like this. And then the article component will be a repeatable component. We'll call it article in here and we'll add some fields to that component.
So first we want the title of the article. Then we want the date of the article, and we'll choose a day, month, year format, call that date. And finally we want a media or an image for the article. We'll say single media, and we're going to call that the icon. So now we have an article list component with an article component inside of it, and it's repeatable so we can add multiple articles to an article list. We'll save that, and you'll see that Strapi automatically generates those sub-components for us as separate components so we can then reuse them later on, same for the button. When we added a button sub-component, it created the button component here.
Building the Info Card Component
Finally, we want to add the cards here that we have. We'll call these info cards, I guess. They're down near the bottom of the page. Let's create that component now. So we'll say new component, Info Card, and we will put that under components again. And we'll just pick something here, I don't know, we'll say something like this, sure. Continue. And this info card, we want to give it some component fields here. So we'll select the title of the info card. And then we'll add a media, single media, which is going to be the image on that card. And then we will add another text, we'll make this one a long text because it's going to be the description on the card. And then we will add another enumeration that will be the background. And the background will be either blue, purple, let's make a gray one in case we want to add a gray background in the future, and we'll say white maybe. And then we can use this to style the background on these cards. And then we'll hit finish.
And finally, we'll add a button to this info card. So we're going to go down to component, we can add our existing button component. We're going to select the component and we'll say the button, and then we're going to say CTA button, and it's a single component, and then we can hit finish. Now remember we added that enumeration type to the button for the style of the button, and I added outline with icon. So that will allow us to have a button that has this icon on the side of it, maybe like a CSS icon, and style it with the outline by default. Okay, we can save that info card now.
Creating the Single Type with a Dynamic Zone
And now I think that's all the components we need to make for this page. If we go back up to the top, we have our header, which we can see here. We have our titles, which we have here. We have our two button CTA component, which we have here. Then we have our list of articles, so we have article list with article components inside of it. And finally down here we have these info cards and we've created that component. So we've created all the components from this landing page inside of Strapi.
Now we can actually make the page itself. So let's go create a new single type and we'll give it the name of Newsroom and we will hit continue. Then we will select what we want to put into the Newsroom page. In this case, we're going to put a dynamic Zone and we'll call this page content. And then we're going to add the components to this zone. So we're going to use existing components since we've already created them all. And then we're just going to select all of our components here. So we have all the different components which are options for this page. You can hit finish. And that is all that we have to do in order to allow a content editor to come in here and create a landing page using any of these components. And they can order them how they like. They can put them in, you know, with different styling based on the enums that we created. And we can take a look at how we can do that here. So let's save this.
Because we've created this dynamic zone here, it basically allows the content editor to come in and then use any of these components they want in any order they want on this page. So we could have just put a bunch of components on this page in the order of the page, but it wouldn't have made the page quite as flexible as if we do the dynamic zone, because the dynamic zone allows the content editor to come in and rearrange these sections, put them in different orders if they want, use some sections, omit some sections. So it's a little more powerful if we use dynamic zones along with components.
Populating the Page in the Content Manager
Okay, so if we go back over to the content manager now, we can see that we have our Newsroom page here. There's no content on it yet. So let's build up this Newsroom page from the view of a content editor. So we'll add a component to the page. We're going to add the header. We'll build it just as the page is here. So first we'll add the header, we'll give it the title of Newsroom and we'll give it the subtitle of press releases, news information, you get the idea.
Add another component. We're going to add a title because we want this Strapi in the news title. So let's add our title here: Strapi in the news. Now we're going to add a two button CTA. So we'll go here, we'll pick the two button CTA. The first button we want the title to be Download Logo Kit. We want the link to go to some URL, and we want to choose the style. So we're going to say this is a primary button. Then we're going to choose our secondary button: Go to Media Kit, and we'll say some URL, and then we will make this a secondary button.
Now we have our articles, so we will add another component. That component will be an article list. Inside the article list, we're going to add articles. So we'll click here and we can add as many articles or as few articles as we want. So let's just add the first one here, Headless CMS startup. I'm not going to type out the whole title. We're going to choose a date here. So in this case, we want February 28th. And we can choose an icon. Now I'm not going to have this exact icon, but let's load in an icon here. We'll add that in, and then we can select that. Finish, upload asset, finish. There we go. Now we can add another article if we want. So there's our first article, we can add a second article, Strapi lands 31 million. We'll pick a date here, that date doesn't really matter. And then again, we can pick another image. We'll just use the same image. Oops, put a check box there. There we go. So now you can see we've got two articles. I could create as many articles as I wanted here.
Once we're done creating articles, we can create the next section, which would be another title. So let's add a title, it's going to be Media Resources. And then we'll add our final components here, which are going to be some info cards. So I'll add an info card, Brand Assets. Again, we'll just use our placeholder image here. And we'll say get our logo kit... and the background for this one will be blue. And now we have our first info card. And if we want to add our second info card, same thing, we can pick an info card here. Now again, I could have made this a list of info cards like we did with the articles. I don't know how many of these you would have in a row, so you know, maybe we just want to be able to add one, or maybe we want to be able to add a couple. We can just add them one after another like this if we want as well. So in this case, we'll say Press Kit, again add an image, add a description, add a background color. You can see how dynamic this is with the dynamic zones and the components and how easy it is to build up pages and adjust the pages to your liking as a content editor.
So this is Strapi and how you can use components with dynamic zones to create a single type page.
