Tag - Web

How to Optimize Images for Web Performance without Losing Quality


Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?

When starting a new blog, many beginners simply upload images without optimizing them for web. These large image files make your website slower.

You can fix this by using image optimization best practices as part of your regular blogging routine.

In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.

How to Optimize Your Images in WordPress (Step by Step)

What is Image Optimization? (Optimized vs Unoptimized Images)

Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.

While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Here’s an example of optimized vs unoptimized image:

Optimized vs Unoptimized Images in WordPress

As you can see, when optimized properly the same image can be 75% smaller than the original without any loss in quality.

How does Image Optimization work?

In simple terms, image optimization work by using compression technology like “Lossy” and “Lossless” which helps reduce the overall file size without any noticeable loss of quality.

What does it mean to Optimize Images?

If you ever received a recommendation to optimize images by your WordPress hosting support or by a speed test tool, then all it means is that you need to reduce the file size of your images by optimizing them for web.

Why is Image Optimization Important? What are the Benefits of Image Optimization?

While there are many benefits of optimizing your images, below are the top ones that you should know:

  • Faster website speed
  • Improved SEO rankings
  • Higher overall conversion rate for sales and leads
  • Less storage and bandwidth (which can reduce hosting and CDN cost)
  • Faster website backups (also reduces cost of backup storage)

Outside of video, images are the next heaviest item on a web page. According to HTTP archive, images make up on average 21% of a total webpage’s weight.

Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

Now you might be wondering how big of a difference can image optimization really make?

According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

How speed affects your website

If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster loading websites.

This means that by optimizing your images for web, you can both improve website speed and boost WordPress SEO rankings.

How to Save and Optimize Images for Web Performance?

The key to successful image optimization for web performance is to find the perfect balance between lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

  • Image file format (JPEG vs PNG vs GIF)
  • Compression (Higher compression = smaller file size)
  • Image Dimensions (height and width)

By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more details.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only.

For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.

Although it’s a bit manual, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them. Many beginners and even large corporations prefer to use these image optimization plugins because it’s easy and convenient.

We will share more about these WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.

Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using an image editing software on your computer.

For example, we optimized a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.

We chose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Image Optimization Tools and Programs

As we mentioned earlier, most image editing software come with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, specially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantee the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for the web. Simply open your image and click on the “File » Save for Web” option.

This will open a new dialog box. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom left.

Saving images optimized for the web using Photoshop

GIMP

GIMP is a free and open source alternative to popular Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.

First, you need to open your image in GIMP and then select File » Export As option. This will bring up the save file dialog box. Give your file a new name and then click on the export button.

Export image in GIMP

This will bring up image export options. For jpeg files, you can select the compression level to reduce file size. Finally, click on the export button to save the optimized image file.

TinyPNG

TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG files. All you have to do is go to their website and upload your images (simple drag & drop).

Using TinyPNG to optimize images for WordPress

They will compress the image, and give you the download link. You can use their sister website, TinyJPG, for JPEG image compression.

They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it combines the best of TinyPNG and TinyJPG inside Photoshop.

For developers, they have an API to convert images automatically, and for beginners they have a WordPress plugin that can automatically do it for you (more on this later).

JPEG Mini

JPEGmini uses a lossless compression technology which significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.

JPEGMini online image compression tool

You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

ImageOptim

Windows alternative to this is Trimage.

Image Optimization Plugins for WordPress

We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.

Below is our list of the recommended WordPress image compression plugins:

  1. Optimole – popular plugin by the team behind ThemeIsle.
  2. EWWW Image Optimizer
  3. Compress JPEG & PNG images – plugin by TinyPNG team mentioned above in the article.
  4. Imagify – plugin by the popular WP Rocket plugin team.
  5. ShortPixel Image Optimizer
  6. WP Smush
  7. reSmush.it

Using any of these WordPress image optimization plugin will help you speed up your website.

Final Thoughts and Best Practices for Image Optimization

If you’re not saving images optimized for web, then you need to start doing so now. It will make a huge difference on your site speed, and your users will thank you for it.

Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.

Outside of image optimization, the two things that will significantly help you speed up your website is using a WordPress caching plugin and using a WordPress CDN.

Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.

We hope this article helped you learn how to optimize your images in WordPress. You may also want to see our guide on how to improve your WordPress security and the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Optimize Images for Web Performance without Losing Quality appeared first on WPBeginner.



Source link

How to Choose the Best Web Design Software in 2019 (Compared)


Are you looking for the best web design software to make beautiful websites? Most experienced web designers have their own preferred software for different design tasks.

