However, WordPress is not full-screen by default. Instead, it leaves a lot of extra room for other content, like your sidebar. The good news is that there are a variety of ways that you can change this and really impress your audience.

Today, I will demonstrate how to create a full-screen website in WordPress.

So What Exactly Is A Full-Screen Website?

As the name implies, a full-screen website is a website that displays content on the entire browser window regardless of the screen resolution. It is also often referred to as a “full-width” website design.

This type of design is often reserved for websites that are focusing on showcasing images or a minimalist design. The idea is that by taking up the entire screen, the content on the website will capture the visitor’s focus.

Of course, it’s worth mentioning that there is a reason most modern websites do not use this design approach.

For starters, it is actually possible for important information to end up by the screen edges or corners, which makes it hard to access or find. After all, most people are trained to look for content in the middle of the page.

Another issue is the images and video content may not look right. While we live in a responsive world for web design, most of that focus is put on mobile devices. When you go the other way, well things don’t quite look right.

Basically, you need to make sure this style is right for your website type, so be sure to weigh the pros and cons before embracing it.

How to Make A Webpage Full Screen

Method 1: Enable the Full-Width Template

The good news is that you can make just about any website have a full-screen view in under a minute. It’s a built-in feature for WordPress, but it is not the default template content utilizes.

Just keep in mind you will have to do this for every piece of content you want to utilize full screen.

Note: Not all the themes actually support this. The good news is that you can use a plugin to force the change. See method 2.

Go to any existing post or page on your website. Expand the Template section.

Use the drop-down to select the Full-width layout.

Simply save the changes and that post or page will now utilize a fullscreen.

Method 2: Fullwidth Templates Plugin

If you have an older theme, there is a chance that you might not have the option to use a full-width template. The good news is that this can be added with a plugin. Although it is worth pointing out that it might be time for a new theme if that’s the case.

This method is also great for websites that might use a page-builder like Elementor. This plugin was built to work in conjunction with all of the popular ones.

Step 1: Install Fullwidth Templates

Click on Plugins and select the Add New option on the left-hand admin panel.

Search for Fullwidth Templates in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Fullwidth Templates plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: Pick A Template

This plugin does not require any setup, it’s ready to go after activation.

Go to any post or page on your website and expand the template section. The drop-down will now contain three new options: FW No Sidebar, FW Fullwidth, and FW Fullwidth No Header Footer.

Pick the one you want to use and save the changes.

You can repeat this step on all of the posts and pages you want to switch the template for. Now, if you did require a plugin to add the full-width view to your website, I highly recommend changing your theme.

The Top Five Full Screen Themes for WordPress

While you can certainly use a theme that wasn’t made for fullscreen to get the same effect, you could get a much better result by switching themes. Most of these themes were made with photography in mind, but the themes are customizable enough to meet most needs.

1. PhotoMe

PhotoMe is a premium theme that specializes in photography. It comes with over fifty unique gallery and portfolio templates to choose from and multiple layouts to choose from.

Thanks to this incredible customization, it can do a lot more than just display images.

As a premium theme, it also comes with some unique features of its own. One of which is password-protected gallery access. This allows customers to see your work during the development stages, which makes it perfect for professionals that require input.

2. Bridge

Bridge is a multipurpose theme that utilizes a full-screen design. It can do anything from portfolios to eCommerce and look stylish at the same time. It is fully compatible with the Elementor page builder and comes with nearly 600 demos to use as a template.

One of the more unique features is the Qode slider. This is a full-screen slider for both images and videos. It supports a variety of animations, transitions, and color options.

Almost everything about it is customizable.

3. Wizard

Wizard is a lightweight theme that is perfect for most websites and it was made with fullscreen in mind. It comes fully equipped with the Visual Composer page builder to give you complete control over your website’s appearance.

One of the more creative features is the use of light and dark panels. With them, you can create some stunning pages for small businesses. Of course, you can change the color scheme at any time, so you are not limited to this type of design either.

4. Moose

Moose is another excellent multipurpose theme that looks fantastic in fullscreen mode. It can be used to build any type of website and fully supports WooCommerce and the WP Bakery page builder to add a ridiculous amount of customization.

One area that this theme really shines is in the number of menu combinations you can make. It gives you a variety of types to choose from and each one is customizable with unique drop-down animations.

There’s something for everyone here.

5. Astro

Astro is a gorgeous theme that supports a fullscreen view. One of the things most people will notice immediately is the vertical home page. Each column can be expanded into a photo gallery, which is perfect for a photography portfolio.

The theme also has other homepage layouts available, which opens the door of possibilities. It’s also built with eCommerce in mind with full WooCommerce compatibility.

In fact, the theme was built specifically to make WooCommerce products stand out.

Make Any Web Page Full Screen in WordPress

WordPress dominates the CMS industry with superior customization while remaining one of the easiest platforms to use. As a result, there’s basically nothing you can’t do on the platform, including making any page or post fullscreen in WordPress.

Just make sure that whatever you do, looks great on both desktop and mobile devices.

