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

Поделиться
HTML-код
  • Опубликовано: 25 авг 2024
  • 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 Год назад +2

    amazing stuff.. been looking for this for a while..

  • @felippefriori7123
    @felippefriori7123 2 года назад +1

    Excellent WP and Gutenberg editor usage tips!

  • @rmcellig
    @rmcellig Год назад +1

    Thanks so much!! I want to do this with my audio files!!

  • @nandaparb3179
    @nandaparb3179 2 года назад +1

    TOPPP!!!!

  • @praveenkirsur
    @praveenkirsur 5 месяцев назад +1

    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  5 месяцев назад

      Yes, but it will be easier for you if you use a plugin for it, ruclips.net/video/zdnSJHTh80w/видео.html

    • @visualmodo
      @visualmodo  5 месяцев назад

      Please try to follow ruclips.net/video/zdnSJHTh80w/видео.html

    • @praveenkirsur
      @praveenkirsur 5 месяцев назад

      @@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 5 месяцев назад

      @@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  5 месяцев назад

      can you please explain more?

  • @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 5 месяцев назад

    Can we see default posts layout in grid layout without page setup?

    • @visualmodo
      @visualmodo  5 месяцев назад

      can you explain more?

  • @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 Год назад +1

    😃😀😃😄