Blog Posts (customizing and functionality)

[jhayles]

Hi. I’m creating a Layout page for my blog posts, but the builder isn’t doing what I want it to.

Here’s the layout link: https://experiencethesprings.com/pro/layouts/305

Here are my issues:

1. The top blog post is fine. However, there are supposed to be three blog posts under that (I chose a 3 column layout) but it keeps trying to put the fourth blog post under them. I only want to show the next three for that row. Then I will do a different layout under that for the rest of the posts.

2. I want the “Post Cards” to look like the ones attached in the screenshot. I’ve gotten close, but I have two issues:
   a) I want the Post Categories Tag to show up inside the card, instead of below the card at the bottom. In other words, I want the category tag to show up inside the Post Card border. Right now it is outside of it. I tried to move it inside but it did not work correctly.
   b) I want my profile image to show up either at the top next to the post date, or at the bottom next to the post category tag, but I can’t get it to look right when I try to do that.

3. The other posts are “grayed out” but the first one is in color. I want them to all be the same.

4. How do I get the website to recognize where my blog posts will be posted on the site? In other words, how does the system know how to organize the blog posts?

Screen Shot 2021-06-30 at 7.30.22 PM|690x169

[ruenel]

Hello @jhayles,

Thanks for writing in!

1.) You need to display 3 post items only.

You need to create another Looper on the next layout for the rest of the post items. This time, you will have to include an offset so that the first 3 post items displayed in the above Looper will not be repeated.

2.)

a.) You need to apply the borders and box-shadow in the Article element so that your categories will be inside your card.

b.) You can make use of the Author dynamic element. You may need to tweak the settings though to have it look like what you have in mind.

3.) It will only be grayed out in the builder. The grayed-out post items mean that those columns were dynamically generated by the Looper.

4.) You already assigned the layout as your single post layout. If you mean to have a custom layout for your blog index, please go to Pro > Layouts and create a custom layout as an Archive so that you can assign this layout to your blog index.

Hope this helps.

[jhayles]

That helps some matters. But I’m still having trouble getting the image and name to appear side by side to look like the other screenshot I gave you, and I’m still not able to get the categories at the bottom to go inside the card the way I want.

Your mock-up is close, but I don’t want the circle around my image, and I don’t want any lines inside the card to separate the content. I only want one border with 4 lines, and everything to fit inside that, like my original screenshot.

The system will only allow me to stack things on top of one another vs side by side, which is how I want.

[ruenel]

Hello @jhayles,

The Posts row element column layout should be set to 3 columns.

Please edit your layout and remove the border of the Title element. Added the borders to the Article element. Also add the Author (Vertical) dynamic element.

Check the layout now.

[jhayles]

It’s looking great now! Thank you, just a handful of quick questions:

1. How do I change the font size of the “Date” content inside the card?
2. When I’m creating a post, how can I use Cornerstone to build it out the way I want vs. using the Wordpress editor?
3. How can I save this Layout as a Template so I can quickly use it for other designs? Or is the Layout itself already a “Template”?
4. How can I change the Featured Image of the post at the top to not be so dark?
5. When a post has multiple Categories selected, the Term option is only showing one of those categories. How do I make it show all categories that are selected for that post?

[marc_a]

Hi @jhayles,

Would you mind sharing your admin credential so that we can clearly check your setup? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[jhayles]

Done. I sent it to you.

[marc_a]

Hi @jhayles,

See all the answers to all your questions below.

1.) To change the font size of your “Date”, go to your title element settings and locate the subline text format section.

2.) You can go enable the Cornerstone builder in your post by going to Pro > Settings then enable the posts or you can use Layout Builder to design your posts, once you create a single Layout Builder and assigned it to blog posts it will automatically apply to all blog single pages.

3.) Please check this article on how you can save a template

• https://theme.co/docs/template-manager#saving-content-templates

4.) To change the featured image of the post at the top to not be so dark, just go to your article settings.

Then in the setup section, you can change the background color

5.) If you want to display multiple terms, I would like you to watch this youtube tutorial and it will explain to you how you can display multiple terms.

• https://www.youtube.com/watch?v=dfhD5M8A8As&t=440s

Hope that helps.

Thank you.

[jhayles]

Thank you…still a couple of issues for me:

1. Screenshot 1: I changed the settings so I can edit posts with PRO. However, when I clicked on a particular post inside PRO<CONTENT area, it brought up the entire layout that I just built. Shouldn’t it start with a clean slate? Why is it bringing in my Layout when I clicked on a Post?

2. Screenshot 2: That Youtube video is helpful, but some of the options are different inside that video vs. what the builder calls them now. I turned on Looper Consumer and hit “All” for that item but it’s still not showing all of the categories. In fact, I don’t even see the word “Categories” available inside the Dynamic Content options.

Can you help with these two items?

link to screenshots: https://www.dropbox.com/sh/7ade3mxqk9szfef/AACVrKN025TQJbPAPwMlIaNDa?dl=0

[marc_a]

Hi @jhayles,

1.) The reason why it is showing your Layout Builder template because you created your Layout as Single, not as an archive. I suggest save your template in your Single Layout Builder and create a new Layout Builder for Archive type.

2.) In order to show all the categories, you need to create a new div, then that div is your looper provider. I name the div to Showing Categories on your layout builder.

Then since you already enable the looper consumer to all, it will now show all the categories.

Hope that helps.

Thank you.

[jhayles]

I’m still not understanding the Layout / Template situation…