Did your theme support the fullwidth template? What type of content do you use a fullwidth template for?

The post How to Make a Full-Screen Website with WordPress appeared first on GreenGeeks.

It’s a helpful tool that helps you judge the mobile side of your website. This has become a mandatory concern ever since Google started mobile-first indexing. Essentially, Google will index the mobile version of your website first, thus if it’s not good, your ranking will tank.

Today, I will demonstrate how to perform a mobile-friendly test with Mobilook.

Why Mobile Users Matter

As of May 2021, mobile users make up 55.31% of internet traffic. And it has been growing consistently year-over-year. Thus, mobile users are the most important userbase to most website owners.

And thanks to the Google mobile-first indexing initiative, website developers can’t ignore it.

Google runs a test to determine if your website is mobile-friendly, and if it passes, you’re good to go. Thus, even if you have a terrific desktop website, you could cripple your ranking with a poor mobile version. But search engines are only half of the concern.

You must also consider the mobile visitors themselves.

Let’s face it, an unresponsive mobile site in 2021 is just unacceptable. In fact, you really have to go out of your way to make an unresponsive website today. This includes having buttons that are hard to tap, images that are too large to view, and slow load times that are unbearable.

A bad mobile experience will make sure customers avoid your website on both mobile or desktop.

How to Create A Mobile View of Your Website With Mobilook

Step 1: Install Mobilook

Mobilook is an extension of the Google DEVTOOL that allows you to check how responsive your pages are on the most popular devices. It’s simple to set up and highly effective at uncovering problems. It’s also worth noting the Pro version of the plugin.

With it, you can actually run Google mobile optimizer test, which allows you to view exactly how Google views the page. It will tell you if they deem the page mobile-friendly or not. It’s incredibly useful to see if your website is not up to snuff.

Begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Mobilook in the available search box.

Find the Mobilook plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: Connecting with Mobilook

Upon activation, you will be asked if you want Mobilook to begin optimizing your responsive pages. It’s recommended to click on the “Allow & Continue” button. However, you can skip this for now and do it later, as the tutorial will assume you gave permission.

You must then check your email associated with your admin account and click on the verification link.

This will bring you back to WordPress, where you will see that the activation process is complete. You’re now ready to use the plugin.

Step 3: Configure the Settings

On the left-hand admin panel, click on Settings and select the Mobilook option.

The free version of the plugin allows you to enable or disable some features. These include Samsung Galaxy S9 format, iPhone 6/7/8 format, Google Pixel 2 format, and the Facebook Debugger. By default, all of these are enabled and recommended to stay so.

To turn it off, simply click on the “Enabled” button to disable them.

There are several PRO features that you can toggle on and off below, but they are only accessible if you upgrade. This tutorial will only deal with the free version.

Step 4: Mobile View In WordPress

With the settings out of the way, it’s time to finally use the mobile view in WordPress. This can be accessed directly from an editor on any post or page.

Go to any post or page in WordPress and scroll down to the Mobilook section.

At the top, you can select which device to view your post or page on. Next to this, you can view the dimensions of the screen.

Note: On the free version, only the first three options are available.

Click on the “Rotate” button to change between portrait (vertical) or landscape (horizontal) view.

At the bottom of this section, you will find tools to further help you identify mobile problems. These include the Facebook Debugger, Linkedin Debugger, Google Mobile-Friendly Tool, and Viewport Opt (Mobile SEO).

Only the Facebook Debugger tool is free. It allows you to identify any problems related to your blog post previews on Facebook. It’s a useful tool if you regularly use Facebook to share posts.

Congratulations on setting up and learning to use the Mobilook plugin.

Alternative Tools

Many WordPress developers may not be a fan of dedicating a plugin to this purpose. Luckily, there are plenty of free tools to consider using.

Here are a few of the best:

Chrome DevTools

Chrome DevTools are another great free resource you should be taking advantage of. With it, you can simulate what any website looks like on a mobile device. You can even simulate using the website by configuring the cursor to be a larger round shape, like a finger.

Thus, not only can you view your website, you can test how it runs. And you are not limited by devices. Instead, you can manually enter the dimensions into the tool.

Therefore, you can actually test any device’s viewable dimensions with this responsive website tester.

Google Mobile-Friendly Test

While Google Mobile-Friendly Test won’t give you a full mobile view of your website, it does tell you something critical for success. And that is what Google thinks of your website.

It will tell you if the page is mobile-friendly or if it isn’t. If it isn’t, Google’s tool will provide reasoning as to why.

And yes, this is the same test that is included in the Pro version of Mobilook. It’s a free tool on its own that provides a great advantage for development.

Can’t I Just Use My Own Smartphone?

Absolutely! In fact, it’s a great test.

However, not every smartphone is the same size. One of the biggest problems testing on one device is that developers tend to only consider that option. Instead, you need to consider every possible screen size.

While tablets, make up the smallest bit of traffic, it’s worth noting that they are much larger than smartphones while also come in a variety of sizes. Thus, a single smartphone is not as much help when developing for a larger audience.