However, if you’re just starting out, then it can take some time to find that perfect combination.

In this article, we will show you the best web design software for different use-cases, so you can make the right decision for your need.

Choosing the best web design software

Why You Need The Best Web Design Software?

Due to common misconceptions about web design, many beginners feel that it would take them years to make decent and professional website designs.

While it’s true that you get better overtime, the right web design software can help you easily create beautiful designs with minimal skills.

That’s because some web design software automate the entire process which allows even absolute beginners to create beautiful websites.

Let’s take a look at some of the best web design software that will help you design like an expert web designer.

Different Types of Web Design Software

There isn’t a single web design tool that would do all the tasks related to web development and design. As a designer, you will need to choose a combination of different software to make your own toolkit.

We have divided our selection into different categories, so you can evaluate the best available options for each task.

  • Best web design software for building websites
  • Best web design software for eCommerce
  • Best web design software for graphic designers
  • Best web design software for marketers
  • Best web design software for HTML sites

Let’s start with the basics first.,

Best Web Design Software for Building Websites

Many beginners ask us if they need to learn coding to make a real website.

While knowing how to code gives you an extra advantage in creating websites, many website builders like WordPress has made it easy for anyone to create custom websites without learning how to code.

This is the reason why WordPress now powers over 34% of all websites on the internet.

1. Beaver Builder

Beaver Builder

Beaver Builder is a user friendly page builder for WordPress. It allows you to simply drag and drop design elements to create your own custom design without writing any code.

To get started with Beaver Builder, you’ll need a WordPress website.

We recommend using Bluehost. They are an officially recommended WordPress hosting provider and one of the biggest hosting companies in the world.

The best part is that they are offering WPBeginner users discount on hosting and a free domain name. Basically, you’ll be able to get started for $2.75 per month.

→ Click Here to Start with Bluehost ←

For details, see our guide on how to make a website with step by step instructions.

Once you are up and running, you need to install and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

After that, you can edit WordPress posts or pages using the Beaver Builder.

Using Beaver Builder to design pages in WordPress

Simply point and click on any item to edit it or load from dozens of ready-made templates to use as a starting point. For instructions, see our guide on how to create custom layouts using Beaver Builder

Beaver Builder also comes with a Theme Customizer which allows you to create custom WordPress themes using the same drag and drop interface. Unlike editing pages, you can create a complete theme with your own design.

For more information, see our tutorial on how to create custom WordPress themes without writing any code.

2. Divi

Divi Demo

Divi is another excellent option if you want to design a WordPress website. It is one of the best WordPress page builders and comes with dozens of ready-to-use templates to choose from.

After you have setup your WordPress site, simply install and activate Divi on your website and start editing. It works with almost any WordPress theme, and you can also use the Divi theme which comes with enhanced features for the builder.

It is a drag and drop tool which means you can simply point and click on any item and change its appearance. You can add images, videos, sliders, contact forms, widgets, and more.

Most importantly your design changes are fully responsive and would automatically adjust for mobile devices.

3. Constant Contact Website Builder

Constant Contact Website Builder

If you are looking for a fully-hosted website builder, then Constant Contact Website Builder is a good WordPress alternative for beginners. This smart website builder comes with beautiful website designs that you can edit using a simple user interface.

Simply start by answering a few questions, and the website builder will pick up design, images, and demo content for your site. You can then just point and click to replace it with your own images, text, videos, and more.

4. Gator by HostGator

Gator Website Builder by HostGator

Gator is another website builder that allows you to design complete websites without any coding. Gator is made by HostGator, one of the best web hosting companies in the world.

It is a fully hosted platform, which means you don’t need to worry about updates, security, or backup. It not only includes the builder and website hosting, but you also get a free domain name for your website.

The builder software itself features an intuitive drag and drop interface with more than 200+ professional web design templates. Each template is fully customizable using a simple point and click tool.

You can edit any item on a page or drag and drop commonly used items like images, videos, photo gallery, text, columns, maps, and contact forms.

Gator also comes with a built-in stock photo library, so you can find and add beautiful photos on your website.

Best Web Design Software for Ecommerce

The eCommerce industry is expected to reach $4.9 trillion by the year 2021. There is an enormous demand for eCommerce web design in the market.

Following are our top picks for the best web design software for eCommerce that will allow you to break into this market without any coding skills.

5. WooCommerce

WooCommerce

WooCommerce is the best eCommerce platform in the world. It runs on top of WordPress, which means you’ll need a WordPress website to design an eCommerce website using WooCommerce.

