Welcome to Barcelona WordPress

Welcome to Barcelona WordPress

Barcelona WordPress provides WordPress support in both Spanish and English language, and was developed in response to the growing international use of WordPress in business.

WordPress is now available in over 42 languages and your content can of course be translated into any language of your choice.

WordPress just has something for everybody, and is designed for easy use and blogging. According to W3Tech, WordPress is now the number-one most downloaded web application in the world surpassing all other Content Management Systems (CMS) and for good reason.  It’s fun, it’s easy to use, and the worldwide support for WordPress continues to grow in leaps and bounds. Websites like Firefox, Ebay and CNN run on WordPress. Come to our Meetups and learn why.

Barcelona WordPress is your local resource for complete WordPress support in Barcelona with bilingual tech support and training available city-wide. We hope you will find a lot of valuable information here, and WordPress support is a phone call away.

Barcelona WordPress hosts ongoing MeetUp in English, check our MeetUp page for the next event.
Feel free to contact me directly to find out more:

Michael Paragon
Barcelona WordPress, Founder
689-949-550

WordPress Global Use Graph, Courtesy of Google Trends
Google WordPress Trends Through 2015

 

Easy WordPress Child Themes

Easy to make WordPress Child Themes.

300x23childthemeposter

Here is an easy to make WordPress Child Theme that you can add to any WordPress theme in under 10 minutes!

 

Themes are what we all love and hate about WordPress. WordPress Themes can add quick functionality and style to an otherwise boring web page. There are thousands to choose from and the selection process can make your dizzy. What frustrates most, if not all WordPress theme users though, is not being able to “paint outside” the themes default settings. By adding a simple Child Theme to your WordPress theme of choice, you can overwrite CSS style sheets safely and add any customization you want. You need to know a little basic CSS, or you can hire CSS front-end designers to help you out, here at Barcelona WordPress.

You must have a WordPress theme installed for this to work. For this example we will use the TwentyFifteen theme as the Parent to our Child Theme.

To make a Child theme simply create a new folder under the WordPress themes folder, and give the child theme folder a name.

Next, open any text editor and create a new style.css file using the fields in the examples below. The file name must be: style.css be careful of course, to add the exact name of the parent theme you are using:

The code starts with a comment /* and ends with a comment */ . Then you add: Theme Name, Description, Author, Version and Template – These can all be named anything you like except for Template! WordPress sees this information and will create a child theme, provided the name of your WordPress theme is written after Template, like this Template: twentyfourteen. It is important to note that the theme template name must be written all in lower case or it will not work!

/*
Theme Name: Child of Twenty Fifteen
Description: Cool Child Theme based on Twenty Fifteen
Author: Michael Paragon
Version: 0.01
Template: twentyfifteen
*/

The last important part of creating the child theme is to add the following line of core code information to your stylesheet.

@import url(‘../twentyfifteen/style.css’);

This tells WordPress to import the style.css file of your theme you only need to add your theme name in lower case like so:

@import url(‘../themename/style.css’);

Completed our new style.css file looks like this:

/*
Theme Name: Child of Twenty Fifteen
Description: Cool Child Theme based on Twenty Fifteen
Author: Michael Paragon
Version: 0.01
Template: twentyfifteen
*/

@import url(‘../twentyfifteen/style.css’);

You can also add a custom image to your Child theme by adding a 300×225 .png and placing it in your new theme folder this should be renamed to: “screenshot.png”.

Give it a try and you will see how easy it is to create a Child Theme for your WordPress website in under 10 minutes!

For more information about customizing your WordPress themes contact Michael Paragon, at BCN-WP.COM

 

 

 

WordPress Managed Hosting and why it’s important

WordPress Managed Hosting and why it’s important

screen-shot-2016-11-07-at-4-04-05-pm

Managed WordPress hosting and why it’s important

