Tutorials Archives - Website Guides, Tips & Knowledge DreamHost Thu, 06 Jun 2024 19:53:52 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.4 How To Build Lead-Generating WordPress Landing Pages https://www.dreamhost.com/blog/build-lead-generating-landing-pages-wordpress/ Wed, 05 Jun 2024 08:00:00 +0000 https://www.dreamhost.com/blog/?p=17827 Want to learn how to create an eye-catching and high-converting WordPress landing page that drives leads? This step-by-step guide shows you how.

The post How To Build Lead-Generating WordPress Landing Pages appeared first on Website Guides, Tips & Knowledge.

]]>
There you are, scrolling through this fascinating web page all about the benefits of training your dog to use those talking buttons you keep seeing online. (Wait, do I even have a dog, you distantly wonder…)

Almost as if in a trance, you click that Buy Now button to become the proud owner of 12 shiny, loud buttons that will soon grace your floor. And eventually, the back of a dusty closet. (I wonder how much that cost, you think, slowly coming out of your daze…)

You, my friend, have been landing page-d.

DreamHost Glossary

Landing Page

A landing page is a singular web page that typically serves a unique marketing objective. For instance, this page may be designed to capture email leads or communicate a ‘coming soon’ message.

Read More

Landing pages are often used by especially astute marketers to plunk you on after you’ve clicked on an engaging ad, social media post, or blog link.

Their purpose? To tell you all about the thing you’ve shown interest in the hopes you’ll purchase it — or, to convince you to share your information so they can follow up with more information about why you can’t live without it.

When used well, a quality landing page can increase your website conversions.

Nearly everyone from beginner website owners to full-on website developers can set up effective landing pages that woo visitors and boost revenue.

However, optimizing one for maximum effect can be challenging, especially since you only have the space of a single page to work with.

That’s why the key to a strong landing page is to keep it focused, specific, and as intriguing as possible. If you include the right information at the right moments, you can win leads with an effective call to action (CTA) at the end.

So, no matter where you fall on the spectrum of marketing and website savviness, keep reading! Because in this step-by-step guide to landing pages, we’ll cover it all:

  • The ins and outs of landing pages.
  • Why you should care about landing pages.
  • The basics of landing page design.
  • Exactly how to create a landing page in WordPress.

What Are Landing Pages?

When it comes to marketing, sometimes less really is more.

Nothing proves this aphorism quite like landing pages.

A landing page is basically a one-page website, created specifically to achieve a single goal. With its focus on getting visitors to do just one thing, landing pages are powerful tools for boosting conversion rates.

DreamHost Glossary

Conversion

A website conversion is any action a user takes on a site that moves them further into the sales funnel. Examples include filling out a web form, clicking a call to action, or purchasing a product.

Read More

A landing page is effectively the whole website conversion funnel that’s been compressed into a single page.

Through this page alone, you’ll take the user on a linear journey toward completing a particular action. That action could be:

  • Sharing an email address.
  • Completing a form.
  • Signing up for a free trial.
  • Requesting a call.
  • Answering a survey.
  • Making a download (coupon, ebook, etc.)

Your goal for a landing page? That could be anything, such as:

  • Selling a specific product or service.
  • Encouraging sign-ups for your email list.
  • Gathering personal information to create more customized marketing.

Every landing page must have an explicit goal as well as a few basic elements. Stay tuned, because we’ll explore exactly how you should design your page.

Related: 30 Excellent Product Landing Pages Guaranteed To Inspire You

Why Invest Time In A Landing Page?

Bar chart showing average sign-up rate per form type. Popup: 2.10%, Signup Box: 6.25%, Landing Page: 11.67%.

First, landing pages are better than any other sign-up form when it comes to collecting customer information — information that’s critical to nurturing leads, converting visitors into leads, and building the relationships that are key to retention.

In addition, landing pages are also one of the best ways to match your marketing efforts to the intent of your audience. This means less time wasted shouting into the void and more time spent on effective campaigns. Why? Because you can promote landing pages with different messaging via the specific platform that works for you.

For example, if you’re selling something expensive with a long sales cycle, you may use a more long-term marketing method, such as SEO, to get your landing page in front of the right readers. However, if you have a landing page that’s all about quick sales, it’s easy to pivot the messaging and set up a pay-per-click advertising campaign that’ll pay off when it comes to quick conversions.

Finally, landing pages are easily measurable and highly changeable. Instead of tracking visitor data from across your whole website and trying to figure out what it all means, you can simply look at the performance metrics on a single landing page for insights.

Not enough visitors making it to the bottom of the page? Not getting the engagement you expected on your CTA? If that’s the case, it’s time to A/B test. In other words, tweak one thing at a time and measure and monitor anew to see if it’s any better. In time, you’ll eventually be able to optimize your way to a high-converting landing page incrementally.

The 5 Key Elements Of Effective Landing Pages

First off, landing pages ought to be unique. Your ideal landing page content and structure all depend on its purpose!

For example, a page intended to sell a product will be focused entirely on that product. It will probably include images, a description of the product’s key features, and reviews. Most importantly, it will feature an action for the user to complete, which in this case would be making a purchase.

Lead-generating landing pages will look different. The fundamentals work the same as if you were selling a product, but instead, you’re selling the value visitors should expect to receive if they share their information with you. There will likely be lots of benefits messaging, testimonials, and perhaps even an offer such as a free trial or download in exchange for their information.

All that said, at a minimum, all of the following elements should be considered when building your very first landing page:

Infographic showing the 5 key elements for a lead-generating landing page by way of a signposted webpage sample.

1. Clear Purpose

We’ve talked about this several times (hey, it’s important!) — your landing page needs to be really focused.

Everything you add to the page should work toward the goal you’ve set for it. If you’re trying to generate leads, the entire page should be devoted to information to convince a user to share their content information with you, or even reach out on their own.

Whatever the purpose, avoid any filler content, extraneous links, and other distractions that can divert attention away from it.

2. Highlighted Customer Benefits

The benefits to the user must be made clear throughout your landing page.

A visitor should be able to get all the information they need from the landing page, so they don’t have to look elsewhere on your site to understand something. This is key to keeping them engaged for long enough to convert them.

Use your own words to explain the benefits to the customer, as well as customer testimonials that provide additional social proof.

3. Logical Narrative And Structure

Consider the order in which you present content from the top of the page to the bottom. If you’ve ever heard of putting some information “above the fold” — this is where that comes into play. Put the most important elements where a visitor will see them without having to read below the newspaper fold. Or, in modern speak, before they scroll at all.

Think of the landing page as a journey you’re taking the user on. Be sure the narrative of the page makes sense, that each part follows logically from the last, and that it all builds up toward your ultimate goal: an easy-to-take action.

4. An Easy-To-Take Action

Your landing page should always end with a strong call to action.

The CTA is the ultimate goal of a landing page. By the time they’ve reached your CTA, visitors should have all the information they need, and be ready to take action.

Be sure to customize the CTA based on the audience and purpose of the page. For example, a CTA for expensive B2B software may be to sign up for a trial, but in the retail space, it may be all about the Buy Now button.

5. Distribution Strategy

With a beautiful, custom landing page fleshed out, there’s one last pivotal element to making sure it’s a success. You have to get it out there!

And you’ll be in good company. A whopping 97% of marketers have a promotion plan for their landing pages. The question is, how do they go about driving traffic?

Here are their top strategies:

  • 51.5% use social media.
  • 43.6% deploy email newsletters.
  • 35.6% rely on search engine optimization.
  • 32.7% promote via paid advertising.
  • 28.7% link to landing pages from blog posts.
  • 20.8% use website CTAs and banner ads.
  • 17.8% rely on partner/affiliate marketing.
  • 13.9% promote on YouTube.
  • 7.9% deploy a link-building-based strategy.
  • 5.9% use a podcast to promote landing pages.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

How To Build Your First WordPress Landing Page (5 Steps)

From laying the groundwork to putting the right tools and templates in place to making those critical finishing touches, here’s exactly how to go from zero to your first-ever landing page in just a handful of steps.

1. Plan Your Page

You don’t have to get all fancy with a wireframing tool (though you can). At this stage, it’s important to know your landing page’s goal, have most of the content ready, and know how it will flow.

DreamHost Glossary

Wireframe

A wireframe is a two-dimensional illustration of a web page that determines where elements will be placed. This is an early step in the design process that focuses on content spacing, functionalities, and intended behaviors.

Read More

For this walkthrough, our goal for our landing page will be to generate leads, so the main focus will be on encouraging users to provide their contact information in some way. We don’t have to get too specific on the actual look and features at this point since we’ll be working from a template.

With that in mind, let’s get to the good stuff!

Learn more about wireframing: The Complete Guide To Creating Website Wireframes

2. Choose The Right Tools To Create Your Landing Page

Throughout this guide, we’ll be using WordPress.org, which is different from WordPress.com. That’s important to know because each has its own plugin and theme directories, and the features and functionality in each may look a bit different.

That said, there are several ways you can use WordPress to create a lead-generating landing page. Some are more manual, but we’ll make things simpler by focusing on using the already-created themes and plugins we mentioned.

There are plenty of WordPress landing page-focused plugins. For example, Elementor is a hugely popular page-building plugin that enables you to create landing pages for free, and includes various templates to get you started. There’s also the Thrive Suite of (paid) plugins, which includes the Thrive Architect plugin and more for building landing pages as well as a WordPress website that all work together seamlessly.

For tons more, visit the WordPress plugin directory and search for “landing page” to see all the offerings for creating and optimizing landing pages, from big names like ConvertKit to smaller creators like Fatcat Apps.

You’ll also need to choose a WordPress theme that can be used to construct a landing page. Luckily, today, most modern and updated themes will enable you to do so. If not with built-in features, then by working alongside landing page plugins.

Finally, you can actually build a stand-alone landing page website using any one of the hundreds of landing page themes in the WordPress theme directory.

For this walkthrough, we’ve chosen to work with the OceanWP WordPress theme.

This is because OceanWP is a free, versatile WordPress theme that contains multiple templates that can be used to create lead-generating landing pages. It can also be integrated with the above landing page builder plugins for increased functionality. As you’ll see, using this theme will enable you to create and configure the basics of your first landing page quickly, giving you a great foundation for expanding it with your own content.

Now, let’s move on to practical matters and dive into one of the most accessible approaches to building a landing page in WordPress.

3. Install Your Landing Page Theme

Need to upgrade to a modern theme to take advantage of all the newest landing page-building features? Then let’s get to downloading and installing your new theme.

Here’s how to do that with OceanWP:

What we’d recommend doing is going into your WordPress Dashboard, finding Appearance in the left sidebar, and clicking on it to locate Themes.

WordPress dialog drop-down menu for "Appearance" and "Themes" selected.

At the top of the Themes page, use the Add New Theme button and search for “OceanWP.”

OceanWP's dialog box screenshot with the tagline, "EVERYTHING YOU NEED AND SO MUCH MORE" and a CTA button.

Hover over it to find and click on the Install button. Wait a moment, then press the Activate button once it appears.

Once the page refreshes, you should see a notification at the top of the Themes page asking you to install and activate Ocean Extra. Ocean Extra is a plugin related to OceanWP that includes additional functionality.

Themes dialog box confirming installation of OceanWP theme and a button to "Install and Activate Ocean Extra" at the bottom.

Now, it’s time to set up a template for your landing page.

Related: How To Install A WordPress Theme (Tutorial)

4. Import A Landing Page Template

After the previous step, you should have been redirected to OceanWP inside your WordPress instance. If not, just go back to your Dashboard and look for it in your left-hand sidebar.

Now it’s time to install a landing page template, which they call “Demos.”

Click OceanWP > Install Demos in the sidebar:

OceanWP drop-down menu with the button "Install Demos" selected.

Scroll down in the OceanWP Panel until you start to see the Demo options. Click on One Page to see the templates that are best for, well, one-page presentations. Choose whichever you like, but we’ll be using the Coach template for our example.

"Coach" Landing Page Template with the screenshot of the demo and buttons for "Import" and "Live Preview."

Hit Import on the Coach template, and follow the instructions to add the plugins and add-ons that will make your landing page match the demo. (FYI, a purchase is required for Ocean Sticky Header.)

"IMPORT THE COACH DEMO" with a list of required plugins including Activate for Elementor and a button to go to the next step.

After going to the next step, you can choose what sample data you want to import. This will enable you to edit the existing sample content, rather than creating everything from scratch. Keep in mind this could override any content you already have in this WordPress instance.

We’ll leave all the boxes checked, and finally, we’re ready to install the demo!

A list of options to import including widgets and contact form, all check-marked. Button to INSTALL THE DEMO.

Once this process is done, the template will be installed and activated on your WordPress site. And now, it’s time to customize!

Additional reading: Decoding WordPress: Custom Templates And Template Parts

5. Customize Your Landing Page

It’s now time to apply what you’ve learned throughout this article to customize your lead-generating landing page.

We’ll be using the Elementor plugin we installed earlier for this purpose, as it’s recommended by the OceanWP theme.

To start managing your landing page, navigate to Dashboard > Templates > Saved Templates.

Templates selected, and the "Saved Templates" button clicked from the drop-down menu.

Select coach-home then Edit with Elementor. Now you should be looking at the intuitive Elementor page builder, where you can make changes directly to your landing page.

Elementor's page builder with a sample landing page on the right, and a list of elements in the left sidebar.

At the moment, the structure of the page is largely in place. You can see how this template uses many of the concepts we discussed earlier. It opens with an attention-grabbing headline and introduces the CTA right away, then dives into well-designed sections that outline everything visitors need to know from benefits to package deals to testimonials.

Of course, you’ll want to customize the visuals, text, and even some elements of the layout of this page. In the left sidebar, you’ll see Elements that can be added to the page. Any of these can be moved and deleted when you click on them.

Want a contact form? Select WPForms in the sidebar and watch it appear. It’s ready to be customized right on the page!

Screenshot of button "WPForms" from the sidebar to include a contact form on your landing page.

As you click around, you’ll also see the left sidebar update to show what can be edited in the widget you’ve clicked on.

For example, click the Make An Appointment button to change the text, the link it connects to, how it looks (under Style), and even the spacing and other effects (in the Advanced menu).

Options under "Content" to customize the button including changing the type, text, and link.

These are just a few very basic examples of how you can edit this template to suit your own needs and build a well-designed landing page. You can easily spend hours working on this if you like — have fun with it!

When you’re done, at least for the time being, at the bottom of the screen you’ll see options for checking your edits on different screen sizes, reverting to a previous version, saving your changes as a draft, or publishing them live on the internet with the Update button. After each update, we recommend visiting your live page to make sure everything is performing how you wanted.

It’s easy to get carried away here, so when you’re tweaking your landing page, don’t forget the key elements we outlined earlier. Make sure that your page’s goal and purpose are clear, that you always make the benefits to the user obvious, and that the page follows a natural structure and includes plenty of opportunities to plug your CTA.

Need Help Landing More Leads?

Now that you know what goes into making a landing page, why you should bother with it, and have a robust template to customize, you should be well on your way to creating lovely, lead-generating landing pages in no time!

Unless that pesky little time thing is still standing in your way, that is.

Many company owners and website managers need to focus so intently on the immediate income-generating aspects of business that they seldom have time to sit down and build the marketing that paves the way for the future of the business.

If you simply don’t have the time to create important marketing materials, such as landing pages for your website, we know who does. (Hint: it’s us!)

In fact, at DreamHost, we’ve created a whole department to help with exactly that.

From marketing to website design, development, and even management, our pro services providers know exactly how to match up your desires, their expertise, and DreamHost’s robust hosting packages to create wildly effective online experiences.

What do you say we partner up to land you more landing page leads?

Ad background image

WordPress-Optimized Hosting to Power Your Purpose

DreamHost makes sure your WordPress website is fast, secure and always up so your visitors trust you.

Choose Your Plan

The post How To Build Lead-Generating WordPress Landing Pages appeared first on Website Guides, Tips & Knowledge.

]]>
How to Fix Fatal Error: Maximum Execution Time Exceeded (In 6 Steps) https://www.dreamhost.com/blog/fix-wordpress-fatal-error-maximum-execution-time-exceeded/ Mon, 27 May 2024 07:01:00 +0000 https://dhblog.dream.press/blog/?p=31639 Learn how to fix the WordPress fatal error "maximum execution time exceeded" with our step-by-step guide.

The post How to Fix Fatal Error: Maximum Execution Time Exceeded (In 6 Steps) appeared first on Website Guides, Tips & Knowledge.

]]>
Updating your plugins and themes regularly is essential to keep your site running as smoothly as silk. However, the fatal WordPress error “maximum execution time exceeded” can get in the way of updates and leave you sweating over your website’s performance.

But wait a second — No need to panic. There are actually several methods of removing the error or increasing the maximum execution time.

In this ever-so-simple guide, we’ll look at what the WordPress maximum execution time error is, and why it happens. Then we’ll walk you through six methods you can use to solve the problem and keep your site running like a well-oiled machine. Here’s the setlist:

  • Uninstall problem software
  • Use a plugin
  • Adjust the wp-config.php file
  • Update the php.ini file
  • Edit the .htaccess file
  • Contact your hosting provider

Ready to give it a go? Let’s get started!

What The WordPress Max Execution Time Error Is (And Why It Happens)