You can sign up with Bluehost to get started. They are offering WPBeginner users discount on hosting + free domain name. Basically, you can start with $2.75 per month.

For detailed instructions, see our complete guide on how to start an online store.

6. BigCommerce

BigCommerce eCommerce Platform

BigCommerce is a popular eCommerce platform. It is available as a fully-hosted solution and the best part is that it can be easily integrated into a WordPress website.

Creating an online store with BigCommerce is quite simple. It comes with beautiful storefront designs and fully customizable themes for your online store. It automatically handles product images, crops them, and displays them in beautiful gallery layouts.

Wondering how it stacks up against WooCommerce? See our article on BigCommerce vs WooCommerce for side by side comparison of the two platforms.

7. Shopify

Shopify

If you are looking for a fully hosted eCommerce solution, then Shopify can be a good fit for you. It comes with professionally designed templates to create almost any kind of online store.

All eCommerce design tools are highly intuitive and allow you to just drag and drop items to create beautiful pages. You can easily upload custom logos, images, videos, and more.

Shopify takes care of hosting, software, and backups, so you can just focus on creating a beautiful online store.

For more details, see our detailed comparison of Shopify vs WooCommerce.

Best Web Design Software for Graphic Designers

A big part of web design consists of graphics to create custom logos, background images, featured images, and more. For all these, you will need graphic design tools.

These tools require some basic know-how of how to use them. Luckily, there are tons of online resources to quickly get you up to speed.

8. Adobe Photoshop

Adobe Photoshop

Adobe Photoshop is the industry leader in photo editing and graphic design software. It is available for Mac and Windows operating systems.

It is one of the oldest and the easiest to use graphic design software on the market. Due to its massive popularity, there are plenty of online resources to learn Photoshop for free.

Adobe Photoshop is a bit more expensive than some other software. It is available on a subscription basis and each plan comes with different apps and addons.

9. Sketch

Sketch

Sketch is a powerful vector design tool which allows you to create scalable high-quality designs. Sketch makes it super easy to create icons, illustrations, prototypes and mockups for apps, websites, and print.

It comes with an intuitive design that’s easy to learn for beginners. It also comes with tons of learning resources to help you quickly familiarize yourself with the software.

10. Affinity Designer

Affinity Designer

Affinity Designer is an incredibly easy to use and powerful graphic design tool. Suitable for beginners and advanced users alike, Affinity Designer is packed with all the tools you would want in a graphic design tool without any of the complicated stuff.

It also allows you to easily switch between raster and vector modes. This makes it easy to design illustrations with a powerful combination of tools.

Affinity Designer is available for simple pricing of $49.99 one-time payment.

Basically Affinity is a perfect combination of both Adobe photoshop and illustrator.

11. Adobe Illustrator

Adobe Illustrator

Adobe Illustrator is Adobe’s vector graphic design tool. Popular among graphic design professionals, Illustrator lets you create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile.

It is easy to use but comes with a slight learning curve to take full advantage of the software. However, Adobe offers plenty of resources to help you get started. You’d also be able to find free tutorials online.

Adobe Illustrator is available on monthly subscription plans, which makes it a bit more expensive than other software.

12. Gimp

Gimp

If you are looking for a free web design software, then Gimp is an excellent free option. This open source design software is a good alternative to Adobe Photoshop and allows you to easily edit images and create graphics for your websites.

Gimp is available for MacOS, Windows, and Linux. It may not look as polished as some other paid software, but it is a full-featured and powerful design software with much to offer.

Best Web Design Software for Marketers

Web design doest not just end with the launch of a website. Marketers regularly need to design graphics, social media images, icons, infographics, banners, and more.

There are plenty of tools that allow you to design professional-grade marketing material with very little effort and skills. Here is our pick of the best web design software for marketers.

13. Canva

Canva

Canva is a graphic design tool for marketers and bloggers. It is a web-based tool and doesn’t require installation of any additional software.

It comes with many ready-made design templates for different types of graphics. You can pick a template and then use Canva’s drag and drop tool to edit those images for your own website.

4. Balsamiq

Balsamiq

Balsamiq is a powerful design tool to create mockups, wireframes, and websites. It comes with an easy to use interface that helps you learn UI design as a beginner. Advanced users would find it immensely helpful in quickly building mockups for products pages, marketing material, and more.

15. Moqups

Moqups

Moqups is another wireframe and mockup design tool. It allows easy sharing and team collaboration without downloading any files.

