How To Create a “Call Out Box” In WordPress
Written by: Eileen Lonergan
To create a “call out box”, a piece of text that is highlighted in a special colored box, you will need to create a div code. My code also has a shaded effect to lift it off the page. Remove that section if you just want the colored box.
border-style:none solid solid;
border-width:0 1px 1px;
font-family:Georgia,”Times New Roman”,Times,serif;
box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #A98A67;
-moz-box-shadow: 10px 10px 10px #A98A67;
Please modify the code according to your needs: height, width, font, margins, etc. I called this one beaches, but you name it whatever is appropriate.
Put that code:
Dashboard >Appearance >Editor > Style.CSS
Look for this: /* You can add your own styles below this line. */ add the code below this line
Then, go to the page where you want the call out box to appear. Just before the text that you wish to appear in the box, insert this <div id=”beaches”> text here then when you are done with the box close the div tag </div>.
I recently wrote an update to this post, with a much simpler method, please visit: Easy Div Code for Call Out Box | How to Grab Your Readers Attention.
Eileen Lonergan designs WordPress websites for small businesses. She is based in MA but is lucky enough to have clients all over the world. Questions on design or looking for a website, please call 508.317.7355 or email, email@example.com.