The maximum execution time error is one of the most common WordPress errors. It can pop up when you are trying to update your WordPress plugins or themes.

"Error Caused By PHP Scripts" header with code in a black background screenshot.

It warns you if your site can’t perform the updates you requested.

This error happens because of the PHP scripts on your website. Along with JavaScript, PHP is a language that is the foundation of WordPress sites. Basically, it’s the code that controls how a website runs and shows different elements to users. A PHP script’s maximum execution error has to do with how long it takes to run.

PHP scripts have a maximum execution time to keep your site functional and secure. If there were no limit, a hacker or malicious software could use never-ending scripts to dismantle your website’s hosting server and make your data vulnerable. It’s supervillain stuff, really.

PHP scripts that run for a long time can also divert resources from your server, racking up your bill and robbing you of computing power.

Plugins are most likely to trigger this error because they introduce a lot of code from external sources. Because WordPress is an open-source platform, any developer can design and upload plugins. So, if you install content from lesser-known developers, it may come with flawed code and cause issues in your site’s PHP scripts.

Themes and general WordPress updates can cause the problem as well — but this is less common.

What Is The Standard Max Execution Time?

At DreamHost, we set the maximum execution time at our end. As with most other hosting providers, the duration is usually set to 30 seconds.

This is typically enough time for most PHP scripts to run successfully. If you’re using a different hosting provider, you should be able to contact them directly to find out your site’s execution time limit.

For example, large websites with multiple resources might need slightly longer maximum execution times. Otherwise, they may not be able to complete their processes before the clock runs out.

Some developers use very long execution times of more than 300 seconds. However, we don’t recommend this for most websites, primarily because of the performance issues.

How To Figure Out If The Error Has Occurred

It’s usually pretty obvious when maximum execution time errors happen because you’ll see a notification from WordPress.

The wording does vary. For example, it may read as Fatal error or Critical error. In some cases, the notification might not mention the maximum execution time. All of the warnings, however, have similar components that can help you identify the cause.

WordPress dashboard opened to the Update Plugins window with Fata error: maximum execution time exceeded shown.

Front-end users may also be able to see the error. If they visit the site when the update process has failed, they might see a message telling them that the website is experiencing technical difficulties.

Be aware that you don’t just get this error message if you’ve exceeded your maximum execution time. So, you’ll need to check and see if it shows up in your WordPress dashboard as well.

Finally, you may receive an email from WordPress alerting you that the maximum execution time has been exceeded.

This is thanks to the WordPress 5.2 update, which introduced PHP error protection that automatically notifies you when your site has problems with its themes or plugins. Therefore, you will know almost immediately when there’s an issue with your updates.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

How To Fix The Max Execution Time WordPress Error (6 Methods)

There are a few different methods you can use to eliminate the maximum execution time error or increase your site’s maximum execution time.

Consider your comfort level when editing your site’s files and adding new code. If you’re worried about diving in yourself, other nifty options are available.

1. Uninstall The Problem Software

One of the simplest ways to fix the maximum execution time error is to uninstall the software causing the issue. One of your plugins, or your site’s theme, is likely the culprit, so you can start there.

We recommend using this method if you have a hunch that a specific application is causing the problem. For example, you may have recently added a new plugin or updated an old one.

If the error locks you out of your site, you can access the dashboard via Recovery Mode (in WordPress 5.2 and above). If you receive an email from WordPress about the failed updates, it usually includes a link to Recovery Mode, and might even tell you which plugin caused the problem.

Then, navigate to Plugins > Installed Plugins and click on Deactivate underneath the relevant one. Click on Delete to remove it.

"How To Uninstall Problematic Plugins" header with screenshot of Plugins tab and Deactivate button pointed to.

If you don’t know what’s causing the maximum execution time exceeded error, go ahead and deactivate all your plugins and reactivate them individually. Refresh each time to check if you can find the one causing all the fuss.

You can also use Secure File Transfer Protocol (SFTP) to remove your plugins or do it with the control panel file manager if you’ve got a fully hosted DreamHost account.

DreamHost Glossary

SFTP

Secure File Transfer Protocol (SFTP) is a safer version of the FTP protocol that uses a secure shell data stream.

Read More

You can find all your plugins under wp-content > plugins. Delete the plugin folders one by one to find the offender!

Hopefully, this should clear up the error. If not, let’s move on to some more options.

2. Use The WP Tools Plugin

One of the easiest ways to increase the maximum execution time is by using the WP Tools plugin.

WPTOOLSPLUGIN.COM cover image of a Swiss knife, full plugin title below, and a blue Download button.

The tool allows you to increase the maximum execution time while it’s activated.

You may prefer the plugin route rather than using the previous method because it can increase your maximum execution time globally. This is particularly beneficial if you want to give functional plugins and themes a little extra time to complete their updates.

To get started, navigate to Plugins > Add New Plugin and search for “WP Tools by Bill Minozzi.” Scroll down until you see the plugin below.

WP Tools plugin dialog box featuring reviews, last update, compatibility check, and Install now and More Details buttons.

Click on Install now. Once the plugin is installed, select Activate.

Next, visit WP Tools in the side menu. When you open the plugin for the first time, you will see some important instructions. Once you have read these, click I Agree.

Site Errors' red tab showing TERMS OF SERVICE and an "I Agree" button at the bottom of the dialog box.

Now, navigate to WP Tools > Settings and click on the General Settings tab. Here, you should find the option to Add Max Execution Time Limit.

On the Site Errors page, under "Instructions," "Add Max Execution Time Limit" selected to "!20 Sec" in the drop-down menu.

With the free version of this plugin, you can increase the limit up to 120 seconds. The license can be extended further, but you’ll need to buy the Premium version.

This plugin offers a straightforward fix for the maximum execution time exceeded error — but the free version might not always solve your problem. If you’d rather save some money, keep on reading.

Related: How To Pick The Right WordPress Theme For Your Website

3. Increase The Maximum Execution Time Via wp-config.php

You can increase the maximum execution time by editing your site’s wp-config.php file. This is a core file that contains a lot of important information about your site. For example, it contains your website’s name, host’s name, login username, and password.

If you would like to customize your maximum execution time, we recommend this method. It allows you to add code directly into your WordPress directory file. It’s also relatively quick and easy to do.

Before you start editing the file, we strongly advise you to back up your entire WordPress site. The wp-config.php file is essential for your website, so you don’t want to be making mistakes. With a backup handy, you can revert to your original settings if things go sideways.

You can find the file by using the DreamPress file manager or your SFTP application and looking for wp-config.php. Right-click on it and select Edit from the drop-down menu.

In the DreamPress file manager, wp-config.php file selected and "Edit" button highlighted from the right-click menu.

Alternatively, you can click on Download, and edit the file with a simple text editor like Notepad. Once you’re in the wp-config.php file, scroll to the bottom and insert the following code:

set_time_limit(X);

“X” represents the maximum execution time in seconds. For example, you can replace it with “300” and it will extend the duration to five minutes.

Now you can save the file, and you’ve successfully changed the maximum execution time!

4. Increase The Maximum Execution Time In php.ini

You can also increase the maximum execution time by creating a new php.ini file.

This is a document that controls the PHP settings for your content management system (i.e. WordPress), such as resource limits, upload sizes, and file timeouts. Because php.ini affects all the scripts in your system, you won’t have to edit each one individually.

However, not all servers support php.ini files, so you’ll need to check first to make sure yours does. Then, you can increase the PHP execution time with this method.

In the DreamHost server, php.ini files are called phprc. First, you’ll need to create a new phprc file. Go to your SFTP dashboard and navigate to your user directory.

Locate the phprc file in your site’s version of PHP. Then right-click on it and select View/Edit to add your new code. You may see this warning:

Warning dialog "No program associated with filetype," box next to "Always use selection for all unassociated files" checked.

Click on the check box next to Always use selection for all unassociated files and select OK. This will then open the file with your text editor. Next, you can enter the following code to change the maximum execution time:

max_execution_time = 500

This will give you 500 seconds to play with. To finish up, you will need to kill all existing PHP processes to update the phprc file and have the changes take effect.

5. Increase The Maximum Execution Time In .htaccess

DreamHost Glossary

.htaccess

“.htaccess” is a configuration file used by the Apache web server software. The .htaccess file contains directives (instructions) that tell Apache how to behave for a particular website or directory.

Read More

The .htaccess file is another place where you can adjust the maximum execution time. This file controls changes across the different directories of your WordPress site. Beware though, that the .htaccess file is an elusive beast — not all servers use it, and it’s most commonly found in Apache servers.

You may want to use this method if you don’t want to play around with the wp-config.php file and if your server doesn’t support php.ini files.

Before starting, we recommend backing up your .htaccess file. This will allow you to reinstate it if you make any major mistakes.

To back up your .htaccess file, simply open your SFTP client and navigate to your home directory. Make a copy of the .htaccess file, and save it somewhere on your computer.

Then, use your chosen SFTP client to locate and edit the original .htaccess file. If you’re using the DreamHost file manager, you can right-click on it and select Edit.

.htaccess file highlighted in yellow from the contents, "Edit" selected from the right-click drop-down menu.

Otherwise, you can open it with your text editor. Enter this code to change the maximum execution time:

php_value max_execution_time 300

You can substitute the “300” for any other value you decide on. Finally, save the changes, and the file will apply them to your site.

6. Contact Your Hosting Provider To Request An Increase In Maximum Execution Time

In case you don’t want to change the site’s files yourself, you have one more option: contact your hosting provider directly and they’ll increase the maximum execution time on your behalf.

This method could be helpful if you’re short on time, or have limited technical skills. You may have to pay extra depending on your hosting provider.

With a DreamHost account, you can contact our Professional Services team for them to make these changes for you. Navigate to the Contact Support page in your account dashboard and submit a ticket.

There, you can outline your desired changes and add any details about your site. We may ask for more details, and then we’ll start working on the changes!

Maximum Execution Time FAQs

We’ve covered all the major fixes for maximum execution time errors. Do you still have questions? Luckily, we have answers! Here are the all-important FAQs:

What is the difference between set_time_limit and max_execution_time?

The difference here is all about scope. The set_time_limit setting is designed to set the time limit on an individual PHP script, while max_execution_time sets the upper limit for all PHP scripts in your account.

How can I check my current maximum execution time value?

The easiest method is to install the phpinfo() WP plugin. This will reveal key information about your PHP setup, including your maximum execution time.

My hosting provider doesn’t allow maximum execution time changes.…what should I do?

You pretty much have three options here:

Explore alternative plugins: If the error comes from a plugin, see if there’s a more efficient alternative that does the same thing.

Contact your hosting provider: Politely explain the issue and explore whether there are temporary adjustments they can make, or if a different hosting plan is needed.

Upgrade to a better host: You could always switch to a host that lets you fix your site without getting in the way…just saying.

Bonus WordPress Error Articles

Need to resolve other technical issues on your website? We’ve got you covered! Our team has put together several guides to help you troubleshoot the most common WordPress errors:

And if you’d like a soup-to-nuts walkthrough on running a successful WordPress site, be sure to check out our WordPress Tutorials. We have over 150 guides written by our WordPress experts that will help you navigate the WordPress dashboard like a pro!

Fixing The Fatal Error: Maximum Execution Time Exceeded

The maximum execution time exceeded error in WordPress can get in the way of updating your plugins and themes. We know it can be frustrating when it happens, but there are several ways to solve the problem quickly.

Remember, you can fix the maximum execution time WordPress error with the following methods:

  • Uninstall the problem item.
  • Increase the maximum execution time with a plugin like WP Tools.
  • Adjust the maximum execution time by editing the wp-config.php file.
  • Increase the maximum execution time in the php.ini file.
  • Edit the .htaccess file to increase the maximum execution time.
  • Contact your hosting provider to change the file on your behalf.

Want a provider that handles all the technical issues? We’re here to help!

Our DreamPress packages come with automatic updates, daily backups, and 24/7 support from WordPress specialists.

Sign up today to try it for yourself and wave goodbye to troubleshooting!

Ad background image

Do More with DreamPress

DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

Check Out Plans

The post How to Fix Fatal Error: Maximum Execution Time Exceeded (In 6 Steps) appeared first on Website Guides, Tips & Knowledge.

]]>
Decoding WordPress: Build Fast With WordPress Pattern Directory https://www.dreamhost.com/blog/wordpress-pattern-directory/ Wed, 22 May 2024 14:00:00 +0000 https://dhblog.dream.press/blog/?p=45891 Use the WordPress Pattern Directory to make your website building process faster and more efficient.

The post Decoding WordPress: Build Fast With WordPress Pattern Directory appeared first on Website Guides, Tips & Knowledge.

]]>
WordPress has done it again.

They’ve made the platform even easier for the non-designer, non-coder, normal ol’ business business owners and managers of the world to craft gorgeous websites.

This time, it’s thanks to something called WordPress block patterns and the new pattern directory and library where they’re organized.

Intrigued?

Allow us to introduce you to the WordPress Pattern Directory, which website owners of all technical skill levels can use to create a beautiful layout. Plus, we’ll offer several tips for choosing the right patterns to build your ideal brand experience.

What Is A WordPress Pattern?

In WordPress, a pattern is a collection of individual blocks designed to seamlessly integrate with WordPress themes.

In case you’re not familiar with blocks, let’s start there.

Purple arrow points to WordPress blocks on the left of the screen

WordPress blocks are individual stackable elements you use to add functionality to pages and posts on your WordPress site.

In 2018, Gutenberg, a block editor, replaced WordPress’ classic editor. Since then, blocks have become the gold standard for customizing WordPress sites thanks to their powerful functionality and easy drag-and-drop configuration.

DreamHost Glossary

Gutenberg

Gutenberg is the name for the Block Editor project in WordPress. A lot of WordPress developers and enthusiasts use the terms Gutenberg Editor and Block Editor interchangeably.

Read More

Each block is like a widget, capable of adding text, media, design, functional elements, forms, and more wherever you place it on a WordPress page or post. You can arrange blocks however you like them, and you can customize many of them to get the look and features you want.

Related: 27 WordPress Block Themes Perfect For Full Site Editing

Now that we’ve made sense of blocks, let’s dive back into patterns.

As we started saying, block patterns are predefined combinations of blocks that make up functional elements for WordPress pages and posts, such as headers and footers, newsletter subscription boxes, and e-commerce displays.

Perhaps the coolest feature of patterns is that the fonts, colors, and other styling elements of each block in a pattern automatically adapt to match your theme. You can still customize patterns every time you use them, in case you want to move or remove an element of a pattern on one page or post but not on another.

A great example would be using a singular pattern as a premade template for all of your blog posts. You want them to be decently similar, but you may want calls to action (CTAs), FAQ sections, forms, and other elements to live in different places depending on the content and audience.

Developers of popular themes have their own custom patterns, making it easy to build a beautiful and even complex layout that you know will function fully. If you’re shopping for both modern theme styles and the best patterns to power them up, this guide has a helpful list of themes and the premade patterns that work with them (free and paid).

In summary, WordPress patterns are pre-designed elements that enable website owners, managers, and developers to quickly create powerful, consistent websites.

With that, let’s talk about how to access WordPress patterns.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

Understanding The WordPress Pattern Directory

Now, we can dive into the good stuff you came here to learn about today: the WordPress Pattern Directory.

But first (gotcha!) we have one more caveat: there is a WordPress Pattern Directory and a WordPress Pattern Library.

This is because there’s one for both WordPress.org and WordPress.com, which are different.

WordPress.org is an open-source platform for creating customized websites. You can download it and use it for free. However, to make your website live and accessible on the Internet, you will need to purchase web hosting.

This is where WordPress.com, an online site builder and hosting provider, comes in. The basics are free on WordPress.com, and you can access upgraded features for a fee.

DreamHost Glossary

Website Builder

A website builder is a platform or program that helps people create websites in a simplified fashion. Website builders often rely on drag-and-drop editors, and don’t require any prior web development or coding knowledge.

Read More

The WordPress Pattern Directory, or Block Pattern Directory, exists on WordPress.org. The WordPress Pattern Library lives on WordPress.com.

Both resources hit the scene recently to provide a singular place for pattern designers and developers to share the creations that make their lives easier. Creative website owners and/or builders like you can access those resources to quickly build beautiful, functional experiments without reinventing the wheel every time.

The best feature of all? The 100s of patterns listed on the library and directory are free to use.

The WordPress block pattern library and directory make it exceedingly easy to find the right pattern for your website.

Across the top of each website’s homepage, you’ll see a set of filters that you can use to narrow down the types of patterns you’re looking at.

Currently, the block pattern categories in the directory include:

  • Posts: Display your blog content
  • Text: Present text anywhere on your website
  • Gallery: Showcase pictures
  • Call to Action: Encourage site visitors to act
  • Banners: Display designs at the top of pages to engage visitors
  • Headers: Help with website navigation
  • Footers: Appear at the bottom of websites to offer additional navigation
  • Wireframe: Provide placeholders to plan and experiment with different design elements

You’ll also find a search bar to locate specific patterns. This is a quick way to find solutions tailored to your requirements.

A purple rectangle emphasizes the block pattern categories. A search bar appears below the categories.

In the directory, you can click a pattern to preview its appearance on different screen widths.

A wide-screen pattern preview shows the word 'etcetera' against a green and salmon background

On both sites, you should see a blue button that allows you to copy the pattern.