The intuitive user interface makes it easy to use for beginners and powerful enough for advanced users. It comes with a built-in library of thousands of icon sets, fonts, and style library.

16. Piktochart

Piktochart

Piktochart is an easy design tool to create presentations, infographics, flyers, and posters. It comes with dozens of templates to use as a starting point.

You can use it in your browser, so there is no need to install any software. Simply drag and drop to add icons, elements, photos, shapes, lines, and arrows. Rearrange items and add your own text to create professional designs for your marketing campaigns.

Best Web Design Software for HTML Sites

Need to quickly design static HTML sites? These web design software will help you easily design HTML sites without writing any HTML at all.

17. Adobe Dreamweaver

Dreamweaver

Adobe Dreamweaver is one of the most beginner friendly web design software. It allows you to easily create mobile-friendly static HTML websites, stand-alone landing pages, or quick HTML docs.

It is easy for beginners to simply drag and drop to create web pages. Advanced users would find it equally useful with smart coding, autocomplete, compilers, git support, and more.

18. Google Web Designer

Google Web Designer

Google Web Designer is another intuitive and easy to use tool to create HTML-5 based designs, motion graphics, and animations. It can also be used to design banner ads, video ads, and other marketing materials.

You can start from scratch or choose from dozens of templates available in different layouts. Google Web Designer is available as a free download for Mac, Windows, and Linux operating systems.

We hope this article helped you find the best web design software for your design toolkit. You may also want to see our list of the best CRM software and the best business phone services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Choose the Best Web Design Software in 2019 (Compared) appeared first on WPBeginner.



Source link

How to Create a Web Directory in WordPress (Step by Step)


Are you looking to create a business web directory? Web directories are a popular online business idea, allowing you to monetize your website with user-generated content.

Angie’s list, a popular web directory that helps homeowners find reliable contractors and service providers. They’re worth over 9 billion dollars.

Whether you’re looking to create a niche web directory to make money online, or a partners directory to list your vendors, you can easily do it in WordPress.

In this article, we will show how to easily create a web directory in WordPress. We will cover how to accept payments for your premium web directory listings.

How to Create a Web Directory in WordPress

What is a Web Directory?

A web directory is like a catalog that lists businesses or individuals with details such as contact information, services, features, etc.

Web directories allow users to browse through a catalog of links divided into topics, categories, and interest areas. A perfect example of a web directory is Yellow Pages or Angie’s List.

They are most commonly used to help people find a place or service they are looking for.

Another web directory example is Yelp which allows people to find great local businesses like restaurants, dentists, beauty salons, doctors, etc.

While there are several web directory themes for WordPress that allow you to create a web directory, we don’t recommend them because you will get locked into the theme forever.

This is why we will only show you plugin methods, so you can use it with any theme design that you want.

Having that said, let’s take a look at how to create a web directory in WordPress.

Method 1: Creating a WordPress Directory with Formidable Forms

Formidable Forms is the most advanced WordPress form builder plugin in the market. It helps you to create a simple contact form as well as advanced forms like surveys, payment forms, registration forms, and more for your WordPress site.

The plugin comes with an exclusive feature called ‘Views’ which lets you display any data submitted via a form on the front-end of your website. Using this feature, you can easily create directories, real estate listings, job board, event calendars, and more.

Let’s create a business directory using the Formidable Forms plugin.

1. Create a Form to Collect Data for Your Directory

First thing you need to do is install and activate Formidable Forms plugin. For detailed instructions, see our guide on how to install a WordPress plugin.

Once the plugin is installed and activated, go to Formidable » Forms and click on ‘Add New’ button.

Add New Formidable Form

Now you can choose how you want to create a form. You can start with a blank form, with a template, or import one from an XML file.

Choose a Way to Add a New Formidable Form

We will choose the template method because it is the quickest way to make an advanced form. Formidable Forms offers more than 20 pre-made form templates out of the box.

For example, we will choose ‘Real Estate Listings’ to create a real estate directory. Click the ‘Create Form’ to get started.

Create Real Estate Form with Formidable Forms

You will see a popup box where you will be asked to enter your form name and description.

Name Your Formidable Form

After that, it will load the pre-built real estate submission form.

Formidable Forms - Form Builder Interface

You can review and customize the form using the simple drag and drop interface. Once done, click on the ‘Update’ button.

If you want to create a premium web directory with paid listings, then you’ll need to connect your form with a payment gateway.

Formidable allows you to collect payments with PayPal, Stripe, and Authorize.net.

