[Resolved] A few questions.

[Maike]

Hi.

I am stuck customizing the home page design.

#1 I can’t seem to adjust the line height for the post title. There’s abnormally large spaces between the image and the text.

#2 Post Layout. I’ve adjusted the h4 heading to be 8pt, but it looks like it’s much bigger (used for the affiliate disclosure in each post)

#3 Archive Pages. I am trying to recreate a layout similar to my old one. See here: Archive Layout

#4 Featured Content. I’d also be able to display featured content on the homepage again. I mean 3-4 posts in a row with a highlighted background displaying a specific category. … like in the sample of my old screen (scroll half way down the page Food Blog) Basically, I was able to say that after the 2, 3, 4 etc… post there should be a featured section. I don’t see those in the widget builder.

#5 Author Box. Is it possible to create an author’s blog with an image in the sidebar?

#6 Sidebar Picture Categories. This skin seemed to have featured images for the sidebar. I’m trying to figure out through the documentation how to enable it. Ideally I’d like a to highlight a category like ‘Salads’.

I’d appreciate your help.
Thank you,
Maike

[Tom]

Hi there,

1. Post titles on the archive pages use <h2> elements, so you can adjust the line height in Customize > Typography > Headings under Heading 2.

2. The affiliate disclosure seems to just be text inside a regular text widget: https://www.screencast.com/t/1vQJ8eWB7Rr6 – I’m not seeing a heading there?

3. Looks like you’re getting close. You just need to reduce the font size of the titles, and add the date in Customize > Layout > Blog. Might need a little CSS tweaking once you do that, which I’ll be happy to help with.

4. Something like WP Show Posts might be worth checking out: https://wpshowposts.com. We just released an alpha version for 1.0, which has card layouts: https://wpshowposts.com/wpsp-pro-1-0/

5. If you want an image and some text in the sidebar, I would just use a regular Text Widget and add an image/paragraph text. That’s what we did on our Tasty site: https://gpsites.co/tasty/

6. You could likely use WP Show Posts for this as well. An alternative would be a plugin like Recent Posts Extended.

Hope this helps 🙂

[Maike]

Hi Tom.

Thank you for the detailed response! I appreciate this very, very much.

#To 1 – Yes, I see how to adjust the H2 headers. What I’d like to do is to treat the h2 header in a post differently than the one on a category/archive page.
As for the homepage (and archive pages), I’m struggling to reduce the padding/margins for the homepage and the also the category archive pages.

To 2
As for the affiliate disclosure. You are right it’s a bit messy at the moment. There is the one in my footer which is the ‘I’m an Amazon affiliate participant’. Then there is the ‘this is post may contain affiliate….’ which in some posts is inserted through a plugin called post snippets. That’s set to an h4 header. Lately, I’ve gone an manually added this disclosure and set it to h4. It doesn’t have to be an h4, I just want it smaller than the rest of the text.

To 3
I will work on that this evening. Thank you for offering your help. Your service is really fantastic. And to be honest the only reason I haven’t thrown the towel in.