This article is from Managed WordPress Hosting Provider, WPHive.org. They have an excellent, all inclusive, Managed WordPress Hosting plan for only $69 per month. The managed plan takes complete care of your website from front to back. Including daily backups, security patches, and routine WorPress management, such as updating plugins and theme care.

Their WordPress website hosting plan includes unlimited bandwidth and 20GB of storage, hosted on LiteSpeed Web Servers. The LiteSpeed Web Server is the 4th most popular web server on the internet.

WordPress is free but managing your website takes skill.

Managed WordPress hosting is important and here’s why.

You might think that once you install WordPress, choose a theme and plugins, and add in your content, you’re done. But that’s only the beginning.

WordPress needs TLC, all of the time, in the form of backups, upgrades and security patches against Malware and brute force hacker attacks. If you install WordPress then you need to make an ongoing commitment to keep your website up to date and secure.

If you have taken the time and trained yourself to manage your WordPress website, and know how to restore it in the case of a crash, keeping it up to date is not that difficult. But, if you are not committed then it’s important to have someone on your team that can handle any issues that may come up, or hire a professional to care for your website. Read Article

Need help with your WordPress website? Contact support at bcn-wp.com or call: +34 689 949 550

WordPress SEO plugin by Yoast

WordPress SEO plugin by Yoast

Wordpress-SEO-Plugin-by-Yoast
WordPress SEO Plugin by Yoast

Be sure and RSVP early for WordPress Meetup in English #3, Saturday, November 22nd, 12:00-1:00pm at MOB.

WordPress in English Meetup co-organizer, Joan Boluda, will present WordPress SEO plugin by Yoast. This plugin is one of he most important SEO plugin ever made, and can help even a mediocre website rank well through it’s own keyword content grading system. The plugin forces the user to adjust webpage copy and provides an on page “grade” for good SEO, that turns from Red to Orange, Yellow, and then finally to Green as a way of indicating your webpage has all of the necessary SEO components including meta descriptions.

I always use WordPress SEO plugin by Yoast for my clients. I believe that it is the most complete SEO solution for your WordPress blog. With tons of features and options this plugin provides an alternate to the users of famous All in One SEO Pack

In this presentation, I will show you how to install and setup WordPress SEO by Yoast and utilize all the awesome features that comes built-in.”

– Joan Boluda

Date: Saturday, November 22th
Time: 12:00pm – 1:00pm
Location: MOB Makers of Barcelona, Calle Bailen 11

(In the conference room)

The Meetup will be followed by networking at the FabCafe.

WordPress Meetup in English is sponsored by Barcelona WordPress. The WordPress Meetups are video recorded, and new presentations are always welcome, contact Michael Paragon to find out more. You can watch all of the WordPress in English Video Series, on the WordPress in English Meetup page, by clicking this link.

Introduction to WooCommerce

Introduction to WooCommerce.

You can RSVP to attend this MeetUp by clicking the “I’m Going” button at our Meetup page: http://www.meetup.com/Barcelona-WordPress-Meetup

This presentation will feature guest speakers Shadi Manna, Woo-Commerce Plugin Developer, and Justin Donlon, from BCN-WEBCLIPS.

Date: Saturday, October 25th Time: 12:00pm – 1:00pm

Location: MOB Makers of Barcelona, Calle Bailen 11 (In the conference room)

The Meetup will be followed by networking at the FabCafe.

WordPress Meetup in English #2 Agenda Overview:

Part I: Presentation by Shadi Manna

Presentation Title: “Introduction to WooCommerce”
Presentation Summary: “WooCommerce is the leading eCommerce plugin on WordPress, currently used by 18% of all eCommerce sites on the web. In the presentation we will go over the basics of setting up WooCommerce to have a fully functional web shop.”

Presentation Agenda:

  • Introduction
  • What is WooCommerce?
  • Product Types
  • Payment Options
  • Shipping Options
  • WooCommerce Plugins

Part II: Presentation by Justin Donlon