Responsive Design Is the Only Option

There is some good news, almost everything within WordPress is responsive by default. So, your website should look great on any device no matter what.

The reason that testing is important is that there are some plugins that are not natively responsive. While they are rare nowadays, they exist, and they can cripple your rankings. There are also some customization options that help improve the mobile experience.

For instance, one of the most common in WordPress is to disable the sidebar on mobile devices. The screens just are not big enough to warrant a sidebar being present on every page.

How easy did you find Mobilook to use? Do you think WordPress should have a mobile view built-in by default?

The post How to Add a Mobile View of WordPress with Mobilook appeared first on GreenGeeks.

Thankfully, there are multiple ways to do so, and none of them are particularly difficult. Today, I will demonstrate different methods to view the mobile version of your WordPress website.

Why View the Mobile Version of Your Website?

All major website changes are typically made from a desktop, which means the changes you are viewing can only available from that point of view. To see how the changes affect the mobile view, you need to actually look at that version of the website.

For example, let’s say you add a new checkout button to your website. Customers need to click on this button to make a purchase. However, what if the button is not properly sized on your mobile site?

This could mean that it is too small to tap on a smartphone or so big that it makes the pages look terrible. Simple mistakes like this can be avoided if you view a page in the mobile version.

However, switching to the mobile view of your website is not obvious to beginners, but these methods will show you how to do so.

Method 1:WordPress Theme Customizer

I will be starting off with the built-in WordPress method. The WordPress Theme Customizer is a tool used to tweak the appearance of your theme and this, of course, includes the mobile version of your website. Thus, the tool can also be used to view this version.

On the left-hand admin panel, click on Appearance and select the Customize option.

On the bottom of the left-hand side, click on the mobile icon to view the mobile version on the desktop.

Note: Depending on what theme you are using, the view may be slightly different. However, the process should remain identical.

Upon doing so, you will be viewing the mobile version.

If this is your first time using the theme customizer, do not worry about the blue pencil icons. These are only visible to you and will not be seen by visitors.

Method 2: Google Chrome

Google Chrome is the world’s most popular web browser with a staggering 67.63% market share on desktop. It has many features that other browsers lack and the additional developer tools it offers are some of the more useful.

You can view the mobile version of any website, not just WordPress, on a Google Chrome browser in just a few easy steps.

On any website in a Google Chrome browser, right-click and select the Inspect option.

Click on the Toggle Device Toolbar option.

Upon doing so, you will immediately be viewing the mobile version of the website you are on.

At the top of this view, there are a few settings you can change to see different things.

For example, by default, the view is set to Responsive, meaning it will resize according to the device it is being viewed on. However, if you click on this option, you will notice that some of the most popular phone models can be selected as well. If you select one of these, it will simulate that device for specific visitors and what they will see.

This is extremely helpful if you are trying to troubleshoot a problem on a particular device.

Note: Firefox, Safari, and Microsoft Edge all have a similar feature within them. So do not feel like Chrome is the only choice.

Method 3: Use the Page-oscope

If you are looking to get a more realistic viewing of a website page on a specific device, then the Page-oscope tool is exactly what you are looking for. This is a tool that allows you to view a website on a phone emulator.

To begin, visit the Page-oscope website. Enter the URL of the website you want to view and select up to two different phones to view it on. Click on the “Run Test” button when all of the information is selected.

The tool will now load that website on the devices and you should see a side by side view.

The tool is free to use up to 5 times a day without logging in, so be sure to take advantage of it. However, if you wish to use it more, you will need to make and an account and log in.

Note: If you use the Opera browser, there is actually a built-in phone emulator that you can fully interact with. It’s definitely the most advanced tool available from a web browser, so make sure to give it a try if you are a fan of what this tool can do.

Method 4: Window Resizer Extension

The Window Resizer Extension for Google Chrome is a great tool to consider using as well. The tool allows you to pick out a screen size. And what makes this unique is that it allows you to rotate the view. This is a great tool when you want to test out a change on a sideways display.

Locate the Window Resizer Extension and click on the “Add to Chrome” button.

Click on the “Add Extension” button and you’re ready to go. Now go to the website you want to view as a mobile site and click on the icon for the extension on the top right of the browser.

This is not necessary, but I recommend clicking on the Open as a popup option. This will open the current tab you are on as a popup that you can resize.

The extension has some of the more popular phone dimensions preset, but the most useful feature is actually the custom option at the bottom. This allows you to enter any type of size, which makes it perfect for checking your website on the various smartphones and tablets available.

Once you select a size, the popup will change accordingly.

You can rotate the view by clicking on the Rotate the viewpoint option.

This is a very useful tool for developers and it is completely free to use, so take advantage of what you can do on it.

Mobile First

Making a mobile-friendly website should be the first thought by any web developer. Odds are the majority of your traffic will come from mobile users and this is especially true for business sites.

