[Support request] Content is not Pleasant to Read

[optimizeit]

Hello, I am working on a content marketing website where I want it to look pleasant to eyes when reading.

But right now everything is fine but the content itself is very unpleasant to read.

Infact GeneratePress’ Documentation looks better than this content typography.

Please advice something to improve.

For Example: https://www.jotform.com/blog/mixing-multiple-fonts/

Check the font and all the looks of the site’s text part. It is much better than mine. I even tried to replicate with my website using the Chrome Developer Tools but it doesn’t match at all. Replicating same setting makes it look different on GP always.

Please help.

Thanks.

[David]

Hi there,

so the jotform site is using the following styles for its body text:

Font Family: Open Sans
Font size: 18px
Font weight: regular (400)
Line-height: 1.9

Let us know.

[optimizeit]

Yes, I did the same and you can see the difference: https://i.imgur.com/6XcO9Bf.png

There is something wrong. The same setting works different (but correctly) on the simple html page as well. But if I use it on GP, it becomes very problematic.

Also, texts are not that clean or soothing to watch. (Not like most of the content-marketing websites are in terms of soothing)

Please check.

[David]

I am not seeing the same style settings on your site…
They are also using the color: #333; and add this CSS to change the font rendering and letter spacing to match:

body {
    -webkit-font-smoothing: antialiased;
}
.entry-content p {
    letter-spacing: .2px;
}

[optimizeit]

Okay. I did the changes all of them as we discussed which you can check now.

Do you think if something is still missing?

There is a gap between the lines (which I am unable to match).

Screenshot: https://i.imgur.com/VDY68s3.png

Thanks.

[David]

Looks like you just need to adjust the Line height to 1.9 in Customizer > Typography > Body …. you currently have it at 1.5 and the bottom margin set to 1.9.

[optimizeit]

Thanks David, It is working fine. I will see more and let you know if something else I might not do myself.

1. I know GP Support recommends whatever a user demands but according to you (since you have good experience), what else do you think I can do to make the content look more interesting in terms of CSS or similar or some different font?

Niche: Content Marketing.

2. How can I change the color of the content of single post (which is just text and not heading or title or something else).

3. Is there any typography which I can use to show the code in such possible way within the post?

Something like or similar to this: https://i.imgur.com/pBva4at.png

4. I have never used template thing of WordPress. But, How can I use the template with GeneratePress and Elementor Pro where I can decide different kind of single post designing based upon my choice from here: https://i.imgur.com/okAyKMK.png

If there is something wrong I am guessing here (or understanding wrong). How can I have different kind of single post styling based upon my choices which I can decide each time I post something?

Like, I want a category of posts to have black background and white text and in other category white background and black text.

Thanks.

[David]

1. my personal view: I like keeping things simple with the prime objective to make it easily readable – I think the font matching and spacing you have applied does that. Introduce a little contrast with heavier weight headings and darker links.

2. Is this the text colour of the single post ?

3. that type of syntactic highlighting will require a plugin, eg.
https://wordpress.org/plugins/code-syntax-block/

4. Elementor Pro’s templates are not selected in that way – youll need to read up on their Theme Builder templates and how to assign them by Post Category

[optimizeit]

Thanks for the reply.

1. Yeah, I think so. But, If you could recommend the changes yourself and I will apply them.

2. I want to change the color of the text of this part: https://i.imgur.com/odbOBZc.png (Not any headline just paragraph text)

3. Thanks. I will try to use it.

4. Well, Blog Part is being handled by GeneratorPress. How can I use elementor to change the color of the GeneratorPress Blog Elements based upon category?

View post on imgur.com

I want to change the background color of the blog page to black or gray and text to white for some specific categories.

Thanks.

[David]

1. Sorry little out of scope for providing design advice – probably best to ‘copy’ the jotform headings

2. in Customizer > Colors > Content you can change the Text, Links and Headings independent of each other.

4. You cannot use Elementor to edit/style the GP Theme. Is this the Single Post you’re trying to change ?

[optimizeit]

Hi.

I will try to do rest of them.

4. You cannot use Elementor to edit/style the GP Theme. Is this the Single Post you’re trying to change ?

Yes, That is Single Post.

You can check URL which I have given in secret field.

Header and Footer is ElementorPro.

But, content part or single post is GeneratePress.

I want to edit the Content / Single Posts Part basis upon the category I am posting in.

Example:

Marketing Category: Text Color : Black and Background Color : White.
Technology Category: Text Color: White and Background Color : Black.

[Tom]

Hi there,

You’d need to use CSS to do that.

For example, if your category is named “Marketing”, WordPress will add this class to the article container: category-marketing

Now you can do this:

.separate-containers .category-marketing .inside-article {
    background: #000;
    color: #fff;
}

.separate-containers .category-marketing .inside-article a,
.separate-containers .category-marketing .inside-article a:visited {
    color: #fff;
}

.separate-containers .category-marketing .inside-article a:hover {
    color: #ddd;
}

You can duplicate this for any category, you just need to update the category name.

Let me know if you need more info 🙂

[optimizeit]

Okay, but there isn’t any way we could do it directly using Elementor?

[David]

If you’re using Elementor Pro then you can use their Theme Builder templates to create ones for your various Single Posts.

[optimizeit]

How do I use the GP for the blog part?

Because, I think if I make that in theme builder, I will have to give up GP?

View post on imgur.com

[Author]

Posts