Categories
Website Design

How To Create Listing Pages on Your Website (Using Custom Post Types) [Video]

How To Create Listing Pages on Your Website (Using Custom Post Types)

๐—š๐—ฒ๐˜ ๐—˜๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜๐—ผ๐—ฟ ๐—ฝ๐—ฟ๐—ผ ๐—ฝ๐—น๐˜‚๐—ด๐—ถ๐—ปโžœ https://wl.tools/elementor-pro-custom

๐—–๐—ต๐—ฒ๐—ฐ๐—ธ๐—ผ๐˜‚๐˜ ๐—ผ๐˜‚๐—ฟ ๐—ฒ๐˜…๐—ฐ๐—น๐˜‚๐˜€๐—ถ๐˜ƒ๐—ฒ ๐—ช๐—ผ๐—ฟ๐—ฑ๐—ฃ๐—ฟ๐—ฒ๐˜€๐˜€ ๐—ฐ๐—ผ๐˜‚๐—ฟ๐˜€๐—ฒ โžœ https://websitelearners.com/wordpress-course

๐—š๐—ฒ๐˜ ๐˜๐—ต๐—ฒ ๐—™๐—ฎ๐˜€๐˜๐—ฒ๐˜€๐˜ ๐—ช๐—ผ๐—ฟ๐—ฑ๐—ฃ๐—ฟ๐—ฒ๐˜€๐˜€ ๐—›๐—ผ๐˜€๐˜๐—ถ๐—ป๐—ด โžœ https://webspacekit.com

๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐— ๐—ฎ๐—ธ๐—ฒ ๐— ๐—ผ๐—ป๐—ฒ๐˜† ๐˜„๐—ถ๐˜๐—ต ๐˜†๐—ผ๐˜‚๐—ฟ ๐˜„๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ โžœ https://websitelearners.com/ebook/top-5-ways-to-monetize-your-website/

๐—ฉ๐—ผ๐˜๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐—ผ๐˜‚๐—ฟ ๐—ป๐—ฒ๐˜…๐˜ ๐˜ƒ๐—ถ๐—ฑ๐—ฒ๐—ผโžœ https://topics.websitelearners.com/websitelearners

๐—ฃ๐—ผ๐˜€๐˜ ๐—œ๐˜€๐˜€๐˜‚๐—ฒ๐˜€ ๐—›๐—ฒ๐—ฟ๐—ฒ โžœ https://wltalk.com/post/185508666

Learn how you can create a listing page on your WordPress website.

Letโ€™s say youโ€™ve a website, and you want to list your items, and if anyone clicks on that item, they can get full detail of that item.

So letโ€™s get started.

๐—ง๐—ฎ๐—ฏ๐—น๐—ฒ ๐—ผ๐—ณ ๐—ฐ๐—ผ๐—ป๐˜๐—ฒ๐—ป๐˜๐˜€ :

00:00 Intro

01:43 To Create a Custom Post Type

05:51 To Create your Own Custom Fields

09:20 To Display custom fields on your page

09:39 Download & Install Elementor Pro Plugin

11:58 Choose a Design

13:42 To Add Custom Post Field

20:56 Create New Page for Listing

=== Part 1 : To Create a Custom Post Type ===

Step 1: Install Pods Plugin

To install the plugin, go to Dashboard โ–บ Plugins โ–บ Add New,

Now search for โ€˜Podsโ€™ and click โ€˜Install & Activateโ€™.

Step 2: To Create Post Type

Go to Pods Admin โ–บ Add new โ–บ Create new,

Now enter post type name in singular & plural label,

And then click โ€˜Next stepโ€™.

Now post type section is created in WordPress admin area,

So just click on it, & start listing your items,

To add items, click โ€˜Add newโ€™

(So if you donโ€™t find option to list your item,

Go to pods admin โ–บ Edit pods,

under post type, click โ€˜Edit & Advanced optionโ€™

Now under support, select option that you want on your site & click โ€˜Saveโ€™)

Next fill up your item details & click โ€˜Publishโ€™.

How you can add more details about your item?

To create your own fields, go to pods admin โ–บ edit pods,

Now under your post type, click edit & add field,

Enter field details then click โ€˜Save Field & Save Pod.

Now in the same way you can create as many field as you want.

=== Part 2 : How to can display custom fields on your page===

You need to create design for our listing first, then add custom field.

Step 1 : Download โ€˜Elementor proโ€™ Plugin

To get Elementor pro plugin, click here โžœ https://wl.tools/elementor-pro-custom

Now choose your plan, & make payment,

Once you purchase, click โ€˜Download Elementor proโ€™.

Step 2 : To install Elementor pro plugin

To install the plugin, go to Dashboard โ–บ Plugins โ–บ Add New

Then click โ€˜Upload pluginโ€™,

Now add the downloaded plugin and click โ€˜Install & Activateโ€™.

In order to use the plugin, click โ€˜connect & activateโ€™,

And then click โ€˜Activateโ€™

Step 3 : Choose a Design

To choose a design, go to โ–บ Templates โ–บ Add new

Choose template type, & click โ€˜Create Templateโ€™

Now choose your design & click โ€˜Insertโ€™

Now to add content to your design,

click โ€˜setting symbol โ–บ Preview settings โ–บ Dynamic content

Now select your post type & enter page title,

and Then click โ€˜Applyโ€™.

So now youโ€™ve successfully created design for our listing page.

Now to add custom fields,

Add icon box element just by drag & drop,

Now add the icon & field name,

And now in description click โ€˜Dynamic tags & pods fieldโ€™

Near pods field, click โ€˜setting symbol & keysโ€™,