A blue button reads 'Copy pattern'

We’ll show you exactly where this comes in handy as we dive into using a pattern on your WordPress site for the first time.

How To Get Started With The WordPress Pattern Directory

Let’s dive into implementing your first pattern on your website.

First, you need to select the post or page where you want to add a pattern. We’re going to log into WordPress, look for Posts in the sidebar, go to All Posts, and select the one we want to edit.

The Posts menu in WordPress. The first option lists 'All posts' in white.

Once we’re inside that post, in the upper-left corner of the editing area there should be a plus button that opens both the blocks and patterns menus.

A purple rectangle is drawn around the blue plus button in the upper-left corner of the editing area

Note: Not seeing the option to add blocks or patterns on the page you’re editing? You may not yet use a theme that supports them. Our guide How To Switch From A Classic Theme To WordPress Block Themes will walk you through how to upgrade to a block theme so you can take advantage of all its modern benefits.

Once you have that menu open, switch to the Patterns tab. Here, you’ll see all the available block patterns for the theme you’re using.

The Patterns tab reveals a long vertical list of options. At the bottom is a button that says, 'Explore all patterns'

Let’s say we want to add a call to action to the post. We’ll click into that category and select our chosen CTA pattern. Just like that, it will appear wherever our cursor is in the post.

Tip: Insert a pattern you’ve copied from the pattern directory or library. Just use the blue copy button on the desired pattern, come back to the WordPress page or post you want to edit, click on the screen where you want the pattern to live, and paste.

A gray box says 'Call to Action' in the top-left corner.

Want to move, remove, or otherwise edit your pattern? Click on it in the post to see all the pattern settings and options.

The settings to move, remove, or edit your pattern have a simple user interface with icons to click

Be sure to select Save draft or Publish at the top right of the WordPress screen to save your work.

Those are the basics of using patterns on your website. Super easy, right? 

What’s The Point Of WordPress Patterns?

Patterns seem to have it all. They can supercharge the speed at which you create and build,  ensure effortless uniformity to improve your brand impression, and deliver the aesthetic you’ve always wanted your website to have.

Creation Speed

Each pattern in the directory seamlessly integrates with most modern themes. And implementing patterns is as simple as dragging and dropping your favorite elements into place.

That means you don’t have to be a WordPress designer or understand development to quickly create powerful experiences that showcase your brand, boost SEO, and even grow conversions and retention.

Website Consistency

Spending hours meticulously combing through every page on your site to change that midnight blue color scheme to navy instead?

Oof, not again.

WordPress patterns inherit font, color, and spacing settings from the theme itself. No generic presets here!

This significantly reduces the likelihood of visual inconsistencies, whether you’re updating or just experimenting with your site’s look and feel.

Beautiful Designs

Probably one of the best, and most obvious, benefits of using patterns to flesh out your business website is that they’re usually ridiculously good-looking.

Some full-page patterns practically design website pages for you. All you have to do is make a few tweaks, and you can have a customized, on-brand website that looks professionally designed.

A full-page pattern for a clown school. Icons tout pattern benefits: speed, consistency, & design

Overwhelmed? 3 Tips For Choosing The Best Patterns

It’s a great thing that there are thousands of WordPress patterns up for grabs.

It can also be somewhat mind-boggling to sort through them and choose the best ones for your website.

So, let’s wrap up with a few tips to help you make wiser, quicker decisions when it comes to patterns.

Start With Accessibility

As much as 15% of the world’s population experiences a disability, which is why a network of laws and agencies around the world keeps website accessibility standards high.

Some tips for increasing accessibility include using readable font sizes, creating high-contrast designs, simplifying navigation, captioning graphics, and making your website structure logical. Choose patterns that improve accessibility across your site — such as text patterns with large font or design patterns with high contrast — without having to scrap the whole thing.

For a full walkthrough, be sure to read How To Design An Accessible Website (A Complete Guide)

Decide On Your Story And Style

When it comes to designing a website, layout and appearance tell the story of your brand.

Only you can tell that story accurately. Once you have it nailed down, it should inform everything else, such as your content and the style in which you present it.

Is minimal and simple the right vibe? Or is your brand loud and vibrant? Do images take center stage when selling your product, or is content key for your service offering?

Once you know the answers to these questions, you can cut right to the chase and put together a collection of patterns that craft a website that tells your story.

Learn more about web design with Top 7 Basic Elements Of Web Design.

That said, sometimes understanding your brand to the core doesn’t stir up any ideas for design. Some of us just aren’t visual thinkers.

If that’s you and you need inspiration fast, look no further than our guide to web design trends.

With a little direction, you can start picking out patterns and build a site that’s both stylish and uniquely yours.

We’ll Help You Decode The WordPress Pattern Directory

With that, you’re fully prepared to access WordPress’ directory and library and start creating the web design of your dreams.

But what if you don’t trust your design chops, don’t have time to deal with it as you field business orders left and right (congrats!), or you simply don’t wanna?

We get it.

That’s why our simple, affordable hosting plans and web dev, web design, and website management pros support website owners and managers on their missions to create SEO-boosting, conversion-making, and downright beautiful online experiences.

Ad background image

Launch Your Website with DreamPress

Our automatic updates and strong security defenses take server management off your hands so you can focus on creating a great website.

Check Out Plans

The post Decoding WordPress: Build Fast With WordPress Pattern Directory appeared first on Website Guides, Tips & Knowledge.

]]>
Common WordPress Image Upload Issues And How To Fix Them (5 Methods) https://www.dreamhost.com/blog/how-to-fix-wordpress-image-upload-issues/ Mon, 13 May 2024 13:00:00 +0000 https://dhblog.dream.press/blog/?p=30706 Take care of WordPress image upload issues with our guide. Find out why errors occur & get solutions.

The post Common WordPress Image Upload Issues And How To Fix Them (5 Methods) appeared first on Website Guides, Tips & Knowledge.

]]>
Images are a super duper important part of any website. We process visual content way faster than text, and pictures can help us understand complex ideas.

As a site owner, this means spending a lot of time with photos. And when you’re regularly uploading images to your WordPress website, it’s only natural to stumble upon the occasional error message.

Fortunately, there are ways to diagnose even the fuzziest image upload issue. After running through a checklist of common fixes, you should have no problems adding beautiful, eye-catching visuals to your website.

In this article, we’ll look at why image-related errors can be tricky to diagnose. We’ll then share five solutions for you to try the next time the WordPress Media Library doesn’t want to cooperate with your creative vision. Let’s get started!

An Introduction To WordPress Image Errors (And Why They’re A Problem)

Beautiful visuals aren’t just pretty to look at. If you’re running an e-commerce store, product images are particularly important for driving sales, because they let people see what they’re purchasing. Maybe that explains why images make up around 40% of the median web page.

However, uploading images to WordPress isn’t always straightforward. Sometimes, this popular Content Management System (CMS) displays a failure to upload error. These issues are notoriously difficult to diagnose, as a number of factors trigger them. This can make it difficult to know where to start to address the problem.

WordPress Media Library dialog box showing an error while uploading an image: "The server cannot process the image."

The good news? We’re going to walk you through the steps we take to identify and fix image upload issues in WordPress.

We’ll Fix Your Image Upload Issue

Skip the troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

Check out plans!

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

Common WordPress Image Upload Errors And How To Fix Them (5 Methods)

The last thing you want is your workflow interrupted by a vague error message. Below are five ways to fix upload errors, so you can start adding stunning images to your website. Pronto.

1. Adjust The Image File Name And File Size

If you’re only encountering issues with a specific image file, you can start by looking at the file name. If you’re using special characters ($, *, &, #) or accent letters (ñ, á, é), these can cause issues with the WordPress media library.

DreamHost Glossary

File Manager

A file manager is a software application that enables users to manage their files. It typically provides a Graphical User Interface (GUI) where people can browse through their files, open them, edit them, and save them.

Read More

The image may also be too large — both, in terms of dimensions and file size. You can change an image’s dimensions using your favorite editing program. If you’re trying to upload a particularly high-resolution graphic, you can squeeze the size without impacting the quality, using a compression tool such as TinyPNG.

TinyPNG's website landing page with a call to action to optimize images and a panda chewing on a bamboo stick.

If you regularly encounter issues due to file size, then WordPress’s limit may be set too low. You can raise the maximum upload size by adding code to your site’s php.ini file:

upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 300

If your site doesn’t already contain a php.ini file, you can create it inside the PHP folder for the current PHP version your site is running. Then, simply add the above code at the end of the file.

2. Increase The Memory Limit Of Your WordPress Site

When you try to upload an image, you might encounter the WordPress HTTP error. This can sometimes be caused by low server resources or unusual traffic. For this reason, it’s always worth waiting a few minutes and then attempting to re-upload the image.

If the issue doesn’t resolve itself, then you may be exceeding the WordPress memory limit. You can increase the amount of memory that PHP can use on your server by connecting to your site over SFTP.

DreamHost Glossary

SFTP

Secure File Transfer Protocol (SFTP) is a safer version of the FTP protocol that uses a secure shell data stream.

Read More

Next, open your wp-config file. You can then add the following, which will increase the limit to 256MB:

define( 'WP_MEMORY_LIMIT', '256M' );

You can also define your WP_MAX_MEMORY_LIMIT in the same way, should you want to try overriding the memory limit specifically for backend tasks.

If you’re still unable to upload visual content, your problem might be related to threading. WordPress processes images using either the GD Library or Imagick module, depending on which one is available.

Imagick was designed to use multiple threads to accelerate image processing. However, some shared hosting providers limit Imagick’s ability to use multiple threads, which can result in an HTTP error. You can often resolve this issue by adding the following to your .htaccess file:

SetEnv MAGICK_THREAD_LIMIT 1.

Remember to check with your host if you can change thread limits.

Related: How To Fix The WordPress Memory Exhausted Error By Increasing Your Site’s PHP Memory Limit

3. Deactivate Your Plugins

Third-party software can sometimes interfere with your image uploads. If you’re using any plugins, it’s always worth deactivating each one individually and testing to see whether this resolves your image upload issue.

WordPress dashboard open to the Plugins tab. Button "Deactivate" is selected from the drop-down menu at the top.

If a plugin is to blame, you can double-check to make sure you’re running the latest version. If you’ve fallen behind on your updates, you may be struggling with a problem that’s already been resolved in recent updates.

However, if you are in fact running the latest version, we recommend contacting the plugin’s developer to make sure that they’re aware of the issue. This can also be an opportunity to ask whether they plan to solve this problem in their next release. If the plugin is critical to your site and there’s no fix on the horizon, it might be time to look for an alternative solution.

Related: The Beginner’s Guide To WordPress Plugins

4. Clear Your Site’s Cache

If you’re using a caching plugin, then clearing the cache may be enough to resolve your image upload issues. We should mention, however, that it’s incredibly rare for the cache to prevent a file upload, so we’re including this fix out of an abundance of caution.

If you think that caching could be causing the error, the steps you take will depend on your chosen caching solution. For example, if you’re using the W3 Total Cache plugin, you can clear the cache by selecting Performance > Purge All Caches from the WordPress toolbar.

WordPress toolbar showing the "Performance" tab selected and an option to "Purge All Caches" as first in the drop-down menu.

If you’re unsure how to clear the cache in your specific tool, the plugin’s settings menu is often a good place to start. You can also check the developer’s official documentation for more details.

5. Try The Browser Uploader

Still having issues? If you’ve tried all of the above fixes but the problem persists, you can use your browser’s built-in file uploader. Unlike WordPress’s image uploader, the browser uploader doesn’t support multiple file selection or drag and drop. However, it can be a useful workaround when you need to upload an image quickly.

To access the native image uploader, navigate to Media > Add New Media File. You can then select the browser uploader link.

WordPress toolbar showing the "Performance" tab selected and an option to "Purge All Caches" as first in the drop-down menu.

Next, click on Choose File. This launches the familiar file selection dialog, where you can upload the image as you normally would. If this workaround succeeds, we recommend trying to upload an image using WordPress’s standard image uploader afterward — just to check whether it resolved your issue.

FAQs About Fixing Image Upload Issues In WordPress

Have more questions? Luckily, we have an endless supply of answers. Here are some of the most common requests!

Why am I getting an HTTP error when uploading images?

In most cases, HTTP errors are caused by one of the following issues:

  • The images you’re uploading exceed the file size limits
  • Plugin conflicts are interfering with uploads
  • There are problems with your browser’s cache

Why are my image files taking so long to upload?

A slow internet connection, a large file size, server performance, or high traffic on your website could all be contributing factors. Here’s a detailed guide to fixing slow image uploads.

What is the “Unable To Create Directory” error?

Normally, this problem occurs when a plugin or script can’t create a new directory within your website’s file system. This can happen if the program has insufficient permissions to write to the target location, or is using a file path that doesn’t exist. Also, it can happen when your storage is full.

Additional WordPress Error Tutorials

Once you’ve solved your image upload error, the adventure isn’t over. There’s always more to learn about WordPress! We’ve put together several tutorials to help you troubleshoot other common WordPress errors:

Want more information on managing a WordPress site? Check out our WordPress Tutorials, a collection of guides designed to help you navigate the WordPress dashboard like an expert.

WordPress Images Made Easy

Visuals are crucial for catching (and holding) your visitors’ attention, but image upload issues are frustratingly common. By following our simple steps, we’re confident that you can get your site back on track — even when the error message itself doesn’t provide much information.

Let’s quickly recap five ways to resolve common WordPress image upload issues:

  1. Rename, resize, and re-upload the image
  2. Increase the memory limit
  3. Deactivate your plugins
  4. Clear the cache
  5. Try the browser uploader

Tired of troubleshooting WordPress errors on your own? All of our DreamPress hosting packages include 24/7 customer support, so you’re always covered.

We also offer unlimited traffic, automatic WordPress updates, and daily backups to keep your site running smoothly — and plans that start at just $2.59 per month.

Sign up today to try the DreamHost experience for yourself!

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

The post Common WordPress Image Upload Issues And How To Fix Them (5 Methods) appeared first on Website Guides, Tips & Knowledge.

]]>
How To Write Product Descriptions That Really Sell: 10 Tips https://www.dreamhost.com/blog/how-to-write-product-descriptions/ Fri, 03 May 2024 08:00:00 +0000 https://dhblog.dream.press/blog/?p=22881 Learn how to write product descriptions that not only describe what you're selling but actually convince customers to click "buy."

The post How To Write Product Descriptions That Really Sell: 10 Tips appeared first on Website Guides, Tips & Knowledge.

]]>
Congratulations! You’ve done the hard website promotion work to lead a potential customer right to your product pages.

But you can’t rest on your laurels quite yet.

As they read through a product description to decide whether or not they will purchase something from your e-commerce business, the million-dollar question arises: Will they buy what you’re selling?

The answer, in large part, depends on how much time and effort you put into your product description.

It may seem drastic to weigh product descriptions so heavily, but research shows that they’re often a decision-making point in the customer journey.

Simply put, users who find sufficient information in a product description are more likely to feel confident and make a purchase.

Those who don’t? They’re more likely to abandon the page or bounce from your site altogether.

A blue horizontal bar graph shows 2022 average desktop and mobile web bounce rates by industry

In an online-heavy, post-pandemic world, there are three leading factors influencing how U.S. consumers choose where to shop:

  • Delivery options and speed (amen)
  • Price (of course)
  • The quality of the online images and product description (wow!)

Well-written product descriptions are a critical conversion tool for modern online business websites.

If you want to increase e-commerce sales, it’s time to polish your product descriptions. Let’s talk about how and why.

Why Prioritize Product Descriptions?

Here are just a few of the reasons it’s crucial to consider your product descriptions in e-commerce.

Improve Satisfaction (And Reduce Returns!)

Detailed product descriptions inform customers about each product’s features, uses, and benefits, clarifying their understanding of the product and how it fits their needs.

This can lead to higher customer satisfaction and fewer expensive returns for you due to mismatched expectations.

Improve SEO Performance

Well-optimized product descriptions can seriously improve search engine optimization (SEO) for your e-commerce website. Including relevant keywords, clear product information, and engaging content can enhance your visibility in search results, attracting more organic traffic.

DreamHost Glossary

SEO

Search Engine Optimization (SEO) is the practice of improving a site’s ranking in search results. Search results are aggregated based on a number of factors, including a site’s relevance and quality. Optimizing your site for these factors can help boost your rankings.

Read More

Differentiate Your Products And Value

A well-crafted product description articulates a product’s unique value proposition, showcasing its benefits and advantages over competitors. This differentiation is key in attracting customers who resonate with the specific advantages your product offers.

Make Sales More Hands-Off

Effective product descriptions guide potential buyers through the sales funnel, transitioning them from curious browsers to motivated buyers. By presenting compelling information, product descriptions encourage users to take the next step and make a purchase. This streamlines the sales process without additional effort from you or your team.

Build Brand Trust

Detailed and accurate product descriptions build trust in not just your offerings but in your overall brand.

When customers have access to comprehensive information about your products that has turned out to be true, they are more likely to trust your brand, leading to repeat purchases and positive word-of-mouth recommendations.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

10 Ways To Write An Excellent Product Description

What actually makes a good product description?

In this guide, we’re giving you ten tips (along with winning examples) that provide a comprehensive look into what makes an effective product description.

Let’s go!