In this example, we will show how to integrate PayPal to accept payments. Go to Formidable » Add-Ons from your dashboard and install the ‘PayPal Standard’ addon.

Install PayPal Standard Addon in Formidable Forms

Once the addon is installed and active, visit Formidable » Global Settings and click the PayPal option. Update your PayPal email address and other settings.

Set Up PayPal with Formidable Forms

After that, open your respective form editor again, and click the ‘Settings’ option at the top.

Form Settings - Formidable Forms

Next, click on the ‘Form Actions’ tab and then select the PayPal icon to add a new action.

Add PayPal Form Action to Formidable Forms

Now you need to configure the PayPal settings. Add a payment amount, choose a payment type (one-time payment, donation or subscription), select currency, and then add a return URL and cancel URL.

Formidable Payment Options with PayPal

Once done, don’t forget to Update your form.

Now that payment option is integrated, your users will need to make a payment before submitting a real estate property via your form.

2. Publish Your Form in WordPress

The next step after building a form is to publish it on your website, so users can submit their business details using it.

Visit Pages » Add New from your dashboard to create a new page. After that, name your page and add the Formidable Forms widget to the editor.

Add Formidable Form Widget to WordPress Page

Next, select your form.

Select Your Form to Add to a WordPress Page

After that, it will load the pre-built real estate submission form into your page editor.

You can also add some helpful content to the page. Once done, go ahead and publish your page.

Now you can add the submission form page to your WordPress navigation menu, or send an email campaign to your email list to get more form submissions.

The process of collecting data via a form may take some time, so it is better to make a plan before starting. Alternately, you can also create entries manually from your dashboard or import from a CSV file.

3. Build Your Web Directory with Formidable Views

After you have gathered plenty of information, you can create a web directory with the Formidable Views.

Navigate to Formidable » Views from your dashboard and click on the ‘Add New’ button.

Add New View in Formidable Forms

After that, enter a title for your view and choose the form which contains the data you want to display.

Formidable View Basic Settings

Next, you should choose the view format. You can show all entries in a list, a single entry, list the entries with a link to the single entry page, or insert entries into a calendar.

For this tutorial, we will choose ‘Both (Dynamic) – list the entries that will link to a single entry page’ option.

If you want to add a Search bar in your web directory, add the following shortcode into the ‘Before Content’ box.

[frm-search]

Add Search Bar in Your Formidable View

After that, you need to add content to your directory listing in the following format.

<div class="listing_info"> 
<a href="[detaillink]"><img src="[home-image size=thumbnail]" alt=""/></a>
</div> 
<div class="listing_list">
<strong><a href="[detaillink]">[MLS ID]</a></strong>
<strong>[address]</strong> <strong>$[listing-price]</strong> [blurb] 
[bedroom] Bedrooms | [bathroom] Bath |[sqft-living] sq. ft.</div> 
<div style="clear:both;"></div>

In the above code, you need to replace home-image, MLS ID, address, listing price, blurb, bedroom, bathroom, and sqft-living with the respective field IDs/keys from your form.

You can find the field IDs/keys in the Customization box on the right-hand side of the page.

Formidable Forms Filed Keys

For example, if we want to show the photo uploaded via ‘Main Photo Upload’ field as the home image, we need to replace the ‘home-image’ with the field ID ‘63’.

Insert Content Into Your Web Directory

After that, add the following code to into Formidable » Styles » Custom CSS to customize the appearance of your web directory.

 .listing_infofloat:left; width:235px; margin-right:10px; 
.listings_list imgwidth:370px;float:right;

Add Style to Your Formidable View

Once done, you can publish your view and preview it.

After that, create a new page for the web directory and add your Formidable View to it.

Add Formidable View to a WordPress Page

Here is how your real estate directory would look with the default Twenty Nineteen theme.

Real Estate Web Directory Demo

You can further customize and style your Formidable directory by either using custom CSS, a drag & drop WordPress page builder plugin, or a styling plugin like CSS Hero.

Method 2: Using Business Directory Plugin

The second method is by actually using a Business Directory Plugin. Remember while the main plugin is free, a lot of functionality will require you to purchase the PRO version of the plugin.

Start by installing and activating the Business Directory Plugin. Upon activation, the plugin will ask your permission to create a new WordPress page and add the business directory shortcode inside it.

Click on the ‘Create required pages for me’ to create your directory page.

Create Required Pages for Business Directory Plugin

Once done, the Business Directory plugin will add a new page called ‘Business Directory’ automatically.