Select the field, which want to display

Like wise you can add other fields.

To publish the page, click โ€˜publishโ€™.

Now click โ€˜add conditionโ€™ & choose, location for your page,

And click โ€˜Saveโ€™.

Now if you add another item to the list,

The design will be automatically applied to it.

Next, letโ€™s see how you can create a new page and list all your items

Go to Dashboard โ–บ Pods Admin,

Now under post type click โ€˜Edit & Advance optionโ€™,

Now enable Archive page & click โ€˜Saveโ€™,

Go to โ€˜Template โ–บ Add Newโ€™ โ–บ Choose template type as Archive,

Enter template name & click โ€˜Create Templateโ€™,

Now choose design for your page & click โ€˜Insertโ€™,

Now click โ€˜settings โ–บ Preview Settings โ–บ Select your Post Type โ–บ Apply,

Once done, click โ€˜publishโ€™.

So now you have successfully created a page.

Now add that created page to our menu.

So thatโ€™s it, guys,

Now you know how you can create listing page.

————————————

๐—š๐—ฒ๐˜ ๐˜๐—ต๐—ฒ ๐—ฏ๐—ฒ๐˜€๐˜ ๐˜๐—ผ๐—ผ๐—น๐˜€ ๐—ณ๐—ผ๐—ฟ ๐˜†๐—ผ๐˜‚๐—ฟ ๐˜„๐—ฒ๐—ฏ๐˜€๐—ถ๐˜๐—ฒ โžœ https://websitelearners.com/tools/
๐—ฉ๐—ถ๐—ฑ๐—ฒ๐—ผ ๐—š๐—ฒ๐—ฎ๐—ฟ ๐—ช๐—ฒ ๐—จ๐˜€๐—ฒ โžœ https://kit.co/websitelearners/video-
๐—ข๐˜‚๐—ฟ ๐—ฉ๐—ถ๐—ฑ๐—ฒ๐—ผ ๐—˜๐—ฑ๐—ถ๐˜๐—ถ๐—ป๐—ด ๐—ง๐—ผ๐—ผ๐—น โžœ https://bit.ly/2Od546p

๐Ÿ™Œ ๐—ข๐—ณ๐—ณ๐—ถ๐—ฐ๐—ถ๐—ฎ๐—น๐—น๐˜†:
๐—ช๐—ฒโœ๐—ฟ๐—ฒ ๐—›๐—ถ๐—ฟ๐—ถ๐—ป๐—ด: https://websitelearners.com/careers/โ€‹
Want your website developed by us? Email us your requirements to contact@websitelearners.com

๐Ÿ’ฌ ๐—™๐—ผ๐—น๐—น๐—ผ๐˜„ & ๐—–๐—ต๐—ฎ๐˜ ๐˜„๐—ถ๐˜๐—ต ๐˜‚๐˜€:
๐—œ๐—ป๐˜€๐˜๐—ฎ๐—ด๐—ฟ๐—ฎ๐—บ: https://www.instagram.com/websitelear
๐—™๐—ฎ๐—ฐ๐—ฒ๐—ฏ๐—ผ๐—ผ๐—ธ: https://www.facebook.com/websitelearn
๐—ง๐˜„๐—ถ๐˜๐˜๐—ฒ๐—ฟ: https://twitter.com/websitelearners/

Watch/Read More
Categories
Website Design

ChatGPT Inside VSCode. Your new coding partner [Video]

http://bit.ly/3n6Udx0 ๐Ÿ‘ˆ Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!https://designcourse.com/af ๐Ÿ‘ˆ My upcoming "Advanced Frontends" Course-- Today, we're going to install a ChatGPT VSCode extension and use it to help us write HTML, CSS and JavaScript. We'll even get it to help us create a very small cryptocurrency app. 0:00 - Intro0:27 - Installing the Extension1:14 - Project Overview1:49 - Prompt 1 - Importing a font2:58 - Prompt 2 - Fix alignment issue3:55 - Prompt 3 - Delete and animate list items5:38 - Prompt 4 - Get cryptocurrency prices8:02 - Final ResultLet's get started!#chatgpt #vscode #ai - - - - - - - - - - - - - - - - - - - - - -Subscribe for NEW VIDEOS!Learn UI/UX: https://designcourse.comMy personal FB account: http://fb.com/logodesignerCoursetro FB: http://fb.com/coursetroCoursetro's Twitter: http://twitter.com/designcoursecomJoin my Discord! https://discord.gg/a27CKAF^-Chat with me and others- - - - - - - - - - - - - - - - - - - - - -Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com.Come to my discord server or add me on social media and say Hi!

Categories
Website Design

Live Webflow Build: Nike E-Commerce [Video]

Join us for this fun livestream where we'll use Webflow's new Figma Plugin & build Nike's E-commerce shop. Clone the Figma project here: https://www.figma.com/community/file/1219673361011782349 Join The Webflow Masterclass: https://www.flux-academy.com/courses/the-webflow-masterclass 29% OFF all Flux courses & bundles until Friday for our Spring Sale: https://flux-academy.com/spring-sale

Categories
Website Design

Psd to Html part #1 | html and css | HTML | CSS | js | responsive web design | Designer Rina [Video]

Psd to Html part #1 | html and css | HTML | CSS | js | responsive web design | Designer RinaWebsite architecture incorporates various abilities and disciplines in the creation and upkeep of sites. The various spaces of website architecture incorporate web visual depiction; UI configuration; writing, including normalized code and restrictive programming; client experience plan; and site improvement.#designerrina#psdtohtml#webdesign#webdevelopment#web#development#design#howto#html#css#javascript#js#htmlandcss