How to make a colour block on your page

coloured blocks in your website

I am showing simple code to make a colour block on your page.This simple code is not more complicated than using a shortcode from a plugin. And although I used the style directly on this page, the proper way should be creating a class inside your stylesheet, so that you have central control on your coloures. Another point is that your site uses the same attention blocks all over the pages and posts.

In this post, different kind of possible blocks (divs) are shown. Most of the code is also posted and ready for you to use. To all of these codes I added padding 10px. Also background-colors or other css can be inherited from your style sheet. Step in the world of basic CSS and use plugins only for more difficult stuff. (plugins can slow down your site, can be a hazard to your site. Try limit the use of plugins, but fairly spoken I also use between 10 to 20 plugins per website)

I wrote this post 2 years ago. Alll the code is just written on this post. I realize that the blocks are not aligned, This is because of the align feature. I aligned the first block to the full (width: 100%). This full width is often used, but normally without the shadow and border. The video is aligned with a simple (text-align: center)

When you try to use the code, please use the Text editor of WordPress of the Visual editor.   Basic code of a block starts with <div>  and ends with </div>. In the first <div> the style of the block is written. Styles like background color, size of the block and position of the block.
style="background-color: #b2ccff; width: 100%; height: auto; margin: 15px 0px 50px 0px; border: solid 2px #888888; box-shadow: 5px 5px 10px #888888; padding: 10px 10px;"

The same block without the border and shadow.
style="background-color: #b2ccff; width: 100%; height: auto; margin: 15px 0px 50px 0px; padding: 10px 10px"

In the blocks below, you will see the complete code including the ‘DIV’

In this first orange block, is a png. picture situated at the bottom of the block. When visiting other sites, you will sometimes see this arrow. It is used at the end of blocks, so that he user will know that there is more to come. With the arrow, the user is more willingly to scroll down.   In the code of the block, I used height: auto; In this case the amount of text doesn’t matter for the postioning of your arrow.   <div style=”float: right; background-color: #f48e34; width: 600px; height: auto; margin: 15px 15px 50px 15px;”> The text can be situated between <p>……text here..</p>   In the code of the image use style=”margin: 0px 100px -27px 0;” to position the picture. arrow


giethoornbutton The purpose of this block is only the background-color. If you need a white block and insert a picture, you don’t need to make an extra div.   For finding the code of any color you can visit  any color picker on the web. I use normally the one from W3 schools. I also have installed an extension in Chrome.   The code of this block:

 <div style="float: right; background-color: #eaeac5; width: 600px; height: 500px; margin: 15px 15px;">   <p>the text has to be entered here</p>   </div>


Here is a block inside a block. This can be used to get more attention. For your list items for example. The block can be positioned with margin and float.

  • list item 1
  • list item 2

In this grey block, the white block is created. To get the text on the right spot is in this case more complicated. Best practice which I experienced is to start  in the text editor and not in the visual editor.   The code which is used:

   <div style="float: right; background-color: grey; width: 600px; height: auto; margin: 15px 15px;">    <div style="float: right; width: 300px; height: auto; margin: 15px 20px 15px 15px; background-color: #ffffff;">Here is a block inside a block text.....<ul> <li>list item 1</li> <li>list item 2</li></ul></div>   <p style="color: white; margin: 0 10px;">In this grey block.....</p>   </div>


here is a column of text. Despite mine original single column, still can be turned into multiple columns. Colors can be used to attract the users attention, same as different typology and more and less contrast in the text.   The code:

 <div style="float: left; background-color: #cfa6cf; width: 280px; height: 1000px; margin: 15px 1px 15px 0px;">
 <p style="font-style: oblique; padding: 15px 20px 15px 20px; color: white; text-align: justify;">here s a column of text. </p>   </div>

second block

  • list apples
  • bananas or something to sell

the code:

<div style="float: right; background-color: #c5c530; width: 280px; height: 1000px; margin: 15px 15px 15px 1px;padding: 10px 10px;"> <h2 style="color: white; margin: 15px 15px;">second block</h2>   <ul> <li>list apples</li> <li>bananas or something to sell</li> </ul> </div>


Conclusion: With blocks in your website, more color can be brought. The user eyes will be attracted to some colors, some fonts and some contrast. Using this feature one or to times on a page can assist users to make a certain choice.   Next post is also talking about  other styles inside the WordPress blog   Code of this block:

 <div style="clear: both; background-color: #b2ccff; width: 480px; height: 600px; margin: 15px auto; border: solid 0px #888888; box-shadow: 5px 5px 10px #888888;">...text..</div>



After changing the theme of my website which uses a different width of the text, I realized two things

  • use auto for height is better
    style=”height: auto;”
  • use clear both before and after each colored block, just because I use often the word float in the code
    style="clear: both;"