For example, if you run a restaurant, it is extremely common for customers to use their phones to place an order while they are on their way. Or if they are simply looking for a store near them. These kinds of searches are predominantly done on mobile devices.

And it’s not even just the users of which you need to be aware. Google adopted the Mobile-first Indexing practicing back in July 2019. This means that search engine bots are going to index mobile pages first. Thus, you can hurt your SEO significantly if your website is not mobile-friendly.

The bottom line is that mobile users are going to make up a significant portion of your visitors, so make sure your website is ready for them.

Which method do you use to view your mobile version? Have you ever had to make a change to help mobile users?

The post How to View the Mobile Version of Your WordPress Website appeared first on GreenGeeks.

For this reason, Fullscreen mode has become known as the distraction free WordPress editor.

This feature is built into WordPress and will not require any additional plugins. It will also have no impact on the appearance of your content when visitors see it.

Today, I will demonstrate how to enable Fullscreen mode in both the Gutenberg and Classic WordPress editors.

Why Use Fullscreen Mode

Let’s not beat around the bush; most of you probably get distracted when writing. I know I get distracted when writing, and that is completely normal. You can definitely limit these distractions by limiting what is on your screen.

For example, if you have ever been in the middle of writing new content and you see a new comment, it can get distracting.

Of course, thinking about how to get rid of distractions is a distraction in itself. The Fullscreen mode was designed for this purpose. In fact, WordPress has “Work without distraction” under the fullscreen option.

You will only see your post and nothing else. If you have trouble focusing, this is the best way to handle it.

Gutenberg Editor

If you have updated to WordPress 5.0, which you should have by now, you’re probably using the Gutenberg editor. While the editor is different from the classic one, it can still do anything the older system can and more.

For this tutorial, you will need to open up an existing post or start a new one.

On the top right of the editor, you should see 3 vertical dots. Click on the dots and select the “Fullscreen Mode” option.

You will notice that the left-hand side admin bar is no longer visible. You will also notice that the top toolbar will also be removed from view.

However, it is important to note that you will still be able to see multiple tabs on your web browser and your taskbar at the bottom of the screen. So if that was your main distraction, this may not help.

Of course, Gutenberg is a block-based editor and you can work on any block at any point. If you find that your eyes are wandering to another block, the Spotlight mode can further help you.

Select the block you would like to work on. Click on the vertical three dots and select the “Spotlight Mode” option.

Spotlight mode will dim the other blocks down like so:

Another handy setting to remove some of the clutter from your writing area is the “Top Toolbar” option. This will make the toolbar that appears at the top of every block appear at the top of the screen.

Click on the “Top Toolbar” option.

Here is a comparison:

By utilizing these features, you can remove a significant amount of distractions from the Gutenberg editor.

Classic Editor

Which editor you choose to use is completely up to you and the best part about WordPress is the amount of customization it offers. If you do not like the Gutenberg editor, it is easy to revert back to the classic editor with the help of a plugin.

Open any existing post or page or start a new one. Simply click on the “Distraction-free writing mode” button.

You will be able to use both the visual and text editor to their full extent in Distraction-free writing mode. However, it is important to note that unlike the Gutenberg editor, you cannot see the “Update” or “Publish” button while in this mode.

You will need to exit the mode to save your work.

A Step Beyond Editor Tools

It is important to note that you will still be able to see multiple tabs on your web browser and your taskbar at the bottom of the screen. If these were your main distraction, the above steps may not be that helpful.

But we can still fix that as well.

There is a way to hide both your web browser and taskbar with the press of a key. Simply press the F11 key on PC or Fn + F11 on Mac. This will only show you the content on the tab you were viewing.

When you combine this with the previous tips, there will be zero distractions on your screen.

Plan Out Your Work

One of the best ways to prevent distractions is to have a clear outline of what you are writing. An outline keeps you on track and when you stay on track, distractions become less tempting. Of course, everyone has a different way of preparing content.

Find one that works best for you.

Which editor do you use? Do you struggle with distractions often while writing?

The post How to Enable Fullscreen Mode in WordPress to Avoid Distractions appeared first on GreenGeeks.

In this article, I will show you how easy it is to perform WordPress cross-browser testing. We’ll use a few different tools that are readily at your disposal and are not difficult to implement.

What is WordPress Cross-Browser Testing?

Cross-browser testing is a type of website testing that can be performed to see if a website functions and adapts properly when displayed on different screen sizes, mobile devices, and all major browsers. Just because it works properly on the Google Chrome browser does not mean it will work the same on Firefox. For this reason, cross-browser testing is done to ensure website functionality no matter where it is being accessed.

There are actually a few different tools you can use to perform cross-browser testing on a WordPress website. Let’s take a look at a solid free way to do this. After that, I will give you some resources for other cross-browser testing options that you can pay for.

BrowserShots

BrowserShots is a free way to cross-browser test your website for free.  It is an open-source tool that will allow you to test your website across several different browsers on various operating systems. Just a few quick steps and you will be able to see if your WordPress website is functioning properly across many aspects.