Presentation Title: 10 best practices for long-term video SEO every WordPress user should know
Presentation Summary: “Ideas for taking a long-term, quality-driven approach to video SEO ”

1. Use Video to Solve Problems & Provide New Information
2. Make Videos Easy to Browse & Link to Individual Video Playback Pages
3. Use Interactive Video Elements to Connect With Viewers
4. Be Smart & Relevant About Metadata
5. Use Transcriptions for Indexing, Usability & Content
6. Host Your Videos on Your Own Domain
7. Make Sure You Have a Video Sitemap
8. Use YouTube to Preview High-Value Content, Drive Traffic Back to Your Own Site
9. Allow Others to Embed Your Videos
10. Measure How Keywords Impact the Bottom Line

Barcelona WordPress English Meetup group has already begun plans for Novembers Meetup #3!

Date: Saturday, November 22nd Time: 12:00pm – 1:00pm

Location: MOB Makers of Barcelona, Calle Bailen 11

Featured Guest Speaker: Joan Boluda, Organizer from the original WordPress Barcelona Spanish language WordPress Meetup, SEO consultant and WordPress specialist, will be presenting information about the Yoast SEO plugin, one of the most powerful SEO plugins made for WordPress. Stay tuned for details!

You can RSVP to attend this MeetUp by clicking the “I’m Going” button at the Meetup page: http://www.meetup.com/Barcelona-WordPress-Meetup The WordPress Meetups in English are ideal for bloggers and business owners that want to increase their online presence, first time users that want to learn, and developers that offer coaching. Our goal in developing this Meetup group is to create an outstanding network of WordPress support in Barcelona. We welcome you to join our group and meet the Barcelona WordPress community. For more information contact Michael Paragon.

MOB is conveniently located 2 blocks from the Arc de Triomf metro L1 red line.

WordPress WYSIWYG Text Editor Explained

The WordPress WYSIWYG text editor is deceptively simple but sometimes new users must first learn a few basic HTML tricks.

Michael Paragon – New WordPress users often miss learning a few fundamentals of the WordPress WYSIWYG text editor, including basic HTML. Knowing a few simple HTML tricks will help you create better looking, and ranked web pages. WYSIWYG of course translates to; What You See Is What You Get. Okay, that’s really not the name WordPress gave it. It’s actually called the WordPress Visual Editor, AKA: WYSIWYG.

The WYSIWYG editor looks simple and is very simple, and similar to using a Microsoft Word text editor. While organizing the Barcelona WordPress English MeetUp group on this subject, I collected the following slides for our presentation. These slides explain what each individual WordPress text editor button does. You can find a lot of other helpful information about the WordPress text editor by visiting WordPress.Org and clicking support/user-manual:  https://make.wordpress.org/support/user-manual/support.

Slide07

Here we explore the text editor and I will try to help you make some sense of the HTML editor (which is the second tab next to Visual that says Text). At the end of this post are detailed slides explaining each of the WordPress editors functions.

Before we get too detailed, it’s important to note a few things You would expect to see in a WYSIWYG editor, but are not here. We have the ability to change the text font color, but notice not the font size. Instead there is a paragraph dropdown menu, with a list of headings. And you will notice they are set as pre determined font sizes, usually set by your themes default CSS (or style sheets). Also notice there is not a simple method presented to users for changing the text line spacing (known as leading in newspaper layout).

Slide11
There are ways around these shortcomings so you don’t have to always be stuck with your themes default settings. You can practice text formatting the way this slide was done live at W3Schools.com.

Slide12

Slide13

Here we see a slide of both text editors side by side. And you can now see the HTML code we have placed for font size, so we are no longer limited by the themes default <H1> tag style sheet settings. We can now change this value to anything we want now in the WordPress WYSIWYG Text Editor, and we select this size: font-size: 42px;

Slide14

Documents created in Microsoft Word carry a kind of formatting that is purged in the Drop Text and insert window. This frustrates a lot of Authors’ because often the text margins and other nicely formatted text is lost. Here we have the “Drop Text” window with our new text.

