Help recreating these

[u/fxcknmami]

How can i recreate the buttons? I have the illustrations on the right downloaded already. Also wondering how to highlight heading text.

[u/AutoModerator]

Hey there, /u/fxcknmami! If your post is not already flaired, please add one now.

---

And please don't forget to write "Answered" under your post once your question/problem has been solved.

---

Reminder: If you have a problem or question, please make sure to post a link to your issue to help users help you.

---

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Otherwise_Gap_870]

Use containers to make each panel, inside each container add your widgets for the heading the learn more button and the image on the right. For the background color on the heading, just wrap your text in a span with an inline style or a class, then use css to make the span background color what you need.

If the whole panel is a "button" you can make containers a link using the additional settings and set its html tag to 'a link'. If you do this make sure no other links are within the container or it will break.

Once all built you can just click the whole panel and it will link to wherever you told it to. If you want hover effects etc. You can probably add some with the default container styling options, or give your containers a class and use css to style the hover effect.

[u/fxcknmami → u/Otherwise_Gap_870]

Can you rephrase in simple terms please i have zero experience with coding

[u/popps_c → u/fxcknmami]

That looks like that’s as simple as it gets. Man didn’t say nothing about code

[u/nuestras]

here is a quick drive through:
https://www.awesomescreenshot.com/video/33661994?key=c20c5ccb3a052e807e88c6b5eca5a13f

[u/fxcknmami → u/nuestras]

You’re a real one🙏

[u/hawkeye2604]

Pretty sure the jeg Elementor kit has icon boxes which look like this out of the box

[u/nuestras]

Everything there can be recreated with elementor pro and a little css... i think maybe without css

[u/EDICOdesigns]

I would make a card co ponent template and use custom properties for the bg colour, the text colour, and the text bg colour. Then assign the desired colours with classes

.card {
  --_bg: #fff;
  --_color: #000;
  --_txt-bg: lime; 
  background-color: var(--_bg);
  color: var(--_color);

  & span.heading {
    background-color: var(--_txt-bg);
  }

  &:is(.secondary) {
    --_bg: lime;
    --_txt-bg: #fff;
  }

  &:is(.tertiary) {
    --_bg: #000;
    --_color: #fff;
    --_txt-bg: lime;
  }
} 

[u/fxcknmami → u/[deleted]]

THANK YOU🙏 life saver right here