Business Directory Page Added in WordPress

You should not delete or hide this page because it is the primary page the Business Directory plugin uses to show a directory on your website.

Next, you can manage the plugin settings from the ‘Directory Admin’ menu in your dashboard.

Go to Directory Admin » Manage Options to configure your plugin’s main settings. The ‘General’ settings include permalink settings, directory search options, reCAPTCHA, registration options, and more.

Business Directory Plugin Settings

As you can see in the screenshot above, there are settings for Listings, Email, Payment, and Appearance. You can review all of them one by one and make changes as per your requirements.

After that, visit Directory Admin » Manage Form Fields to customize your form fields. From here, you can add or edit fields which would appear on your directory submission form.

Manage Form Fields in Business Directory Plugin

Next, you will need to create a few categories for your directory.

You can do this by going to Directory » Directory Categories. You will be required to create at least one category, so your users can use this category when submitting their listing.

Add New Directory Category with Business Directory Plugin

Once you have created the categories, you can go ahead and create a new listing by visiting Directory » Add New Listing.

Now you would see the Add New Listing page which looks similar to the Classic WordPress editor. Enter your listing title, and add a short description about your listing.

Add New Listing With Business Directory Plugin

After that, scroll down to ‘Directory Listing Fields/Images’ section and add your business details including website address, phone number, email, etc.

Fill out Directory Listing Fields manually

To add images, you will need to click on the Images link first. Then, you can upload images from your computer or simply drop in the image box.

Upload Image to Your WordPress Business Directory

Next, you will need to choose an appropriate category for your listing.

Choose Directory Category

Once done, you can go ahead and publish your directory.

Now you can preview your web directory page on your website. Your web directory would look like the screenshot below with the default WordPress theme Twenty Nineteen.

Business Directory Demo with Default WordPress Theme

As a site administrator, you can create a listing manually from your dashboard. Your users can also submit a listing in your directory using a form. The submission form can be accessed by clicking on the ‘Create A Listing’ button.

Submit a Listing with the Business Directory Plugin

The user-submitted listing items will be saved in the Directory » Directory page as pending listing, so you can manually review and check the listing for quality.

Pending Directory Listing

Once done, they will appear on your business directory page.

Accepting Payments for Directory Listings

Business Directory Plugin allows you to accept payments for listings in your web directory. By default, the plugin only comes with Authorize.net as the payment gateway.

Other payment gateways such as PayPal and Stripe are available as separate add-ons which you can purchase from the plugin’s website.

To enable payment options in your business directory, you need to go to Directory Admin » Manage Options page and click on the ‘Payments’ tab.

Business Directory Plugin Payment Settings

In the payment settings page, the first option on the Payment Settings screen is the checkbox to turn on payments. If your site is not fully ready yet, then you can click the checkbox next to Put payment gateways in test mode? option.

Next step is to choose your currency and add a thank you message for payments.

Once you are done configuring payment options, then click on the save changes button to store your settings.

Now you can connect your directory with a payment provider. If you have not installed any other payment gateway add-on plugin, then you will only see Authorize.net as the default payment gateway option.

Click on the Authorize.net link and then enable it by entering your login ID and transaction key.

Business Directory Plugin Authorize.net Settings

Since you are requiring payments, you will need to set up listing fees. This can be done by going to Directory Admin » Manage Fees. There you can create different listing plans, set up fees and listing duration for each plan and save your changes.

That’s all! Your web directory is now ready to accept paid listings. We recommend you to explore other options in the plugin’s settings for further optimization of your web directory.

We hope this article helped you create a web directory using WordPress. You may also want to see our guide on how to create a team directory in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Web Directory in WordPress (Step by Step) appeared first on WPBeginner.



Source link

How to Add Web Push Notification to Your WordPress Site


Do you want to add push notifications to your WordPress site? Push notifications allow you to send notifications to users even when they are not visiting your website.

In this article, we will show you how to easily add web push notifications to your WordPress site. We will also talk about the best WordPress push notification plugins and how to send desktop & mobile push notifications from your WordPress site.

Adding web push notifications to a WordPress site

What is Push Notification?

Push notifications are clickable messages displayed on top of user’s desktop or notification area on their mobile device. They can be shown even when the user’s browser is not open.

web push notifications shown on a desktop

Aside from desktop, web push notifications also work on mobile devices. This allows you to reach your users across devices with latest updates and offers. Web push notifications have proven to be a very effective way to convert website visitors into customers and loyal followers.

Why Add Web Push Notifications to Your WordPress Site?