Slide16
Knowing a few html font decoration tricks can be very helpful. We were able to change our font size through HTML and practiced placing our code live at W3Schools.com.

Slide27
Our practice page is starting to take shape now using the text editor, we formatted an Unordered list <UL> with bullets and placed a photo.

Slide28To complete our live page, we will finish it by adding <H1> title tags and a <H2> subheading from the Visual Editor.

Slide29

Here is our HTML view from the WordPress WYSIWYG Text Editor:

Slide30

So now our page is live, and we’ve added a photo and changed the title paragraph text size and color.

Slide32

But what if we wanted a video here instead of a photo? From either YouTube or Vimeo click the share button and collect the embedded code.

Slide33
For that you would want to make sure not to place it in the Visual editor, but in the WordPress HTML text editor.
Slide34
And now we have the video on our WordPress webpage.

Slide35
To learn more about WordPress, join the Barcelona WordPress MeetUp visit http://www.meetup.com/Barcelona-WordPress-Meetup/

Below we have placed the detailed description of each of the WordPresss WYSIWYG text editor and its functions:

Slide08

Slide09

Slide10

WordPress in English Meetup Agenda Sept 27

WordPress in English Meetup Agenda Sept 27

Circle your calendar and be sure to RSVP for the first WordPress Meetup in English, September 27th, at MOB – Makers of Barcelona.

The WordPress MeetUp in English is coincidentally, on the same day as WordCamp Europe 2014. In celebration, we have amended our agenda slightly to showcase various WordPress Meetups happening globally and there are a large number! Check our Meetup page for updates and schedule. The Meetup will start at 12:30pm and end at 1:30pm, and will be followed by networking at the FabCafe.

Meetup Agenda Overview:

  • WordPress global community: WordCamp Europe 2014 and the growing global trends in WordPress Meetups.
  • Resources: Meet local WordPress developers, E-commerce specialists and members from other WordPress Meetup groups
  • Resources: Learn about the growing network of WordPress support and training available in Barcelona
  • Presentation: Exploring the WordPress text editors & Essential HTML rules every WordPress user needs to know
  • Next WordPress Meetup topic ideas

You can RSVP to attend this MeetUp by clicking this link, then click the green “I’m going” button. Be sure and spread the word 🙂

1024bcn-wp-global_community.kgnThe WordPress Meetups in English are ideal for bloggers and business owners that want to increase their online presence, first time users that want to learn, and developers that offer coaching. Our goal in developing this Meetup group is to create an outstanding network of WordPress support in Barcelona. We welcome you to join our WordPress in English group and meet the Barcelona WordPress community.

For more information contact Michael Paragon.

Sponsored by Barcelona WordPress: http://bcn-wp.com/

Exploring WordPress Text Editor

Exploring WordPress Text Editor

Exploring WordPress Text Editor.

Barcelona WordPress announces the first WordPress Meetup in English.
Topic: Exploring WordPress Text Editor – Everything you need to know about the visual and HTML editors in WordPress. The WordPress Meetup in English will be held at MOB Makers-of-Barcelona on September 27.

Date: Saturday, September 27
Time: 12:30pm – 2:00pm
Schedule: 12:30pm – 1:30pm presentation, 1:30pm – 2:00pm refreshments and networking in the Fab-Cafe
Location: MOB Makers of Barcelona, Calle Bailén 11, (We will be in the “Big Room” conference room) MOB is conveniently located 2 blocks from the Arc de Triomf <metro L1> red line.
Topic: Exploring WordPress Text Editor – Everything you need to know about the visual and HTML editors in WordPress
Organized and presented by: Michael Paragon – Barcelona WordPress Founder, Web Designer, Marketing and SEO Consultant

 

WordPress-meetups-in-english3krn

Barcelona WordPress – bcn-wp.com sponsors hands-on monthly WordPress meetings in English covering a wide variety of topics. The Meetups are ideal for bloggers and small business owners that want to see an increase in their traffic, first-time users that want to learn, and developers that want to teach and network.