(*record scratch* You don’t have an e-commerce site yet? That’s actually not a big deal anymore. Platforms like WooCommerce and Shopify plug seamlessly into a WordPress website to help you handle listing products, posting reviews, shipping goods, and even monitoring store performance metrics. That said, you don’t have to have your website perfectly finished to work on product descriptions. So wherever you are in the process, this guide should still be helpful for you. OK…now let’s go!) 

1. Identify Your Buyer Personas

To successfully write about product features that land with your potential buyers, you must know who they are.

This means you need to reference your buyer personas, which are fictional representations of your ideal customers based on market research. If you don’t already have a buyer persona, the time to create one is now.

A sample buyer persona of 'eco-conscious Emma' features her photo, demographics, interests, and goals

A buyer persona should answer the following questions:

  • What demographic do your ideal buyers belong to?
  • What are their interests?
  • What is their native language?
  • What kind of language appeals to them? (e.g., Does industry jargon appeal to them or turn them off?)
  • How do they spend their free time?
  • How do they find your website?
  • Why are they interested in your store?

If you have the luxury of big data at your hands, collect information on your current customers to also understand:

  • Product preferences
  • Behavioral patterns
  • Purchasing tendencies

Access to this data will help you fine-tune your buyer personas. Once you know who you are selling to, it will be easier to write product descriptions that resonate with them.

2. Focus On Product Benefits And Features

Your buyers don’t head to your page to simply connect. Instead, they come to learn what your product can do and how it will meet their needs and solve their pain points. To help them accomplish this, you need to write an extensive list of your product’s features and benefits.

Start with the features. For example, if you sell shoes, include size information, material, color, the weight of the shoe, etc. Your features section should be comprehensive and tell consumers everything they need to know about what makes your product special.

And while a list of features is a great start, it’s only half the battle. Potential customers also want to know the benefits of your particular product. This is where your product description really starts to shine. Following the shoe example, benefits would include things like comfort, flexibility, odor resistance, wet and dry traction, etc.

Allbirds does a fantastic job of highlighting some of the benefits of their shoes without being verbose. Their key advantages are spelled out in short, sweet blurbs that get right to the point.

A simple chart from the Allbirds website calls out product features of its Wool Runner shoe

Benefits are your main selling points, your differentiators, and the reasons why customers will select your product over your competitors. Always clearly identify them.

3. Stay True To Your Brand’s Voice

Aligning with your brand’s voice is essential to creating authentic and engaging product descriptions. Your brand’s voice should reflect your personality, values, and style across all communication channels, including product descriptions.

If your brand’s voice is professional, your product descriptions should be professional. If your vibe is funny, then your product descriptions should match.

Most people are familiar with the hilarious Poo~Pourri (now just “~Pourri”) advertising videos (not safe for work!) that launched a $500+ million empire.

They’re memorable in part because ~Pourri has a unique brand identity and tone of voice, which they follow even on their product pages.

The Poo-Pourri Peaches & Cream product listing uses images and funny text to appeal to readers

4. Tell A Full Story

Every good story has a solid beginning, middle, and end. Unless, of course, it’s the Game of Thrones television series…but I digress.

With product descriptions, the formula for good writing is no different. You need to present a complete story to engage your readers. This doesn’t mean you need to write a novel, but at the same time, your product description shouldn’t just be a list of features and benefits either.

Instead, show (not tell) your customers how the product will improve their lives. Help them visualize a real-life scenario where your product solves a problem. The goal is to create a narrative arc in which the reader is the hero and your product is the tool that enables them to succeed.

But what if your product isn’t especially photogenic or is *gasp* kind of boring?

People may have once thought that about athletic wear, but I bet no one thinks that when they imagine Nike. Nike’s commercials, brand strategy, and even the way they describe their products transcends the materials to help the reader imagine how their life could change with just this one product.

Nike Zegama product description

Customers aren’t just buying the shoes — they’re buying the experience, the confidence, the ability to excel.  Now that’s a powerful product story.

5. Use Active Language To Persuade Buyers

Your mom was right — The words you use make a difference, especially with product descriptions.

The truth is that some words are more persuasive than others. In fact, experts have tested all kinds of language to come up with 189 words and phrases that actually improve conversion rates.

Consider these 20 tried-and-tested words recommended by David Ogilvy, the proverbial “Father of Advertising”:

  • Suddenly
  • Now
  • Announcing
  • Introducing
  • Improvement
  • Amazing
  • Sensational
  • Remarkable
  • Revolutionary
  • Startling
  • Miracle
  • Magic
  • Offer
  • Quick
  • Easy
  • Wanted
  • Challenge
  • Compare
  • Bargain
  • Hurry

The common theme? Persuasive words encourage consumers to take action.

Jon Morrow of SmartBlogger has a similar list of power words that tap into your customer’s emotions, making them more likely to engage with your message.

A chart lists power words for product descriptions like 'amazing' and 'magic'

Since many companies use awe-inspiring (see what we did there?) power words in their product descriptions, it’s easy to find good examples, even for seemingly bland products.

Here’s one from Jack Black that utilizes power words to make shaving cream feel swanky.

Jack Black product description

When writing product descriptions, take a moment to scan through your copy and make sure each word pulls its weight.

Related: How To Write An Effective Call To Action

6. Make Text Scannable

Scannability is one of the most critical elements of writing a good product description, especially since attention span is on a downward trend.

This means it’s essential to make your content easily digestible. There are several solutions to packing a narrative punch in a relatively small space:

  • Apply headings and subheadings to break content into sections
  • Put short snippets of info into bullet points or numbered lists
  • Use bold or italicized text to emphasize important phrases
  • Keep any paragraphs concise and focused
  • Ensure there’s white space between content 
  • Select a legible font size and on-brand font style

J.Crew does this well. Below an eye-catching headline and a longer description (great for SEO!), they highlight product features in an easily scannable list of bullet points.

A sample product description from J.Crew provides a bulleted list of features

The more you can do to make a product description scannable, the better.

7. Optimize Copy For Search Engines

Copywriters and business owners have a unique challenge when it comes to writing product descriptions. They must persuade readers, but there’s another audience to keep in mind, too: search engine algorithms.

SEO is the practice of applying both on-page tricks (such as using keywords) and off-page tactics (such as a backlinking strategy) to make your website findable via a search engine. 

That’s why SEO, including identifying and using the appropriate keywords for your products, should be a critical part of your product description writing process.

Google’s algorithms are constantly changing, so what works one day might not the next. However, some keyword strategies stand the test of time, such as avoiding duplicate content and including target phrases in the following places:

The keywords you use in your copy help Google and other search engines identify what the page is about. This information is then used to determine how to rank your site on the search engine results page (SERP) so that relevant results are served up to people inputting related search queries.

For example, when you type “shaving cream” into Google, Google displays lots of products.

Sponsored shaving cream listings from Google

There are literally hundreds of shaving cream products on the market today. Those that show up first have a combination of good advertising and SEO strategies.

Take Cremo Shave Cream, for example. When visiting the landing page for their shaving cream products, it’s clear they have maximized the use of keywords such as shaving cream, shave cream, and shave.

Shaving cream landing page on the Cremo website with three product visuals, titles, prices, and star ratings

8. Add Images And Video

It should go without saying that a great product description must include images. If you need extra persuasion, remember that Etsy found that 90% of their shoppers rank quality of images as important when making a purchasing decision.

If your e-commerce store can afford to hire a product photographer, awesome! If not, there are plenty of DIY product photography tutorials to help get you started. Of course, good photos start with good equipment, including:

  • Camera
  • Tripod
  • Backdrop
  • White bounce cards made of foam board
  • Table
  • Tape

Once you’ve gathered your gear, you need to know how to take stellar photos, which you can do on a budget with tricks like:

  • Setting up a simpler backdrop so it’s easier to touch up images
  • Relying on natural light or affordable lighting solutions
  • Using a low-cost tripod to steady your camera for clear, detailed shots

Budget even tighter? Pull out the computer in your pocket. If you don’t think a smartphone will do the trick, think again. Hundreds of small brands successfully DIY their product photos on Instagram. Professional photographer Chris Pieta even put together a video to prove that an iPhone 15 Pro can capture great product photos.

Considering that video has the highest ROI of all media formats and short-form video has the best performance among all video types (thanks, TikTok!), it also makes sense to learn how to make these types of videos.

For a corporate example of excellent product photography and awesome videos, iRobot’s Roomba product page features various forms of media to show consumers exactly how each version of their famous vacuum product works.

Black vacuum image from iRobot

Related: How To Create A Winning Social Media Strategy

9. Incorporate Reviews

In addition to powerful content and beautiful imagery, many successful e-commerce sites use product reviews.

Just like the descriptions you write, customer reviews can emphasize your product’s value and features, help build brand trust, and even boost SEO.

Reviews tap into social proof, which is the phenomenon where people are more likely to participate in something they see others doing. In a marketing sense, content that shows people using and loving your product can spur others to try your product. Reviews are a free way to create this kind of content.

The majority of consumers read reviews before making a purchase, 77% specifically look for websites with reviews, and almost half will walk away from a product if there are no reviews available.

With stats like that, we recommend making sure your e-commerce website has reviewing capabilities. Also, consider creating a program that rewards consumers for reviewing your products once they’ve received them.

Related: 9 Steps To Build An Online Store And Become Your Own Boss

10. Measure And Improve

As we know, the primary goal of a product description is to persuade a shopper to make a purchase. How can you determine if your descriptions are fulfilling this objective? Track their performance by benchmarking and measuring movement on key performance indicators (KPIs).

DreamHost Glossary

KPI

‘KPI’ stands for Key Performance Indicator. In SEO, KPIs are metrics used to measure the success of a campaign. KPIs are typically quantifiable data points, such as total organic traffic, conversion rate, or rankings in Google.

Read More

Here are some common KPIs brands use to monitor how well product content is doing:

  • Conversion rate: The percentage of page visitors converted into customers (or leads). This is a good indicator of the power of the content on a product page, and how well it connects to any marketing or advertising that has led shoppers there.
  • Cart abandonment rate: The proportion of shoppers who add items to their cart but leave without completing the purchase. High cart abandonment rates may suggest issues with product descriptions, but they can also expose friction in the checkout process.
  • Return rate: The percentage of products shipped out that customers return. This metric could indicate discrepancies between product descriptions and the actual products.
  • Support inquiries: A high number of queries about a product may signify unclear product descriptions.

Most pre-built e-commerce platforms enable you to track KPIs like these. You can also install Google Analytics and similar third-party tools to do the same.

Finding opportunities for improvement? A/B testing software is a popular method for creating alternate versions of product descriptions and testing them with a subset of your audience to compare performance.

How To Create A Product Description Template

While we’ve just outlined tons of tips for writing product descriptions that really sell, it’s important to note that there’s no one-size-fits-all “best” description. That’s because your offerings likely have different product details, benefits, and selling points.

However, if you have a list of similar products and don’t want to start from scratch every time you write a product description, it can be beneficial to create a template.

Follow the key tactics above to build the core sections of your template by asking:

  • What are your buyer personas?
  • What are the pain points of your customers?
  • How does your product solve customer pain points?
  • What power words can you use in your copy?
  • Do you have a unique story or brand voice?
  • Is your language accessible and free of industry jargon?
  • What are the main features and benefits of your products?
  • Do you have an image and video library?

Once you’ve addressed each of these questions to create the template outline, you can tweak it for different product types and audiences. Then, keep an eye on performance metrics. If you find a specific layout outperforms others, use that template for other products to grow your brand and revenue.

Help Your E-commerce Site Shine With Reliable Hosting

Only you can revolutionize the way you write product descriptions.

But what if you want to transform how you display them?

It’s critical that you have a functional, well-designed, and always-on website to feature those product descriptions you’ve worked so hard on.

At DreamHost, we offer various affordable website hosting solutions to get your site online — as well as white-glove professional services for website design, development, and even ongoing management and marketing.

Let’s work together to build and run the perfect custom website to make your online store shine.

Ad background image

Your Store Deserves WooCommerce Hosting

Sell anything, anywhere, anytime on the world's biggest eCommerce platform.

See Plans

The post How To Write Product Descriptions That Really Sell: 10 Tips appeared first on Website Guides, Tips & Knowledge.

]]>
A Step-by-Step Guide To Performing A Content Audit On Your Website https://www.dreamhost.com/blog/how-to-do-website-content-audit/ Wed, 01 May 2024 08:12:24 +0000 https://dhblog.dream.press/blog/?p=45425 Learn how to review and optimize content with a content audit on your website with this step-by-step guide.

The post A Step-by-Step Guide To Performing A Content Audit On Your Website appeared first on Website Guides, Tips & Knowledge.

]]>
There’s a reason Julie Andrews didn’t sing about data analysis instead of whiskers on kittens and raindrops on roses. Those things are nostalgic happiness generators. Flowers and kittens give everyone warmth and fuzzies (unless you’re allergic to cats).

Alas, for most website owners, the only thing the words “content audit” evokes is a shiver down the spine. That’s probably why our beloved Sound of Music heroine didn’t add data and spreadsheets to her list of favorite things. Yep. That’s the reason.

Nonetheless, content auditing is a necessary evil. We’ve long known it’s an integral part of content management, and a big step toward hosting a successful website. Conducting regular content audits isn’t simply a nice thing to do; it’s something you absolutely need to do if you’re looking to improve your website’s success (and your content performance) for the year ahead. And what better time to do that than right now?

Luckily, we’ve got you covered!

We want to make content auditing an experience that is as seamless and enjoyable as possible. Therefore, our step-by-step guide to performing the comprehensive content audit of your dreams — one that will help you meet all your content goals so you can focus your time and attention on raindrops, kittens, and all the rest of your favorite things.

Peace out, dog bites and bee stings.

What Is A Content Audit?

A content audit is a review of all the pieces of content on your website, from blog posts and landing pages to product pages and informational pages.

The content audit process helps you create a comprehensive list or inventory of all the content assets on your site, which you can then analyze to make informed decisions about which content pieces to update, keep as is, consolidate, remove, or create.

What Purpose Does A Content Audit Serve?

Auditing your site’s content is a bit like maintaining your vehicle. In order to run at its best, it needs routine maintenance: oil changes, tire rotations, and occasional fixes for parts that reach the end of their lifespan. Your website, and especially your content, is the same way. When you first publish a blog post, it’s shiny and new, like a brand new car. But over time, its internal links go to 404s. It falls down the SERPs. Its organic traffic drops off. It’s still a good blog post, but it needs a little maintenance — a content audit.

Charts showing 53% of marketers say updating content increases engagement, while 49% say it boosts traffic and rankings.

According to Semrush’s 2023 State of Content Marketing Report, 53% of marketers said updating their content helped increase their engagement. 49% said auditing and updating content helped them increase their traffic and/or improve their rankings.

Clearly, there are a lot of potential benefits in store if you make auditing a part of your ongoing content strategy.

Content auditing can help you:

  • Create a thorough inventory of content from your site and understand how it all performs.
  • Identify gaps in your content, including types of content or specific content formats you could offer to meet your audience’s needs.
  • Make informed decisions about how to improve your content over time to align your content marketing efforts with your larger business goals.
  • Identify content issues you can resolve (such as removing duplicate or outdated content).
  • Identify and improve underperforming content.
  • Improve your site’s SEO performance through your content efforts.
  • Make your site easy for visitors to navigate by keeping content relevant and error-free.
  • Identify high-quality content you can repurpose for other materials, like marketing campaigns or social media posts.
  • Determine the content types your audience likes and dislikes so you can create content that is most likely to resonate with your visitors and customers.
  • Assess your content for digital accessibility and make improvements so it meets current accessibility standards.

Before You Start A Content Audit

Before we initiate the Operation Step-by-Step Guide, it’s important to assess a few aspects of your site to determine what kind of audit to perform (and why) — and whether you need a content audit in the first place.

There are two closely related marketing efforts that require content audits: search engine optimization (SEO) and content marketing. If you employ either of these tactics, then performing a content audit is likely to benefit you and your business.

DreamHost Glossary

SEO

Search Engine Optimization (SEO) is the practice of improving a site’s ranking in search results. Search results are aggregated based on a number of factors, including a site’s relevance and quality. Optimizing your site for these factors can help boost your rankings.

Read More

That’s because gathering a big-picture view of all of your content elements (like URLs, keywords and phrases, word counts, etc.) will allow you to see how you can better grow your organic traffic. Plus, when you revise or improve your content based on your findings, you’re likely to get an SEO bump in addition to creating something that resonates more with your audience.

Now, one last thing before we plunge into the nitty-gritty stuff. A content audit isn’t a 10-minute project.

It’s a time-consuming process and requires a good deal of analytics and brain power. As the old adage goes, don’t bite off more than you can chew. Make sure you have the resources and time to tackle this project. But know that the rewards will be well worth the effort.

Short on time? Scroll to the bottom of the post for a quick trick that can help until you have the time and resources for a comprehensive audit.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

The 6 Steps For A Successful Content Audit

Now that you know what a content audit is, and why you should make regular audits a part of your SEO and content marketing strategy, it’s time to dive into the process. The six steps below represent a basic content audit workflow, but keep in mind that this is just a jumping-off point. You may find there are ways to tweak this process to make it better suit your business objectives. Regardless, these steps are a great place for any business to start.

1. Define Your Goals And Metrics

