Blog "Posts" Module

Beaver Builder
1

Hi, the blog posts module doesn’t show the same as it does when it’s a blog page itself. I’d like to use it as a module so I have more control over the style.

Here’s how it should look when it’s just a page that’s automatically making the blog…

http://indamixrecords.com/

Here’s how it looks as module with the “feed” layout style…

http://huehub.com/dev/

It seems like they should format the same since other support questions on this topic have said that it’s determined by the theme. The main things are that the title is above the image, not the text, and there’s quite a bit of extra white space after the image.

Very much appreciate any help, thank you!
Ellie

2

Hey Ellie,

Welcome to the BB forums! :slight_smile:

The Posts module does not use the same format your theme does. I don’t think there is a way for our plugin to determine how your theme handles the Posts page. Our module has its own styling. Sorry for the confusion there.

Can you try adding the CSS snippet below though and see if it takes care of the styling issue?

@media (min-width: 768px) {
    .fl-post-feed .fl-post-feed-has-image.fl-post-feed-image-beside .fl-post-feed-header {
    float: right;
    width: 63%;
    margin-bottom: 0px;
  }
  .fl-post-feed .fl-post-feed-has-image.fl-post-feed-image-beside .fl-post-feed-content {
    float: right;
    width: 63%;
    margin-left: 0px;
  }
}

Ben

3

Hi, thank you that moved the title but there’s still a large white space under the image and the “read more” isn’t stylized. Just want to know so I can do it in the future because the “feed” style for blog layout definitely has some quirks that won’t work for any site I build, especially with the gap. Otherwise, I love the plugin so far, though! Thank you!

4

Can you try adding the CSS snippet below and see if it’s what you’re looking for? Feel free to play around with the values except for the fl-post-feed-image.

.fl-post-feed .fl-post-feed-post {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.fl-post-feed .fl-post-feed-image {
  margin-bottom: 0px;
}

Not really sure what you meant by the read more link? How do you want it to look like?

Ben