Admission is free, but a 2€ donation is suggested at the door. Seating will be limited to 30 persons, so be sure to sign up early on the Meetup web page: Barcelona WordPress Meetup in English.

MOB Makers of Barcelona is a perfect venue for the WordPress Meetup in English group as it includes free WiFi, in a comfortable and creative environment that seats 30 participants. If you would like to join the Barcelona WordPress Meetup in English as a co-organizer or sponsor, please contact Michael Paragon at Barcelona WordPress.

Barcelona WordPress is a web design and development team that provides local WordPress classes, website plans and WordPress technical support in Barcelona, Spain. You can attend Barcelona WordPress Meetups in English for as long as you like with no obligation. WordPress Meetup members receive additional discounts on classes provided by Barcelona WordPress. For further information contact Michael Paragon at Barcelona WordPress. http://bcn-wp.com or info [@] barcelonawordpress.com

WordPress Meetup in English planned for Sept. 27

WordPress Meetup in English planned for Sept. 27

We are pleased to announce a new date and location for our first  Barcelona WordPress Meetup in English.

Please circle the date on your calendar. You can RSVP to attend by clicking this link to our Meetup page. Seating will be limited to 30 persons, be sure to sign up early.

WordPress Meetup in English
Date: Saturday, September 27
Time: 12:30pm – 2:00pm
Location: MOB Makers of Barcelona, Calle Bailen 11,
(We will be in the “Big Room” conference sala)

MOB is conveniently located 2 blocks from the Arc de Triomf <metro L1>  red line.