Before actually plunging into your content library, the first and perhaps most crucial step is to anchor yourself with a clear set of goals. What do you hope to achieve with this content audit?

By defining clear goals and tracking specific metrics, you ensure your content audit will be more focused, actionable, and ultimately more successful in improving your website’s performance and user experience.

The goal you set for your content audit should be specific to your business goals and current content needs.

Below are a few examples of some goals a content audit can help you achieve and the metrics you would track for each one.

Goal 1: Improve SEO Performance

An SEO audit identifies SEO opportunities by highlighting low-quality content, outdated SEO practices, and gaps in keyword coverage. It gives you a bird’s eye view of where and how your content can be optimized to meet the latest search engine algorithms and user search behaviors.

Screenshot comparing Ahrefs and Wordcount website metrics, including health score, domain rating, keywords, traffic, etc.

Tactics to use:

  • Keyword optimization: Reassess the keywords each piece of content targets, ensuring they align with current search trends and user intent. Update content to include relevant, high-volume keywords.
  • Content refreshes: Optimize headings, title tags, meta titles, and descriptions for better SERP visibility. Organize your content structure in a way that search engines can easily crawl and understand.
  • Link health audit: Analyze internal and external links for relevance and functionality. Remove or replace broken links and identify new internal linking opportunities to enhance SEO connectivity.

Metrics to track:

  • Organic traffic: The number of visitors coming to your site through search engines
  • Keyword rankings: Where your web pages rank on search engine results pages (SERPs) for specific keywords
  • Backlinks: The number and quality of external sites linking back to your content

Goal 2: Enhance User Engagement

Engagement metrics provide insights into how users interact with your content, which can help tailor your content strategy to meet user needs more effectively. A content audit can uncover which pieces of content resonate most with your audience and why. By understanding the characteristics of high-engagement content, you can replicate these qualities in future content, improving overall user engagement across your site.

Tactics to use:

  • Content refreshes: Evaluate how your content is presented. Break up large blocks of text with headings, bullet points, and images to improve readability and engagement
  • Multimedia: Identify opportunities to add or enhance multimedia elements like videos, infographics, and interactive content that can increase time on page and engagement
  • Personalization: Consider ways to make content more relevant to different segments of your audience, possibly through personalization or creating more targeted content paths

Metrics to track:

  • Bounce rate: The percentage of visitors who leave your site after viewing only one page, indicating the relevance and engagement level of your content
  • Pageviews: The total number of pages viewed, reflecting the breadth of content consumption
  • Average time on page: How long visitors stay on a page, offering clues about the content’s engagement and value

Goal 3: Increase Content Relevance and Quality

Auditing your site can help you identify outdated, inaccurate, low-quality, or duplicate content that needs updating or removal. This helps make sure your audience finds value in every piece of content they come across, which can increase trust and authority for your site and brand.

Two side-by-side content refreshes comparisons for a website page.

Tactics to use:

  • Content refreshes: Update statistics, references, and examples in older posts to reflect current information and trends. This can also include enhancing the depth and quality of analysis
  • User feedback: Actively seek and incorporate user feedback to improve and tailor your content more closely to your audience’s needs and preferences
  • Competitive analysis: Compare your content with that of your competitors to identify areas where you can surpass them in quality or coverage

Metrics to track:

  • Content freshness: The age of your content and the frequency of updates, which can affect both SEO and user perception
  • Feedback: Direct feedback from users, which can be gathered through comments, surveys, or social media, providing qualitative insights into content relevance and quality
  • Conversion rates: For content with specific calls to action, the percentage of users who take the desired action can indicate the effectiveness and relevance of the content

Goal 4: Increase Conversions

A content audit can even help you increase conversion rates by identifying and optimizing the pathways that lead users toward making a purchase, signing up for a newsletter, or any other desired action. It allows you to pinpoint which content effectively persuades users to convert and which content falls short, providing insights into how your content can be refined to better lead users towards conversion goals.

Tactics to use:

  • Conversion path analysis: Examine the journey users take before converting. Identify high-performing content that drives conversions and low-performing content that may be causing drop-offs. Look for opportunities to streamline and optimize these paths.
  • Call-to-action (CTA) optimization: Evaluate the effectiveness of your CTAs within your content. Experiment with different CTA placements, wording, and designs to see what yields the highest conversion rate.
  • Content alignment with user intent: Align your content with the specific intent of your visitors at different stages of the buyer’s journey. Tailor content to address their needs, questions, and objections at each stage to guide them toward making a conversion.
  • A/B testing: Implement A/B testing for different content elements that could impact conversions, including headlines, content formats, images, and CTAs. Use the results to inform content updates and strategy.

Metrics to track:

  • Conversion rate: The percentage of users who take a desired action after interacting with your content, which is the primary metric for measuring the effectiveness of your content in driving conversions
  • Click-through rate: Measures how compelling your CTAs are by tracking the percentage of users who click on them, indicating the effectiveness of CTA placement and messaging

2. Take Inventory Of All Your Site’s Existing Content

We know, we know. All of your site’s content?! It sounds daunting. But it’s really not that bad.

Compiling a spreadsheet with all the data from your site’s content library is much easier and more straightforward than it sounds. It just takes a little bit of time.

All you really need to do is open up a blank spreadsheet and start filling it in. It’s up to you what you want to include in the different columns, but a good place to start is by putting a specific page or section in the far left column and then adding its URL. From there, you can branch out with different subsections and their URLs and then start listing the data you want to collect (more on that in Step 3).

Sample spreadsheet screenshot with data for a content audit for the Buffer blog.

If the process of making your own spreadsheet leaves you feeling overwhelmed, there are plenty of sites that offer templates to save you from doing extra work (and/or pulling your hair out):

  • CoSchedule, a site known for its great marketing calendar, has a free template to use for a content audit. You have to sign up as a site member before you can access it, but the process is quick and painless
  • If you’re an avid Google Sheets user, Buffer made a great one that you can use (plus a tutorial on how to quickly fill it all in using a bunch of handy content audit tools). Google Sheets was designed for sharing and multi-person editing so this template is especially handy if you need to distribute your audit among several other people.

3. Decide What Data To Collect

Now that you’ve set up and organized your spreadsheet, it’s time to dig a little deeper.

There are several indicators you can track when performing your content audit, but you also don’t want to end up with a ton of information that you’re never going to use. To avoid being bogged down with unnecessary stats, narrow your focus to one or two specific issues.

In addition to tying these back to your goals and their metrics from Step 1, here are some ideas to help you get started:

Functionality

  • Are there any broken links on your site?
  • Do all linked images and videos work?
  • Do videos and images display properly?
  • Do you have the right hosting plan for the job?

Readability

  • Does your content score well on the readability scale?
  • Is it aesthetically pleasing?
  • Does your site have enough white space to give the reader visual breathing room?
  • Are you using headings and subheadings properly?
  • Do the fonts work on all browsers/devices?
  • Is your content coherently organized?

Usability

Relevance

  • Is the content engaging?
  • Is it still relevant or timely?
  • If it’s outdated, could the content be updated or repurposed?
  • Does it resonate with your target audience?
  • Does it get shares, page views, or likes?

4. Gather The Data

Congrats! You’ve completed the basics of content auditing. Not too shabby, eh?

Once you have the foundational steps done, it’s to get into the real meat of the content audit: the gathering. (Gathering data, that is.)

When it comes to gathering the data, there are several different tactics you can use:

Infographic outlining 3 ways to gather data: manual entry, web crawler like Screaming Frog, paid tools like Semrush.

Manually Entering Data

This is the simplest method for gathering data if you have a small site. Arguably, the most important part of a content audit is getting the URLs into your spreadsheet correctly. The reason? This allows you to quickly check out that page and keep track of what changes you’ve made. Plus, if you decide to go back later and revise those changes or add to your audit, you’ll have an easy reference point.

Using A Web Crawler

If you’re working with a bigger site — think, more than a dozen or so pages — and you fear your fingers may fall off from excessive CTRL C+V, you may want to consider using a web crawler to quickly gather information.

A web crawler, such as Screaming Frog’s SEO Spider tool, is a resource that quickly filters through your site and gathers specified data. The process of using a web crawler isn’t as self-explanatory as manually entering data, but if you have a large website housing a lot of content, the time it will save would be worth the initial effort.

Here’s a sample of the information a web crawler can pull for you:

  • Page URLs
  • Title and title length
  • Meta description and length
  • Major headings
  • Broken links
  • Word count

Web crawlers often compress all that data into a CSV file, so you can just download it, and then add the goods to your content audit spreadsheet.

Using A Paid Tool

There are a ton of great SEO tools on the market that can help you gather this data quickly, but for the best tools, you’ll likely need to pay. Some of the most popular paid tools among content marketers include Ahrefs, Semrush, and HubSpot.

How you use each one varies a little bit, so if you’re already familiar with a particular tool, that might be your best bet. Otherwise, each tool offers a robust help section filled with tutorials. Plus, marketers have also created plenty of independent tutorials that you can search for if you need additional help.

5. Analyze Your Collected Data And Create An Action Plan

Finally, the step you’ve been waiting for — making sense of all that data! And actually doing something with the results.

Start by going back to the goals and metrics you set at the start of your audit. How did your content measure up? Which types of content performed well? Which fell short?

See which of your strategies worked, which ones weren’t as successful, and why some efforts succeeded while others seemed to flop. It should also be more apparent what content your audience resonates with.

Because you’ll need to analyze each data point, the audit can be a little time-consuming. That’s why we recommended starting small (beginners especially should only audit a few key aspects of their site), and going back later to audit and analyze what you may have missed.

As you look at the data, keep a close eye out for what content or keywords were the most successful, and which ones weren’t so hot. This will help you identify what pages, ideas, and strategies to completely nix, which ones just need slight adjustments and improvement, and which ones should serve as a model for any future content you incorporate into your site and content strategy.

Because this step requires so much scrutiny, it will be the longest step. But once you’re finished, the results will leave you praising the day you heard of the content audit.

Okay, maybe praising is a bit much, but trust us, you’ll be glad you did it. At least, the results will be rewarding if you learn from your data and create a realistic action plan, which is the next and final step!

6. Adjust Your Content Marketing Plan

After meticulously combing through your data and extracting actionable insights during your content audit, the next step is where it all comes together: adjusting your content marketing plan based on what you’ve learned.

This step is where the rubber meets the road, transforming insights into action, and theory into practice.

With your audit findings in hand, pinpoint areas for improvement. This could mean doubling down on high-performing content types, topics, or formats, as well as identifying underperforming content that can be optimized for better results. Look for opportunities not just to enhance existing content but also to fill gaps in your content library.

Next, set new goals based on your findings. For example, maybe your audit uncovered that tutorials and how-to guides drive significant engagement and conversions for your site. In that case, your new goal might be to increase production of these content types by 20% over the next quarter.

Create a prioritized list of content updates. Some content may need minor tweaks for SEO optimization, while others might require a complete overhaul to improve their relevance and accuracy. Be realistic about the timeline for these updates, considering your resources and content production capacity.

Finally, remember that content strategy is dynamic and ongoing — and this won’t be the only time you audit your content and switch gears. Stay flexible and adaptable because things will change again in the future.

Ready To Take Action?

Each website’s content audit will look different so don’t worry if you’ve done things a little differently than the Jones’. Because your site isn’t the same as anyone else’s, your action plan will also be entirely unique to you. And that’s a good thing.

A well-conducted content audit that is perfectly tailored to your site allows you to understand how best to move forward.

One way to easily interweave your action plan into the audit is to create a column in your spreadsheet titled “Action Plan” or simply “To-Do.”  By doing this, each piece of content will have its own plan for the future.

This can be as detailed or simple as you’d like it to be. Extra columns can be added assigning who will carry out a certain task, deadlines, etc.

Spreadsheet with content audit data for the Buffer blog with details on URLs, actions, timelines, status codes, titles, etc

At the end of the day, how to organize your action plan is entirely up to you. You may want to create an entirely different document with a thorough outline of what actions you’ll take and when, and what you hope the results will be.

It’s your call. Our goal is to help you create something you can easily reference and understand.

Need A Content Audit Quick Fix?

First, we’ve got to tell a hard truth. No quick fix is going to provide the same results as the in-depth process we just outlined. However, we don’t want to leave anyone out in the cold (because please, we’ve had enough of that this winter).

If you run a WordPress website, you can run a content audit plugin for a quick fix. The WordPress Content Audit Plugin, for example, allows you to create a content inventory right in your WordPress dashboard — Spreadsheet not required.

You’re Finished (Sort Of)!

There you have it, folks. The dreaded content audit isn’t as bad as you thought, huh?

Once you’ve done this initial work, checking your site’s content is never going to be such a challenge again. That’s because once you’ve set up a good system, annual audits will just be a matter of adding new pages or posts to your already awesome doc.

What strategies have you used for content auditing in the past? What’s worked and what hasn’t? We’d love to hear any advice you have to make the content auditing process even more efficient. Please comment below with any tips or tricks you’ve used when auditing your site!

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

The post A Step-by-Step Guide To Performing A Content Audit On Your Website appeared first on Website Guides, Tips & Knowledge.

]]>
Your Complete Bootstrap Primer https://www.dreamhost.com/blog/bootstrap-guide/ Mon, 29 Apr 2024 14:00:00 +0000 https://dhblog.dream.press/blog/?p=44136 Learn how to use Bootstrap with our straightforward guide that shows you how to build responsive, mobile-first websites easily.

The post Your Complete Bootstrap Primer appeared first on Website Guides, Tips & Knowledge.

]]>
Let’s say you need to build an analytics dashboard for your business.

You need one that looks professional and works well on different devices, but you don’t have a lot of time to design everything from scratch.

This is where a framework like Bootstrap comes in. It gives you a head start on building responsive websites. Instead of staring at a blank page, you start with a grid and pre-built components. It’s like having a bunch of Legos. You’ve still got to put them together, but the hard part of making all the individual pieces is already done.

If Bootstrap sounds like a good fit for your project, this guide is for you. We’ll take you through everything you need to know to start building websites with Bootstrap.

Let’s get started!

What Is Bootstrap?

Bootstrap is a free, open-source CSS framework that provides a collection of pre-built components, styles, and tools for creating responsive and consistent web designs. Developed by Twitter engineers Mark Otto and Jacob Thornton in 2011, it has since become one of the go-to frameworks for web developers worldwide.

Bootstrap is currently the sixth most popular framework in the top million sites in the JavaScript libraries category.

Top JS frameworks across the web include 46% jQuery, 11% React, and 10% Moment JS

While jQuery and React have received much attention in recent years, over 1.2 million websites worldwide still use Bootstrap.

Bootstrap usage stats graph with usage along the Y-axis and dates spanning from 2017-2023 on the X-axis

This framework is mobile-first, meaning it prioritizes the layout and styling for smaller screens and progressively enhances the design for larger screens. Because of this approach, all websites built using Bootstrap are responsive across screen sizes by default.

What Makes Bootstrap Different?

Bootstrap stands out from other CSS frameworks in a few key ways.

Its pre-made components, such as navbars, buttons, forms, and cards, save developers a lot of time. Bootstrap’s responsive grid system makes it easy to create layouts that look good on different screen sizes, from big desktop monitors to small phone screens.

Every component of Bootstrap is customizable, so you can change colors and sizes to fit your specific design. This approach offers several advantages:

  1. Rapid development: With a wide range of pre-built components and utility classes, developers can quickly prototype and build web pages without spending excessive time on custom CSS.
  2. Consistent design: Bootstrap enforces a consistent design language across projects, ensuring a cohesive and professional look and feel.
  3. Responsive by default: Bootstrap’s components and grid system are designed to be responsive, adapting to different screen sizes and devices without the need for extensive custom media queries.
  4. Cross-browser compatibility: Bootstrap takes care of cross-browser compatibility issues, allowing developers to focus on building functionality rather than worrying about browser inconsistencies.

However, Bootstrap, like any framework, isn’t one size fits all.

Websites built with Bootstrap look similar with different layouts simply because the UI elements are reused. The framework also comes with a lot of CSS and JavaScript that you might not use, which can slow down your website if you’re not careful. There’s also a learning curve in adopting the classes in the framework.

Despite these potential drawbacks, Bootstrap is still a powerful and popular tool for web development, especially if you want to start quickly. Let’s take a look at how to do just that.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

Getting Started With Bootstrap

Before we talk about the basics, here are three ways to import the framework:

  1. Download the compiled CSS and JavaScript files from the official Bootstrap website and link to them in your HTML file.
  2. Use a Content Delivery Network (CDN) to load Bootstrap from a remote server.
  3. Install Bootstrap via a package manager like npm if you’re using a build tool.

For simplicity, let’s use the CDN method. Add the following lines inside the <head> tag of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Then, add the following line just before the closing </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Note: You need to add these lines for all the following code examples to work.

The Bootstrap Grid System

The Bootstrap grid system is one of its core features, enabling the creation of responsive layouts that adapt effortlessly to different screen sizes.

It is based on a 12-column layout and uses predefined classes to specify how elements should behave at various breakpoints.

Basic Grid

The basic grid is a simple frame with equal-width columns that get taller when the content inside is longer. To create a basic one, start with a container <div> and add rows and columns. Here’s an example:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 2</h3>
        <p>Pellentesque euismod dapibus odio, at volutpat sapien.</p>
      </div>
    </div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Column 3</h3>
        <p>Sed tincidunt neque vel risus faucibus fringilla.</p>
      </div>
    </div>
  </div>
