Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to create a site like this

  • <– I want to decorate posts like this. However, I want to make it like this when searching by category. Because I will be using static pages.

    <– Site shown in screenshot

    I will give you the login information.

  • I want to make it like this when searching by category.

    Not sure what this means, do you mean category archive? Or do you mean a query loop block on a static page?

  • I’m talking about category archives.

  • Hi there,

    You can use a Block Element – Content Template. Under Element settings on the right side, set the Element Type to Content Template.

    In the element editor, you can design the post template based on the example you provided. To apply it to the category archives, set the Location to Post Category Archive > All Categories.

  • <– Thank you. Please tell me what to do here with screenshots or videos. I want to make the site exactly like the one I told you about.

  • You just need to create the layout for the section in your screenshot reference inside that element.

    Refer here for more details about Block Element – Content Template: https://docs.generatepress.com/article/block-element-content-template/

  • Yes, but I don’t know which template to use. Please choose.

  • The struecute would be something like this, then you need to tweak each block’s settings.

    - container A
     -- container B
       --- container B-1 
         ---- headline b-1-1 (author?)
         ---- headline b-1-2(date) 
       --- headline b-2 (title)
       --- headline b-3 (excerpt)
       --- headline b-4 (list of terms)
     -- container C
        --- image (featured image)

    container A: display:flex.
    container B: flex-basis: 66.66%
    container B-1: display: flex, justify-content: space-between.
    container C: flex-basis: 33.33%
    image: height:100%, width:100%, object-fit: cover.

  • thank you. But I’m not sure if it’s explained in text. It would be nice if you could tell me step by step with screenshots or videos.

  • Below is the HTML markup for the block based on Ying’s layout structure above. You can copy this into the Element Editor and adjust it as needed:

    
    <!-- wp:generateblocks/container {"uniqueId":"4ef0948c","isDynamic":true,"blockVersion":4,"display":"flex","columnGap":"20px"} -->
    <!-- wp:generateblocks/container {"uniqueId":"ed9d15ec","isDynamic":true,"blockVersion":4,"flexBasis":"66.66%"} -->
    <!-- wp:generateblocks/container {"uniqueId":"056b3057","isDynamic":true,"blockVersion":4,"display":"flex","justifyContent":"space-between"} -->
    <!-- wp:generateblocks/headline {"uniqueId":"6f0071df","element":"p","blockVersion":3} -->
    <p>Author</p>
    <!-- /wp:generateblocks/headline -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"2de44372","element":"p","blockVersion":3} -->
    <p>Date</p>
    <!-- /wp:generateblocks/headline -->
    <!-- /wp:generateblocks/container -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"86393027","blockVersion":3} -->
    <h2>Title</h2>
    <!-- /wp:generateblocks/headline -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"331461a4","element":"p","blockVersion":3} -->
    <p>Excerpt</p>
    <!-- /wp:generateblocks/headline -->
    
    <!-- wp:generateblocks/headline {"uniqueId":"6b4554ff","element":"div","blockVersion":3} -->
    <div>List of terms</div>
    <!-- /wp:generateblocks/headline -->
    <!-- /wp:generateblocks/container -->
    
    <!-- wp:generateblocks/container {"uniqueId":"e9d9e34c","isDynamic":true,"blockVersion":4,"flexBasis":"33.33%"} -->
    <!-- wp:generateblocks/image {"uniqueId":"72906196","sizeSlug":"full","width":"100%","height":"100%","objectFit":"cover","blockVersion":2} -->
    <figure><img src="https://cdn-www.bluestacks.com/bs-images/14706-Harry-Potter-Magic-Awakened-426x240.jpg" alt=""/></figure>
    <!-- /wp:generateblocks/image -->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/container -->
    
  • thank you. I applied it. I want this to all be applied automatically. What should I do?

  • thank you. I applied it. I want this to all be applied automatically. What should I do?? <– I want the image part to appear in the same size as this site.

  • Hi there,

    where did you apply it ?

  • <– Here.

  • You need to edit the Element and set the Display Rules > Location

  • I want to apply the post image of the article I have already written to the image section..

Viewing 16 posts - 1 through 16 (of 21 total)
  • You must be logged in to reply to this topic.