Blog layout - ethos stack

Support
#1

Hi Guys,

So this is my website so far: www.theupperclub.nl
I created a bunch of pages and now I’d like to set up the blog page + creating some blog posts.

So Im a bit confused here.
Let’s break it down in 2 questions and 2 different blog page options which Im thinking of using

  1. a.
    Using x theme:
    –> theme option > blog > masonry > fullwidth > 3 columns
    –> page BLOG > Layout full width
    This is what I see: https://www.theupperclub.nl/community/
    I also chose some other layouts, f.e. content left and sidebar right, vice versa + No container - header and footer, but the lay out never changes. How come?
    I’d like to see 3 colums per row per category, so if I have 10 posts for 1 category I want to see 3 colums per row, 4 rows and all full width

Under the masthead I’d like to see a full width image + a filter to choose category and a search bar

What am I doing wrong here?

  1. b
    What I think is strange with the demo content is when I go to https://www.theupperclub.nl/community/ and click a demo post I am redirected to f.e. https://www.theupperclub.nl/lorem-ipsum-is-simply-dummy-text-of-the-printing-and-typesetting/

But as far as I know normally you go to something which looks like this: www.xxxxx.nl/apps/blog/post/622
Why is it while using x theme that all the blog posts are seen as pages?

  1. c
    Is it also possible to show the most popular posts or post which I’d like my viewers to read showing at the bottom of the page in f.e. a slider or just as 3 columns in 1 row?

  2. Using a grid lay out for the blog page from which viewers can click on and go to the specific blog post.
    Ive read that for a grid layout using “the grid” I have to add a page ?

At the moment my header and footer have the option to go to blog (click on community in header or click on Blog in footer) when I add a new page can I just delete the pages COMMUNITY + BLOG?

Does the grid also showing the posts Ive written automatically in The Grid lay out and can I use wordpress for the posts or do I have to use the grid always for adding new posts?

I hope ou guys can help me out here.

Thanks in advance

Best
Ivo

#2

Hi Ivo,

Thanks for reaching out.

1.a The Masonry layout will not work if Theme Options > Ethos > BLOG OPTIONS > FILTERABLE INDEX is toggled on. Please toggle that off if you wish to see a masonry layout. And the page templates will not work on a blog page, Wordpress override the page you assigned as blog page and only uses its URL and name, but the page template in use is always the default blog template (index.php).

With blog layout configuration, you’re only limited to Theme Options configuration.

1.b. I just checked and I don’t see any redirection, it all links to each post page. Would you mind providing a video recording?

1.c With blog page, you can’t, unless you’ll do template customization related to index.php. Or simply create a standard page (don’t assign it as a blog page) and you can build it with your preferred content. Like using recent posts element, or essential grid, or the grid to display your posts and group them. Or is that what you’re trying to achieve? (custom listing page)

  1. Yes, as 1.c, you can add The Grid but not on the blog page, it’s a reserve page used by Wordpress. And it uses index.php instead of page templates. I recommend just creating a page where you can add multiple grids and don’t assign it as a blog page.

And yes, you can always delete them. Or perhaps, you can do some redirect from community (assigned as blog page) to your custom page (where grids are added within the builder). Please check this https://www.wpbeginner.com/beginners-guide/beginners-guide-to-creating-redirects-in-wordpress/

Does the grid also showing the posts Ive written automatically in The Grid layout and can I use wordpress for the posts or do I have to use the grid always for adding new posts?

It depends on your grid setting, if you created a grid with the default setting then it will only display the recent posts that you added (newest on top/first). And you only need to add it once, unless you wish to display it on different pages. Please check this https://theme.co/apex/forum/t/extension-the-grid/74

Hope this helps.

#3

Hi Rad,

This was very helpful. Other question about the blog is this.
I’d like to use masonry lay out for blog index but also I’d like to have a sidebar for only the blog index and blog posts.
Is this possible when using ethos stack?

If so, how can I fix this?

Also if I’d like to have a couple of categories showing on the blog page (index.php) can I add those so Its easur for the user to see that we have different categories where they can watch and read?

Best
Ivo

#4

Hi Ivo,

Thanks for writing in!

Yes, you can add a sidebar to blog page and single post page. For that, you have to change the blog layout.
Please go to Theme option -> Blog and change the layout to Global content layout.

Then in Theme Option -> Layout and Design change the content layout to Content left and sidebar right.

You can now see the sidebar in blog page as well as post pages.
Now you can change the layout of your page if any page having a sidebar.

Regarding the category links, you can anyway ad category links to the main menu or in the sidebar using menu widgets.

Thanks

#5

Thabks for the reply

If you check www.theupperclub.nl you can see that I already created a bunch of pages which are full width pages eand thats how I’d like to have those pages.

Obly for Community/ and the blog tab + blog posts I want the sidebar to show up.

SO my question: If I change the settings like you written down does this affect the pages which I already created or not? I hope not

Best
Ivo

#6

Hey Ivo,

Yes that would change the layout of your site globally but you can always change the layout of the pages individually by changing the Page Template to Layout - Fullwidth (see screenshot)

Hope this helps!

#7

Hi There,

Thanks for the response!

A final question would be about the option to filter categories using masonry layout.
Now it’s unclear how to choose easily a subject which users like to read.

Is there a solution for this? Maybe using categories in sidebar?

Another questions is the following. If you check the this page: https://www.theupperclub.nl/demo-audio-with-image/
you can see that the header (which is a smart section header) override parts of the content.

Is there a way (maybe changing some CSS) to lower the content for all blog pages?

Best
Ivo

#8

Hi Ivo,

Thanks for updating the thread!

The filterable category doesn’t support masonry layout. You can add custom category menu or Category widgets in the sidebar to navigate to particular category pages.

For the spacing issue, please use this CSS in your Theme Option -> Global CSS and let us know if that works.

body.single-post .x-container.max {
margin-top: 80px;
}
body.single-post .h1.entry-title {
margin-bottom: 40px;
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.