How To Create a WordPress Post Grid Layout with Block Editor For Free Without Plugins

  Рет қаралды 9,293

Visualmodo

Visualmodo

Күн бұрын

In today's WordPress video tutorial we'll learn how to create a WordPress posts grid layout with the native block editor for free, without any plugin.
WordPress Posts Grid visualmodo.com...
How To Display WordPress Posts In a Customizable Grid Layout For Free? • How To Display WordPre...
How To Use WPBAKERY POSTS GRID Element: WordPress Plugin Tutorial • How To Use WPBAKERY PO...
Using this method, you can easily display your posts and thumbnails in a post grid layout using the WordPress block editor. There is a built-in post grid block that you can use to create your own grid. #postsgrid #wordpress #blockeditor
To do this, open the page you want to edit, then click the add block plus button and search for the query loop, then click the block to add it. This block adds your posts to your page in a loop. Then click the "Start Blank" option at the top of the block to create the back grid. This provides a few different options, depending on the type of information you want to display in the post grid. We choose image, date and title options, but you can choose whatever you like.
After that, hover over the image and select the "Grid View" option. This will turn your list into a grid of posts. Next, you can customize the information to display. First we remove the pagination at the bottom of the block. To do this, just click on it and then click on the "Three Dots" options menu. Then click Remove Pagination.
This automatically removes the element from the block. In the same way, you can remove data from posts, or leave more post information for your visitors. Next, we'll add links to the post thumbnail and post title. Just click on your post thumbnail and turn on the "Link to Post" toggle in the radio button on the right.
Then do the same for your post title. Once done, click the Update or Publish button to make your post grid live. Now you can visit your WordPress site to see the new WordPress posts grid. You can add this block to any page or post. If you want to use this as your blog archive page, you can read our guide on how to create a separate page for blog posts in WordPress.
⭐ Free Goods of the Week: Download these 6 free goods before it's too late! crmrkt.com/NloAlj
⭐ Buy Website Hosting Plan and Gain a Free Domain At www.bluehost.c...
⭐ Best VPN service www.jdoqocy.co...
⭐ Register Your Domains Hassle-Free www.jdoqocy.co...
⭐ Managed Cloud Hosting www.cloudways....
I hope you guys enjoy this video, feel free to use the comments section below in case you have any questions, and don't forget to check out that Visualmodo website and subscribe to our channel for more web design and development training videos. Please check the links below for more content.
Website visualmodo.com/
Facebook / visualmodo
Instagram / visualmodo
Twitter / visualmodo

Пікірлер: 27
@furqanbangash
@furqanbangash Жыл бұрын
amazing stuff.. been looking for this for a while..
@visualmodo
@visualmodo Жыл бұрын
Thanks for the comment
@felippefriori7123
@felippefriori7123 2 жыл бұрын
Excellent WP and Gutenberg editor usage tips!
@visualmodo
@visualmodo 2 жыл бұрын
Glad it was helpful!
@rmcellig
@rmcellig 2 жыл бұрын
Thanks so much!! I want to do this with my audio files!!
@visualmodo
@visualmodo Жыл бұрын
You're welcome!
@yizhanwangxianfanfic309
@yizhanwangxianfanfic309 9 ай бұрын
😢not showing my custom post type how to show that only showing option to add post and page
@visualmodo
@visualmodo 9 ай бұрын
how did you made this custom post type?
@praveenkirsur
@praveenkirsur 6 ай бұрын
Can we filter these posts based on categories ? If yes, how to add category list on this page so that i can filter these posts? Thank you so much
@visualmodo
@visualmodo 6 ай бұрын
Yes, but it will be easier for you if you use a plugin for it, kzbin.info/www/bejne/sJXRhH1-ic1rZtk
@visualmodo
@visualmodo 6 ай бұрын
Please try to follow kzbin.info/www/bejne/sJXRhH1-ic1rZtk
@praveenkirsur
@praveenkirsur 6 ай бұрын
@@visualmodo again this example is applicable on a page, I.e blog page not on index.php or say home. I want the grid style on the location where it takes you after clicking on the logo.
@praveenkirsur
@praveenkirsur 6 ай бұрын
@@visualmodo I saw lot of videos and plugins, etc. All of them show grid layout on a PAGE say blog page but not on index.php.
@visualmodo
@visualmodo 6 ай бұрын
can you please explain more?
@praveenkirsur
@praveenkirsur 6 ай бұрын
Can we see default posts layout in grid layout without page setup?
@visualmodo
@visualmodo 6 ай бұрын
can you explain more?
@nandaparb3179
@nandaparb3179 2 жыл бұрын
TOPPP!!!!
@visualmodo
@visualmodo 2 жыл бұрын
Thanks a million
@Jim8457
@Jim8457 Жыл бұрын
If I use blocks in a grid, how can change the third block of the grid to an ad? Or a custom image?
@visualmodo
@visualmodo Жыл бұрын
No possible, you'll need to have a column only for it, or use a blocks plugin that have a random ads place for it
@Jim8457
@Jim8457 Жыл бұрын
​@@visualmodo Would it be possible if I want to have a grid of 4 columns in a row where I use 3 blocks as posts and then 1 block as an ad. And the next row 4 posts blocks, and the row after the first block an ad and 3 posts blocks? Until now, I am still working the Classic way, but WordPress will move to blocks eventually, and I am trying to figure out what is possible in terms of the Block Editor…
@visualmodo
@visualmodo Жыл бұрын
Yes, it is, but Once the posts changed dynamically according to your creation (latest ones) you display a random ads on it you'll need a custom plugin for magazine of posts grid
@Jim8457
@Jim8457 Жыл бұрын
@@visualmodo Got it. Thank you
@visualmodo
@visualmodo Жыл бұрын
Welcome
@unicorp2849
@unicorp2849 2 жыл бұрын
😃😀😃😄
@visualmodo
@visualmodo 2 жыл бұрын
You're welcome!
Custom WordPress Blog with Gutenberg Blocks
12:42
Jamie Marsland
Рет қаралды 10 М.
Пришёл к другу на ночёвку 😂
01:00
Cadrol&Fatich
Рет қаралды 3,9 МЛН
Display WordPress Posts in ANY Grid Layout (2024)
5:11
WPDev
Рет қаралды 19 М.
WordPress Block Themes: Don't make this BEGINNERS mistake!
7:56
Jamie Marsland
Рет қаралды 43 М.
How To Create A WordPress Website Using Elementor - Quick Tutorial
28:25
Website Learners
Рет қаралды 382 М.
How to Add Blog Posts to Pages in WordPress
8:42
Envato Tuts+
Рет қаралды 144 М.
How To Use The WordPress Block Editor
23:38
Thrive Themes
Рет қаралды 18 М.
Пришёл к другу на ночёвку 😂
01:00
Cadrol&Fatich
Рет қаралды 3,9 МЛН