Step1: Install plugin Elemntor Pro (may b Elemntor can also b work)
Step2: Install JetEngine plugin
Step3: Install Crocoblock wizard (Don’t know whether it will be helpful)
Creating Dynamic Post Fields setup:
Step1: Click on Post Types under JetEngine.
Step2: Enter Post Type Name (eg.Properties)
And then click on blue button ‘Add Post Type’. (As soon as we add, we can see one pin ? with the name which we had given on left side bar below Comments).
Step3: Now assuming we are still on the Post Type Creation page, come to advance Settings (3rd option) and change the Menu Icon from pin? to desired one.
Step4: Now on the same advance settings tab, under Supports, click on select option and select Featured image and cross mark Editor.
Step5:
(Now creating the input fields based on the requirement of the page)
Now, click on blue button New Meta Field under Meta fields tab,
Eg1: For location,
We will enter Label as Location,
Object type as Field.
Field Type as Text Field.
Description (this is the message which will be shown to clients when they going to enter Location of property).
Eg2:
Star Ratings.
Click on New Meta Field button.
Label give as star ratings.
Object Type > Field.
Field Type > Number.
Set Min Value > 1.
Set Max Value > 5.
Eg3:
Price.
Name > Price.
Object Type > Field.
Field Type > Number.
Set Min Value > 0.
Step6: Now we will see that Star rating and Price are coming in a new line while adding a new Property.
So, if we want to make them both in one line, we can change their width to to 50% from 100%.
Eg4:
Price with Variations (monthly, yearly, selling)
New Meta Field,
Label > Price Variation
Object Type > Field
Field Type > Select
New Field Option button will reveal.
Click on it,
Option Value > Monthly.
Option Label > Monthly.
Similarly Add new. Yearly.
And Selling.
Eg5:
Description.
Field Type > WYSWYG (with editor it will show to clients)
Eg6:
Gallery.
Field Type > Gallery
Description > Add multiple images here.
(You can add any of the field you want to make it dynamic).
Template Creation:
Now let’s create a template for all these posts which are going to be uploaded by client dynamically.
Step1:
From left side bar, hover on to Template > Theme Builder.
Step2:
Go to ‘Single Post’ Tab and click on ADD NEW SINGLE POST green button.
Name your Template. And click on CREATE TEMPLATE.
(Now on the Elementor Canvas, create the Entire look and feel of the template just placing the elements into the page)
Step3:
Now after creating the template, add one post so that we can use it just for test while Dynamically integrating fields into each element on the template.
Step4:
Before doing testing, do the following,
Click on page settings icon, Preview Settings > from the dropdown Preview Dynamic content as > (select the name of the Post Type (Eg.Properties)) and from another below dropdown select the post which we have added recently in step3. In dropdown, it will show All, we have to type the name of the post we have added. And select it. And click on Apply and Preview.
Step5:
Now making Dynamic,
Eg1: Title
Click on Edit of the Title Element.
Click on the Dynamic tags icon on right upper corner. And click on Post Title.
Eg2:
Location Text. (Click on Edit Heading Element)
Dynamic Tags > under JetEngine click on Custom Field. > from Settings select that Field from dropdown. > Location.
Eg3:
Maps.
Dynamic Tags > ….. > Select Location.
(One Field working on 2 elements.)
Eg4:
Star Ratings.
Click on Star rating element.
Dynamic Tags > JetEngine – Custom Field > and select the Star rating.
Eg5:
(?2 bathrooms)
If we want to show something like above, bt we are taking only number from client. Then we have to do,
Edit Icon List > Dynamic Tags > JetEngine – Custom Field > Settings – Field- Select Bathroom (if we have added this field).
And then below the ‘Settings’ there is one tab ‘Advance’, write bathroom in ‘After’ fieldbox.
Eg6:
Gallery.
Edit Gallery
Dynamic Tags > JetEngine – JetEngine Gallery. And Settings – Field – (from dropdown) select Gallery.
Eg7:
Bg Image.
Edit Section.
Style
Dynamic Tags > Post – Featured Image.
Now after making all elements to the dynamic,
Step1:
Click on Publish.
It will ask to Add condition.
Click on ADD condition,
And select the name of the Post Type (Eg.Properties).
(We have created Single page dynamic template)
Now, we will create Archive Page, Listing Page, Loop Page, etc whatever you say where we will see each card of each Post.
Step1:
Hover on JetEngine,
Click on Listings > Add New.
Listing Source > Posts
From Post Type > Name of the Post Type (Eg.Properties).
Listing Item Name > (Housing Preview, All properties).
Listing view > Elementor.
And then click on Create Listing Item button.
Now over here we are creating Card for the Post.
Step2:
Add 3 column section.
Step3:
Add inner section in 1st column.
(2 columns will come after adding inner section) delete one column.
And den duplicate that upper inner column.
(So that upper one will be for image and below one for other information)
And now start adding elements which we want to show over here in this card. Like Title, Price, Star ratings, etc
If we want to copy from the previous Single page template then we can do that as well.
Now, for image,
U can set image from column, but it will not show properly even giving padding from top and bottom, do one thing to add divider in it and make the width of the divider to 0% and den adjust the padding again of the image. Give hover effect on column as shadow.
Now after making ready one column (card), delete the other 2 columns. And click on Publish.
But one thing to be done in order to make these cards clickable, click on settings icon of this Listing Item, come under Listing Settings Tab, and enable ‘Make listing Item clickable’.
Link source – Permalink.
And now click on update.
Now Listing those Cards:
Wherever we want to List it out these Posts as a card,
Go to that particular page, and select element – Listing Grid.
Select the Listing we just created, it may be House Preview, All Properties, etc.
Slider (Carousel):
If we want to show these Cards in a slider,
We can do so, by Editing the Listing Grid element > Set Posts number (may be 6)
And from the very lower portion click on Slider
And enable Slider.
Now we have to create one Property Page, Archive Page, so add new page – Eg.Properties.
Edit with Elementor, select Full width, create it’s header(means breadcrumb section).
And now add one new section after that,
Now like we created one Slider for home page, we can copy that listing Grid element and paste it over here on this Archive page Eg.Properties Page. And now we will disabled the slider option.
And if we want to show only few Cards first den we can enable Load More option and set it to Infinite scroll so that as customer scrolls, Cards will be loaded automatically.
And make sure from the 3rd option-Terms Query of Listing Grid we set order to Desc.
And from General option, we can set masonry option enabled if Cards are up and down.