As stated above, this is a free way to run this test. If you aren’t getting the results you need, then you can check out a couple of the paid cross-browser testing tools listed below. That being said, there is no money lost either way by using this tool, so give it a shot and see if it works for you.

There are a couple of downsides to consider here when using BrowserShots. The system does not support Microsoft Edge or Internet Explorer. Most website testers can get away with this, mainly because Google Chrome and Firefox are so widely used. However, if you feel the need to get results for Edge and Explorer, then BrowserShots is probably not the solution for you.

Another thing you want to be aware of is that BrowserShots does not include results for mobile device support. Again, there is a bit of a work-around here, as most of the WordPress themes and website builds of today are automatically mobile friendly.

And you can kind of simulate the mobile experience on your own by adjusting the browser window on a desktop. For instance, the Chrome Dev tools have this built into the platform.

Let’s take a look at how to cross-test a website using BrowserShots.

How to Cross-Browser Test a Website

Step 1: Go to the BrowserShots Website

Head on over to the BrowserShots website and pull up their main page. The look of it will vary based on when you go and what ads are running. However, it will look something like this:

Step 2: Enter Related Website URL in the Field

On the main page, you will see a field titled “Enter URL Here.” Go ahead and enter the URL of the website you are trying to cross-browser test.

Step 3: Click on the Submit Button

Now that you have the URL that you want to test in place, go ahead and click on the green “Submit” button located to the right of the URL field.

Step 4: Review All Screenshots

When you submit your URL link/s, you will need to wait for a little bit while the test runs. When BrowserShots is done running the test, they will give you screenshots to look at.

You can now click on the screenshots and expand them to see how everything appears.

Note: BrowserShots takes screenshots of a website. What this means is that it will give you a rough return of what your site looks like on different browsers. However, it is not actually live testing. For live testing options, please view the tools suggested below.

Other Cross-Browser Testing Tools

If you are looking to run live tests, or have more options available, then here are a couple of cross-browser testing tools that might be of interest to you.

Note: These are paid tools, but both do have free trials available so you can see how they work.

CrossBrowserTesting

CrossBrowserTesting is a very powerful cross browsing testing tool that is also easy to use and will provide both live testing and screenshots features. This means that you can cross-test in a couple of different ways, all in one place.

If you want to really get down to business and do some serious WordPress cross-browser testing, then CrossBrowserTesting is definitely a tool you want to look into.

It should be noted that this particular platform is a paid service. However, if you are a serious cross-browser tester or you design and test sites, then it is well worth the price.

There is a free trial available that allows you to play with the tool and test it all out for 100 minutes before you have to sign up and pay.

Pricing for full use of CrossBrowserTesting starts at $29 per month billed annually. Pricing moves up from there based on what type of testing and functionality you need to access.

BrowserStack

BrowserStack is another paid WordPress cross-browser testing tool for websites and mobile apps. Like CrossBrowserTesting, they too offer a free trial, but they only give you 30 minutes to play with the program before deciding if it is right for you.

The BrowserStack cross-browser testing tool comes with both live testing and screenshot features. You simply select the type of platform you want to test and then select the browser as well. Simply enter the URL you want and start the test.

It works pretty much the same as the other two cross browsing test tools in this article. The results you get are very accurate and will be satisfying. That being said, you will still have to perform the tests manually by opening up each browser.

Pricing starts at $29 per month billed annually. Pricing moves up from there based on what you need access to.

Find Out Which Browsers Your Website Visitors Use

Since there are several popular browsers still being used (as mentioned above), it can be a very tedious and time-consuming task to try and figure out which ones your website users like to utilize.

There is a tool that helps you figure this out very quickly. Google Analytics can provide you data regarding which browsers, operating systems, and devices are popular among your website users. Once you have this info in hand, it will make the rest of the cross-browser testing much more manageable.

To access this information, simply log into your Google Analytics account. Once you are in your account, click on Audience > Technology, and you will be shown a detailed report regarding browsers, screen sizes, and operating systems. Use this to perform your WordPress cross-browser testing.

Final Thoughts

Cross-browser testing is not necessarily difficult, you simply need to know where to start and how it all works. If you find that this type of testing is simply too difficult to do or even understand, then it may be time to hire a WordPress developer to help you out with the process.

I hope this article was able to show you how easy it is to perform WordPress cross-browser testing on your website. You always want to make sure your website is functioning correctly on all browsers, for all your users. Now you have the information and tools to get this done.

Which tool did you use to run your cross-browser tests? Do you use another system not mentioned?

The post How To Cross-Browser Test a WordPress Website appeared first on GreenGeeks.

The colors you choose will be the first thing visitors notice when they enter your website.

And the color scheme doesn’t just make your website visually appealing, the colors you pick can help visitors make purchases. Many research reports show a link between colors and spending and you should be taking advantage of that.

Today, I will demonstrate how to pick the best color scheme for your WordPress website.

Why Picking the Best Color Scheme for Your WordPress Website Matters

