The Basics of Dynamic Content for WordPress with Elementor Pro | Rino De Boer | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

The Basics of Dynamic Content for WordPress with Elementor Pro

teacher avatar Rino De Boer, Designer & Content creator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (18m)
    • 1. De basics of dynamic websites?

      1:07
    • 2. What is dynamic content?

      2:12
    • 3. Other types of dynamic content, custom fields.

      3:50
    • 4. Listings

      3:37
    • 5. Archive pages

      2:37
    • 6. Option pages

      1:35
    • 7. The best plugin for this.

      2:52
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

130

Students

--

Projects

About This Class

In this class, I explain in detail how you use dynamic content. The best way to add new content to the website from the back end, like blog posts, products, services, or people. Learn in this video about Custom dynamic fields, custom post types, archive pages, listings, and much more.

This is an explainer video that is perfect for everyone that wants to start building websites with dynamic content. The next step after simple websites with Elementor Pro.

I will tell you everything you need to know to get started. Starting with: What is dynamic content on a website, all the way to all the possibilities with dynamic content.

Meet Your Teacher

Teacher Profile Image

Rino De Boer

Designer & Content creator

Teacher

Hi, I'm Rino and I've been in design for over more than 10 years now. I started with design as a hobby, but I quickly realised that this was more than a hobby for me. So that's why I went to design school and studied: Communication and Multimedia Design at the University of Applied Sciences in Rotterdam (The Netherlands).

I was so passionate about it that I started a YouTube channel about design. This grew to a channel with more than 30.000 subscribers and 4 million total views.

Because of this YouTube channel I was approached by big influencers and brands, and I got the opportunity to start my own company and work for brands like: Coca Cola, ICI Paris XL, RTL and a lot of big influencers (with around 100k to 1m followers).

Because of these projects and the YouTube ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. De basics of dynamic websites?: In this class, 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 web sites 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 mess up the website when you add new content. Website, because it all happens from the backend. This video is important if you'd like to watch my content because I've promised to make a lot of videos about Grochow block, which I think is the best plug-in to build dynamic websites. And as you probably already guessed, a dynamic websites can be sold for a lot more money than simple website. So if you follow this class, you have more skills to sell higher-priced websites. So if you want to learn how dynamic content websites work, then you can click on the next class and then we're gonna get started. 2. What is dynamic content?: 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 and a message 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 dragging the title and the content and the images and everything that you need for each blog posts. But this creates problems very quickly because if you have a 100 blog posts after a well, and your clients wants to make the title for each block boast a little bit bigger, for example, then you will need to open and edit a 100 pages and elemental, because we're press 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 element or so that you can make changes for all the blog posts from one place. And 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 FEM builder where you tell element or that all the blog posts needs to display the title over here, the image over here, that text field over here, and so on. And then element or we'll use the data that's inside of the different posts. You can do this by using the little dynamic icon and then you tell elements or in the conditions that you want to use this design template for all of your blog posts. So now you know how that works inside of a block, but let's now talk about different kinda website in the next episode. 3. Other types of dynamic content, custom fields.: By understanding this, you now also understand why this post feature is used on different kinds of websites with different kind of post. For example, a car selling website where they also have a list of GAR 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 gonna do that? Then you will need to kind of post an extra kind of both on top of the normal blogposts because you don't want the car posts to be mixed with the blog posts because this creates a lot of problems. So you will need a different kind of post. So this is where you will need to new things. One is a different kind of post, a custom posts. That's why WordPress calls this a custom both type. So a different, a 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 once a blog in the future than 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 were present 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 posts. So the Post has a name and in front of that is slash or slash people or slash projects or whatever. And then the last thing you do is select an icon for the sidebar. 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 her breasts 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 collar and 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 us fueled a name. You tell the plug-in what kind of input field it is and you assign it to the right customer post type. So then you will see some extra fields at the bottom of all of your cars boasts, Dan, 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 element or pro. So again, a single boast template, and then you can use the new data from those new fields inside of your car design template just used a dynamic icon again and make sure to select the right field that you have just created. By the way, most plugins called this custom fields, like I said, but some plug-ins called this meta boxes because it's kind of like a box where you put metadata in. So remember that some plug-ins use other names, a little bit confusing. So custom fields and meta boxes are kind of like the same thing. Okay, so now you understand custom posts types and you understand custom fields. That is nice. Let's now go to the next subject which is listing. So how you can create a list with all of your posts that you can implement on another page. Let's go to the next episode. 4. Listings: Okay, so now you know how to create a different kind of posed with different kind of fields and a design template to bring it altogether. 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 pose 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, 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 elementary 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 plug-ins called it a loop because that little block loops and some plug-ins even called that a listing. For example, Grochow block calls that a listing which I think is confusing because a listing as kind of like the whole list, right? But that's just what it is. Loop listing, 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, elements are pro also offers a widget for displaying post, 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 highlight 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 actually almost never used oppose widget itself inside of element or so this is where I think element or 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 review sludge block slash loop. Okay, so now let's talk about where you're gonna display that lists. So when 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 homepage, 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 gars or gars overview or whatever. And then you will need to use the leasing widget to display all of the cars on that page. And then you're going to 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 homepage, just make sure that you add that widget. Do the homepage, 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. 5. Archive pages: But there is a problem with creating a new page every time and then inserting the listing which it, And that is when you have a lot of categories, you probably already saw that you can add categories to a boasts. So to any kind of both that you want. This is a default feature by WordPress that will allow you to categorize boasts. You often see this in web shops, 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 changed and you also need to change to pages is 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 die category, then you don't have to create a page is automatically done. So you could see this as kind of like a category rebates that you don't have to create manually. An archive page can be created with element or pro, or Grochow blog very easily with the FEM 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 what's 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 really important, a filter is really useful, like a web shop or a car website. But for a blog where it's not about searching, but reading a category and 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, they use a filter. If it just about reading them, 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. 6. Option pages: 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 ten different places, and then you'll 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 and then you forget one or two places and the clients 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 their phone number. Super useful dynamic feature. Okay, so now you have a complete understanding of dynamic content. Again, it's condon That is loaded in from somewhere else, it saved somewhere else and you use that content, you can use it with custom post types. So with lists for blog, a car or project website, or whenever. 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. 7. The best plugin for this.: Okay, so to build these kind of websites, you will need powerful software and Plugins. This is not something you can do with element or pro element, or 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 plug-ins that can create all of those fields, those costs imposed 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 posts types with a 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 or assigned to that plug-in. 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. It's a plugin calls a jet engine by Krakow block. 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. And remember, these kind of websites are a lot more complicated than just your simple home about services, contact page, websites. 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. 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, okay, so we still haven't covered everything about dynamic content, but if you understood everything in this class until now, you have a good basic understanding of how dynamic content websites work. In the upcoming classes, I'm gonna dive deep and I'm going to show you where to click on how to apply this and built a website. I'm going to build a few exemple websites as classes, which I'm going to upload on my account, which you can follow, what you're going to be really cool. So I'm really excited for that. You can already now click on my profile to see my other classes if you're interested, because I have a lot of content about how to start and maintain and grow your own web design business. And then I want to thank you for watching two disk glass and hopefully we'll see you in one of my other classes. Thank you.