We have already discussed that 70% of people who leave your website will never come back. This is why you need to convert those website users into subscribers or customers.

You can do this by utilizing multiple channels at once. This includes email marketing, social media, mobile or SMS marketing, and web push notifications.

While email lists are still the most dominant and effective marketing tool at your disposal, push notifications for us are proving to be quite effective.

Here is why:

  • Users need to give their explicit permission to receive push notifications. This means they are already interested in what you have to offer and are more likely to engage with notifications.
  • Push notifications are shorter and demand less attention than email or social media updates.
  • There is no algorithm, so nearly 100% of messages are delivered.
  • Users can control how their devices display notifications, they can snooze them, or turn them off entirely.
  • Not as many companies are using it.

Popular sites including Facebook, Pinterest, LinkedIn, and many others understand the importance and are already using web push notifications.

These notifications are more engaging than SMS, email marketing, and social media platforms. According to a survey, push notifications have a 50% higher open rate than email and twice as much click-rate.

Having said that, let’s take a look at how to add web push notifications to a WordPress site.

Setting up Web Push Notifications in WordPress with OneSignal

OneSignal is a free push notification service for WordPress websites. It allows you to easily add push notifications to any website.

First thing you need to do is install and activate the OneSignal plugin. Need help installing the plugin? See our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled OneSignal to your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

OneSignal settings page

The settings page is divided into Setup and Configuration tabs. The setup tab is actually detailed documentation on how to setup OneSignal push notifications in WordPress. It has the same steps that we will show you in this tutorial.

To setup OneSignal, you will need to add API Key and APP ID into the plugin settings.

Let’s get started.

Step 1: Setting up OneSignal Push Notifcations

First, you need to visit the OneSignal website and click on the get started button next to the Web Push option.

OneSignal get started

You’ll be asked to provide your email and password to create a free account. After your account is created, you’ll reach the OneSignal dashboard.

Add OneSignal app

On the dashboard, click on the ‘Add App’ button to create your first app.

You’ll be asked to provide a name for your app. You can use anything here that helps you identify it.

Enter a name for your app

Next, you’ll need to select a platform. You can select multiple platforms for an app. For now, we recommend selecting ‘Web Push’ and click on the next button to continue.

Choose app platform

In the next step, you’ll be asked to select an integration method. Go ahead and click on ‘WordPress Plugin or Website Builder’ box and then select WordPress.

Select integration method

When you scroll down a bit, you will see a ‘WordPress Site Setup’ section.

You need to enter your website name, URL, and upload a logo. This logo would appear in your notifications, so we recommend using your site icon (favicon) or website logo.

WordPress site setup

Below that, you will see a toggle that you can turn on if your WordPress site is not using SSL/HTTPS. You can only send web push notifications from a secure HTTPS URL. If your WordPress site is not using HTTPS, then you need to turn this setting on and enter a label.

A label is basically a subdomain hosted on OneSignal servers using a secure HTTPS URL. This subdomain will be used to send your push notifications.

If you want to setup HTTPS on your own WordPress site, then see our step by step tutorial on how to move WordPress from HTTP to HTTPS. We highly recommend using your own domain with SSL than a subdomain on OneSignal, so you’re not forever locked in to their platform.

Once you are done, click on the save button to store your OneSignal settings. You’ll now see the API keys that you need to copy.

Copy the API keys

Now, you can switch back to OneSignal plugin settings on your WordPress site and switch to the ‘Configuration’ tab. You need to paste the APP and API keys you copied earlier.

Paste API Keys

These API keys will only allow you to send push notifications via Chrome and Firefox web browsers.

You will also need Safari Web ID in order to send Push notifications via Safari web browser.

To get the Safari API key, you need to switch back to OneSignal website and go to the settings page for your app. Once there, you need to click on the edit icon next to Apple Safari.

Push notification setup for Safari

Next, you’ll be asked to enter your website title, URL, and optionally upload a site icon.

Safari settings for push notification

Click on the Save button to store your settings. After that, you’ll see your Safari Web ID on the screen which you need to copy.

Safari Web ID

Once again, switch back to the plugin’s settings page on your WordPress site and paste the Safari Web ID under the configuration tab.

Save OneSignal plugin settings

Don’t forget to click on the save button to store your plugin settings.

You can now visit your website in a new incognito browser tab. You will see a push notification popup on the top and a bell notification icon at the bottom right corner of the screen.

Push notification optin

The push notification popup will also appear on mobile browsers.

Push notification optin on mobile browser

