Home Forums Community Forum Multiple blog elements on one page. How to adjust typography separately

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • bookman53
    Participant
    Post count: 8

    I am creating a home page layout that involves multiple blog elements. I have watched videos and read articles in search of an answer but haven’t found one.

    I need to adjust font settings such as font size, color, and line height individually for each blog element. For example in the page layout I’m building, I have a container with 1/3 – 2/3 columns. In the 1/3 column, I have a blog element set to a one column grid with 3 posts that have thumbnails, partial meta, and excerpt.

    In the 2/3 column I have two blog elements, one on top of the other. The first one is set to Large Alternate with one post. The second one is a medium blog layout with three posts. Both of those also have thumbnails, partial meta, and excerpts.

    I need to have the font settings different in the 1/3 column blog element than in the two blog elements in the 2/3 column. How can I set font colors, sizes, and line-heights different for each of those? I’ve looked in the container settings, the column settings, and of course, in the blog element settings. Unless I’ve gone blind or entirely overlooked them, they are not there?

    Is there is a straight-forward way to do this without having to resort to custom CSS?

    Thanks.

    Metro
    Participant
    Post count: 114

    I think your best option is to give your columns a custom class ID and add a simple CSS code for each custom class.

    For example give the 1/3 columns ID blog-1-3 and the 2/3 columns blog-2-3. Then go to Global Options, found at Avada > Options > Custom CSS and add CSS for each ID

    .blog-1-3 { font-size: 18px; line-height: 1.5; }

    .blog-2-3 { font-size: 12px; line-height: 1.2; }

    (This code is just an example.)

    See this article and scroll down to How to apply cutom CSS to an element

    bookman53
    Participant
    Post count: 8

    Thank you. I’ll give that a try. I would have thought Theme Fusion would have built font controls into such an important element as the Blog element, but apparently they didn’t.

    Ammar. S
    Keymaster
    Post count: 1799

    Hello @bookman53

    When it comes to more customised layouts be it for Blog posts or any other post type, we have introduced “Post Cards” elements recently with which you have freedom to create your own layouts, this also means that you can have dedicated font size, color, line height and font family for each of the layout individually as can be seen here => https://share.getcloudapp.com/lluoJJkB

    You should be able to achieve your desired result creating different post card layout and use that on page instead of using the Blog Element, more about Postcards can be read here => https://theme-fusion.com/documentation/avada/library/how-to-use-post-cards-in-avada/

    We also suggest you to watch this video which explains it in details => https://www.youtube.com/watch?v=_xEQOIIaHuA

    Hope that will help with your project, in any case if you need our further assistance please know that you have GrandFathered Support and should be able to open a support ticket.

    Click Here to Get Avada Support

    Thanks

    -Ammar

    bookman53
    Participant
    Post count: 8

    Thank you. I’ll look into that option.

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