</div>
Three columns with Lorem ipsum text appear against a light blue background

As you see, we’ve created three equal-width columns. Bootstrap handles the padding, spacing between columns, and the alignment.

Grid Column Length

What if you want to control the length of the column? Bootstrap has 12 unit settings that let you decide how wide or how narrow a column can be.  For example, to create a row with two columns where the first column takes up eight units and the second column takes up four units, you can do the following:

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="bg-light border p-3 text-center">
        <h3>Wider Column</h3>
        <p>Nunc vitae metus non velit aliquam rhoncus vel in leo.</p>
      </div>
    </div>
    <div class="col-4">
      <div class="bg-light border p-3 text-center">
        <h3>Narrower Column</h3>
        <p>Fusce nec tellus sed augue semper porta.</p>
      </div>
    </div>
  </div>
</div>
Two columns, a wider and a narrower example, appear against a light blue background

As you may note, there’s a difference in the column classes where the wider column has class col-8 and the narrower column is col-4.

Responsive Column Width

Bootstrap also provides responsive classes that allow you to specify different column widths for different screen sizes. These classes are based on breakpoints, which are predefined screen widths. The available breakpoints are:

  • xs (extra small): Less than 576px
  • sm (small): 576px and up
  • md (medium): 768px and up
  • lg (large): 992px and up
  • xl (extra large): 1200px and up
  • xxl (extra extra large): 1400px and up

To use responsive classes, append the breakpoint abbreviation to the col- prefix. For example:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Column 1</h3>
        <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Column 2</h3>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
      </div>
    </div>
  </div>
</div>
Two column examples with Lorum ipsum text appear against a light blue background

We’ve added the col-md-6 width here, so the columns will automatically resize whenever the screen size is 768px and above.

Bootstrap Components

Bootstrap offers a wide range of pre-built components for assembling user interfaces quickly. These components are responsive and customizable. Let’s explore some commonly used ones.

Buttons

Bootstrap provides well-designed button styles out of the box. To create a button, add the btn class to a <button> or <a> element.

Customize it by adding classes like btn-primary, btn-secondary, btn-success, etc.

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<a href="#" class="btn btn-success">Success Link Button</a>
A vertical stack of 3 buttons: Primary (blue, top), Secondary (gray, middle), and Success Link (green, bottom)

Cards

Cards are versatile containers for content like images, text, and buttons. They provide a structured way to present information.

<div class="card">
  <img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
A sample card in Bootstrap with room for a title and descriptive text, plus a blue 'Go somewhere' button

Here, you can see a card with an image at the top, followed by a title, some text, and a button. The card-img-top class positions the image at the top of the card, while the card-body class provides padding and spacing for the content inside the card.

Navbar

The navbar component is a responsive navigation header with branding, links, forms, and more. It automatically collapses on smaller screens and provides a toggler button to expand the menu.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
A sample card in Bootstrap with room for a title and descriptive text, plus a blue 'Go somewhere' button

With this simple code snippet, we created a toggle menu button for small screens and a list of navigation links.

The navbar-expand-lg class specifies that the navbar should expand on large screens and collapse on smaller ones. The navbar-light and bg-light classes set the color scheme for the navbar. Compare that to creating the menu with plain CSS, and you’ll understand how many steps Bootstrap saved us.

Forms

Moving on to forms, Bootstrap has a range of form controls and layout options to create interactive and accessible forms.

You can easily style form elements like input fields, checkboxes, radio buttons, and more.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
A form with an email address field, a password field, and a blue Submit button

Bootstrap styling has auto-aligned and beautified this form layout from behind the scenes.

This form example includes an email input field, a password input field, a checkbox, and a submit button. The form-label class styles the labels, while the form-control class styles the input fields. The mb-3 class adds a bottom margin to the form groups for spacing.

Creating A Simple Analytics Dashboard With Bootstrap

Now that we’ve covered the basics, let’s put it all together and build a real-world example: an analytics dashboard.

DreamHost Glossary

Analytics

Analytics is the field of data interpretation, typically used to help guide strategy. When applied to SEO, this can include keyword research as well as website traffic and competitor analysis. The goal of SEO analytics is to improve a website’s ranking in results pages, and ultimately drive more traffic.

Read More

Imagine you’re building a web application that displays analytics data for a business. The dashboard will include a header with a logo and navigation, a main content area with data, and a footer with additional links.

Let’s break this down into manageable sections using plain language that’s easy to follow.

Setting Up The HTML

First things first, we need to set up our HTML file.

Start by creating a new file and adding the basic structure, like the <!DOCTYPE html> declaration and the <html>, <head>, and <body> tags. In the <head> section, remember to specify the character encoding, viewport, and page title.

Here’s what your HTML should look like so far, including the Bootstrap.css (imported in the <head>) and the Bootstrap.js (imported right before closing <body>) files called into the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboard</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Your content will go here -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Adding The Header Navigation

Next up, let’s create a header with a navigation bar. Use the <header> tag, and add a <nav> element inside it. Bootstrap’s navbar component is perfect for this. Then, include a logo and some navigation links, like “Overview,” “Reports,” and “Settings.”

Paste this header code inside the <body> tags

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Analytics Dashboard</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Overview</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Here’s what the navigation bar will look like:

A black navigation bar reads 'Analytics Dashboard' and has tabs called Overview, Reports, and Settings

The navbar-expand-lg class makes the navigation responsive, collapsing on smaller screens.

A black navigation bar reads 'Analytics Dashboard' and has a collapsible menu in the far-right corner

We used navbar-dark and bg-dark to give it a sleek, dark appearance. The navigation links are in an unordered list, and ms-auto pushes them to the right side of the navbar.

Creating The Main Content Area

Time to tackle the main content! Let’s use the <main> tag and create a two-column layout with Bootstrap’s grid system.

The left column will hold cards for displaying charts or graphs, and the right column will have a card showing key metrics. Paste this code right below the </header> closing tag.

To make this example more interactive, let’s add Chart.js to show user metrics. Add this script to your <head>.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Remember, you can skip adding this script and the sample data if you just want to see how Bootstrap works. We’re adding it so the boxes aren’t empty.

Now, let’s write the bootstrap columns to give space for the charts and the data metrics.

<main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Website Traffic</h5>
            <canvas id="trafficChart"></canvas>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">User Acquisition</h5>
            <canvas id="userChart"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Key Metrics</h5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Total Users: 10,000</li>
              <li class="list-group-item">New Users: 500</li>
              <li class="list-group-item">Bounce Rate: 25%</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>

Finally, paste this sample data right before the closing body </body> tag. Again, this is not necessary if you only want to see Bootstrap columns in action. We’re adding this sample data for Chart.js to pick up the information and show it on an interactive chart.

<script>
    // Website Traffic Line Chart
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Unique Visitors',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // User Acquisition Bar Chart
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'New Users',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

Putting it all together, you’ll see a beautiful dashboard with a line chart and a bar chart showing growth in our key metrics. The key metrics are also visible on the right side in table format.

Dashboard with a line chart for Website Traffic, a bar chart for User Acquisition, and Key Metrics

We’ve used the container class to center the content and add some padding. The row class creates a row, and col-md-* classes define the column widths.

The left column (col-md-8) has two cards for charts, while the right column (col-md-4) has a card with key metrics in a list group.

Adding The Footer

Almost there!

Let’s add a footer with some copyright info and links. We’ll use the <footer> tag and Bootstrap’s grid system and spacing utilities to control the layout and padding.

<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; 2023 Analytics Dashboard. All rights reserved.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#">Privacy Policy</a>
        <a href="#" class="ms-3">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

You should now see this footer added to the button of your dashboard.

Footer provides privacy policy and terms of service links in bottom right and copyright info in bottom left

The bg-light class gives the footer a light background color, and py-3 adds vertical padding. We’ve split the footer into two columns: one for the copyright notice and one for the links. The text-md-end class aligns the links to the right on medium-sized screens and larger ones.

Putting It All Together

Let’s combine the code now so you can see the complete picture.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboard</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
</head>
<body>
<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Analytics Dashboard</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Overview</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Reports</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
  <main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Website Traffic</h5>
            <canvas id="trafficChart"></canvas>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">User Acquisition</h5>
            <canvas id="userChart"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Key Metrics</h5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Total Users: 10,000</li>
              <li class="list-group-item">New Users: 500</li>
              <li class="list-group-item">Bounce Rate: 25%</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>
<script>
    // Website Traffic Line Chart
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Unique Visitors',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // User Acquisition Bar Chart
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'New Users',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; 2023 Analytics Dashboard. All rights reserved.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#">Privacy Policy</a>
        <a href="#" class="ms-3">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>
</html>

As you can see, the responsive navigation bar is at the top, with the charts directly below it. Bootstrap handles the padding and spacing between grid items, which you can see on your dashboard metrics.

Footer appears at bottom of the screen directly under the analytics dashboard

At the bottom of the screen is the footer with the Privacy Policy and Terms of Service links.

You’ve just created a simple analytics dashboard using Bootstrap. But Bootstrap has tons of components we haven’t even touched upon yet. Be sure to explore the Bootstrap components library to find reusable components for your future projects.

A Toolkit For Responsive Web Design

Bootstrap is a popular framework that helps web developers quickly create responsive websites. It has a grid system, pre-built components, and customization options, making it easier to develop websites that look good on different devices.

Developers with all levels of experience use Bootstrap. It’s pretty easy to learn, but it’s powerful enough to handle big projects. There’s a big community of Bootstrap users for support and lots of resources to help you learn the framework.

When you build a Bootstrap site, you need a good hosting company, too. DreamHost has a virtual private server (VPS) option that works perfectly. It’s flexible and can handle different needs as your Bootstrap site grows.

Why not give Bootstrap a shot and see what you can create? With the right tools and a hosting plan from a company like Dreamhost, you can make responsive websites in no time.

Ad background image

Create a Website for All

We make sure your website is fast and secure so you can focus on the important stuff.

Choose Your Plan

The post Your Complete Bootstrap Primer appeared first on Website Guides, Tips & Knowledge.

]]>
Pay-Per-Click (PPC) Advertising: A Beginner’s Guide For Marketers https://www.dreamhost.com/blog/ppc-guide/ https://www.dreamhost.com/blog/ppc-guide/#comments Mon, 22 Apr 2024 14:00:00 +0000 https://www.dreamhost.com/blog/?p=16768 Soak up the basics of PPC advertising with our beginner's guide. Discover how to effectively launch and manage campaigns to boost your marketing efforts.

The post Pay-Per-Click (PPC) Advertising: A Beginner’s Guide For Marketers appeared first on Website Guides, Tips & Knowledge.

]]>
Imagine you’re throwing a party and want to impress a certain someone by packing the house. Instead of relying on word-of-mouth, you hand out invitations and pay a small fee for each person who accepts and shows up at your door. That’s pay-per-click (PPC) advertising in a nutshell.

In the vast world of digital marketing, PPC offers some distinct advantages over other types of marketing: the ability to allow precise targeting, from demographics and interests to specific times of the day; flexibility to adjust your campaigns in real-time based on performance data; and the potential for high ROI, even if you have a limited marketing budget.

Welcome to our beginner’s guide to PPC advertising, where you’ll learn how to navigate the PPC landscape, create effective campaigns, and optimize your ad spend for the best possible return on investment (ROI). With PPC, every click is a potential customer knocking on your door. Here’s how to answer them.

PPC Glossary

Diving into the world of PPC advertising can feel like learning a new language. This space is full of acronyms and jargon you may not be familiar with, so we put together this glossary to help you learn some of the most important terms before we dive in.

  • Search engine marketing (SEM): The practice of increasing traffic to a website from search results. The focus is primarily on paid ads, but can also include organic search engine optimization (SEO).
  • Pay-per-click (PPC): Advertising is a straightforward yet powerful marketing strategy where advertisers pay a fee each time one of their ads is clicked. It’s essentially a way of buying visits to your site, rather than attempting to “earn” those visits organically through SEO.
  • Cost-per-click (CPC): The actual price you pay for each click in a PPC campaign. It’s a metric used to measure the cost effectiveness and profitability of your paid advertising efforts.
  • Campaign: The highest level of organization with a specific budget, settings, and objectives. Each campaign can contain multiple ad groups.
  • Ad group: A container within a PPC campaign that holds a related set of ads and keywords. Ad groups allow for more detailed targeting and organization within a campaign.
  • Keyword: Words or phrases that advertisers bid on, hoping their ads will appear when these keywords are used in search queries. Keywords are the foundation of PPC campaigns, as they connect advertiser offerings to user searches.
  • Landing page: The webpage users see after clicking on your ad. A good landing page is relevant to the ad text and keyword and optimized for conversions, such as making a purchase or signing up for a newsletter.
  • Quality Score (QS): A metric used by search engines to measure the relevance and quality of your PPC ads and keywords. It affects both your ad position and CPC. Factors influencing QS include the relevance of your ad text, the quality of your landing page, and your click-through rate (CTR).
  • Ad rank: Determines your ad’s position on the search engine results page. It’s calculated based on your bid amount, the ad’s Quality Score, and the expected impact of extensions and other ad formats.
  • Maximum bid: The highest amount you’re willing to pay for a click on your ad. Your actual CPC will often be lower, depending on the competitive landscape and your Quality Score.
  • CPM (cost per mille): A bidding method where you pay based on the number of impressions (or views) your ad receives, with “mille” referring to a thousand impressions. This method is often used in brand awareness campaigns.

Now that you know the lingo, let’s get started.

What Is PPC?

Pay-per-click (PPC) advertising is a digital marketing model where advertisers pay a fee each time a person clicks one of their ads. Essentially, it’s a method of buying targeted visits to a website, as opposed to earning those visits through traditional, organic search engine optimization (SEO).

Against a blue background, an iPad shows examples of ads on SERPs and a phone shows examples of ads on social media

PPC allows advertisers to place ads on search engine results pages (SERPs), social media platforms, and other digital spaces, directly reaching consumers who are actively searching for related products or services. This model can be highly efficient and effective, enabling businesses of all sizes to control costs, track performance, and precisely target their desired audience.

PPC campaigns can be customized with specific keywords, demographic criteria, and ad schedules, making them a highly adaptable and versatile tool for achieving diverse marketing goals, from increased web traffic to lead generation, sales conversions, and more.

How Does PPC Work?

Imagine you’re the owner of a cozy little cafe downtown, and you want more coffee enthusiasts to discover your special blend. PPC advertising is like putting up a digital signpost that guides them directly to your door, but you only pay when someone actually follows that sign and visits your cafe.

That’s how PPC works. Many different platforms and types of ads fall under the umbrella term “PPC advertising,” but they are all “pay-per-click.” This means you only pay for the ad when a potential customer clicks on it.

PPC Vs. SEO

PPC and SEO are both crucial strategies in a digital marketing toolkit, but they play very different roles in driving traffic to your website:

  • PPC is all about instant visibility. By paying for each click, you can see your ads at the top of the SERPs almost immediately after your campaign goes live. This strategy is excellent for quick wins, targeting specific audiences, and promoting time-sensitive offers.
  • SEO, on the other hand, is a long game. It involves optimizing your website and content to rank higher in organic search results. This means improving site speed, using the right keywords, and creating valuable content. SEO takes more time to see results, but it’s cost-effective in the long run and provides sustained traffic over time.
A blue and purple concept web compares PPC and SEO

While PPC can give your site a quick boost in traffic, SEO builds a foundation for a consistent, long-term online presence. Ideally, a balanced digital advertising strategy includes both PPC and SEO to cover all your bases: immediate visibility and long-term growth.

PPC Vs. CPC

The terms pay-per-click (PPC) and cost-per-click (CPC) are often used interchangeably, but they refer to different aspects of paid advertising:

  • PPC is the broader advertising model in which advertisers pay a fee each time their ad is clicked. It encompasses the entire strategy and execution of setting up, running, and managing ads across different platforms, from search engines to social media.
  • CPC, on the other hand, refers to the actual price you pay for each click in a PPC campaign. It’s a metric used to measure the cost-effectiveness and profitability of your paid advertising efforts. CPC can vary widely based on competition for keywords, ad quality, and targeting settings.

In essence, PPC is the strategy, while CPC is a key performance indicator (KPI) within that strategy. Understanding the difference helps advertisers plan their budgets, manage bids, and optimize their campaigns for maximum ROI.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

Why Is PPC So Effective?

Here are a few of the reasons PPC advertising works so well for so many different types of businesses:

1. It’s Cost-Effective

One of the biggest misconceptions about PPC is that it’s expensive. In reality, PPC allows for tight control over your budget. You can set a maximum cost per day, ensuring you only spend what you can afford. Since you only pay when someone clicks on your ad, every dollar is used toward targeting potential customers, making it a highly cost-effective strategy, especially for businesses with limited advertising budgets.

2. It Delivers Fast Results

Unlike organic search methods that can take months to show results, PPC can generate immediate traffic. As soon as your campaign goes live, your ads appear in search results or on targeted websites, bringing in potential customers. This quick turnaround is ideal for promoting time-sensitive offers, launching new products, or just gaining instant visibility in competitive markets.

3. It’s Easy To Control And Test

