• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.
  • Support reminder: Please do not use private messaging for product support. Post questions to the respective forums to get help.

Category Page: How to get it display like that...

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
Here is my Category page: it displays the full posts, one after the other.

How can I get a visual display like this site:
1630855883582.png

This is what you get when you click their Category Page "Avis" in the main menu.
 

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,495
Reaction score
1,824
You can set the loop settings of the category page to "teasers" and set the columns to 2, featured image above headline (MD > Site design > content to change all loops, or Posts > Categories > edit category > Loop to edit only one category.

From there, it looks like you will need a latest posts widget which I can release here as a drop-in for you. I made something similar for the upcoming MD.com redesign I can repackage for you too.
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
You can set the loop settings of the category page to "teasers" and set the columns to 2.
This is how it looks after doing this:
1631349777914.png
And if you scroll down further, you find the other posts:

1631349815928.png

From there, it looks like you will need a latest posts widget which I can release here as a drop-in for you. I made something similar for the upcoming MD.com redesign I can repackage for you too.
Looking forward to it. Thanks.

----
Also, the layout looks kind of weird on the teasers on the Category page.
This is my post:
1631350009211.png
=> H1 is bigger than H2 is bigger than H3.

This is how the headings are displayed on the related teaser:

1631350063804.png
=> My H2 and H3 are displayed bigger than the H1.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,495
Reaction score
1,824
In the loop settings change the "show full text" setting to only show an excerpt. You can also adjust typography in MD > Site design > fonts and typography
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
@Alex , can you please advise. I'm stuck with the broken layout as shown on my previous screenshot.

I tested the several options of the the Loop several but it does not change anything.
Here are my tests:
TEST 1
1633860260845.png

TEST 2
1633860287495.png

The Layout remains the same on my Category page:
1633860324949.png
and if you scroll down, you get this:

1633860349068.png

How to get a normal layout, with the posts aligned?
How to get something looking like:
1633860389015.png
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,495
Reaction score
1,824
Check the Edit category settings on both of those pages. MD also offers settings on a per category page basis, so you may have changed the loop settings there on a past date. If those settings aren't filled out, your category pages would inherit the same layout as your screenshots.
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
I changed went to edit the Category setting as you said, especially this:

1634456444529.png

Here is how it looks now:
1634456464861.png

As you can see, the blocks are not aligned top, as it would make sense for them to be. It comes from the fact that the Heading on the left-hand side post goes on 3 rows when the one for the right-hand side post goes on 2 rows.

Still, common sense would tend to say that they should still be aligned top, to get a clea design. This is the case on this other site I mentionned above, using a free theme:

1634456397077.png

How can I get the same result with MD, that is, clean, top-align Teaser blocks?

Generally speaking, don't you think the overall layout is missing a bit of "order" and proper alignement:

1634456844046.png

It's bit like you have misalignements everywhere, and it makes it awkward and hard for the eyes and brain to understand the "path". It adds cognitive overload.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,495
Reaction score
1,824
As you can see, the blocks are not aligned top, as it would make sense for them to be. It comes from the fact that the Heading on the left-hand side post goes on 3 rows when the one for the right-hand side post goes on 2 rows.
This style of teasers was intentionally aligned to the middle to account for the box shadow design. If this design was aligned to the top, as you're suggesting, each white box that isn't aligned would have to add an empty gap to make up for any missing height.

If you want your teasers to resemble your screenshot and align them to the top you could use CSS like the following:

CSS:
.loop-teasers .post-box { vertical-align: top; }

.style-default .blog-teaser {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

Screen Shot 2021-10-17 at 4.51.59 PM.png
 
Comment
Top