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

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

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.