Icon Box like betheme demo "dietitian2"

ozard

Hi,

how do I create a icon Box (e.g.https://prnt.sc/jxlevc) or rather these text boxes (e.g. https://prnt.sc/jxlfnv) with those smooth edges?

This is the Example Site: 

http://themes.muffingroup.com/be/dietitian2/

Thanks in advance.

regards, ozard

Pablo

Hi,

Let's start from Shortcodes, this document is your guardian angel (http://themes.muffingroup.com/be/splash/), with this doc, you are able to do everything in BeTheme.

Ok, first of all, create new section, then create a wrap.

In this wrap, Add new item named Column.

http://prntscr.com/jxlmyg and edit it.

https://prnt.sc/jxlfnv

As we see, at the top, there is an image, so, go to Shortcodes and find a Image

http://themes.muffingroup.com/be/theme/shortcodes/typography/#image

Copy code and fill it properly

[image src="PathToImage" border="0"]

Then, We see, that there is a space between text "Food products" and image, so, we add a divider.

Again, go to Shortcodes for Divider (http://themes.muffingroup.com/be/theme/shortcodes/typography/#divider) and make a height. for it, let's say, 30px

[divider height="30"] - important to know, dont type at the end PX.

After divider there is a bigger text, so we use basic CSS.

<h5 style="color:white"> Over 300 <br> food products</h5> (<br> is a break, like divider)

Then we have a space, so again divider.

[divider height="30"]

So, at the end we have a text.

Let's do a text with basic html paragraph.

<p style="color:white; text-align:left">Nam egestas(...)</p>

Change background color:

http://prntscr.com/jxlqyt

And add border-radius in Custom | Styles to make smooth edges.

http://prntscr.com/jxlvm0

Final result: http://prntscr.com/jxlrno

Just copy this column and change the text and color of background.

http://prntscr.com/jxlrbo

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ozard

Hey Pablo,

thank you very much for that detailed explanation >- it worked fine.

Is it possible to do same with a pricing item? espacially the border-radius?

Thanks

Bryan

If you enter all of the content into one column item and give it a background then you could make the borders round using this css ( you can paste it into the column custom css)

border-radius:10px; overflow:hidden;

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

ozard

Thanks, I did not consider this option.