1. Are you saying that I should save it as a regular template? What is the problem with creating it as a Layout Single?

2. When I tried to create a new blog post and edit it using PRO, I get the Blog title to appear at the top, but the rest of the page has a Grainy Background that I didn’t choose. I want a pure, solid white background to work with, just like the background of my header. (See screenshot)

The blog post title at the top is also not “clickable”. I can’t click on it and change the name…

[marc_a]

Hi @jhayles,

When you click edit on one of your posts it will redirect you to that screen ( I am referring to your screenshot ). You cannot change the title at the top because it is a fixed template. If you want to customize the style of your single blog pages, it is advisable to use the Layout Builder. Where you can create stunning single blog pages. Please check the videos below for a better understanding of the Layout Builder functionality.

• https://www.youtube.com/watch?v=Vkwk9YCexL4&t=1s
• https://www.youtube.com/watch?v=L1719j7J7LE&t=5s

Hope that helps.

Thank you.

[jhayles]

I understand more about the templates now.

But I have a new issue…I created a Blog Post Layout to use as a template but my picture, name, and the Facebook link at the top will not align vertically the way I want them.

https://experiencethesprings.com/testing-post-6/

Can you help me with those settings?

[jhayles]

Also, when I brought up a post to edit, it won’t allow me to add anymore sections or anything to the post. It adds them but nothing shows up on the screen. I don’t understand how this works. I’m sorry for the confusion.

[jhayles]

I’m sorry, I need to clarify the picture, name, and Facebook icon need to align Horizontally, not vertical. Sorry about that.

[ruenel]

Hello @jhayles,

You need to check the tag of the elements. Keep in mind that you cannot nest <a>. You will have to use this tag on independent elements and not on nested elements.

By default, the Aside element is using <a> tag. And since you have added the button element with the Facebook icon that is also using <a> or a link, you need to remove the tag in the Aside element so that it will not create an issue that broke the layout and that is what happens in your layout.

If you want to have an author link, you have to insert the Facebook button on the same level as the Aside element instead. And the only way to do that is to insert a row first.

Sample element structure:

Hope this makes sense.

[jhayles]

I wish it made perfect sense, but I’ll try to find more tutorials on it.

What about this questions about creating and editing new posts? “Also, when I brought up a post to edit, it won’t allow me to add anymore sections or anything to the post. It adds them but nothing shows up on the screen. I don’t understand how this works.”

[friech]

Hi Jhayles,

@jhayles

What about this questions about creating and editing new posts? “Also, when I brought up a post to edit, it won’t allow me to add anymore sections or anything to the post. It adds them but nothing shows up on the screen. I don’t understand how this works.”

That is because you did not add the dynamic The Content element on your Layout. That is the element that will output your post copy content dynamically.

The Layout is the Template, everything you put on the Layout should be dynamic, like Title, author, categories, etc.

The Post is where you write your copy content, you can just use the WordPress default editor for this. But if you want to have styling controls on your copy content, then yes you can use the Cornerstone’s Content builder for posts.

I check your other Layout named Posts Archive Layout, I assume that is supposed to be the Layout template for your Blog index page, but that is a Single Layout, so it’s not going to work as a blog index template.

On the new Layout creation modal, you get to choose if your Layout is Single or Archive, choose the Archive for Blog index layout and for categories page and other type of archive pages.

Then assign that Layout in Blog page using the Condition Blog is being viewed

Hope it helps,
Cheers!

[jhayles]

1. When I used “The Content” as dynamic it brought in all of the content from my Home Page. Why is it doing that, and how do I change it?

2. When creating a template for single blog posts am I supposed to save it as a regular “Template” or do I save it as a “Layout Template”? What’s the difference between those?

3. I just noticed that my blog post elements are not staying in position the way I want. The blog post “Cards” I created are adjusting their alignment based on how much text is written. That’s causing them to be different sizes (see screenshot). I want them all to remain the same width, height, and the borders to remain the same for all blog posts. How do I do that?

4. I didn’t know what I was doing when I created the Posts Archives Layout. How do I change that to an Archive Layout? I don’t see the option to do that.

[ruenel]

Hello @jhayles,

• When I used “The Content” as dynamic it brought in all of the content from my Home Page. Why is it doing that, and how do I change it?

This is because you are not editing the correct template or did not assign the template. If you go to Pro > Layouts, you will be seeing unassign templates

• When creating a template for single blog posts am I supposed to save it as a regular “Template” or do I save it as a “Layout Template”? What’s the difference between those?

You will have to go to Pro > Layouts and create a template by selecting either a single layout or archive layout.

• I just noticed that my blog post elements are not staying in position the way I want. The blog post “Cards” I created are adjusting their alignment based on how much text is written. That’s causing them to be different sizes (see screenshot). I want them all to remain the same width, height, and the borders to remain the same for all blog posts. How do I do that?

This is because the Flexbox vertical alignment of the “Post” column element setting is set to the center. It needs to be set to “Start”.

• I didn’t know what I was doing when I created the Posts Archives Layout. How do I change that to an Archive Layout? I don’t see the option to do that.

The Post Archives is the blog index, category archive, tag archive, author archive, date archive or any archive page that displays post items. If you want to create a custom archive layout, you need to go to Pro > Layouts and then create a layout specifically for the archive. You can then assign this layout by using the condition:

To avoid getting from back and forth, please provide the following:
1.) A mock layout of your single blog post
2.) A mock layout of your blog index or archive page

Best Regards.