How to show blog posts as tiles

Activello
1

Hello,

i am trying to get my blog to show up in this format: https://colorlib.com/activello/page/3/ (with the tiled blog posts) or as in this website 购彩冬瓜 - 首页_欢迎您

Right now, my blog posts show up one after the other. Child theme I am using is attached

Please let me know how I might be able to achieve the above - my site has a home page, and a separate blog page.

2

Oops sorry, it is attached now

it is the child theme which moves the top menu bar below the logo

3

Hi @mphhelp,

I hope you are well today and thank you for your question.

It is a functionality of activello theme but you are using Etudes theme on your shared site. To achieve the same result on your site you have to either use Activello theme or develop custom code in the child theme of Etudes theme.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

Best Regards,
Movin

4

Hi Movin,

Is it a different child theme because I wanted to move the nav menu below the logo? ie. is there a way to do that using the Activello theme and still retain the style of the box/tiled blog posts? I’m not sure I understand why the child theme would be the Etudes theme

5

Hi Movin, I have three blog on my wordpress blog, but even when I preview using the Activello (not child) theme, the blogs come one after the other, not in the tiled format - is there some way I activate this in the Activello theme itself?

6
Hi Movin, I have three blog on my wordpress blog, but even when I preview using the Activello (not child) theme, the blogs come one after the other, not in the tiled format – is there some way I activate this in the Activello theme itself?

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

7

Hi Movin,

Unfortunately the site is not live yet, however let me give you a screenshot: (see attached)

they are organizing one after other, but I’d like them to be tiled

8

In your shared screenshots i can only see the first two posts which display one after other so please check from third post.

If you are not displaying blog on your site home page then you have to use custom CSS code shared in the following topic.

https://colorlibsupport.com/t/posts-not-displaying-correctly-on-main-page/#post-84550

9

Hi Movin,

thank you for your help, here is the code I added:

@media (min-width: 768px) {

.blog article.post {
 width: 30%;
 margin: 0;
 padding-right: 10px;
 display: inline-block;
 float: left;
 }
 .blog article.post .read-more,
 .blog article.post .entry-footer {
 display: none;
 }
 .blog article.post .post-inner-content {
 border: 0;
 padding: 0 0 30px;
 }

.blog .page-1 article.post:first-child .post-inner-content {
 padding: 0 0 50px;
 }
 .blog .page-1 article.post:nth-child(2) .post-inner-content {
 padding: 50px 0;
 margin-bottom: 20px;
 }
 .blog .page-1 article.post:first-child .read-more,
 .blog .page-1 article.post:nth-child(2) .read-more,
 .blog .page-1 article.post:first-child .entry-footer,
 .blog .page-1 article.post:nth-child(2) .entry-footer {
 display: block;
 }
 .blog article.post:nth-child(odd) {
 clear: left;
 padding-right: 25px;
 }
 .blog article.post:nth-child(even) {
 padding-left: 25px;
 padding-right: 0;
 }

body.blog #main.page-1 article.post:nth-child(2) {
 width: 25%;
 float: left;
 clear: left;
 padding-right: 25px !important;
 }

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
 border-bottom: 0;
 margin-bottom: 0;
 }

.blog #main article.post:nth-child(odd) {
 clear: none;
 padding-right: 50px !important;
 padding-left: 50px !important;
 }

.blog #main article.post:nth-child(2n+2) {
 padding-right: 50px !important;
 }
 .blog #main article.post:nth-child(even) {
 padding-left: 50px !important;
 }
 .blog .page-1 article.post:nth-child(3) .post-inner-content {
 padding: 50px 0;
 }
 }

i tried to customize to what i wanted (购彩冬瓜 - 首页_欢迎您) but see the screenshot:

can you help me to move the boxes more in the centre, similar to the blog example i showed ou? i would still like the categories to show above each post ( we only have 4 posts so far, and one test post)

10

and my screenshot is attached here:

11

As said above you can achieve it as displayed on this page https://colorlib.com/activello/page/3/ but to achieve it like this page 购彩冬瓜 - 首页_欢迎您 you have to develop custom code.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5