PPC platforms offer incredible flexibility to adjust your campaigns in real-time. You can tweak your ads, change your target keywords, adjust your budget, and experiment with different landing pages to see what works best. This ability to quickly control and test your campaign elements means you can optimize them continuously for better performance and ROI.

4. It’s Easy To Target Your Ideal Audience

A blue Venn diagram shows how to target your audience by demographic, location, time of day, and interests

With PPC, you can narrow down your audience based on demographics, interests, location, and even the time of day. Precise targeting means your ads are shown to the right people at the right time, increasing the likelihood of conversion. Whether you’re targeting local shoppers or a global audience, PPC allows you to tailor your message to fit your audience’s specific needs and preferences.

DreamHost Glossary

Conversion

A website conversion is any action a user takes on a site that moves them further into the sales funnel. Examples include filling out a web form, clicking a call to action, or purchasing a product.

Read More

5. Data From Your PPC Strategy Can Help Improve Your SEO Strategy

The insights you gain from your PPC campaigns are invaluable for informing your SEO efforts. By analyzing which keywords and ad copy generate the most clicks and conversions, you can optimize your website’s content and meta tags to rank higher in organic search results. PPC data can also help you better understand your audience’s search intent, which allows you to create content that better meets their needs and drives more organic traffic.

Types Of PPC Ads

Different types of PPC ads allow marketers to tailor their strategies to specific goals, audiences, and content formats. Whether you’re looking to drive sales, increase brand awareness, or re-engage past visitors, there’s a PPC ad type that fits the bill. Let’s explore some of the most common types of PPC ads:

Examples of search ads, social ads, and display ads appear side-by-side on different devices.

Search Ads

Search ads are the most common and recognized form of PPC advertising. When you type in a query, these ads appear at the top or bottom of the SERPs. They’re highly effective because they’re shown to users actively searching for products or services like yours. Search ads are text-based and can include extensions, such as site links, call buttons, or location information, to provide additional information and improve click-through rates.

DreamHost Glossary

Click-Through Rate (CTR)

Click-through rate (CTR) refers to the percentage of users that click on a specific link. Ideally, you want as many users as possible to click on URLs leading to your website or to the products and services you’re promoting.

Read More

Display Ads

Display advertising takes a visual route to capture the audience’s attention. These ads appear on websites that are part of a display network, showcasing your business in different visual formats: think banner ads, images, and other types of rich media.

Display ads are ideal for building brand awareness and retargeting campaigns because they allow you to reach users who might not be actively searching for your products but have shown interest in similar or related topics.

Remarketing Ads

Remarketing ads are a powerful way to reconnect with people who have previously visited your website but didn’t make a purchase or take a desired action. These ads follow users across the web and social media, reminding them of what they left behind and encouraging them to return.

Remarketing can significantly improve conversion rates since it targets users who are already familiar with your brand and have shown interest in what you have to offer.

DreamHost Glossary

Conversion Rate Optimization (CRO)

Conversion Rate Optimization (CRO) refers to any practice geared toward improving the number of conversions that you get from websites, email campaigns, and ads.

Read More

Paid Social Ads

Paid social ads appear on social media platforms like Facebook, Instagram, LinkedIn, and X (formerly known as Twitter). Social media sites offer rich targeting options, allowing you to reach specific demographics, interests, and behaviors. You can tailor paid social ads to specific campaign goals, like brand awareness, lead generation, and conversion goals. They come in many formats, from simple image ads to carousel and interactive ads, making them highly versatile.

Video Ads

Video ads are an engaging format combining visuals, sound, and motion to tell a compelling story. You can place them on video streaming platforms like YouTube or embed them within social media feeds.

Video ads are particularly effective for brand storytelling, product demonstrations, or capturing users’ attention in a crowded digital space. They offer creative ways to connect with your audience and tend to leave a lasting impression.

PPC Platforms To Consider

As you might have gathered from how many types of ads exist, there are a lot of PPC platforms you can choose from. Too many for us to cover in this article, in fact, because we know you don’t have time to read an entire novel. So instead, here’s a quick rundown of some of the most popular PPC platforms to consider, including their key features and potential benefits for your advertising strategy.

Google Ads (Formerly Google AdWords)

The home page for Google Ads appears against a light blue background

Google Ads is the king of PPC advertising, offering unparalleled reach thanks to Google’s dominance in the search engine advertising market — 28% of the market share, to be exact. In fact, Google processes more than 90,000 search queries every second. Each one is a chance to target a keyword with an ad that will get potential customers to click.

Google Ads allows advertisers to create both search and display ads, with extensive targeting options based on keywords, location, demographics, and more. The platform is well known for its sophisticated algorithm and analytics, enabling businesses of all sizes to place their ads in front of potential customers at the exact moment they’re searching for related products or services.

If you’re just starting out with PPC, Google Ads is likely the best platform to use for many different reasons. Let’s talk about some of them:

  1. First of all, Google is Google. When you use Google Ads, you know you’re dealing with a reputable search engine. Plus, Google provides you with tons of helpful tools, like its Keyword Planner, account management tools, bid and budget management tools, ad creation tools, and a help center. These resources allow you to more easily create and manage your search campaigns, regardless of your experience level.
  2. Google Ads is completely scalable to your budget, whether that’s big or small. There’s no need to stress about overblowing your expenses on pricey advertising packages. Plus, you only pay when you get clicks.
  3. With AdWords, you can easily keep track of your stats and results; your progress is transparent and measurable. With accessible monitoring, you can continually improve your campaign performance and see better traffic. (We’ll talk success metrics later.)
  4. With PPC, you can target hyper-specific audiences with a variety of match types, increasing your chances of converting relevant customers. Google Ads also provides you with many engaging campaign formats, like graphic display ads, YouTube video ads, text-based ads, responsive search ads, and more.
  5. PPC with Google Ads can quickly get you clicks and impressions. Once you set up your campaigns, they appear immediately on relevant search queries. They also show up on the Google Search Network, a group of search-related websites and apps that includes Google Search Partners. This means your ad can appear in SERPs, certain online directories, and other pages relevant to your campaigns’ targeted keywords, increasing your reach.
  6. Unlike pop-up ads or annoying clickbait, PPC through Google Ads is an unobtrusive advertising method, occurring during an internet user’s routine web browsing and searching.

Bing Ads

Bing Ads, while often overshadowed by Google, offers a valuable and cost-effective alternative to reach audiences. It powers ads on Bing, Yahoo, and other popular search engines in the Microsoft network. With lower competition and cost-per-click (CPC) rates compared to Google, Bing Ads can be a smart choice for businesses looking to extend their reach beyond Google’s ecosystem. The platform also provides robust targeting and scheduling options, making it easier to connect with specific audience segments.

Meta Ads (Formerly Facebook Ads)

Meta Ads harness the vast user data of Facebook and Instagram, offering precise targeted advertising options that are often unmatched on other platforms (even other social media sites).

With Meta Ads, you can target users based on their interests, behaviors, location, and more, making this an ideal PPC platform if your goal is to build brand awareness or promote engagement. This platform supports a variety of ad formats, from simple image ads to immersive video and carousel ads, catering to a wide range of campaign goals.

TikTok Ads

Three examples of ads on TikTok appear against a light blue background

TikTok Ads have surged in popularity alongside the platform itself, especially among younger audiences. This platform offers a unique opportunity for brands to engage with users through creative, short-form video content. TikTok’s ad system includes options for in-feed videos, brand takeovers, and hashtag challenges, providing a playful and interactive way to capture the attention of potential customers.

LinkedIn Ads

Finally, LinkedIn Ads are tailored for B2B marketing. You can leverage the platform’s professional network to reach your target audience based on their job title, industry, company size, and more. This makes LinkedIn a powerful tool for businesses that want to reach professionals and decision-makers within specific sectors. LinkedIn offers many different ad formats, like Sponsored Content, Message Ads, and Text Ads.

How To Build A PPC Campaign

Depending on which platform you choose, the exact steps may vary. The general strategy you use to build a PPC campaign is the same though, no matter what type of ad or advertising platform you use.

Step 1: Decide Your Campaign Goals

A successful PPC campaign requires careful planning and strategic thinking. That means the first step is identifying what you want to achieve. Your campaign goals could range from increasing website traffic and generating leads to boosting sales or promoting brand awareness.

Ask yourself these questions:

  • Who (specifically) are you targeting? A wide audience? Or a smaller subset of your target audience?
  • What outcome do you want? What are your business goals for this campaign?
  • What do you want your target audience to do?
  • How will your campaign succeed?

Answering questions like these can help you guide your campaign choices. Clear goals guide your strategy and help you measure success.

Step 2: Set Campaign KPIs

KPIs are the metrics you use to evaluate your campaign’s success. These could include click-through rates (CTR), conversion rates, cost per acquisition (CPA), and return on ad spend (ROAS). Setting KPIs upfront helps you track performance and make informed adjustments.

If you’re using Google Ads, measuring your progress is simple. With easy-to-use tracking features, you can utilize the site’s metrics to optimize your campaigns. It’s like a one-stop shop for paid search. Here are the four main metrics you need to watch:

  • Clicks: When users click on your ads.
  • Conversions: When users respond to your call to action and engage. A tracking code can help you keep track of this number.
  • Impressions: Instances of your ad being displayed when someone searches the keyword associated with your bid. This is roughly the number of people who look at your ad/the number of viewers the ad reaches.
  • Spend: The amount of money you’ve spent on a campaign.

Also, be aware of these numbers, which involve the fundamental four metrics:

Formulas for calculating ad campaign success appear in colorful boxes against a light blue background
  • Click-through rate (CTR): The percentage of clicks that become conversions (the higher the number, the more effective your campaign). Determine this number by doing a little math: Clicks ÷ Impressions.
  • Conversion rate: The percentage of conversions per click. A successful campaign keeps this number low. Find the conversion rate with another simple formula: Conversions ÷ Clicks.
  • Cost per click (CPC): The price you pay for each click. To calculate this, use the formula: Spend ÷ Clicks. Your goal is to decrease this number.
  • Cost per acquisition (CPA): The amount of money you spend for each conversion. Determine this metric with a simple calculation: Spend ÷ Conversions. Again, try to keep this number low.

Once you start a PPC campaign, review these metrics regularly to look for ways to improve and optimize your campaign. By monitoring these metrics, you can make adjustments to keep performance high and costs low.

Step 3: Choose Campaign Type

Based on your goals, select the type of PPC campaign that best fits your needs. Options include search ads, display ads, social media ads, remarketing ads, and video ads. Each type has its strengths, so choose the one that aligns with your target audience and objectives.

Step 4: Set Campaign Budget

Determine how much you’re willing to spend on your PPC campaign. Consider starting with a modest budget to test the waters and adjust based on performance. Remember, your budget should reflect your campaign goals and the competitive landscape of your industry.

Google Ads is set up to work with your budget, no matter what it is.

Instead of forking over a wad of cash every time you get a click or blowing your ad budget in one go, you can set up your account to work within a daily budget. This lets you dictate how much money Google can spend on your ad placements daily. You can also request to have your budget spread across the entire day to capitalize on clicks at different times.

To learn more, check out Google’s guide on setting up your first bid. (We discuss “bidding” on ads and Google’s auction setup later in this article.)

If you’re just starting with paid advertising or your budget is tight (or both), Google offers you the ability to start slow, measure your success, and work within reasonable financial means while you learn how to optimize your campaign.

Step 5: Perform Keyword Research

For search and some types of display campaigns, keyword research is essential. The keywords you bid on tell Google which search result pages your ad should appear on.

Use keyword research tools (like Google’s Keyword Planner) to find relevant keywords with the right balance of competition, traffic, and cost. Focus on terms closely related to your products or services to attract qualified traffic.

The search bar for Google's Keyword Planner tool appears against a blue background

When you have your keyword list, you can choose from different match types that dictate when your ad is displayed: exact match, phrase match, and broad match. Each type has its advantages and drawbacks. Opt for the one that reflects your audience’s search intent and your campaign’s needs and goals:

  • Exact match displays an ad when the search matches the exact term or close variations of that term. This is a good choice for marketers looking to target a very specific audience. It can also limit your traffic if you’ve narrowly defined your reach.
  • Phrase match displays your ad if the search query contains the same order of words. Unlike exact match, this type allows the query to include additional words.
  • Broad match displays your ad when the search term contains some combination of the terms in your keyword in any order. Your ad could also appear with other variations of the words, such as singular or plural forms, synonyms, etc. This opens the door for more traffic, but the kind of traffic you get could vary. If searchers don’t find exactly what they’re looking for, your conversion rate could drop. So you’ll want to take caution with such a broad reach; you don’t want to waste your money on irrelevant searches.

Whatever your match type, keep tabs on your Search Terms Report so you can evaluate the kind of search queries coming through and adjust your search types to refine your keyword strategy. A good beginner’s option is to start with a phrase or broad match to drive traffic. Then, evaluate your results for converting keywords and switch to exact match.

When all else fails, test. As you optimize your campaign over time, you can add and delete keywords or change match types to best fit your needs.

Step 6: Write Your Ad Copy

How you craft your copy is critical to the success of your PPC campaign. Your ads must be relevant enough to your users’ searches to attract clicks. You also need to meet Google’s editorial standards, guidelines that dictate proper spelling, punctuation, image quality, and more. In addition to following the character limits for your ads, consider Google’s suggestions for copy-crafting best practices:

  • Take advantage of your limited number of characters. After all, you’re paying for the click. Include an effective call to action that invites your customer to buy, click, and shop.
  • Write for a mobile audience. Those customers tapping away on smartphone screens are an increasingly important group. Craft ad copy with them in mind.
  • Set yourself apart by using your ad to call out what makes you different and unique. One-of-a-kind inventory? Bonus incentive? Free shipping? Whatever it is, emphasize your competitive edge.
  • Connect your elements. Increase relevance and your quality score by including at least one keyword in your ad and matching your ad to your landing page.
  • TEST! As with most things on your website, you need to test your PPC ads. Google even allows you to test different versions of your ad. They rotate through your ads to figure out which ones perform best.

Step 7: Create Your Landing Page

When users click on your ads, they reach landing pages via a destination URL. Landing pages are designed to convert; users respond to your call to action by buying, engaging, or subscribing.

The DreamHost website with green arrows pointing to the product specific title and call-to-action buttons

With product-specific or customized landing pages, keep the user experience (UX) top-of-mind. Make it easy for visitors to find the offer you promised. In other words, don’t send them to your site’s home page or frustrate them with incomplete information. Instead, do all you can to help them complete their purchases. Hint: Google can help you test landing pages, or you can A/B test them using some expert tips.

Step 8: Set Up Analytics And Tracking

Finally, implement analytics and tracking mechanisms to monitor your campaign’s performance. Use tools like Google Analytics and the tracking features within your PPC platform to measure KPIs, track conversions, and gather insights about user behavior. Regularly reviewing this data allows you to optimize your campaign for better results over time.

More PPC Fundamentals And Best Practices

PPC success isn’t just about setting up campaigns. You also need to understand the underlying principles and continuously optimize your PPC strategies. Beyond the basics, these fundamentals and best practices help you maximize your efforts by refining your campaigns and increasing your ROI.

Bidding With Google Ads Auction

The Bid Strategy page of Google Ads appears against a light blue background

Bidding in Google Ads seems complex at first, but it’s essentially about telling Google how much you’re willing to pay them to display your ads to users. Here’s an overview of the bidding process:

  1. The basics: Google Ads operates on an auction system. However, this isn’t a traditional auction where the highest bidder always wins. Instead, Google uses a combination of factors to determine which ads to display for a given search query. These factors include your bid amount, the quality of your ad (Quality Score), and the expected impact of extensions and other ad formats.
  2. Choosing a bidding strategy: Google Ads offers several bid strategies tailored to different advertising goals. Some common goals include driving clicks to your website, generating conversions (like sales or leads), or improving brand visibility. Depending on your objective, you might choose a cost-per-click (CPC) bidding strategy, where you pay for each click on your ad, or a cost-per-impression (CPM) strategy, where you pay based on how many times your ad is shown.
  3. Setting your bid: You have several options for how to bid for ad placement.
    • Manual bidding: You decide how much you’re willing to pay for a click on your ad or for 1000 impressions. This gives you direct control over your bids but requires more attention to adjust bids based on performance.
    • Automated bidding: Google automates the bidding process based on your campaign goal. For example, if your goal is to maximize clicks, Google will adjust your bids in real-time to get as many clicks as possible within your budget.
  4. Quality Score and Ad Rank: Your bid is just one part of the equation. Google also evaluates the relevance and quality of your ads and landing pages (your Quality Score) and combines this with your bid to determine your Ad Rank. A higher Ad Rank increases your chances of appearing at the top of the search results.
  5. Winning the auction: The “auction” happens in milliseconds, every time someone searches on Google. If your Ad Rank is high enough, your ad appears to users. If you win a spot but your ad doesn’t get clicked, you don’t pay anything for that impression.

Keep in mind that Google Ads offers a great deal of flexibility within this system based on your budget. The auction-style bidding method means you get to decide how much you’re willing to pay for each click by bidding on your chosen keywords.

Then, Google Ads uses your bid and its algorithm to determine where your ads will be shown on the page, or if they’ll even be shown at all. That means that if you want to improve the position of your ad on the page (i.e., move that puppy above the fold), you’re going to have to do the following:

  • Increase your bid.
  • Improve the quality of your ads.
  • Improve the quality of your web and mobile landing pages.

