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)
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’
<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>
- list apples
- bananas or something to sell
<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>
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
- use clear both before and after each colored block, just because I use often the word float in the code