Millions of dollars are spent every year analyzing the effects that certain colors have on the human mind. Each color will subconsciously affect your customers and every single major brand takes advantage of these effects.

For instance, did you know seeing the color red makes you hungry?

That’s why most restaurants, especially fast food, use the color red in their logo. McDonald’s, Wendy’s, Burger King, KFC, Pizza Hut, Chick-fil-A, Dairy Queen, Applebee’s, Chili’s, and many other restaurants all have red in their logo. And it’s no coincidence.

Another common association is the color green and the environment.

Generally, anything to do with being outside or fresh have the color green in their logo. Subway, John Deere, Tik Tac, Tropicana, Recycling, Starbucks, GreenGeeks, Girl Scouts, and many other organizations all utilize green logos.

Picking the right color scheme can dramatically help your business.

How to Pick the Best Color Scheme for Your WordPress Website

Step 1: Understand What Each Color Represents

When you look around at your favorite store logos, you will notice that they generally consist of 1 or 2 colors. These colors are not picked at random either, in fact, companies have researched the psychological effects of colors on a buyer’s mind.

Each color will have a different effect on buyers and selecting the best colors for your business can help tremendously. This is not limited to logos, every color on your business location or website can influence your customers.

Here is what each of the major colors represents and how they affect spending:

Red: Enthusiasm, passion, desire, and vigor. Red represents a rich and refined taste for spenders, but some research has shown that it may also remind visitors of a stop sign or red light. At the same point, 33% of the largest companies use red in their brand’s logo, so it must be working fine.

Orange: Positivity, fun, friendly, inspiring, and refreshing. Orange represents fun, quality, and affordability to spenders.

Yellow: Joy, optimism, and confidence. Yellow represents happiness and confidence to spenders.

Blue: Trust, honesty, reliability, and strength. Blue represents trust and reliability to spenders.

Green: Growth, hopefulness, calm, and peacefulness. Green represents environmental friendliness to spenders.

Black: Solid, sophisticated, and secure. Black represents exclusiveness, sophistication, and royalty to spenders.

Step 2: Understand Your Audience

Reading what each of these colors means might have made you want to pick a color right away, but the color is not enough. You need to understand the kind of visitors your website is trying to attract. Odds are you already have a certain brand image going for you and loyal customers who like it.

You need to make sure you are not choosing a color scheme that scares away your current audience or doesn’t mix well with your products.

For instance, if you’re not the most environmentally conscious business, which you should be, you might want to stay away from the color green. If you think about environmental-related products or services, they usually have green on them.

For example, the GreenGeeks logo is green and we do everything possible to ensure that your website leaves the smallest carbon footprint.

Step 3: Create Your Color Scheme

Before you continue, you need to make a plan.

You should at most only be using two colors in your logo. There are many reasons why more colors are bad, but one of the main reasons is money. Colored ink is expensive and you can actually save a lot of money by using fewer colors in your logo.

Seriously, bigger companies have saved millions by shrinking their logo or reducing the number of colors. They get printed millions of times in some cases and that is expensive. After you have carefully thought about what colors you want to use in your logo it’s time to create one.

Luckily, there are many tools you can use to do this, and here are two that are completely free to use:

Material Palette

The Material Palette is a great resource that you can use for free to create the perfect color palette for your website. Its main purpose is for phone app designs, but the same principles can be used for website color schemes as well. Simply select the colors you want to use and Material Palette will generate some options that you might like.

Coolors.co

Coolors.co is another free resource you can use to generate color schemes for your website. This one has a unique twist. All you need to do is hit your space bar to load a new scheme. This is a great option if you are really unsure of the colors you want to use. You can of course, manually enter the colors you want to use. The best part is you can download the scheme you want to use.

Step 4: Pick A Theme

Finally, you need to pick a theme that compliments your color scheme.

While you can edit the colors present in any theme, that doesn’t mean that every color option will look good. In many cases, some themes look ridiculous with certain colors selected. Thus, you now need to find a theme that works well with your color.

Unfortunately, with thousands of themes to choose from, you might spend a great deal of time searching for the right one.

The best advice I can give you is to take your time and test out multiple themes. Once you find the right one, your good to go.

Find the Best Color Scheme for Your WordPress Website Today

Brand recognition is extremely important to businesses around the world. Companies spend millions to get the perfect color scheme in some cases. Logos are redesigned for major businesses all the time. This is to give them a fresh look and appeal to newer generations.

Your color scheme is something that you need to have a plan for from the beginning. Many beginners think that picking out a cool theme and installing it is all the design they need, but that couldn’t be more wrong.

All themes come with the ability to change colors and you should use that to pick the best color theme for your website. After the colors are picked you also need to place your content on your website in a way that looks good.

This includes things like navigation menus, widgets, home page design, and more.

How long has it taken you to decide on the best color scheme for your website? Which tools have you used?

The post How to Pick the Best Color Scheme for Your WordPress Website appeared first on GreenGeeks.

WordPress allows developers to easily create different post classes to give them more customization options. Once a class is created, you will have to use custom CSS to style the newly created post class. Today, I will demonstrate how to create an Odd/Even class in WordPress.

