Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 27, 2025 at 1:12 pm #1478115
    beyond-flora

    Hi Krisi-Team,
    is it possible to get a similar effect with the portfolio entries as on the website (see link below)?
    It’s about the different colors including the labeling in different font sizes.

    Thank you, Daniela

    February 28, 2025 at 6:02 am #1478198
    Ismael

    Hey beyond-flora,

    Thank you for the inquiry.

    You might be able to achieve the same layout using the Masonry element. Set Content > Captions > Element Title and Excerpt Styling to the second option, and set Element Title and Excerpt Display to “Display on mouse hover”.

    Regarding the unique overlay colors, you can try this css code:

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(2) .av-inner-masonry-content {
    background: rgba(52, 25, 75, 0.95);
}

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(3) .av-inner-masonry-content {
    background: rgba(32, 192, 90, 0.95);
}

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content {
    background: rgba(67, 20, 255, 0.95);
}

    The css code above should adjust the overlay color of the first 3 items in the masonry grid.

    Best regards,
    Ismael

    February 28, 2025 at 10:40 am #1478232
    beyond-flora

    Hey Ismael,
    That’s fine and a good Idea with the Masonry element. Thanks!
    How do I do this with the other entries? I think 3 – 5 different colors are enough. Can I add multiple child numbers to the colors? I think I’ll create about 30 entries.
    And another question:
    Is there a way to show a description in addition to the title?
    I selected to display titles and an description in the Masonry element, but only the title is displayed.

    Thank you, Daniela

    March 3, 2025 at 5:21 am #1478422
    Ismael

    Hi,

    Thank you for the update.

    Can I add multiple child numbers to the colors? I think I’ll create about 30 entries.

    Yes, you can assign the background color to multiple entries. Example:

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(12) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(16) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(20) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(25) .av-inner-masonry-content {
  background: rgba(67, 20, 255, 0.95);
}

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(5) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(13) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(17) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(21) .av-inner-masonry-content,
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(26) .av-inner-masonry-content {
  background: rgba(32, 192, 90, 0.95);
}

    Is there a way to show a description in addition to the title?

    Are you using the Advanced Layout Builder to build the posts? If you are, you will need to create an excerpt using the post’s Excerpt box.

    Best regards,
    Ismael

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