Icon Box like betheme demo "dietitian2"

Comments

• Pablo

  June 2018

  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

  June 2018

  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

  June 2018

  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

  June 2018

  Thanks, I did not consider this option.