Hi guys my name is Ferdy and in this video
I will show you how you can create an advanced website using custom post types advanced custom
fields and dynamic content within Elementor pro. Let me explain, I will show you how to create
a custom post type that enables you to create a new kind of page to your website like a
portfolio or real estate houses, movies, people etc. In this video I will use the custom post type
to create penthouse pages, but within those penthouse pages I can only add a title, text,
featured image and a category. But I want to add more information like the
amount of space, stories, bedrooms etc. That is where advanced custom fields come
in, that allows me to create custom fields that enable me to fill in details about the
penthouse really easily. When we have done that we can use the dynamic
content option within the elementor pro to gather the information of the custom fields
and display them beautifully within our website. So one more time, we create a new post type
and penthouses. Then we create custom fields so we can fill
in a lot of information about the penthouses and using Elementor we will display the information
beautifully on our web page. This is applied to real estate websites but
also websites like IMDB and booking.com. So let's take our website to the next level. If you like what you're seeing so far please
like this video and if you want to see more upcoming videos consider to subscribe and
click on the bell notification and you will be the first who gets a notification when
I upload a new video. Now let's get started. So here I have my website with a logo, with
a menu and a home page. It is empty I have footer. So what I want to do? I want to create a real estate website about
penthouses. So what I need is custom post types now I'll
tell you what they do in order to get it we need to go to the backend, dashboard and over
here you see blog posts and you see pages, but if you want to create a portfolio we can
use custom post types and then you'll see portfolio over here or in our case penthouses
or real estate or listings or FIFA players whatever you want to show you can create it
using custom post types and order to do that we need a plugin. I go to plugins, add new and I search for
custom post types UY and there it is a lot of installs. I click on Install Now and I click on activate,
so we have Elementor, we need elementor pro and we need custom post types. So I go over here to custom post type user
interface probably and I click on add post types. What is the slug? The slug is the thing you see over here in
the URL, so if I say move it over here I see movies over here, so I say penthouses no capitals
and there I need the word in plural, so penthouses and use singular Penthouse using a capital
at the P, then I scroll down I can forget about this and here at the settings I scroll
down and here and has archived I see true because I want to have an archive. So I scroll up and I say Add post type and
now over here I see penthouses. Now I go to plugins, add new and I search
for Dashicon and I install this one now from Hal Gatewood install now, activate. OK I go to settings and Dashicon over here
and then I see penthouses and I can choose an icon that will be displayed over here. So I search for a house and there it is penthouses
I like that ok so over here I can go to penthouse and I can go to all penthouses or add a new
one. What I also can do, I can go over here CPT
add Taxonomies so, I can create for instance the slug so I can say sort of houses plural
sort of houses I don't know if that English is correct, sort of house or kind of house,
kind, kind, kind and I want to apply it to the penthouses add taxonomy. Okay and now if I go to penthouses I can also
create categories. So here I can say penthouses and a new one
mansions and residents okay. Now I need to create custom post types. Now if I would add a new penthouse I have
not that much options I can give it a title. I can add some text over here and I can set
a featured image and of course I can add a category but I want to do more. How can I do that? I go to plugins, add new and I search for
add advanced custom fields and there it is ACF more than a million installs, we're going
to use this. So we can add our own custom fields like. How many floors does it have half rooms? How many bathrooms? So I click on install now and I activate it. It is activated you see it over here custom
fields and I add a new field group by clicking here at new and I call this one penthouses
and then I can add a new field, so I add it over here and the first field label I want
to have is square foot. How many square foot? And if I say tap, it automatically creates
a field name over here. What kind of field type is it? You have a lot of them. I can say it is a number so let me see a number
okay. Is it required to fill in? Yes, I can choose if I wanted to be required
or not I say yes and if I do so I see an asterisk over here, like its mandatory ok. I close the field and now we have our own
custom field over here. I add a new field. Which is bathrooms and also this is a number,
the amount of bathrooms and it's not like that of course, it's like this. I close it. I can add a new field and it is bathrooms
also a number and instead of closing it I can also say add a field over here extras
and then I can have a text area or adjust the text and see how many options there are. I can have a checkbox, a link so since we're
talking about link I say text over here, but I want to add a link. So add a field, video I call this video and
it is a URL, it's not required. So we can add a ton of stuff. I think I don't have floors yet so I say floors
amount of floors or you know what stories, stories, a number and an important one, add
a field the price. This can be a number. One more the address/area and this can be
a text or a text area, you know what just the text is okay. I scroll down and I think we have everything. Then here at location is very important show
this field group if the post type is equal to and then we select penthouse okay. I scroll up all the way and I click on publish. So we have linked all those custom fields
to the custom post penthouse. So if I go to penthouse and I add a new one. I do not only see the title and the text over
here, then here I see all the other information. So let's get started. So the title of this penthouse is level 49
a level, then I can add a text over here so I searched for dummy text, dummy text, I copy
this and I can paste it here and I create a few paragraphs like this and over here I
can add images. I can make the text bold. I can do a lot of things and I scroll down
and now I see all those other options. So how many square foot is the apartment or
the penthouse? How many bedrooms does it have? Five. How many bathrooms? Nine. Has it some extras? Yes it has a private pool and I want to add
a video, so I searched on YouTube for best penthouses in Miami and the most penthouse
I've got from one video this one so I copy the link address and I place it here. How many stories does it have? It has four stories and the price is 36 million
dollars and it needs to be numbers so now points over here because maybe later on we
can add a filter and then filter based on the price and if I have points over here then
WordPress has no clue what it's going on. So just a number and the address, which is
this one. I scroll up and I want to add a featured image
and this one set the featured image. What kind of house is it? It is a penthouse. It is one of the categories we created and
I click on Add, that's it. Now I click on publish and now it is published. If I take a look over here to the permalink
I only see the image I see the title and the text below, nothing else that is what we will
do in Elementor but before we work on that I want to create one more penthouse. So hover over new penthouse and I'm going
to create the second one. It is called Regailia Penthouse so I just
called like this, again some dummy text, copy it, paste it, create a few paragraphs like
that and again the same information. The amount of bedrooms 6, bathrooms 10, extras
again a private pool. The video is the same. How many stories to and the price 40 million
and the address is this one. The featured image this one, set the featured
image and also this is a penthouse. I add it and I publish it. So I will do this with 5 more houses and then
I won't come back to you. This one is a different kind of house. This is a residence so here I say residence
and no penthouse by the residence. I click on publish and the latest one. So if I take a look at all the penthouses,
I see seven of them one two three four five six seven okay. Now I go to elementor, my templates. I have a header and a footer and now I want
to create a new template. I click on add new and we are going to create
the single page for all the penthouses. So I select single and then select post type
penthouse then we can give you the name, so I say single page penthouse, create template
and this is where the fun starts. This is where the power of Elementor comes
in. I can import a pre made template but I will
not do that I will start from scratch. So I click on the X and I start from scratch. What I want to do? I want to use the featured image in the background. So I click on the plus over here, click over
here one column and there is my section it's already selected. So I want to stretch the section like that,
I want to change the height to a minimum height of let's say 600 and then I go to style, background
type and now we can say I want to have an image and I can grab the same image as I've
chosen or I can use dynamic content and this is where the power of Elementor and that advance
custom fields come together. If I click on dynamic which you have if you
have elementor Pro, you click over here you can say I want to add the featured image and
there it is, please don't mind this gap it will be gone when we when the page is life,
so we have this over here. First I want to say no-repeat. I want to change the size to cover and I want
the attachment to be fixed, so if I scroll the image stays like that I like that. Now I go over here and I want to have a post
title so over here at single I see post title, I drag it over here and there it is fortress
of bliss. So I can style this title. I can bring it to the center. I can make it bigger so I go to the style
over here. I can change the text color to white for instance
and I want to make it bigger by going to typography, I can change the size and I can change a lot
of things over here. Let's say 65 and I can change the font family
over here to something else, but I use a real way like that. I can change the weight make it bold, really
thin. I use default. I can make it uppercase if I want to I use
default maybe letter spacing like that okay. What I want to do now? I want to make the background a little bit
darker, so I click over here. So I go to the section settings I go to style
then we have the background I collapse it by clicking here. I go to the backgrounds overlay and now we
can add an overlay. So maybe I want to give a really strong orange
look then I can go to the background type, classic change the color to orange and change
the opacity over here, but I don't like that I want people to see the house as it is. So I make it black and I change the opacity,
so this is normal. I make it a little bit darker so the title
will be seen better okay. Then below this I want to add more information. The price for instance I search for the Header,
heading I dragged over here below. I bring it to the center h2 is okay. I go to style, text color white and I want
this also to be a real way that's already the case okay, bring it a bit closer so I
click over here, and go to advanced. I go to margin and I uncheck it and at the
top I say - it's close to each other - 10 is okay. Now I go back to content and instead of showing
a title I go to dynamic. I scroll down all the way advanced custom
field. I click on it and now we will use a field
that we have created before. So I click on advanced custom fields and I
have a key and now I can choose one of the options I've created. So I want to show the price. There it is, it looks a little bit odd, it's
because it is a number. I go to advance before I say dollar and after
I say USD with space or I can say point - actually I don't like it. I want this not to be shown as a number but
as a text so I can use the points so I will do it later, for now I will continue. I think this looks great. I click on the plus for a new area and one
column and I will duplicate it later. I will stretch this section. The content should be boxed and I want to
add a icon box, icon box so I drag it over here and I can make it stacked like that and
I can search for an icon that talks about stories, so let me see, so I choose this one
and now if I go to the title or description I go to dynamic. I scroll all the way down. I click on an ACF field. I click on this again and I search for the
key which is the amount of stories and it says four. Then I go too advanced and I say stories and
with a space over here. Then I click outside of the area and remove
the text and I go to style, not the icon but the content and I want to make it a bit bigger
and capitals uppercase. Four stories you know it's just default but
it can be a bit bigger, thirty like that. Then I can duplicate this area and for the
second one I click over here. I go to the key and I say square foot so I
need to change the word of course square foot like that and I need to change the icon, so
let's see. I use this one square feet again I duplicated
and this time I go for the amount of bathrooms or bedrooms, bedrooms, bed like that and I
duplicate it again and this time bathrooms, advanced bath rooms. There's a bathtub like that, so I click over
here on the section advanced and its padding, I say 30 pixels top or you know its 50 and
bottom 50. So using advanced custom fields and dynamic
content of elementor Pro you can create a beautiful page like this. So before we continue I publish it. I click on publish and where do I want to
show this at All Penthouses. I publish it okay. Now if we take a look preview this is how
it looks. So you see in the background image, you see
the title, you see the price, the amount of stories, amount of square foot, the amount
of bedrooms and bathrooms. So in that way we can combine elementor pro
using dynamic content with advanced custom fields and post types. I hope you see how it works so let's continue. I edit what elementor, the single page penthouse. Right now we see fortress of bliss but if
you want to see something. I can click over here on settings, preview
settings and I can search for a different one, this one for instance and if I click
on apply and preview I see something else. So I click on the plus over here. What else do we want to show? We want to show the address. I can go over here, go to heading, drag it
here I click on dynamic content. I scroll down advanced custom fields. I click on it click on the key and I go for
the address or the area. Then I go to advanced and I say before address
like that click outside of it or I click on it I bring it to the center and I want to
make the color grey 555555 like that and then I want to go to Google Maps or to maps and
I drag it here below and then at address, I click on dynamic advanced custom fields. I click on it and I click on key address and
here you see it and we can style the area so I click over here, stretch the section
make it full width and then I click on the column, no margin and no padding so it will
be from the left to the right and then if I click over here, I can zoom in more like
that maybe a bit more like this, yes I like that and I want these backgrounds to be Dark
grey, so I say 555555 I go to the text. I want to be white and change the padding
or margin, so top a bit more space and button also Oh like that. So we have an image, a light backgrounds and
dark area then I click on the blocks over here at a template and I go to blocks. I search for call to action, let me see maybe
this one insert click over here, make it stretched, click over here book us for a visit, something
like that and here you can change the text of course and then this could go to forward
slash contact and then go to the contact page. So if I would say update and I take a look
it look like this. Maybe this style is not the best style but
it shows you what is possible. So if I want to change the price how can I
do that? I go to the back end, to custom fields, field
groups, penthouses I click on edit and then I want to open the field price, edit and I
want to change from a number to a text like that, update and now if I would go to penthouses
all and I go to fortress of bliss or let me do it really quickly. I open them all ctrl tab, scroll down and
do it like this point save. Let me fast forward, so if I take a look over
here for instance you see it look like that looks better in my opinion. So now we've created this I want to create
an overview an archive page with all the penthouses. So I go to the back end, Elementor, my templates. I add a new one and I say archive page. I call this one archive penthouses, create
the template and I can make use of an archive, so I can click on one of these but I want
to start from scratch, so I close this and I go to posts and we need to have this one. I drag it over here, you still see nothing. Why we need to go to query and here the source
is post but we don't have them but we do have penthouses and now they are shown and by default
you seen image, a title, the date, the amount of comments, the excerpt and read more button,
but we can change things over here. So I go to the layout I can change the skin
if I want to but I use classic. The amount of columns I think two is okay
so you see the image is better, posts per page twelve. The image position is at the top. Image size I wants to be medium large so the
quality is better. The image ratio you can play around with that
point fifty, the image width 100%. Do we want to show the title? Yes and I wanted to be h2. I do not want to show an excerpt. I do not want to show the date and the amount
of comments and I don't want to show read more. So the image and the title then I go to style,
I make sure to gap be 35 is okay. I bring everything to the center. I go to the content and the color should be
orange or 555555 and it can be bigger, not too big 25 okay. Then below or above I want to have a heading. I drag it over here and I say All the penthouses. I bring it to the center and I go to advanced,
padding bottom, I create some padding over here. This is one way to do it. There's also a different way if I remove this
one, I can go for a portfolio, drag it here below again I go to query, penthouses again
order them by date or title. I go to layout. I want to show two in a row. If I hover over it I see the title make it
again larger, make it point fifty, show the title when you hover over it. It can be h2 we can have a filter bar and
the taxonomy can be kind of houses so then you have penthouses and residence. I want to have a gap of 10 pixels also over
here, we can have the border radius like that. Image overlay what happens when you overlay. I think you still should see the building
and of course the colour should be black I think that looks nice, like that. The filter bar we can change the style, active
color should be orange and then I can say publish. I can add a condition. Where do I want to show this not on all archives
because there are also post archives, author archives. I only want to show them at the penthouses
archive and I want to add a plus, add a condition. The kind of houses archives all of them publish
ok. Now I go back to a single penthouse, so if
I click over here or this one I see the information over here and I want to edit this page so
the single page penthouse template and I scroll down. I change the background to 555555, yes I make
this text a lighter and then over here I want to have a new area again posts. I close this I go to query I search for penthouses
and then I can exclude one the current post. So over here I see Faena and that will be
the only one you don't see over here. So we can skip the current post which is amazing
and I go to the layout and again I want to have it really minimum. I don't want to show that much three columns,
six posts image is medium large, image ratio fifty, title is okay no excerpt, every title
is an h2, no data, no comments, no read more and at style bring everything to the center
and then I go back I go for the heading and I say other penthouses of course they are
not all penthouses but all sides about penthouse so I just leave as it is. The style of course orange, it can be capitals
a bit bigger, a little bit more margin and yeah that's what you can do. So I click on update and what I want to do
now? I want to go to the back end. Right now you see the home page, you don't
see that much but if I go back to the back end and I go to my templates and I go to archive
penthouses. I click over here its look like that. What we also can do? I add it what Elementor then I go to the dashboard
in a new tab so I have two tabs, so I scroll down for a moment, bring this down then I
go to the home page and over here I just say copy. I go to a different place. The home page, edit the page, edit with Elementor
right mouse click paste and there we have it. So here we can create our home page and if
I click on the plus over here, I can grab one image for the backgrounds, stretch it,
full width, minimum height of 600 style, background type I grab an image. I think I like I like them all. I like this one or this one, so I make it
cover fixed, background overlay, black like that and then I can remove this area, delete
bring this back up by the way over here I say stretch this section, content with full
width and then you know what over here you can have three columns and then here I can
have a title. Find your dream penthouse, bring it to the
center h1, style make it bigger make it white and if I go to the section settings, I can
say you know let's make it 400, update. So now if we go to the home page, we see this
hope here, find your dream penthouse. You can search between penthouses and residences
and if I click on it. I see all the information and I can check
other penthouses. This is something to do with sidebar of my
theme, I should fix that and then here I can go to a different one and if you take a look
you see fortress of bliss. The only one you don't see over here is fortress
of bliss because we excluded the current post. So if I would go to Bel-Air the only one you
don't see is Bel-Air and as I said this should be over the whole width of the website. So this looks great in my opinion if I go
to the home page again I go to the home page and I see the title and I can scroll again
and of course you can add contact pages. I have a lot more tutorials about elementor
related stuff. I can show you how to create a website using
Elementor for free or using Elementor pro. I have tutorials about all the different elements
of Elementor and Elementor pro, so you can create beautiful things and if you use it
in combination with custom post type and advanced custom fields and dynamic content of elementor
pro. You can create beautiful websites. I'm going to work on a tutorial where I show
you how you can use filters, so people can fill tan even better instead of just using
those two options. So subscribe if you want to be updated with
new tutorials and like this video if you like it and then you'll see me the next time bye
bye. Thank you for watching this video. I hope you let your creativity run freely
and create beautiful websites using custom post types, advanced custom fields and elementor
pro. Have a great day and you'll see me in the
next time bye bye.
