[Support request] Content is not Pleasant to Read

Home Forums Support Content is not Pleasant to Read

  • This topic has 15 replies, 3 voices, and was last updated 7 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1125413
    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.

    #1125780
    David
    Staff
    Customer Support

    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.

    #1125788
    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.

    #1125814
    David
    Staff
    Customer Support

    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;
    }
    #1125825
    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.

    #1125832
    David
    Staff
    Customer Support

    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.

    #1125849
    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.

    #1126108
    David
    Staff
    Customer Support

    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

    #1126342
    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.

    #1126608
    David
    Staff
    Customer Support

    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 ?

    #1127083
    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.

    #1127316
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1127749
    optimizeit

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

    #1127755
    David
    Staff
    Customer Support

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

    #1127759
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.