Increasing your bid means having more budget for ads, which isn’t always an option. We’ll talk about the other two options below.

Understanding Quality Score

Quality Score (QS) is a vital metric in PPC advertising, particularly with Google Ads. It reflects the relevance and quality of your ads, keywords, and landing pages on a scale of 1–10, with 10 being the highest. A higher QS can lead to lower costs and better ad positions. To improve your QS, create relevant ad copy, select targeted keywords, and optimize your landing pages to ensure they’re useful and relevant to your ads.

For example, let’s say you find out that you have a low QS when using a particular keyword. That could mean that the content on your site isn’t tightly related to your keywords, ad copy, and landing pages. If you increase your quality score, Google will place your ad in a higher position for lower bids.

Ultimately, the quality score helps Google provide a better user experience.  As it scans your content for relevancy, it ensures you’re not buying keywords that direct users to irrelevant pages.

Because let’s be honest: nobody wants to be directed to shiny pleather loafers (shudder) when they search for Air Jordans.

Don’t Forget Mobile

I know, I know. We talk about mobile all the time. The stats don’t lie, though: 70 percent of mobile searches result in the user taking action within an hour. With the majority of internet users accessing the web via mobile devices, your PPC campaigns must be mobile-friendly. This means designing ads and landing pages that load quickly and look great on smaller screens. Additionally, consider mobile-specific keywords and user intent, as search behavior can vary significantly from desktop to mobile.

A/B Testing Your Ads

Examples of two Evite ads with different headline copy appear side-by-side against a blue background

A/B testing, also known as split testing, involves creating two versions of your ad (A and B) with one varying element, like the headline or call to action, to see which performs better. This practice is crucial for understanding what resonates with your audience and creating more effective ads. Continuously test and refine your ad copy, images, and landing pages to optimize your campaign’s performance.

Setting Up Negative Keywords

Negative keywords are terms you don’t want your ad to show for. Including negative keywords in your PPC campaigns prevents your ads from appearing in irrelevant searches, saving you money and improving campaign relevance. Regularly update your list of negative keywords to refine your traffic and increase the quality of leads.

As with other matches, this may take time to hone, so continue to keep tweaking to get it right.

Tracking Metrics And KPIs

To truly gauge the success of your PPC campaigns, you must track the right metrics and KPIs. Focus on metrics that align with your campaign goals, such as click-through rates (CTR), conversion tracking, cost per conversion, and return on ad spend. Use these insights to make informed decisions and continually improve your strategy for better performance.

Last Clicks

With PPC, savvy website owners can direct more customers to your website, whether you’re prepping for the holiday shopping rush or building a long-term marketing strategy for your business. PPC is easier than ever thanks to platforms like Google Ads. Its easy-to-use system helps you build an effective paid search advertising campaign to help grow your business.

Tell us: how has paid search helped your website grow? What are your best PPC tips and tricks?

Ad background image

Get More Visitors, Grow Your Business

Our marketing experts will help you earn more traffic and convert more website visitors so you can focus on running your business.

Learn More

The post Pay-Per-Click (PPC) Advertising: A Beginner’s Guide For Marketers appeared first on Website Guides, Tips & Knowledge.

]]>
https://www.dreamhost.com/blog/ppc-guide/feed/ 1
Don’t Panic! How To Fix “The Site Ahead Contains Malware” https://www.dreamhost.com/blog/this-site-contains-malware-warning/ Wed, 17 Apr 2024 14:00:00 +0000 https://dhblog.dream.press/blog/?p=44065 Just seen "The site ahead contains malware"? Learn how to restore your WordPress site in our simple guide.

The post Don’t Panic! How To Fix “The Site Ahead Contains Malware” appeared first on Website Guides, Tips & Knowledge.

]]>
It’s rare that an error message spurs a wave of emotions. But when you open your WordPress site and see, “The site ahead contains malware,” it can feel like the world is spinning.

This scary notice isn’t just a deterrent for your visitors; it’s a big neon sign that your website’s security has been compromised. Oof!

But fear not! The great news is that we can rectify the situation.

Addressing the issue is about more than just removing the warning. It’s also about safeguarding your online reputation, protecting your visitors, and ensuring the integrity of your online presence.

In this guide, we’ll walk you through the process of identifying and removing malware, and protecting your site from future attacks. Take a deep breath — it’s time to get started!

What Does “The Site Ahead Contains Malware” Mean?

DreamHost Glossary

Malware

Malware is a type of malicious software that is specifically designed to cause harm to the victim’s computer or server. Most commonly, it’s used to access private information or to hold files at ransom.

Read More

When your browser throws up those dreaded words about malware, it means that a reputable online security service (like Google Safe Browsing, McAfee WebAdvisor, or Bitdefender) has detected something malicious lingering on your site.

This could be a virus, trojan, rootkit, ransomware, or any other nasty piece of code designed to cause chaos and wreak havoc on your digital life.

A red pop-up window shows the warning "The site ahead contains malware"

Google usually uses the warning message, “The site ahead contains malware.” Depending on the underlying issue, you may see one of these alternatives:

  • Deceptive site ahead: Warning placed on phishing websites.
  • The site ahead contains harmful programs: Google thinks the site might trick you into installing bad software.
  • This page is trying to load scripts from unauthenticated sources: The site isn’t secure.
  • Suspicious site: General purpose safety warning.

Some search engines display different warning messages based on how your site has been compromised. Depending on the severity of the threat, visitors may get the option to bypass this warning and proceed to your website anyway.

How A Malware Warning Affects Your Site

Obviously, this isn’t a good look for any website. Very few potential visitors will ignore the warning screen and click through anyway.

But there are even bigger problems to look out for.

Left unchecked, malware can infect your website visitors’ computers and mobile devices. It may attempt to steal passwords, credit card details, and other sensitive personal data. Some strains even allow hackers to seize complete control of your site to further their nefarious objectives.

Other downsides include:

  • Loss of trust: Few things erode a website’s credibility faster than a malware alert. Even if you quickly clean up the infection, the fallout from that lapse in security can linger and cast doubts in customers’ minds.
  • Tarnished brand: When visitors see security warnings, they assume you’re sloppy about security and indifferent to protecting user privacy. And word can spread quickly online.
  • SEO implications: Search engines like Google take malware issues very seriously and penalize infected sites in their search rankings until they remove the malware. This can completely undermine your search engine optimization (SEO) efforts.
  • Lost revenue: Ultimately, these side effects hit your balance sheet.

How To Remove A Malware Infection From Your WordPress Website

That’s enough with the horror stories. The quicker you start fixing the problem, the sooner you can forget about the whole thing!

Luckily, it can be a fairly simple process. Here are four easy steps to cure Google’s “contains malware” warning message and restore your site.

Step 1: Check Your Site Status In Safe Browsing

Many search engines have built-in mechanisms designed to help keep internet users safe. In addition to putting up a warning message, Google protects users by steering them away from infected sites. 
You can verify whether Google has blocklisted your website using the Site Status diagnostic tool.

Google's Safe Browsing site status diagnostic tool

Start by entering your WordPress site’s URL. The diagnostic tool will then run its tests and display a warning if it detects unsafe content.

If it does warn you about malicious content, your site has been denylisted. Given that Google accounts for 60% of U.S. desktop search queries, you need to take action swiftly.

Step 2: Track Down The Malicious Code

Once you’ve verified that malicious software has taken hold of your site, it’s time to track down the offending code and files.

While you can manually look for malware, it’s a time-consuming process that often requires technical know-how. Even if you know what you’re looking for, hackers always come up with new tricks — so it’s tough to manually identify every piece of malicious code.

If you miss some malware, search engines may continue to turn visitors away from your site. This means the hack will continue to impact your traffic, conversions, and search engine results.

In other words, you need to get it right.

Given the complexity of the task, we recommend using a professional malware removal tool or service. Our DreamShield add-on ensures your website is free from every trace of suspicious code.

Against a dark blue and black background, the words 'DreamShield: Keep Your Website Safe with DreamShield' appear in white font

When you add DreamShield to your plan, it immediately scans your site for malware. It then repeats this scan automatically every day. If DreamShield detects an issue, it notifies you via email and your DreamHost panel.

Thanks to this powerful tool, you could resolve a security breach before Google even realizes there’s a problem!

Follow these steps to add and enable DreamShield to your account.

Step 3: Delete The Malware Files

DreamShield routinely scans your site and notifies you about any issues. These notifications tell you how to remove the detected malware. Simply follow the instructions to eliminate the “site ahead contains malware” warning.

If you don’t have the DreamShield add-on, you must remove the malicious files manually. The best approach will vary, depending on the nature of the infection. However, you can often get the job done by connecting to your site via Secure File Transfer Protocol (SFTP) using a client such as FileZilla.

DreamHost Glossary

SFTP

Secure File Transfer Protocol (SFTP) is a safer version of the FTP protocol that uses a secure shell data stream.

Read More

Carefully work your way through all your site’s files and delete any compromised ones. To speed up the process, look for files with modification timestamps that occurred during the security breach. You might also want to examine ones where the timestamp seems suspicious — for example, files dated after you last edited your site.

Some hackers try to insert code into the .htaccess file. To sanitize this file, connect to your site using an SFTP client. Then, navigate to your public_html directory, which contains the .htaccess file.

A purple box shows where to click for .htaccess in the public_html directory

Delete this file, and then switch over to your WordPress dashboard. You can now navigate to Settings > Permalinks. Then, simply click on Save Changes at the bottom of the page.

A purple arrow points to the blue Save Changes button in the Settings page of the WordPress dashboard

WordPress will automatically generate a new .htaccess file that’s completely free from malicious code.

Get Content Delivered Straight to Your Inbox

Subscribe to our blog and receive great content just like this delivered straight to your inbox.

Step 4: Submit A Review Request

Once you’re confident that you’ve vanquished every trace of malware, you can ask Google and other search engines to rescan your site.

If you haven’t already done so, sign up on Google Search Console and verify that you own the website in question.

The Welcome to Google Search Console page shows two choices: Domain or URL prefix

After claiming your site, log in to the Search Console and navigate to Security & Manual Actions > Security Issues. On the next page, select Request Review.

A warning with a red exclamation mark indicates an issue in the Google Search Console

In the pop-up form, check the box marked All issues were fixed and make sure to explain:

  • What the issue was
  • The steps you have taken to resolve the problem
  • Some proof of your work

Finally, hit Submit Request to finish.

Google will now process your request and send a response to your Google Webmaster account or your Messages in Search Console. This can take a few days to a few weeks.

Assuming you’ve erased all malicious code, Google will remove the “site ahead contains malware” warning, and you can resume business as usual.

For instructions on requesting a review on other search engines, check the webmaster support documentation for those platforms.

How To Prevent Future “Site Ahead Contains Malware” Warnings

Now that you’re back in Google’s good books, it’s a good idea to perform a security audit. In other words, check the walls of your castle.

While no website can ever be 100% secure, there are some preventative measures you can take to strengthen your defenses and tie up security vulnerabilities. Here are some of the most important:

Upgrade Your Password

A strong password is your first line of defense for preventing unauthorized access to your dashboard. Even if you have multiple security mechanisms, a hacker who manages to guess or steal your login credentials can devastate your website.

To start, follow password best practices. Security experts recommend using a minimum of eight characters and a mix of upper and lowercase letters, numbers, and symbols. Then, consider using a password manager such as Dashlane or LastPass.

The top portion of the LastPass homepage asks "Need a Unique, Secure Password?" in black font on a white background

Implement 2FA

Two-factor authentication (2FA) makes your site far less susceptible to password-based attacks, including credential stuffing. If you have 2FA in place, a hacker must pass an additional security check before they can access your website. For example, they may need to enter a one-time PIN sent to your smartphone.

This can be enough of a deterrent to make malicious hackers move their attention to other sites.

Use Secure Hosting

DreamHost Glossary

Secure Hosting

Secure hosting is the practice of protecting your website server from unauthorized access. There are a number of ways to keep your site safe, such as using strong passwords and two-factor authentication.

Read More

Your choice of hosting provider affects the overall security of your WordPress website. Some providers offer excellent protection with extra security features, while others cut corners.

At DreamHost, we apply automatic security and core file updates to every WordPress site to patch any gaps in your defenses. We also enable mod_security by default; this Web Application Firewall (WAF) blocks known HTTP requests. And speaking of protocols, we support HTTP/2 on all managed plans.

For an extra layer of security, grab our DreamShield add-on. This malware scanner automatically checks your site weekly for malicious code.

Backup Your WordPress Site

Some malware infections wipe data from your website. To ensure you don’t lose any content, backup your site regularly.

You can perform backups manually via SFTP, your cPanel file manager, a specialist backup plugin, or your hosting provider. By default, we back up all DreamHost sites automatically every day.

No matter how you do your backups, keep them in secure, off-site storage. You should also test these backups regularly to ensure they can restore your site to full working order if needed.

Get An SSL Certificate

We always recommend installing a Secure Sockets Layer certificate (sometimes referred to as an SSL certificate or secure certificate). This ensures you transfer data via Hypertext Transfer Protocol Secure (HTTPS) instead of Hypertext Transfer Protocol (HTTP). 

Encrypting your data makes it much harder for an attacker to obtain information they can use against you. That’s why all our hosting plans come with a free SSL/TLS certificate.

Install Security Plugins

Just as you might run antivirus software on your PC, you can protect your WordPress site using specialized security plugins.

These tools introduce features like secure login, firewall protection, and security auditing. Many are free to install, with advanced tools tied to a premium plan. Check out our list of must-have WordPress plugins to see your best options.

Practice Safe Browsing

As a general rule in life, avoid clicking on questionable links. At best, they might take you to the dark side of the web. At worst, they could harbor infected files.

While harmful software can’t directly affect your WordPress site, a virus could give hackers an entry route to your site. The same goes for browser extensions and harmful content distributed through links in phishing emails.

Choose your Wi-Fi connection carefully to manage your WordPress site away from home or the office. Many public networks are insecure, and some are even set up by hackers to collect sensitive information. If you have to use an unknown network, run a VPN to keep your connection secure.

Use Plugins And Themes From Trusted Sources

Some third-party vendors offer WordPress plugins and themes for free. While these offers might sound tempting, malicious websites occasionally spread malware through such downloads.

It’s safer to stick with the official WordPress Plugin Directory and Theme Directory, or trusted sources of third-party plugins and themes.

In addition, look for products that receive regular updates and have good user reviews. These are both indicators of reliability and security.

Track User Activity

Ideally, you want to stop hackers from gaining access to your site at all. But this isn’t always possible. The next best thing is to detect unauthorized access before the damage occurs.

Using plugins like WP Activity Log, monitor login attempts and user activities for warning signs. For instance, an unusual spike in login attempts from foreign IP addresses could indicate a brute-force attack or some other malicious activity.

The WP Activity log plug-in screen shows a green banner and a blue download button

Early detection allows you to respond swiftly, potentially preventing attackers from injecting bad code or creating backdoors. At the very least, you can set your malware removal service on the case.

WordPress Malware FAQs

Cybersecurity is a complex subject. If you still have questions about malware, warning messages, or WordPress security threats, we have answers.

What does the “deceptive site ahead” warning mean?

The deceptive site warning is an alternative to “The site ahead contains malware.” Along with malware, spam links, suspicious downloads, pages linked with phishing attacks, compromised SSL, and other deceptive content can trigger this warning.

How do I get rid of advanced malware?

If your security scanner hasn’t effectively removed all malware from your WordPress site, you can attempt manual removal. (Note: Be careful here. It’s easy to mess up your site!)

Search the files on your site for lines of code starting with script=> or iframe src=URL>. These are telltale signs of malware, particularly when the URL links to somewhere you don’t recognize.

As a last resort, consider reinstalling WordPress. To do this:

  1. Grab a fresh copy of the CMS from WordPress.
  2. Unzip the download file.
  3. Delete the wp-config.php file and the wp-content folder.
  4. Upload all the other files to your server via the cPanel File Manager or your FTP client.

You could also contact a professional recovery service. This is always the safest approach if you aren’t confident about what you’re doing.

Why is my computer saying every website is unsafe?

There are two common causes of this problem:

  1. Your device’s time or date is incorrect, triggering certain security checks. Check your system settings to fix this.
  2. Your device’s security software is interfering with your browser. To troubleshoot this issue, check the support pages of your chosen browser.

Secure Your Site With Better Hosting

Any warning message on your site is likely to set the alarm bells ringing in your head. The “site ahead contains malware” screen is one such warning.

As we have established, this alert isn’t a reason to panic. If you follow four key steps, you’ll clear the message quickly and your site will ride high once again:

  1. Check your site status
  2. Use a malware removal tool
  3. Delete the malicious files
  4. Submit a review request

If you want to reduce the chances of your site falling victim to malicious hackers, we’re here to help. At DreamHost, all our plans come with key security features, and our in-house team of experts is available 24/7 to help with technical issues. And WordPress plans start at just $2.59 per month.

Sign up today to start unlocking the benefits of secure, reliable hosting.

Ad background image

Power Your Website with DreamHost

We make sure your website is fast, secure and always up so your visitors trust you.

Choose Your Plan

The post Don’t Panic! How To Fix “The Site Ahead Contains Malware” appeared first on Website Guides, Tips & Knowledge.

]]>