Please note we’ve moved the WordPress Meetup in English time and day to Saturday mornings at 12:30pm to include more people who work. (*note a Spanish morning is defined as anytime before lunch 😉

MOB is a perfect venue for a Meetup like ours and includes free WiFi, in a comfortable and creative environment that seats 30 participants.

We will post the Barcelona WordPress Meetup in English agenda in the next few days, so stay tuned! In the meantime, if there are WordPress topics that are important to you, please let me know. Also, if you would like to join the Barcelona WordPress Meetup in English as a co-organizer or sponsor, I would love to hear from you.

Barcelona WordPress is a web design & development team. We design custom websites using the WordPress web application and provide local WordPress classes, website plans and technical support in Barcelona, Spain. We also design e-commerce solutions and offer both English and Spanish content writing, blogging and SEO. We are proud to sponsor and host the first Barcelona WordPress Meetup in English. Check our Meetup page for updates and upcoming events.

For further information contact Michael Paragon:  info [@] bcn-wp.com

Above the fold, WordPress homepage design – part 4

Michael Paragon –  Above the Fold WordPress homepage design – part 4

Above the fold, WordPress homepage design – In this 4 part series on “above the fold” WordPress homepage design best practice, we’ve covered just a few of the essential design rules. Next we will take a look at a few plugins that can give your above the fold design style, and increased functionality. We will start with an easy WordPress plugin that will help you add your favicon in the browser tab itself.

Favicons are graphic icons that personalize your site’s bookmark in your visitors browser and bookmarks tab. Favicons reinforce your brand identity and help your visitors navigate back to your websites opened tab from other screens.

From your plugins manager search for the plugin “All In One Favicon” and follow the easy installation steps on your screen. All-in-one-favicon comes with handy links to online favicon generators that will automatically create your favicon in different sizes and in a variety of formats depending on various browser requirements.

favicon-plugin-w

above the fold, WordPress web design, plugins that add function

Above the fold design, WordPress homepage design, WordPress plugins

We clicked through to one of these generators at: http://favicon.htmlkit.com/favicon/ uploaded our logo and the results were very satisfactory. Now the Barcelona WordPress logo has automatically been reduced to both 16px and 32px favicon sizes, and we easily uploaded it through the Favicon up loader. HTML KIT also has all of the various formats explained including saving the icon for Windows operating systems as .ico files. http://www.html-kit.com/support/favicon/image-size/

How many plugins are available for WordPress? Plugins can extend WordPress to do almost anything you can imagine. In the directory you can find, download, rate, and comment on all the best plugins the WordPress community has to offer. 32,068 plugins 690,924,756 downloads, and counting. – WordPress.org

In our last post we discussed using slide presentations in above the fold homepage design. If you believe a slide presentation on your homepage will enhance your message and benefit your visitors, then we have the perfect plugin recommendation for you; The premium Revolution Slider plugin from Theme Forest. I am a big fan of carousel slide presentations. When done right, carousels sliders add excitement, and can be the perfect vehicle to promote your services, events, recipes, products and special offers. When done wrong, a simple carousel slider will slow your website, hurt your SEO and push your vital information below the fold. This can, and does detour your visitors from clicking through to any other section of your website.

Revolution Slider has a WordPress version plugin, and is designed with SEO in mind. It’s easy to setup with a little practice and can greatly enhance your above the fold, WordPress homepage design. This plugin is simply too big and too important, to glaze over in a post discussing multiple plugins, so we plan on featuring it in one of our upcoming articles. As you can see from the Revolution Slider plugin documentation page (pictured below), the configurations are highly customizable with endless possibilities including animated text! And you can easily add slide or video presentation to any page, sidebar or widget in your website.

rev-slider750-w

above the fold, WordPress web design, plugins that add style and function

 

Another important plugin that is helpful to use in above-the-fold web design is the famous Contact Form 7. The plugin is as simple as pie to use and within a half an hour of playing with your settings you can add contact forms to any page of your WordPress website. When Contact Form 7 is used in tandem with the Captcha and Askimet block spam plugins, your contact form becomes a safe way for visitors to leave you message, comment on blog posts, and even upload files including PDF’s to your forms.

pcwlawyer-com-w_copy

WordPress web design, above the fold best practice

Contact Forms play an important above the fold design function, they reduce the clicks your customers must make in order to contact you for more information.

There are a number of other plugins that can help improve your above the fold design and user experience including the Calls to action plugin. This plugin creates calls to action for your WordPress site. It gives site owners the ability to monitor and track conversion rates, run a/b or multivariate split tests on calls to action, and most importantly increase lead flow!

calltoactionplugin

There are also many WordPress navigation menu plugins, no favorites yet, but if you have one please let us know! These plugins allow you to add dynamic text and photos and special promotions to your drop down menu.  Not all plugins are good for your WordPress website and you should always test plugins carefully before adding it to your theme. In fact it is highly recommended that you backup your WordPress website before installing any new plugin or theme to your website. And yes, there are WordPress Backup plugins too! They can be a lifesaver when multiple site administrators are busy making changes, and your site has failed to keep up with Backups. I’ve used the plugin BackupWordPress, its super easy and will back up your entire site including your database and all your files on a schedule that suits you.

We have only scratched the surface on the subject of plugins in this 4 part series on above the fold homepage design. Check our blog for more articles and helpful information. To find out more about WordPress website design in Barcelona, Contact us.

WordPress homepage sliders

WordPress homepage sliders

Michael Paragon – WordPress web design part 3 homepage sliders

Part 3 of our above-the-fold WordPress web design series covers some of the basics in designing great homepage sliders, most commonly referred to as Carousels. We will look at industry facts from marketing experts, and interesting ways to create the biggest impression from your slide message.

First lets be really clear, sliders are not for every website! Harrison Jones of Search Engine Land, describes some of the marketing negatives of using a slide show.  In particular the Search Engine Land post says slide shows are a bad idea all together for B2B websites. Sliders can be detrimental to SEO, and can take up a lot of additional bandwidth if not set up correctly.

To make matters worse, most people simply don’t size slide shows correctly. Many WordPress homepage slide carousels take one third, or more of your viewing area. The ever important “Above the fold” homepage content that we have been discussing and other truly relevant information gets pushed below the slide presentation. Out of view.

This is a photo of the same WordPress web design example we used in the last post. It has all of the above-the-fold elements and additionally uses a WordPress plugin slide carousel.

illuminate-homepagex600wd-kragen

WordPress web design – homepage sliders

In this instance the WordPress web design for the homepage slide presentation, work in harmony with all of the websites elements. The slide photos and brief text in them are relevant, and visitors are instantly updated with important information about the company.

Step one in creating a truly engaging homepage slide presentation is choosing which slideshow plugin to use in your WordPress web design. Which WordPress slideshow plugin is the most flexible, easy to use, and fits with the majority of WordPress themes? We will cover a few essential must have plugins in the next post, but spoiler alert, Revolution Slider is on the list!

While looking through several other posts on WordPress web design, I found this article from Nielsen Norman Group. Here they go into a more detailed examinations of click throughs on call-to-action buttons on slides, and state rather strongly:

Auto-forwarding carousels and accordions annoy users and reduce visibility – Nielsen Norman Group

I personally like a good slide presentation, but we did not do one purposefully for Barcelona WordPress, instead we opted to try out experimental HTML5 video. If your browser supports it, you will see a printing press continuously rolling behind our website description: Your Barcelona WordPress Connection – Websites, Support, Training, Meetups. If you don’t see this video after refreshing your browser, your bandwidth is not adequate to view it, or your browser is among the few still left that do not support it. So, here is the part where I am supposed to say “Don’t try this at home!” But in this case, please do try this at home! The more users that create HTML5 videos, the more demand there will be for browsers to support it. We will go into HTML5 video in more detail in an upcoming post.

In conclusion, carousel sliders should be used sparingly and appropriately, they can do more harm than good if not done correctly. When done right, they are interesting, helpful to users, and can wake up an otherwise boring website.

In our next post we will take a look at a few plugins that can give style to your WordPress web design, and provide functionality for your users. For more information about designing your next WordPress website contact Barcelona WordPress. 

 

Above the Fold WordPress homepage design – part 2

Michael Paragon – Above the Fold WordPress homepage design – part 2

In Above the Fold WordPress homepage design – part 2, we take a look at how to make your above the fold information stand out, and how to compel your visitors to find out more. In our last post we covered homepage layout best practice for a WordPress home page. While the actual blocks of information needed above the fold are not complicated, it is important your graphic design flows visually for the user. WordPress has thousands of home page design possibilities, so there is no limit but your imagination about how to style your homepage.

In the following example you will see a somewhat poorly laid-out website homepage done in simple HTML. In this instance the viewer is immediately underwhelmed with information, and additionally there’s not much else to look at.

results-advertising-original-homepagex600wd-krag

The homepage layout seems to be an overall waste of of the domain itself. There is so much about this business I am not being told within a few brief seconds, including their phone number.

Here is the same website redesigned in WordPress. Now keyword optimized content and important information is predominant above-the-fold, and the homepage tells the story of their Advertising business.

results-advertising-new-homepagex600wd-kgn

wordpress homepage design

The above WordPress homepage redesign was a great improvement, but there is no social network or strong call to action or offer being made yet.

This next WordPress homepage design pretty much has it all done right. Here you find exactly what most people expect to see upon landing on a homepage.  Important, relevant information, is all neatly laid out above the fold and a carefully thought out social strategy is a click away. The website provides compelling information, clear call to action buttons, opt-in subscribe by email fields, and even white paper downloads. Websites like these require customization, and well crafted plugins, but the results are worth it. This websites invites you to find out more.

illuminate-homepagex600wd-kragen

wordpress homepage design

Our last homepage example was not done in WordPress. In this instants the homepage is lacking the obvious menu navigation and is laid out in the shape of a calendar. There is no fold. There is no contact phone number, and additional information is finely written in 14px font size. (Read my post on “Why website body copy should be 16px”.) Besides font size, yours eyes tend to wander about this page with no clear instructions as to what to do next? There are numerous articles published by authorities on “eye tracking heat-maps” This article from Parachute Digital explains further about how the eyes scans information resembling the letter “F”.

machinas-homepage6---kgn

 

Part 3 of our above the fold WordPress web design post covers some of the basics in designing great homepage sliders. Contact Barcelona WordPress to find out more.

 

Homepage layout best practice in “Above the Fold” design

Michael Paragon – Homepage layout best practice in Above the Fold design.

In this 4-part series we cover Homepage layout best practice in “Above the Fold design.” We will discuss important web design techniques  you can apply to any WordPress homepage.  If you are new to web design there are a few fundamental rules that should be applied to every homepage regardless of your business. We will study a few impactful WordPress website examples, do’s and don’ts and essential plugins, including an easy plugin to set your “Favicon” in your browsers menu tab.

Homepage layout best practice in Above the Fold design – Part one, is dedicated to understanding above-the-fold home page layout. “The fold” is a newspaper term, used as an easy way of describing the sections of a newspaper where the most important news articles are featured. From a folded newspaper in a newsstand box anyone can easily read the headlines, and from there decide which article is worth dropping a coin in to read. Your homepage web design should follow the same logic and there are numerous articles published online to support this important rule. So what should be above the fold? Every visitor expects to see some basic “Who, What, Where, Why and How” information when they land on your homepage.

This includes:

  • Who you are, with your company name and logo
  • What you do, summarized in brief compelling text
  • Why this information is relevant to the person who has just landed
  • How to contact you for further information, including; your phone number, physical address if appropriate, and email contact).
  • A well laid out menu with clear site navigation and links to social pages
  • Clearly placed “call to action” buttons that take your visitors forward to essential information and content throughout the rest of your website.

 

