A Cheap and Powerful Website


A Cheap and Powerful Website


Most new e-business owners realize they need a website that looks professional. But how elaborate do you need to be? How much energy, creativity and money should you invest so that visitors gasp, “Wow – what a beautiful website?”
Experienced business owners know: Your goal is to create a website that sells, not a site that wins the electronic version of Miss Universe. Most of the time you’ll want to win sales contests – not beauty contests.

Remember the commercial about the beer and the dog? A man sends his dog into the kitchen to get him a beer. We hear sounds of a refrigerator opening and a can opener humming…and then we hear lapping sounds. Oh no! The dog is drinking the beer!
Great commercial, right? Except … can you remember the brand of beer?
And of course we’ve all seen that big pink battery-powered rabbit. But many viewers can’t remember the sponsor’s brand.
(1) Emphasize your marketing message.

Recently I heard a speaking professional say, “My speaking wardrobe is designed to avoid calling attention to me. When the audience is thinking, ‘What a beautiful suit!’ or ‘What a mess!” they’re not listening to my message.”
Your website works the same way. Stay focused on the content.

(2) Use graphics sparingly.
Graphics take awhile to load. And what sells your product? Not graphics – copy.
Research shows visitors seek information. So use graphics to convey specific messages. A fitness site could show a before-and-after. And real estate sites can show examples of real houses.

(3) Use meaningful graphics.
One award-winning site featured a menu on an elaborately drawn 3-ring notebook. The words were hard to read and frankly I’m not sure I remember what the site was all about. A 3-ring binder could be a calendar, a student notebook, or …
But let’s say you want to target a business audience. You’d show pinstripes and briefcases. Sure, your target market wears business casual and carries canvas. But they’ll pick up the symbolism, especially if you’re trying to differentiate yourself from a leisure or family market.

(4) Skip flash and frames (usually).
You probably know this already. Search engines don’t like frames and your visitors will get impatient waiting for flash to load.
If you’re a famous musician (like Coldplay) or author (like Lawrence Block) you can create an elaborate site and your fans will wait half an hour, if need be. They’ll expect something out of the ordinary.

And if you’re a web designer, you probably need to showcase some of your tricks.
But most of the time, I believe websites are like basketball games. Web copy is out on the court, putting points on the board. Readers look for smooth moves and sharp uniforms but they’re mostly paying attention to the action.
Graphics remain on the side, cheering the team. But let’s face it: most of us don’t come to a game to watch the pep squad.

(5) Create a great headline for each page.
Research shows, over and over, that readers respond first to your headline. If they’re intrigued, they’ll go on to read your copy.

Readers look first for headlines that communicate, “I share your pain!” They’ve got problems and they’re surfing for solutions. And they don’t have much time.
Bottom line: Focus on creating and communicating a great marketing message. Frame your message so you come across as professional – but keep your website focused on learning how you can provide solutions to their challenges.

Dispatch is a Magazine style blog for your new website. Each of its features have been designed and built using GeneratePress and WP Show Posts. As expected of a Flint Skin Site it uses Custom CSS. At over 350 lines it is recommended, but not necessary, to move the Additional CSS to a Child Theme style sheet. So lets get onto making it your own.


Without WP Show Posts plugin, this Site wouldn’t exist. Another awesome product from Tom Usborne, WP Show Posts does exactly what the title says. Anywhere and everywhere in the case of Dispatch. So much so there is a dedicated page to explain its uses Pagina web Economica.

Social Icons – Desktop

The Lightweight Social Icons widget has been added to the Header Widget. It only displays on Desktop as the Widget has the hide-on-mobile and hide-on-tablet-classes.

Social Icons – Tablet and Mobile

They are also displayed in the Slideout Navigation. Using the Slideout Widget.

Social Icon Colors

Colors are changed within the widget.


Can I use a page builder with Dispatch?

Yes, you can if you wish. The only rule is that you need to use the Default Template for your Pages and Posts. To create a full width blank canvas template then follow these steps:

  1. Appearance > Elements > New Layout
  2. Disable Content Title
  3. Set Page Builder Container to Contained or Full Width
  4. Set Display Rules to the Pages you need a Blank canvas on.

How do I change colors?

The majority of Volumes colors are controlled by the Customizer. There are some Elements that are part of Volumes features that require CSS. This article covers where to make those changes:

How to change the Custom Colors

Logo and Site Identity

Dispatch does not have a logo, just the Site Title.
You can change the Site Branding or add a logo via the Customizer > Site Identity

Page Layout – Container Margin

Dispatch uses the Customizer > Layout > Container > Separate Containers option.
To maintain horizontal alignment the left and right padding has been removed on the desktop.

The following CSS adds left and right margin to offset the padding.

@media (min-width: 769px) {
    body {
        margin: 0 30px;


Dispatch uses the Primary Navigation for the main menu and Secondary Navigation displays post categories.The majority of their layout and styling is controlled by the Customizer. With these exceptions:

Menu underline on hover

The animated underline is set using this CSS. Changing the color of the bar is covered here:

How to change the Custom Colors

Secondary Navigation Location

The Secondary Nav is placed using a Hook Element as opposed to the Customizer, which is set to No Navigation. This is so the secondary navigation is dynamically placed. You will notice it doesn’t appear on the posts. It also appears below the Header Element on the front page.

More information be found on that here:

Hooks – Custom Theme Elements

I want to use the Customizer to control the navigation

Simply delete ( or Quick Edit > Set to Draft and Save ) the Magazine Grid header element to revert to the normal customizer controls.


The majority of the Blog settings are controlled within the Customizer > Layout > Blog. Of course it wouldn’t be a Flint Skin site if some custom customization wasn’t done. These comprise of re-ordering the post meta layout and fixing the height of the featured image.

To maintain a consistent style the Blog posts have been styled to match the WP Show Posts Plugin. You can read more here:


Single Post – Sidebar and No Sidebar

The default setting ( in the Customizer ) for the single post includes the right hand sidebar. If the sidebar is removed, like it is on this post, then the content container is narrowed for easier reading.

Single posts container without sidebar are resized by this CSS:

body.no-sidebar .site-content {
    max-width: 720px; /* Adjust the size to suit */
    margin-left: auto;
    margin-right: auto;

Options to remove the Sidebar on a post by post basis can be done using either the disable elements module or the layout module:

Layout Metabox Overview

Layout Element Overview

Page Heros – Header Elements

The Hero Headers are built using the Elements module. Volumes Hero Headers are covered here:


Magazine Grid – Front Page

A custom WP Show Posts Grid displaying 5 posts.
More details on creating your own list for this grid and the ones used in content are covered here …… WWWW ……

The Header Element contains just the WP Show Posts Shortcode. And requires these two Element Classes: wpsp-grid wpsp-card

Single Post

The single post uses template tags for dynamically displaying the Post Title, Category, Date and Author. The Post Title is set as the H1 and it uses the featured image for its background.

Background Image Inset Shadow

To improve readability an inset shadow is cast on to the background image. This uses the Element Classes field. To add the shadow to a new page header just add the overlay class in that field. Likewise you can remove it from this Header Element to disable the shadow.

Archives Header

This simple header places the archive title above the secondary navigation.


Sobre el autor