Mastering Dynamic Websites: A Comprehensive Guide for Beginners
Learn the essentials of dynamic websites, from custom post types to design templates, and discover how to use Crocoblog for advanced web development.
File
The Basics of Dynamic Content in 15 Minutes
Added on 10/01/2024
Speakers
add Add new speaker

Speaker 1: In this video I am going to explain the basics of dynamic websites. Dynamic websites are the next step after you know how to create a simple website with a home, about, services and a contact page. Because dynamic websites allow you or your client to add new content to the website. For example, new blog posts, new products, new services, new people or any content that has to be updated within the website. And what's beautiful about dynamic websites is that you and your client can't mess up the website when you add new content to the website because it all happens from the backend. This video is important if you like to watch my content because I've promised to make a lot of videos about Crocoblog, which I think is the best plugin to build dynamic websites. These websites can be sold for a lot of money, but you can't follow all of these tutorials if you don't understand the basics of dynamic content. So if you want to learn how dynamic content websites work, then just keep watching. Okay, let's get started with the basics. What does dynamic content mean? So normally you would just drag in a title with a page builder and just type in the title right there. But with dynamic content you load in the text of the title from somewhere else. So the title is saved somewhere else. Let me explain why this is essential. Let's start with a blog because a blog is the most simple type of a dynamic website. On a website with a blog, you want all the blog posts to have the same design. For example, like this with a title, an image and the content. In theory, you could just go to the pages section in WordPress and create a new page for every blog post and just drag in the title and the content and the images and everything that you need for each blog post. But this creates problems very quickly because if you have a hundred blog posts after a while and your client wants to make the title for each blog post a little bit bigger, for example, then you will need to open and edit a hundred pages in Elementor because WordPress sees every page as something individual. This is a horrible experience, of course. So WordPress has a solution for this and that is the post feature inside of WordPress. With the post feature, you can set up one design for all the different blog posts and that design template is something you create with Elementor so that you can make changes for all the blog posts from one place. A design template like this is called a single post template because it's a template for all the single slash individual blog posts. You can create this design template with the theme builder where you tell Elementor that all the blog posts needs to display the title over here, the image over here, the text field over here, and so on. And then Elementor will use the data that's inside of the different posts. You can do this by using the little dynamic icon and then you tell Elementor in the conditions that you want to use this design template for all of your blog posts. By understanding this, you now also understand why this post feature is used on different kind of websites with different kind of posts. For example, a car selling website where they also have a list of car posts that all have the same design. And on this website, you also want to be able to change the design for all the car pages in one place. So you could use that same post feature, right? But what if your client wants a blog and a list of cars? How are you going to do that? Then you will need two kind of posts. An extra kind of post on top of the normal blog posts because you don't want the car post to be mixed with the blog post because this creates a lot of problems. So you will need a different kind of post. So this is where you will need two new things. One is a different kind of post, a custom post. That's why WordPress calls this a custom post type. So a different new type of post. So I know what you're thinking. Let's say that you have a website that only has a list of cars. In theory, you could just use the post feature itself to do the job. But my recommendation is always to create a new custom post type for anything other than a blog. Because if your client wants a blog in the future, then you will always have that default post feature ready. So let's pick a car website as an example. You want a new kind of post for the cars. You will need to create this in WordPress. And you need to tell WordPress what the name of this post is. Because the name of this post type will also show up in the link. So for example, your website.com slash cars slash name of the car post. So the post has a name and in front of that is slash cars or slash people or slash projects or whatever. And then the last thing you do is select an icon for the sidebar. So you have that nice icon in the left sidebar inside of WordPress. But once you click on it, you will realize that the default post input fields of WordPress are not enough for your design. Because on a car page, for example, you want to display a lot more information than just the title, an image, and a text block. Maybe you also want to display information about the engine, the color, an image slider, or anything else. So this is where custom fields come in. So with custom input fields, you can create extra fields that will show up on the inside of each post that you assign them to. It's really easy. You can just give that field a name. You tell the plugin what kind of input field it is. And you assign it to the right custom post type. So then you will see some extra fields at the bottom of all of your car's posts. Then you can create a new kind of design template, in the same way as you did for your blog, for all of your cars with Elementor Pro. So again, a single post template. And then you can use the new data from those new fields inside of your car design template. Just use the dynamic icon again, and make sure to select the right field that you have just created. By the way, most plugins call this custom fields, like I said. But some plugins call this meta boxes. Because it's kind of like a box where you put meta data in. So remember that some plugins use other names. It's a little bit confusing. So custom fields and meta boxes are kind of like the same thing. Just make sure that you understand everything until now. Because right now we're going to move on to the next subject, which is listings. Okay, so now you know how to create a different kind of post, with different kind of fields and a design template to bring it all together. That's nice. But now, how do people actually get to those posts? Because they are just in the backend of your WordPress now. How do users see them? You will need to create a list that you can implement on a page. So that people can click on those individual posts, and go to those individual post pages. So this is where listings come in. How this works is that you will need to design a list of posts. And how you do this is by designing one of those blocks in that list, or one of those previews. So I'm saying blocks here, not blog. Okay, so one of the blocks inside of that list. And then you can use a widget, a listing widget, to display all of those blocks in a list. That single block in that list, or that little preview, you create that with an Elementor template. So I have now already called it one of the blocks, which I think is a good word for it. But you could also say preview. To make it a little bit more confusing, some plugins call it a loop. Because that little block loops. And some plugins even call that a listing. For example, CrocoBlock calls that a listing. Which I think is confusing, because a listing is kind of like the whole list, right? But that's just what it is. Loop, listing, a block, a little preview. It's all the same thing. It's part of that list. So once you have created one of those previews, you can then use a widget to display all of that blocks in a list. By the way, Elementor Pro also offers a widget for displaying posts, called the posts widget. But that widget is very limited. You can't, for example, add things to it yourself. You can only customize and hide a few things that they offer. Which makes it unusable for designs, where you want to add your own dynamic fields to those little previews. For example, with this car website, maybe you already want to display your engine information in the preview. Because that's a nicer experience for the user. So I actually almost never use the post widget itself inside of Elementor. So this is where I think Elementor Pro is a little bit limited. So that's why I create my own template. So that I can design anything I want inside of the preview, slash block, slash loop. Okay, so now let's talk about where you're going to display that list. So with a car website, you probably want one big page where all of your cars are. But maybe you also want to display a few of the cars on your home page. Maybe a shorter list. So what you need to do then, is you need to create a normal page within the page feature in WordPress. That's called cars or cars overview or whatever. And then you will need to use the listing widget to display all of the cars on that page. And then you can just save that page. And then you have a page with all of the cars. But then if you want to display a few of the cars in your home page, just make sure that you add that widget to the home page. But limit the amount of cars that people can see. You can do that within that widget. So for example, people can see a max of five cars. And they don't see the pagination options at the bottom. So this is the theory about how to create a listing that you can display in any place you want on the website. But there is a problem with creating a new page every time. And then inserting the listing widget. And that is when you have a lot of categories. You probably already saw that you can add categories to a post. So to any kind of post that you want. This is a default feature by WordPress that will allow you to categorize posts. You often see this in webshops. But also for example with a car website. Where you maybe want to categorize every brand. So that when people click on a different category. That they only see the cars that have that brand. And you don't want to create a new page for every category every time. Because if the categories change. Then you also need to change the pages. It's not a nice workflow. So then you will need to use something new. And that is called an archive page. An archive page is an archive for your posts within the same category. This page is automatically created by WordPress. If a post has a category. Which is perfect. Because then if you add a new category. And you assign a few cars to that category. Then you don't have to create a page. It's automatically done. So you could see this as kind of like a category page. That you don't have to create manually. An archive page can be created with Elementor Pro or Crocoblog. Very easily with the theme builder. You just need to make sure that you have the right settings inside of that template. Which I'm going to explain in all of these tutorials. But right now I just want you to understand how this works. So the second way to create an experience like this for your user. Where they can click on categories. And then see the posts within those categories. Is with filters. And filters are really cool. Because it allows the user to stay on the page when the content changes. Because with filters if you set them up correctly. You don't have to go to a new page. It will just change the posts. But not the whole page. So for a website where searching products or services is really important. A filter is really useful. Like a webshop or a car website. But for a blog where it's not about searching. But reading. A category, an archive page is probably a better solution. So this really depends on what kind of website you have. If you have a lot of products. Then use a filter. If it's just about reading. Then maybe categories with an archive page is all you need. So if you understood everything until now. You know the most important things about how dynamic websites work. This was the hard part. Now I'm just going to add in a few more things that are very handy to know. Like I said in the beginning. Dynamic content is content that loads in from somewhere else. And this is very useful for websites that have data. That is displayed in a lot of different places. For example with a telephone number. When you create a website. You put in the telephone number of the business in 10 or different places. And then you forget where you put all of those numbers. Or the email for example right. The business email. And then your client calls and says. Hey I want to change the email. And then it's so hard to find all of the places back. Where you put in that phone number. Then you forget one or two places. And your client complains. Not a nice experience. So this is where option pages come in. With option pages you can create a page. Where you can create a few fields. That you just use throughout the website. So this is not a post. So you don't need a custom post type. But it's just a field where you put in a phone number. And then you can use that field throughout the whole website. So with a phone number you can change it once. And then it will change on all the pages. Where you put in that phone number. Super useful dynamic feature. Okay so now you have a complete understanding of dynamic content. Again it's content that is loaded in from somewhere else. It's saved somewhere else. And you use that content. You can use it with custom post type. So with a list for a blog. A car. A project website or whatever. Or you could use it for simple things. Like a phone number or an image. That you can use in a lot of different places. Let's now talk a little bit about software. Okay so to build these kind of websites. You will need powerful software and plugins. This is not something you can do with Elementor Pro. Elementor is just a page builder. That allows you to use data inside of WordPress right. With the custom post types and everything. So you will need plugins that can create all of those fields. Those custom post types. Those option pages. And you have two options here. One is to go for the free options. But the free options obviously always come with limitations. And they will always try to convince you to go to the paid version of their plugin. Because every business needs to make money right. So my advice is to start with a paid option from the beginning. So you have everything that you need. And you don't run into limitations. Because if you start out with free plugins. And you're going to build all your custom post types with the free plugins. And you run into a limitation. That's a horrible experience to change everything afterwards. Because all of your posts and your data are assigned to that plugin. And then you don't really have all the options that you want. I made a whole video about this. What I think is the best paid plugin to do this. Again you can do it with free tools. But they have limitations. That video will explain in detail what I think is the best solution for your business. So I will link that down below. So you can watch it. It's a plugin called JetEngine by Crocoblock. And what I do is I let my clients pay for the plugin. So I don't have to make a huge investment myself. And I can still use all the features that I need for their websites. Again I explain everything about that in that other video. And remember these kind of websites are a lot more complicated. Than just your simple home about services contact page website. So you could also sell this for a lot more. So it makes sense to invest a little bit of that money into a plugin. Because the good things in life just cost money. That's just the way it is. If you want to make money you have to invest a little bit of money. And also remember this is one of the cheapest businesses that you can start. Because first you can keep most of the profit in your pocket. And secondly you can ask your clients to also pay for the plugins. Again I explained that in my Crocoblock video. Which I will link below or in the cards. So I think it's a smart idea to start off with something that is robust. And will not cause a lot of issues for your web design business. So we still haven't even covered everything about dynamic content. There are still a few concepts that I wanted to explain. But this is kind of like a basics video. A theory video. So if you understood everything in this video. I am sure that you can create amazing websites with the tutorials that are coming to this channel. And that was my goal with this video. To give you confidence that you can build websites like this. Because if you understand this then you're all good. So if you liked this video then please let me know by giving it a like. Because it helps out the channel a lot. And that allows me to make more videos like this. And if you're new here then you can subscribe. If you want to learn how to start or maintain your own web design business. Then guys I want to thank you for watching. And I hopefully will see you in the next video. Bye.

{{ secondsToHumanTime(time) }}
Back
Forward
{{ Math.round(speed * 100) / 100 }}x
{{ secondsToHumanTime(duration) }}
close
New speaker
Add speaker
close
Edit speaker
Save changes
close
Share Transcript