Why Use an Old/Even Class in WordPress

The Odd/Even class type is not new and can be found on a large number of websites. It is a simple style but can take a plain list view of posts and make it look more elegant. Many themes already use an Odd/Even class style for the comments section by default.

Not only does the style look good, but it can also help visitors differentiate one post from another. Let’s be honest, when you are on a computer all day, it’s pretty common for similar images to start looking alike. This is especially true when you are looking at a list view of posts. Having a different color on every other post can help visitors out greatly.

How to Create an Odd/Even Class in WordPress

Today, I will demonstrate how to create an Odd/Even class in WordPress. To create any class in WordPress you will simply need to add a few lines of code into your functions.php file. However, this will only add the post class. You will still need to style it using custom CSS, but it’s easy to do.

Since you will be adding code into WordPress, it is a good idea to create a backup of your website. This will ensure that if anything goes wrong, you can use it to revert your website to before the mistake was made.

Creating the Odd/Even Post Class

Let’s start by logging into the cPanel and clicking on the File Manager option. The File Manager will allow you to access all of the files related to your website.

You need to locate your theme’s functions.php file. Click on the public_html directory, then click on the wp-content folder. Inside this folder, you will find all of the content related to your website. Click on the themes folder and enter the folder of the theme you are currently using. Finally, right-click on the functions.php file and select the Edit option.

A pop-up window will show up. This box will warn you to create a backup of your files before editing anything. This will ensure that you can revert your website back to when it was working if something goes wrong. Click on the “Edit” button. A new tab will open containing all of the code from the file.

Copy and paste the following lines of code into the functions.php file:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == ‘odd’) ? ‘even’ : ‘odd’;
return $classes;
}
add_filter ( ‘post_class’ , ‘oddeven_post_class’ );
global $current_class;
$current_class = ‘odd’;[/ht_message]

Once you have inserted the code into the functions.php file, click on the “Save Changes” button to finish.

Styling the Post Class

Styling anything in WordPress requires custom CSS code. It’s very easy to do, but if you are not experienced with CSS, you will have fewer options available to you.

On the left-hand admin panel, click on Appearance and select the Customize option.

Click on the Additional CSS option.

Here you can add your own custom CSS code. I will show you the simplest of CSS styling you can do, but more experienced developers can do much more. If you need any help selecting a color using the HTML color codes, check out htmlcolorcodes.com. This can help you pick the colors you want to use.

Whenever you are styling in WordPress, it is important to keep the color scheme of your website in mind. The point of the Odd/Even class is to stand out, but you can definitely stand out a little too much with the wrong colors.

Copy and paste the following code into the customization area:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].even {
background:#8AFFB8;
}
.odd {
background:#7CD1FE;
}[/ht_message]

These are just sample colors, make sure to replace the HTML color codes with the desired color. You will see the changes instantly.

Congratulations, you have successfully created and styled an Odd/Even post class in WordPress. You can change the custom CSS at any time. Just remember to make sure you follow your website’s color scheme.

Make Your Content Stand Out

Once you have a fully functional website, the next step is helping your content stand out on it. There are plenty of ways to do it and the Odd/Even class is a great way to help post content. Another way is to have interesting titles and amazing thumbnails.

Having great thumbnails doesn’t just help content on your website, it also can help make your content more shareable on social media platforms. There’s a lot of competition on social media websites and interesting images can help you stand out on these crowded platforms.

How do you like the Odd/Even class in WordPress? What colors have you picked to alternate between?

The post How to Create an Odd/Even Class in WordPress appeared first on GreenGeeks.

In this tutorial, let’s take a look at a couple different WordPress custom editor style plugins. Each of these offer excellent ways to enhances the content you create on your website.

It’s a great way to add visual appeal without using elements like WordPress shortcodes. For example, you can add an attractive button to your site using nothing more than CSS coding and placing a few options.

For this tutorial, you’ll need to know how to install WordPress plugins.

Using TinyMCE Custom Styles

The TinyMCE Custom Styles plugin adds a function to allow you to edit your own CSS classes and styles. It uses a sleek interface that removes a lot of the code work to create things like buttons.

If you know a bit of the basics behind CSS, this tool is a good one to try out.

Install and activate the TinyMCE Custom Styles plugin in WordPress.

Go to Settings and click, “TinyMCE Custom Styles.”

Before you can use TinyMCE Custom Styles, you need to set a location for the CSS files the editor will use. Choose one of the radio buttons to select a location. For this tutorial, I’m going to specify a custom directory. You need to create the folder before using the option.

Click the “Save all settings” button.

Scroll down and click the “Add new style” button.

Here is where you input the values for the style you want in the TinyMCE editor. These values are all for CSS, and you need to know which elements you’re going to use.

Once you’re done, click the “Save all settings” button to save your style.

Accessing the New Style

After you saved your style, you need to access it. Go to any post, page or custom post type that uses the WordPress visual editor. You can create a new one if you wish.