Note: The appearance of push notification popup prompt may differ based on http/https settings of your site.

Now, you may be wondering why this push notification prompt looks different than what you see on some other websites?

Normally users see the browser default notification prompt, which looks something like this:

Default browser prompt for push notification

Now the problem is that, if a user clicked on ‘Block’ button, then they will never see a prompt for subscribing to notifications. To fix this, OneSignal comes with two different prompt types.

The first one is the push notification popup and the other one is the subscription bell icon. Both of them are fully customizable, and you can change them to meet your needs.

Step 2. Customizing The Push Notification Popup Prompt

The basic push notification popup is quite simple. It uses generic language and displays your site’s logo. You may want to customize that to make it more personal.

Simply switch to the configuration tab under OneSignal plugin’s settings page on your WordPress site and scroll down to the ‘HTTP Pop-Up Settings’ section.

Customize push notification popup

You need to click on the toggle next to ‘Customize the HTTP Pop-Up Prompt text’, and then start adding your own text.

Don’t forget to click on the Save button to store your settings before testing the prompt.

Step 3. Customize the Bell Notification Icon

Normally, the browser prompt for notification and the popup disappear when a user dismisses them.

What if users later change their mind and want to receive push notifications?

The subscription bell in OneSignal allows you to keep showing users a prompt to subscribe push notifications on your site.

The bell icon is also fully customizable from the plugin’s settings page. Simply scroll down to ‘Prompt Settings & Subscription Bell’ section and turn on the customization options that you want to change.

Subscription bell settings

You can then scroll down and change settings for each option you want to customize. Ideally, you would want to change bell icon colors to match your own theme colors.

Bell icon customization

Note: We don’t use the bell icon because we feel it’s a bit too intrusive.

Step 4. Sending Push Notifications from Your WordPress Site

By default, the OneSignal plugin automatically sends push notifications for all new posts published on your website. If you want, then you can turn this feature off from plugin’s settings page under ‘Automatic Notification Settings’ section.

Automatic notification settings

You can also manually send a notification when you publish or update a post. Simply edit a WordPress post or page, and you will see the OneSignal meta box under document settings column on the right.

OneSignal notification box in Gutenberg

If you are using the old classic editor, then you will see the meta box like this:

Send push notification box in classic editor

Check the box next to ‘Send notification on post update / publish’ and then click on update or publish button.

OneSignal will now send your article as a push notification to all your subscribers.

Send a welcome push notification to new subscribers

You can also send a welcome push notification to your new subscribers. Visit OneSignal’s settings page in your WordPress admin area and scroll down to the ‘Welcome Notification Settings’ section.

Welcome notification

Now when a new subscribes for push notifications, they will receive a welcome notification on their device. Depending on their browser and device the notification may look different.

Welcome notification displayed on Mac via Firefox

That’s all, you have successfully added web push notifications to your WordPress site.

You can also send custom notifications from the OneSignal app dashboard. The process is quite intuitive and you can follow onscreen instructions once you login to OneSignal.

Other Good WordPress Push Notification Plugins

It is important to choose the right web push notification service from the start. Since most providers try to lock you in their platform, changing your push notification service can result in losing your old subscribers. Meaning if you switch, then you will be starting from scratch.

This is why we recommend asking the provider you choose for all settings you need to configure to make your subscriber list portable.

At WPBeginner, we use OneSignal because it has the features that we need at a reasonable price.

  • OneSignal offers a free WordPress push notification plugin with unlimited mobile push and web push notifications for upto 30K subscribers.
  • Even their free plan includes features like segmentation, localization, tracking with Google analytics, and a robust API.
  • You can use it with all top email marketing services to send your newsletter emails via web push notifications

WordPress is all about choices. Here are some other WordPress push notification plugins that you can also try.

  • PushEngage Web Push Notifications – This is the connector plugin for PushEngage, a push notifications service provider. They have a free plan limited to 2500 subscribers, 120 notifications, and 5000 clicks.
  • PushAlert – Web Push Notifications – Helps you connect to PushAlert web push notification service. They also offer a free plan limited to 3000 subscribers.
  • PushCrew – Connects your website to PushCrew’s push notification service. They offer a free plan limited to 2000 subscribers.
  • PushAssist – Connector plugin for PushAssist web push notification service. Their free plan is limited to 2000 subscribers.

We hope this article helped you learn how to add web push notifications to your WordPress site. You may also want to see our guide on how to get a free business email address for your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Web Push Notification to Your WordPress Site appeared first on WPBeginner.



Source link