How to create text blocks, overlays, split columns for blog posts in WordPress Free

If you’re running your WordPress blog on WordPress.com Premium or from a paid domain, then there should be a number of plug-ins available that can help spice up your posts. However, if you’re using WordPress.com Free like I’m using now, you’re out of luck. There’s no access to CSS file, no Javascript, no plug-in, and there are only a few HTML tags you can use in your posts.

Luckily, WordPress.com Free provides enough building blocks to assemble amazing UX designs if you know how. In this post, I’ll talk about some HTML workarounds I learned over the years while working on similarly restricted platforms *cough*vBB*cough*MediaWiki*cough* and share some limitations in WordPress’s HTML editor I encountered.

Okay, let’s start with a layout I have recently worked on. This design involves a number of features that cannot be done by the visual editor. These features are:

  1. Custom text blocks (HTML div tag)
  2. Overlay buttons (inline CSS position styling)
  3. Split columns (inline CSS position styling)

To implement them, you need to use the HTML editor.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SWITCH TO HTML EDITOR

To enable HTML editor, see the support article below:

https://en.support.wordpress.com/editors/

Here’s an article on Code restrictions in WordPress.com, just so you know what can and cannot be done:

https://en.support.wordpress.com/code/#html-tags

What I’ll be looking at is CSS styling. Unfortunately, custom CSS is not a free feature, according to the support article here:

https://en.support.wordpress.com/custom-css/

Inline CSS, however, is supported and this is what I’ll be using in these designs.

CREATE AND STYLE DIVIDER BLOCKS

Dividers are fundamental HTML building blocks of modern webpages, to create a divider in HTML editor, simply type into the editor:

<div>My first invisible divider!</div>

Dividers can be used for applying CSS styling to texts, arrangement page elements and drawing text boxes, etc.

Invisible dividers are not very interesting, I’ll add a border, color the text and apply a background color…

<div style="border: 1px solid gray; color: blue; background: yellow;">A divider with gray border, blue text and yellow background.</div>
A divider with gray border, blue text and yellow background.

 

There are a few HTML tags you would find handy, they are <p>, <img>, <table>, <div> and <span>. The other HTML tags supported by WordPress such as <strong>, <hr> or <blockquote> are already included in the Visual editor as Bold, Horizontal line, Blockquote and so on. I recommend a read on the aforementioned HTML tags from W3Schools.com references here:

http://www.w3schools.com/tags/default.asp

For CSS styling, I find “background”, “color”, “border”, “width”, “height”, “font-size”, “font-family”, “margin”, “text-align”, “padding” the most useful properties to know. They’re frequently seen in formatting and precise positioning of elements in posts. There’re also “position” and “display” which are rather intermediate-advance CSS properties I’ll be discussing in the next sections. A complete reference of these CSS properties is also available on W3Schools.com:

http://www.w3schools.com/cssref/default.asp

CREATE OVERLAY EFFECT

A divider with CSS property “position:absolute” wrapped inside a parent divider with CSS property “position:relative” will create overlay effect. When used in combination with “left”, “right”, “top”, “bottom” or “margin” properties, the “position:absolute” element can be positioned precisely within the “position:relative” element.

Combining the knowledge of CSS and HTML I have showed in the last two sections, you can create any sort of layout imaginable. In the case of the layout I have at the start, each individual text block is created from the following code:

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;">
            <a style="text-decoration: none;" href="#">
                <strong>
                    <span style="color: black;">Source</span>
                </strong>
            </a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

There’s a thing with these half-visual, half-code platforms that prevents you from copypasting the above code into your HTML editor. The HTML editor does not ignore line break and white space. This means, careless indentation and line breaking can…break the layout’s spacing completely. The proper code to get the above result is actually this:

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

SPLIT CONTENT INTO COLUMNS

If you notice the piece of code I’ve just showed, there’s a “display:table-cell” property in the “position:relative” divider. What this property does is causing the divider to behave like a table cell: equal height within the parent divider and vertical alignment top.

Setting two inner dividers with “display:table-cell” and setting the width of one divider to a desired percentage, I can create a simple split column design as follow:

<div style="border:1px solid black;display:table;width:60%;">
<div style="border:1px solid black;display:table-cell;width:50%;">First column</div><div style="border:1px solid black;display:table-cell;width:50%;">Second column.</div>
</div>
First column
Second column.

 

It’s by good convention that the parent divider should have “display:table” property and a specified “width”. Without “display:table” property, the inner cells will not resize according to the size of the table and without “width”, the table will autofit the content.

HOLY MOLY! BUGS IN THE EDITOR

To hell with good convention in the complete source code of the layout from the start…

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell; width: 50%;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
<p style="text-align: justify; padding-left: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</div>
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
<p style="text-align: justify; padding-left: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</div>

 

I didn’t use “display:table” and “width” for the parent table. This is not proper, however, there’s a glaring flaw with WordPress’s HTML editor that forces me to keep my code as small as possible: The longer the code is, the longer it takes to auto-save a draft. And since these scripting elements get special treatments for security reasons, they have quite an overhead. Eventually, too much code will freeze the browser and chances are, you won’t be able to open the draft afterward.

Yes, that actually happened to me before.

Hence, I recommend saving your code frequently in Notepad just in case. If you need more reasons to save your code now, switching back and forth between Visual and HTML editors, publishing the page, and even pressing Preview button, can cause the parser to strip some of your incomplete/bugged codes, or parse all those special characters in your code into HTML Entities.

No, you cannot “Undo” that, the editor doesn’t allow it.

At this stage, some of you who’re familiar with HTML must also be wondering why I didn’t use <table> structure and style the <td> cell element with “position:relative” property. After all, HTML tables offer better browser compatibility than “display:table-cell” dividers.

To answer this, I must bring up yet another limitation of WordPress.com Free: HTML tables cannot be styled as extensively as with dividers. Its “border” property cannot be set to 0, its maximum “width” cannot be specified, even the “cell-padding” cannot be removed. I suspect they can only be changed in the theme CSS file, which I cannot access as a free user.

HTML tables in this Twenty Fifteen theme are narrower than dividers by a few pixels in desktop view.

Divider
My Table

A few pixels make a difference in the world of UX design.

Advertisements

Published by

fujihita

Self-learner, designer, author and programmer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s