To 4
I just purchased and installed WP Post Show. After seeing the video it seemed exactly what I was looking to do. Just to confirm I can have a separate layout for the ‘home page’ and a category/archive page? I also have a Beaver Builder license, but I remember that was told that I should not override the native WordPress order for the posts (I hope you know what I’m trying to say. But it seems that WP Post Show won’t do this, but instead will just format the latest posts.

To 5
I’d want to have a relatively small image with a circle. Then some blurb about the site and what people can expect. But that’s something I could do in Photoshop.

To 6
If that’s possible with WP Posts Show … that would just be great! My primary reasons for switching from Genesis to Pipdig was that everything took forever to code. However my mobile site speeds with Pipdig weren’t good and there seemed almost nothing I could do. And because Brandon Gaille recommended you guys so highly, I figured it would be worth doing another switch. Needless to say I’d love to get it all done as soon as possible, so I can go back to growing and promoting the site. .

Thank you so much for your support. I really appreciate it. – Maike

[Tom]

1. Try this CSS:

.archive .entry-title, 
.blog .entry-title {
    font-size: 25px;
    text-transform: uppercase;
}

.archive .inside-article .post-image, 
.blog .inside-article .post-image {
    margin-bottom: 5px;
}

You can adjust the font-size as needed.

2. I would just wrap your disclosure in a div like this:

<div class="affiliate-disclosure">
    <p>Your text in here.</p>
</div>

Then you can adjust the size with some CSS:

.affiliate-disclosure {
    font-size: 12px;
}

4. WP Show Posts won’t replace your standard blog/archives. It’s meant as a way to display short, designed lists of posts on static pages. For example, if you want to display posts on your homepage along with other content, WP Show Posts is the way to go. You can make as many lists as you want, and use them throughout your pages.

5. You can make the circle image in Photoshop (or use a square image with CSS to make it circle).

Then just insert the image into a Text widget, and add your text below.

6. Do you have an example of what you’re after here? I should be able to confirm whether WPSP is the way to go 🙂

[Maike]

Hi Tom,

your responses have been so incredibly helpful. While I was ready to tear my hair out last night, your responses have made all the difference. Thank you!

to #1 – #3
Oh, the magic of CSS!!! I am literally giddy right now. THANK YOU. It worked brilliantly. The affiliate disclosure looks exactly what I had pictured in my mind. Yay. Thank you, thank you, thank you.

to #4
Re WP Show Pro.
– Is this going to be similar to a page builder? Like I saw that some of the skins for Elementor were made with Beaver.
– Does this suggest I should create custom pages with Beaver?
– Is that your preferred page builder for Elementor?
I am currently using Thrive as a page builder, but I also have a Beaver Builder license.

to #5
I could be wrong. But I seem to remember that I read somewhere that there are be benefits to creating circle images with CSS (to reduce the file size) instead of custom image. Otherwise I would create a circle image in Photoshop and save i as a png and upload it.
– Do you know if there are speed benefits to ‘manipulating’ the images with CSS rather than making custom images in Photoshop?
– Likewise is it true that images with text overlays slow your site down and that it is better to create overlays with CSS?

to #6
Somehow, I feel you’re going to regret this question. 😉 So, I created a page here that is sort of a mood board. Since they are a bunch of screenshots I made it as password protected site. Password: mood
While I’m not trying to create every single part, overall they are all things I’d like to implement over time.

#7 (new)
I guess a lot of my questions are going back how to handle custom widget areas.
– Can I use the Post Show to create custom widget areas that I can for instance insert for example after the 1st post, the 3rd post etc?
– As far as I cans see there are no standard Post Widgets. Is this something I should solve with a page builder or another plugin?

Again thank you so much for your detailed replies and the CSS code snippets. You’ve been a lifesaver. I’ve heard Brandon say how good the support and I am in full agreement. This is great. Thank you so much.
Maike

[Tom]

Glad we’re making progress 🙂

4. WP Show Posts isn’t like a page builder. It’s simply a tool to create pre-designed lists of posts, which you can then insert into your existing pages (whether they use a page builder or not).

5. It depends on the file size. I think the size differences would be minimal, but I like using CSS as it allows for more flexibility.

Let’s say you add a 100 x 100 square image. First, you’d need to give it a class:

<img src="URL TO YOUR IMAGE" alt="" class="my-circle-image" />

Then you can use CSS to make it a circle:

.my-circle-image {
    border-radius: 50%;
}

6. Most of this is achievable using WP Show Posts Pro. The only things that I can see that wouldn’t be possible are the list of categories and the find a recipe search bar.

The list of categories could likely be done manually using image and columns.

The search bar would likely need to be custom coded if you can’t find a plugin to create it.

7. You can use something like our Elements module to insert a Post List after your posts. However, you can’t choose to insert it after the 1st post and 3rd post. You can only use Hooks to insert the lists into static positions.

Not too sure what you mean by Post Widgets?

[Maike]

Hi Tom.

I am finally getting to work on the site! Thank you, thank you, thank you again for your patience and your detailed response.

Although I still have to do a lot of work to improve the UX, I am already really happy with Generate Press and love the page speed improvements (and increased page views over the last few days :-).

Your support is really outstanding.

I feel it’s probably not going to be the last time, I’ll have questions, but I’ll try to figure out as much as I can first.

Thank you so much.
Maike

[Tom]

You’re very welcome! Glad I could help 🙂

[Author]

Posts