Click the “Toolbar Toggle” icon in the editor. You may already have it activated by default.

Select the text you want to accent with a style.

Use the “Formats” drop down and select a style.

The text will then use the style you created.

Using Just TinyMCE Custom Styles

The Just TinyMCE Custom Styles plugin is another useful tool for creating CSS enhanced content on your website. It comes with options to edit your text in a similar way to the plugin above. It’s a bit more difficult to manage, but works well.

If you’re new to CSS, I’d suggest using TinyMCE Custom Styles instead.

Install and activate “Just TinyMCE Custom Styles.”

Go to Settings and click, “TinyMCE Custom Styles.”

In the first time use, you’ll need to modify the settings of the plugin. You can either go to the tab or click the “Open Settings” link.

Make the adjustments you want to handle in this plugin. These are the CSS elements you want to control from the tool.

When you’re done with your selections, click the “Save all settings” button.

After saving, click the “TinyMCE Formats” tab on the top.

Input the new CSS format you want to use in the spaces provided.

Once you’ve entered the CSS data, click the “save all settings” button to save it.

Accessing the Style

Go into an old post or create a new one. For this example, I’m going to add a new red header to an existing post.

Highlight a piece of text you want to modify with CSS by selecting it.

Click the “Formats” drop down and choose your CSS style.

This TinyMCE custom styles plugin is more difficult to manage than the first example above. It requires a bit more knowledge of how CSS works and doesn’t have the automatic functions like adding backgrounds and the like.

You’ll have to enter those snippets of code in manually when you create the new style.

If you know your CSS, it’s a wonderful tool for adding more flare to posts and pages. It’s just a bit more advanced than many of the other plugins.

Get More Out of the Content

Adding custom CSS to a WordPress website adds more versatility in what you can do and text formatting can make a world of difference when it comes to engaging your audience. Something as simple as a bold in the right place can have an impact on readability. Adding custom styles adds more to the experience while making it easier for you to perform certain tasks.

What kind of tools do you use to boost the readability of your content? How often do you use visual plugins to increase the engagement of your WordPress site?

The post How to Use the WordPress Visual Editor with Custom Styles appeared first on GreenGeeks.

Luckily, someone already developed such a method and it’s free to use. With a couple clicks of the mouse, you can show a WordPress theme with sample data ready.

In this tutorial, I’m going to show you the easiest and quickest way to display WordPress example content in your theme.

What Does the Dummy Content Include?

The dummy content file you’ll create in a moment is full of the most common elements you’d see in WordPress. Categories, menu items, pages, various images and more are included to give you an idea of what your site may look like.

You’re able to edit this information once it’s on your site if you want to add a bit of customization to the layout. However, it works fine on its own for example purposes.

Using the Sample Data XML Download

Today, we’ll be using a pre-designed sample file available on the Internet. It’s an exceptionally popular XML file used by many WordPress developers and users.

You can access the XML file data by visiting the Automattic.com website.

Now, you have two ways you can save this file:

1. Copy and paste the contents of the link above into a text editor and save the file as “test-data.xml.”
2. Right-click the link in this article and click “Save Link As…” then save the XML file directly to your desktop. If you’re on a Mac, you’ll want to use CMD+Click.

Adding the XML Sample File to WordPress

Now that you have the sample data XML file, it’s time to add it to WordPress.

Go to Tools and click, “Import.”

Scroll to the bottom and click “Run Importer” under WordPress. If you haven’t used the import feature before, you’ll have to install it by clicking the “Install Now” link. It only takes a few seconds and is often more useful than you might think.

The system will ask for the WordPress eXtended RSS file, or WXR. This is the XML content you copied or downloaded earlier. Click the “Choose File” button and select the sample XML file.

Click the “Upload file and import” button.

A new screen will appear where you can assign authors. If you want to show someone else as the creator of the content, you can make adjustments here. This is more useful in the event you transfer your WordPress site from one host to another. But for this situation, it’s probably faster and easier to leave them be.

Once you’ve made your selections, click the “Submit” button on the bottom.

After a few moments, you’ll see the success screen from WordPress. As the suggestion implies, it’s probably a good idea to edit the imported accounts from the sample data. This could entail changing passwords and customizing user roles to prevent access to the site.

Because these are public domain, they are easy to access. You don’t want the outside world gaining access to one of these accounts.

After the upload is complete, your site will filled with dummy sample data pulled from the XML file. This data behaves just as any other and allows users to customize the appearance and test out the features of various plugins.

Getting an Idea of What the Site Looks Like

Sample data in WordPress does more than merely help test out what a theme will look like in a real environment. It delivers a great testing ground for all kinds of things like plugins, image placements, galleries, nav menus and much more. After all, it’s better to test new tools out on a dummy domain before implementing them on a live website.

How do you test out new themes and plugins before they go live? Have you considered setting up a dummy subdomain for the purpose of testing out WordPress features?

The post How to Use Dummy Content in WordPress appeared first on GreenGeeks.