Homepage-layout-best-practice-in -above the-fold-design

Homepage layout best practice in “Above the Fold” design

The above the fold essential elements are visually described in these simple wire-frame diagrams:

Above-the-fold-web-design

The importance of the area above the fold seems to be supported by the ‘five second rule’ that is commonly quoted within Web Design; which states users pass judgment on a site within the first five seconds of visiting. Usability expert Jakob Nielsen has also suggested that users spend up to 80% of their time viewing information above the fold. – TutsPlus

In our next post, WordPress homepage design part 2, we will discuss how to make your above the fold information stand out, and how to compel your visitors to find out more. For further information about designing websites using WordPress, contact Barcelona WordPress.

Barcelona WordPress sponsors WordPress Meetup in English

Barcelona WordPress Sponsors Meetups in English

We are pleased to announce our first Barcelona WordPress Meetup in English has been scheduled for September 25, 2014 and already there is a strong interest in attending with early registration. Please circle it on your calendar and shoot us an RSVP to attend!

There are many directions to take a WordPress Meetup. I personally have been following several WordPress Meetups agendas from outlines developed by other Meetup groups in London, Miami and San Francisco, and the topics are always lively and diverse. Some of these Meetups can be overwhelmingly technical for a first time user or novice and not everyone who uses WordPress wants or needs to know PHP or HTML in order to manage their blog.  Our main interest in sponsoring the first English speaking WordPress Meetup is to connect with new WordPress users and create a fun atmosphere to facilitate learning.  Barcelona WordPress Meetups in English, offers free WordPress support to hundreds of predominately English businesses based in Barcelona, Spain.

Barcelona WordPress Meetups in English, offers hands-on monthly WordPress meetings covering a wide variety of topics. Ideal for bloggers and business owners that want to see an increase in their traffic, first time users that want to learn, and developers that want to teach. If you have advanced WordPress training skills we invite you to join the Barcelona WordPress Meetup as a guest facilitator to share your area of expertise.

You can join the Barcelona WordPress Meetup in English free on our Meetup page.

Michael Paragon – Barcelona WordPress Founder