Tutorials – Qode Magazine https://qodeinteractive.com/magazine Learn to Build Beautiful Websites Tue, 11 Feb 2025 05:48:56 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://qodeinteractive.com/magazine/wp-content/uploads/2019/07/cropped-fav-icon-1-32x32.png Tutorials – Qode Magazine https://qodeinteractive.com/magazine 32 32 How to Create a Digital Products Marketplace Using WordPress https://qodeinteractive.com/magazine/how-to-create-digital-products-marketplace/ https://qodeinteractive.com/magazine/how-to-create-digital-products-marketplace/#respond Thu, 09 May 2024 13:00:01 +0000 https://qodeinteractive.com/magazine/?p=44476

You have a passion for creating awesome digital products like eBooks, software, courses, or even artwork? The good news is that now you can sell them and start earning passive income. And how? Well, by selling them online.

And what if you don’t have your own product to sell but you still want to tap into that market? No worries! A digital products marketplace is your answer. It’s like a virtual mall where you connect creators with consumers. You provide the platform, they provide the products, and everyone wins!

In this tutorial, we will show you how to create a digital products marketplace in nine easy steps. So, keep reading!

eCommerce WordPress Themes
Tonda WordPress Theme
Tonda

A Modern Elegant WooCommerce Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

Gioia WordPress Theme
Gioia

Modern Fashion Shop

Why You Should Create a Digital Products Marketplace

The digital products industry is booming. The latest data shared by ResearchAndMarkets.com shows that the global market is estimated to grow from $23,328.73 billion in 2021 to $33,313.50 billion in 2026 at a rate of 7.4%. The market is then expected to grow at a CAGR of 6.3% from 2026 and reach $45,149.00 billion in 2031.

If you want to get a slice of this huge pie, you need to jump in directly, with an online presence. The industry is not showing any signs of slowing down, so you really shouldn’t wait.

Why? Well, digital products are just plain convenient. They’re:

  • Easy to Access: No waiting for shipping, just download and go!
  • Globally Available: Reach customers anywhere with an internet connection.
  • Scalable: Sell the same product to infinite customers without restocking.
  • Low Overhead: No warehouses or physical products to manage.

So, if you have a skill for design, love writing, or are a coding wizard, you can create a valuable digital product and share it with the world. And if you don’t have products of your own, you can easily connect with creators and sell through your platform.

Most Profitable Digital Products to Sell in 2024

These are some of the most profitable digital products to sell in 2024:

  • Online Courses
  • Subscriptions
  • eBooks
  • Research and Data
  • NFTs
  • Audio Content
  • Swipe Files
  • Apps and Software
  • Art and Graphics

You can learn more about these digital products from our article 9 Types of Digital Products to Sell on Your WordPress Website.

How to Create a Digital Products Marketplace Using WordPress – 9 Simple Steps

As we said earlier, we will show you how to create a digital marketplace using WordPress in nine simple steps. You will learn how to:

Now let’s get into the details!

Step 01: Register a Domain Name

The first thing you need to do is register your domain name. Follow these steps to register your domain name:

  • Brainstorm Your Domain Name: First things first, you need to come up with a catchy and memorable domain name for your marketplace. Your domain name should reflect your brand identity and be easy for customers to remember. And if your preferred domain is taken, there’s still a lot you can do to maintain your branding idea.
  • Check Availability: Once you have a few domain name ideas in mind, it’s time to check if they’re available. Use an online domain registrar, type in your desired domain name, and the registrar will let you know if it’s up for grabs.
  • Choose the Right Extension: A domain extension is the suffix at the end of your domain name, like .com, .net, or .org. While .com is the most popular and widely recognized, you can also choose other extensions based on your needs.
  • Register Your Domain: Once you’ve found the perfect domain name that’s available, it’s time to register it, which typically involves providing your contact information and payment details.

Your domain name is the foundation of your digital presence, so take your time to choose the name that reflects your brand and resonates with your audience.

Step 02: Buy a Hosting Plan

Buying a hosting plan is almost the same as buying a domain name. Follow these steps to buy your domain name:

  • Select a Hosting Provider: Look for a reliable hosting provider that offers features like good uptime, security, and customer support. Popular options include Bluehost, SiteGround, HostGator, etc.
  • Choose the Right Plan: Hosting providers offer different plans depending on your needs and budget. For a digital products marketplace, you’ll likely need a plan that provides enough storage, bandwidth, and resources to handle your website’s traffic and transactions.
  • Register Your Hosting Plan: Once you’ve selected a hosting provider and plan, you’ll need to sign up and register for the hosting service. This typically involves providing your contact and payment information, choosing your billing cycle (monthly, yearly, etc.), and configuring any additional services or features you may need.

After registering, you’ll receive login credentials to access your hosting account’s control panel. Then change the password for you.

Step 03: Install WordPress on Your Control Panel

If you don’t want to install WordPress manually, simply ask your hosting provider to install WordPress on your behalf and provide the credentials. They will happily do that for you.

However, if you want to install WordPress on your own, follow this procedure:

Log in to your control panel and look for an option or section related to website management or software installations.

Once you’ve located the installer, select WordPress from the list of available applications. Follow the prompts to begin the installation process. You need to provide some basic information, such as your desired website name, username, and password for the WordPress admin area.

After providing the necessary information, initiate the installation process. The installer will automatically set up WordPress on your hosting account, including creating the necessary databases and configuring the required files.

Install WordPress on control panel 1
Install WordPress on control panel 2

Once the installation is complete, you’ll receive confirmation along with login details for your WordPress dashboard. This dashboard is where you’ll manage your website’s content, design, and functionality.

Step 04: Install a Multivendor Marketplace Plugin

WordPress has a dedicated eCommerce solution called WooCommerce. However, using WooCommerce, you can only create single online stores. To create a multivendor marketplace, you’ll require a multivendor plugin along with WooCommerce.

There are several multivendor plugins available. Among them, Dokan, WCFM, and MultivendorX are popular.

In this blog, we are going to use the Dokan plugin to create a digital products marketplace since Dokan is the most popular multivendor solution with more than 50,000 active installations. Also, Dokan comes with dedicated support for creating digital product marketplaces.

Let’s check how you can install the Dokan plugin!

Navigate to your WordPress dashboard -> Plugins -> Add New Plugin, then type Dokan into the search box and install the plugin from the search result.

After activating the plugin, click on the Activate button to activate the plugin.

Install Dokan Steps

Step 05: Install a Suitable Theme

Now you should install a suitable theme for your digital product marketplace. When you are choosing a theme, make sure it’s WooCommerce compatible. And all the WooCommerce-compatible themes are by default Dokan plugin compatible.

One such theme is Gioia – Modern Fashion Shop theme. It is a feature-rich, superbly designed theme, completely WooCommerce and Dokan compatible. You can use this theme to give your multivendor marketplace a professional look.

Let’s see how you can install and activate this theme on your website.

Since Gioia is a premium theme, you have to purchase it first. After purchasing the theme, go to the WordPress dashboard -> Appearance -> Themes -> Add New Theme -> Upload Theme, then upload the theme as a .zip file.

Finally, install and activate the theme to use it on your website.

Install theme

Step 06: Configure the Basic Settings of Your Marketplace

To configure the basic settings of your marketplace, go to Settings under the Dokan option. There, you’ll find all the basic settings to configure:

  • General Settings
  • Selling Options
  • Withdraw Options
  • Payment Gateways
  • Reverse Withdrawal
  • Page Settings
  • Appearance
  • Privacy Policy
Dokan Basic Settings
  • Set up Commission Type and Rate

To set the commission type and rate, click the Selling Options button. There you’ll find the options to set up commission type and rate.

You can choose either Flat or Percentage as a commission type, then set the rate.

Selling Options

Finally, click on the Save Changes button to save all the changes.

  • Minimum Withdraw Limit

Now you need to set the minimum withdrawal amount. Click on the Withdraw Options button and configure the withdrawal settings.

Dokan Withdraw Options

Don’t forget to click the “Save Changes” button to save these changes.

  • Configure Payment Gateways

Dokan supports all WooCommerce-compatible payment gateways. With Dokan Lite you can use non-adaptive payment gateways like PayPal, bank account transfer, cash on delivery, etc.

Go to your WordPress dashboard -> WooCommerce -> Settings, then click on the Payment tab to get the available payment methods.

Note: If the PayPal option isn’t there by default, you should install the “WooCommerce PayPal Payments” plugin and you will find the PayPal option here.

Dokan Payment Options

Step 07: Prepare Your Admin Store

It’s an optional step for you. If you don’t want to be a seller on your own marketplace, you can skip this step. However, you’ll still get commissions from your registered vendors if you don’t have an admin store.

But if you want to earn more, you can create your store and start selling as a vendor from your own marketplace. Let’s check how you can do that!

First, you need to enable yourself as a seller. To do that go to Dokan –> Vendors and enable selling by turning on the Status button.

Enable Selling Status

As an admin, you’ll get two ways to upload products. You can upload products from frontend or backend.

Let’s check how to upload products from the backend:

Go to your WordPress Backend -> Products -> Add New. There you’ll find options to add the product’s name, description, image, category, tags, price, and so on.

Note: Since it’s a digital product, don’t forget to click on the Downloadable box.

Add New Product

When you’re done, click the “Publish” button to publish the newly added product.

That’s how you can add products from the backend.

Now let us show you how to add products from the frontend. Your registered vendors will also add products following this same process.

Go to your WordPress Dashboard -> Visit Vendor Dashboard -> Products. Then click on the Add new product.

Now add the product title, image, price, etc to complete the process.

Don’t forget to tick the Downloadable box.

Add a New Product

Once you’re done with the configuration, hit the Publish button to publish the product.

Here is the preview of the product that we have just added:

Preview Image

Step 08: Allow Vendors to Register on Your Marketplace

After adding all the functionalities and configuring your marketplace, you can invite vendors to sign up for your marketplace. To make sure vendors can sign up for your marketplace, enable the “Anyone can register” option from WP Admin –> General –> Settings.

Anyone Can Register

It will open the default registration form for vendors to sign up.

Registration Form

That’s all! This is how you can allow your vendors to register on your digital products marketplace.

Step 09: Promote, Promote, and Promote

You’ve built a beautiful marketplace, and stocked it with amazing digital products – now it’s time to promote it.

Here are some ways to promote your marketplace:

  • Social Media Savvy: Utilize the power of social media platforms like Facebook, Instagram, and Twitter. Share engaging content, showcase your vendors’ products, and run targeted ads to reach your ideal audience.
  • Content is King: Create valuable blog posts, articles, or videos related to your niche. This establishes you as an authority, attracts organic traffic, and positions your marketplace as the go-to destination for digital goodies.
  • Email Marketing Magic: Build an email list and send engaging newsletters featuring new products, promotions, and vendor spotlights.
  • SEO Optimization: Optimize your marketplace with relevant keywords to help potential customers find you in search engine results.
  • Influencer Outreach: Partner with influencers in your niche to spread the word about your marketplace to their dedicated audience.
  • Community Building: Foster a sense of community by creating forums or social groups where vendors and customers can connect and interact.

Bear in mind that promotion is an ongoing process. Track your results, experiment with different strategies, and adapt as needed. The key is to consistently put your marketplace out there and build relationships with your target audience.

By implementing these promotional tactics, you’ll attract vendors, and customers, and watch your digital marketplace flourish!

Digital Products vs Physical Products to Sell

Starting a digital products business over physical products has many advantages. Let’s go through some of them.

Easy to Create and Distribute

Digital Products: Creating digital products like eBooks, software, or online courses is a breeze. Once you’ve made them, you can distribute them instantly over the internet to anyone, anywhere. No shipping is required!

Physical Products: Making physical products often involves more steps. You’ve got to source materials, manufacture them, package them up, and then ship them out. It can be time-consuming and costly.

Low Management Costs

Digital Products: Since everything’s online, you don’t need to worry about renting a physical space or stocking inventory. Your main costs are usually related to creating the product itself and marketing it.

Physical Products: Running a business selling physical goods can be expensive. You’ve got rent, utilities, staff wages, and inventory costs. It can eat into your profits pretty quickly.

Scalability

Digital Products: Once you’ve created a digital product, you can sell an unlimited number of copies without any extra effort. Whether you’re selling to one person or a million, it doesn’t matter – it’s all digital!

Physical Products: Selling physical products has limits. You can only produce so many items at once, and you might need to invest in more resources if demand suddenly spikes.

Environmental Impact

Digital Products: They’re eco-friendly! No need for paper, plastic, or transportation – it’s all online.

Physical Products: Producing physical goods can have a big environmental footprint, from manufacturing processes to shipping emissions.

Creating a Digital Marketplace- Key Takeaways

The digital product market is booming, and creating a marketplace with WordPress offers a fantastic opportunity to tap into this potential.

Here are the key takeaways to keep in mind:

  • Target the Right Niche: Identify a specific market for your digital products and cater your branding and marketing efforts to that audience.
  • Embrace the Power of Digital: Digital products offer convenience, scalability, and lower overhead costs compared to physical products.
  • Choose Your Domain Wisely: Your domain name is your online identity, so pick one that’s catchy, memorable, and reflects your brand.
  • Find a Reliable Host: Your hosting plan is the foundation of your marketplace. Choose a provider with features that meet your needs and scale as you grow.
  • WordPress Makes it Easy: Building your marketplace with WordPress is a user-friendly and cost-effective way to get started.
  • Choose the Right Multivendor Plugin: Multivendor plugin like Dokan make it easier to seamlessly manage your multivendor marketplace.
  • Promote, Promote, and Promote: Spread the word about your marketplace through various channels like social media, content marketing, and influencer outreach.

Now you know how to create a digital products marketplace using WordPress. So, create your own multivendor marketplace now! If you have any questions related to this tutorial, feel free to ask us using the comment box. Take care!

]]>
https://qodeinteractive.com/magazine/how-to-create-digital-products-marketplace/feed/ 0
How to Add a Client Feedback Form in WordPress https://qodeinteractive.com/magazine/how-to-add-client-feedback-form-in-wordpress/ https://qodeinteractive.com/magazine/how-to-add-client-feedback-form-in-wordpress/#respond Mon, 18 Mar 2024 13:00:45 +0000 https://qodeinteractive.com/magazine/?p=26443

Feeling the pulse of your audience and paying attention to what they have to say about your products and services are major prerequisites for business success. By asking for your clients’ feedback, listening to it, and then acting on it, you will establish and maintain a strong relationship with your customers. They will keep coming back to you and trusting you more than competitors as long as you are attentive to their needs, providing them with a superior customer experience. At the same time, their loyalty to your brand will grow, allowing you to stay in the business for a long time. In this article, we’re explaining the importance of feedback and showing you how to add a client feedback form in WordPress.

Here’s what we’ll cover:

Types and Forms of Customer Feedback

Customer feedback refers to the opinions, comments, and suggestions provided by customers regarding their experiences with a product, service, or brand. This feedback provides valuable insights for businesses to understand customer satisfaction levels, identify areas for improvement, and enhance their offerings.

There are several types of feedback. Constructive feedback provides useful and/or actionable suggestions for improvement. Positive feedback highlights what customers appreciate about the product or service, while negative feedback points out areas of dissatisfaction or disappointment. By actively soliciting and attentively analyzing customer feedback, businesses can foster stronger relationships with their customers and continually refine their offerings to better meet customer needs and expectations.

Some of the most popular and most efficient ways to gather feedback include surveys, customer interviews, customer ratings and reviews, user testing, Net Promoter Score (NPS) surveys, focus groups, social media listening and more. But for businesses with websites, the absolutely easiest, most common and convenient way to hear what your clients have to say are feedback forms. And that’s precisely what we’re going to focus on in this article. Before we show you how to do about it the easy way (which in WordPress usually means – with a plugin) using two user-friendly solutions – WPForms and Contact Form 7.

Why Should You Add a Client Feedback Form to Your Site

When you encourage customers to share their thoughts, likes, dislikes, wants, and expectations with you, you’re sending them a message that their voice matters. They feel important because you value their opinion. By addressing their feedback and showing them you are committed to improving your business, you gain their trust. They will keep coming back to you because you make them feel heard and you genuinely care about customer satisfaction.

On the other hand, client feedback helps you understand how others perceive your brand. You discover what your strengths are and whether you can somehow further augment their power. At the same time, you also learn what the pain points of your business are. That gives you an opportunity to take action, strategize, become better at what you do, as well as meet or even exceed customers’ expectations.

Now, let’s see how you can add a client feedback form to your site using plugins.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Display a Client Feedback Form Using WPForms Lite

WPForms

WPForms is one of the most popular contact form plugins. It includes a myriad of features and a practical drag & drop form builder that facilitates the process of form creation.

To add a client feedback form to your site, you don’t have to purchase a premium plan. Instead, you can use WPForms lite i.e. the free version of the plugin.

Creating the Feedback Form With the WPForms Lite Plugin

After installing and activating the plugin, you will find a new item in your dashboard menu, called WPForms. Navigate to that item and select Add New. This will open a screen where you can name your form and select a template. You will note that the plugin offers two sets of feedback form templates – Customer Feedback and HR Feedback. However, most of them (except for the Feature Request template) are pro templates, so we’re going to head back to the initial panel and select the Simple Contact Form.

Simple Contact Form

Clicking on the template will open the template editing screen. Here you’ll find some fields already inserted, and in the left-hand side menu you can pick among the standard fields to add. For instance, you can add checkboxes or multiple-choice fields, as well as CAPTCHA. The “Fancy Fields” are, obviously, available on the pro plans only. There’s also a selection of payment option fields.

Fields

We’re going to add a Multiple Choice field to our form. If you want one too, simply drag and drop the field where you wish.

Multiple Choice

Click on the field in the right-side panel. This will open a set of options.

Choices

Enter the text (the “title” for your options) and name the options. You can add and remove options by clicking on the plus or minus signs next to each field. Click on Save to apply your changes but don’t click on Submit just yet.

We’re going to add a little thank-you message below the comment field. Click on the Comment or Message field and, in the options, write your note in the Description field. It will appear underneat the message box.

Description

When you’re done, click on Save and then on Embed button at the top of the screen.n But before we show you how to display your form, we’re going to show you how you can customize it using Qi Addons for Elementor.

Embed in a Page

Customizing the Feedback Form With Qi Addons for Elementor

If Elementor is your preferred page builder and you would like to tweak the feedback form some more, we’d suggest you install Qi Addons for Elementor on your site. It’s free and it packs a collection of 60 free widgets that enable you to enhance the power of your website, including the WPForms custom widget that allows for further form customization.

Once you save the feedback form you’ve previously made with WPForms lite, you can install the Qi Addon for Elementor widget pack. Then, open the page where you would like to display the form and add the WPForms widget to it.

Qi WP Forms

The widget will automatically display the feedback form on the page. Currently, our form looks like this:

Qi WP Forms Default Preview

When you click on your form, the WPForms’ customization options will appear on the left-hand side of the screen. You can modify the content and the style of the form to further improve its appearance.

The Content section allows you to enter a custom class as well as to choose the feedback form you wish to edit (in case you’ve made several of them).

Qi WP Forms Content Tab

The Style tab lets you make changes to the label text and color, choose a style of the input text, add background colors to all fields, set spacing and padding values, alter the appearance of the form button, play with numerous typography settings, and much more.

Qi WP Forms Style Tab

Simply click on any of these tabs and you will see the list of all available options. For example, this is what Input Style settings include:

Qi WP Forms Input Style

Additionally, some of these options allow for even more customization. When you click on the pencil next to Input Typography, a dropdown menu will appear with a plethora of font styling settings.

Qi WP Forms Input Typography

You can choose a font, set letter size, weight, and style, add an underline and overline to your text, and much more.

Customization options are tremendous, allowing you to style your feedback form exactly the way you want. And best of all, you can get all of this for free.

Once we applied the WPForm widget’s styling options to our form (along with some default Elementor’s customization settings), this is how it ended up looking:

Qi WP Forms Preview

And while this is far from being the world’s prettiest client feedback form, we simply wanted to show you just a small part of what you can achieve with the WPForms widget and Elementor. Adjust the settings to your liking and go for a style that best matches the aesthetic of your site.

Setting Up Notifications and Confirmations for Your WPForms Feedback Form

When you’re happy with the way your feedback form looks, it’s time to set up notifications and confirmations. Notifications are for you, alerting you when someone submits a form. On the other hand, your clients will receive confirmations upon successfully sending feedback.

To manage both notifications and confirmations, select Settings from the WPForms panel.

WPForms Settings

Notification and confirmation settings are placed one below the other.

As for notifications, the platform will send them to the admin email address by default. But you can change that and even enter several email addresses, in which case you should separate them with a comma.

WPForms Notifications

Regarding confirmations, you should first choose what kind of confirmation you wish to send to your clients.

WPForms Confirmation Type

If you decide to send them a message, you have the option to customize the confirmation text.

The Show Page setting lets you redirect users to a specific page on your site.

WPForms Confirmation Page

Alternatively, you can also redirect them to some other website.

WPForms Confirmation Redirect URL

Displaying a Client Feedback Form on Your Site Using the WPForms Plugin

When you’re done making changes to the form and you’ve set up confirmations and notifications, it’s time to add the client feedback form to your website.

For starters, go to the page or post where you would like to display the form.

In Elementor, you can do it simply by using the WPForms widget, as we showed you earlier in the article.

If you decide to forego the Qi Addons for Elementor pack, the Elementor page builder has its own WPForms widget.

WPForms Elementor

In case you created several forms, you can select which one you wish to display on the preferred page.

WPForms Select a Form

Click on the desired form and you’ll see it appear on the page.

WPForms Elementor Preview

If you’re using Gutenberg, you have to add the WPForms block to the chosen page or post (the block will automatically appear in the block panel once you install the WPForms plugin).

WPForms Gutenberg

On the right-hand side of the screen, you can see some options regarding the WPForms block. There you can choose the form you wish to add to a page and decide if you wish to display its title and form description.

WPForms Gutenberg Settings

In the Classic Editor, you will notice the Add Form button just above the text editor (the button becomes visible upon activating the plugin).

WPForms Classic Editor

Click on that button, select a client feedback form from the list, and check the boxes if you want to display the form’s name and description. And lastly, press the Add Form button.

WPForms Classic Editor Insert Form

How to Display a Client Feedback Form Using Contact Form 7

Contact Form 7

Another widely popular contact form plugin is Contact Form 7. It is very simple to use and completely free, so it’s no surprise that it currently counts over 5 million active installations.

Once you install it on your site, go to Contact > Add New to start creating a client feedback form. By default, each form is asking clients for their name and email address as well as to enter the subject of their message and some text:

Contact Form 7 Default Values

The list of additional fields you could add to the form is available in the Form tab. You can insert fields for the customers’ phone number, date, checkboxes, a dropdown menu, and a few others.

Contact Form 7 Fields

Say you wish to add checkboxes to the form. In that case, you should click on that tab in the panel. Once you do that, the following window will appear on the screen:

Contact Form 7 Checkboxes

You can specify if you want the field to be required or not, change its name, insert some options, and more. Each field comes with its own array of settings you can customize to make the field suit your needs.

If some of the default fields don’t serve you, feel free to remove them from the form.

When it comes to styling the form, the best way to customize its appearance is to use the Contact Form 7 widget that comes packed with Qi Addons for Elementor.

Qi Contact Form 7

This is what the default form looks like:

Qi Contact Form 7 Preview

To begin altering its design, click on the form and look at the menu on the left side of the screen.

Qi Contact Form 7 Tabs

The Content tab lets you enter a custom class and select a specific form you want to insert to a page.

The Style section includes a mélange of settings that enable you to change every single detail about your form, just like you could do with the WPForms widget.

Qi Contact Form 7 Style Tab

From adding borders to the button and changing the color of the labels to specifying the input background color, the alignment of the form, and heaps more, the Contact Form 7 widget has all you need to style the form the way that works best for you. Check out just how many options this widget has regarding the button alone:

Qi Contact Form 7 Button Style

The Advanced tab contains options included with Elementor by default. You can use them to change the background color of the form, select entrance animation type, customize responsiveness, and more.

We tweaked the appearance of our form a bit and this is what it looks like now:

Qi Contact Form 7 Style Preview

Again, you can try out all of the options and combine different styles until you are satisfied with how your form looks. The combination of the Contact Form 7 widget and Elementor is guaranteed to give you a lot of room for experimentation.

Setting Up Notifications and Confirmations for Your Contact Form 7 Feedback Form

In the Mail tab of the Contact Form 7 plugin, you can make adjustments to the mail template that you will receive when someone submits a contact form.

Qi Contact Form 7 Mail

The most important thing to do here is to check the To field. That is where you need to enter the email address where you wish to receive email notifications. You can make some more changes to the email template, add or delete form-tags in the message body, etc.

Confirmation and other kinds of messages the customers might receive from your end can be set up within the Messages tab.

Qi Contact Form 7 Messages

This is where you can specify the text your clients will receive when they submit feedback or when they fail to do so, as well as when their response is regarded as spam, and loads more.

Displaying a Client Feedback Form on Your Site Using the Contact Form 7 Plugin

If Elementor is the page builder of your choice, at the moment, the only way of adding a Contact Form 7 feedback form to it is by using a third-party widget, like the above mentioned Qi Addons widget. It’s free yet bustling with customization possibilities and it will allow you not just to add a form using Elementor, but to style it to perfection. And as we’ve mentioned earlier, you just need to drag the widget to the page or post where you want to add the form, and you’re done.

In Gutenberg, you have to add the Contact Form 7 block to your page.

Contact Form 7 Gutenberg

This block does not offer any extra options but it does do the job of displaying the Contact Form 7 feedback form on your site.

And lastly, in the Classic Editor, look for the form shortcode displayed above the form editor and copy it. It should look like this:

Contact Form Shortcode

Next up, you need to open the page or post where you want to add the form. Paste the shortcode in the text editor field and save the changes.

Contact Form 7 Text Editing Mode

Closing Words

Prioritizing customer experience is indispensable for making it in any business. By asking your clients’ for their opinion and making a conscious effort to improve your service upon receiving feedback, you will build a loyal customer base. Users will be glad to collaborate with you because you care about delivering products that make them happy.

Whether you choose to create a client feedback form by using the WPForms Lite or the Contact Form 7 plugin doesn’t matter that much. It all comes down to your personal preferences. Both plugins are free and easy to use, allowing you to make forms in no time. Best of all, the Qi Addons for Elementor collection includes widgets for both of these plugins, giving you the power to customize and improve the appearance of your forms to your liking.

]]>
https://qodeinteractive.com/magazine/how-to-add-client-feedback-form-in-wordpress/feed/ 0
How to Add a Search Bar to Your WordPress Menu https://qodeinteractive.com/magazine/add-search-to-menu-wordpress/ https://qodeinteractive.com/magazine/add-search-to-menu-wordpress/#respond Mon, 04 Mar 2024 11:00:33 +0000 https://qodeinteractive.com/magazine/?p=10844

There is no overestimating the importance of a search function for your website. Even if your website is remarkably easy to navigate, your visitors might still have a little trouble finding what they want. It’s up to you to give them a hand. And you can do it if you add a search bar to your WordPress menu.

WordPress itself has a default search functionality. However, you may be dissatisfied with it, or you might want to include functionalities it doesn’t come with.

A functional search bar is a feature that’s often integrated in themes. This includes our own premium WordPress themes. For the purposes of this article, we’ll be using the Bridge theme to demonstrate how to add a search bar to your site. However, please note that the options for adding a search bar may vary, depending on the theme you’re using. And in case you’re not using one of our themes at all, we’ll also cover how to add a search bar to your site using a plugin. Here’s what we’ll cover:

Why Add a Search Bar to the Menu?

Good search functionality is one of the pillars of good user experience. Only a few things are more annoying for visitors than failing to find what they’re looking for, quickly and easily.

There’s a lot that can be done to improve the search. For instance, you can add live Ajax search for a faster, interactive search experience. You should certainly consider adding the autocomplete search feature, too. If you’re running an eCommerce website, you can set up the search filters for your products. Finally, you can even completely remove the search feature from your WordPress website.

But in terms of improving the usability and navigational experience of your website, you can also consider the best locations for placing your search bar.

By default, since the search bar is a widget, WordPress only allows you to add it to your widget-ready areas. These are dependent on the theme you’re using and you’re limited by those options, unless you know how to make custom widget areas.

An excellent location for the search bar is the navigation menu. Search is, after all, an important part of the website navigation, and placing it in the menu is a natural choice and a logical place where your visitors will look. The navigation menu is located at the top of the page, and the users will be able to find the search easily and instantly, which will, in turn, increase engagement and reduce the bounce rate.

If you feel like your website can benefit from placing the search bar to your WordPress menu, read along to discover two ways to do it.

How to Add a Search Bar in the Bridge WordPress Theme

Adding a search bar to your website using Bridge is very easy.

First navigate to Qode Options > Header.

Qode Options - Header

Once you have found the Header screen, click the Qode Search button in the bottom bar, and you will be taken to the search switch. You will need to enable it.

Qode Search

Having enabled the search bar, all you need to do is Save your changes. Now, when you visit your site from the frontend, you will see the search icon in the header. Clicking on it will open the search bar at the top.

Search Bar

We also have a video tutorial with detailed instructions on how to easily add a search bar to the menu of our Bridge theme, as well as how to configure it to match your website design and functionality preferences. Check it out below.

As you can see, in just a few short steps, you will have helped your visitors sort through your content and find what they were looking for.

How to Add a Search Bar to WordPress Using a Plugin

In case your theme doesn’t come with an inbuilt search functionality, adding a search bar to your WordPress menu works a little differently. For this demonstration, we will use the Better Search plugin – a free and simple solution which greatly improves upon WordPress‘s default search functionality.

First, you need to install and activate the plugin. If you are not sure how to do this, you can check out our article on installing WordPress plugins. Once you have Better Search installed and activated, you will need to configure it. This plugin is well-annotated, with explanations in italics, and you will never be in doubt as to which command does what.

For this demonstration, we won’t touch anything with regards to the General settings. We just need to make sure that the Enable seamless integration checkbox is checked. This means that the plugin will use your theme’s settings and style in order to blend in.

Better Search Settings

In the Search tab, we will take a look at three functionalities. The Number of Search Results should be set to how many results you want to appear per page, and the Post types checkboxes should be checked for each post type you want to appear in the searches.

Search Results Number

Next, if you scroll all the way down, you will find the Filter these words field. There are some words which are not included in the searches by default. These are profanities in English, and you may want to review this list, depending on your content. Note that this field may be used for all terms, not simply profanities, making this field an important tool in refining your search.

Words Filter

We won’t be changing anything in the Heatmap tab for our demonstration, since we are using the plugin in seamless integration mode. If you wish to use it, however, check Include heatmap on the search results. The options in this tab will help you customize the appearance of the “heat map” of popular searches, to further help your visitors find what they want. The Styles tab is there for custom CSS you might want to use.

Heatmap

Once you have your plugin configured and all settings saved, you need to find a place to add the search bar. This is done using a widget included with the plugin. Use your right-hand side menu to reach the Appearance/Widgets screen. We are using the Bridge theme, so the name for the widget area we’re adding our search to is Header Bottom Right. Note that themes may have different names for different widget areas.

Header Bottom Widget

In your list of available widgets on the left-hand side, find the Search Form [Better Search]. In its drop-down menu, find and select Header Bottom Right, then click the Add Widget button.

Add Widget Button

Your search form widget will now appear in the Header Bottom Right area on the right-hand side. You may choose to change the title of the field. We have gone with “Looking for something special?“. Once you Save your title, your search field should appear in your menu.

Search Form Widget

When you visit the frontend of your site, you will see what your search plugin looks like.

Search Plugin

And that’s all there is to adding a search bar via a plugin in WordPress.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

In Conclusion

While WordPress offers its own search functionality, it has been described by various users as rudimentary. We recommend you either use your theme’s in-built capacities, or a search plugin which best suits your website. Either way, adding a search bar to your WordPress menu is really simple, as we have shown. With a functional search bar, you’ll be a step closer to fulfilling your visitors‘ content needs – and you can be certain they will appreciate that.

]]>
https://qodeinteractive.com/magazine/add-search-to-menu-wordpress/feed/ 0
How to Set Up Recurring Payments in WordPress https://qodeinteractive.com/magazine/wordpress-recurring-payments/ https://qodeinteractive.com/magazine/wordpress-recurring-payments/#respond Wed, 03 Jan 2024 13:00:47 +0000 https://qodeinteractive.com/magazine/?p=21255

If you are conducting any kind of business online, you probably bill your users for your goods or services. Good business practices are often about establishing lasting relationships, and this often means multiple or recurring purchases, each of which requires billing and collecting. If you are selling a service or a regular supply of goods which requires you to bill your buyers with any frequency (say, a monthly subscription), you will find that, as your business grows and you take on more and more customers, billing takes up more and more time which could be put to better use. Setting up WordPress recurring payments is a way to automate invoicing your buyers and saving you a lot of time and effort.

In this article, we will show you how to use a free plugin to set up recurring payments for whatever goods or services you are using your WordPress website to sell.

Here’s what we’ll cover:

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

What Are the Benefits of Recurring Payments?

The main benefit of setting up your account to receive recurring payments is saving time. Instead of sending each of your buyers, users or subscribers invoices for each interval, for instance, you can automate this process and invoice them monthly. They can in turn set up their accounts to pay you automatically, instead of addressing each invoice in person as it arrives. This way, a recurring payment setup saves time on both ends.

The online services which recurring payments would most benefit are subscription services, such as news websites and online magazines. Similarly, maintenance services, such as building and garden maintenance businesses, may opt to charge a monthly rate instead of a per-job price. But even new media, such as podcasts and individual creators, can benefit from a subscription model.

The more you automate, the more you reduce the slog of simply doing business – your customers will appreciate it.

There are any number of premium options for you to set up recurring payments. We have elected to show you a free way to do it – all you need is a PayPal account and a free plugin. A word of warning: a PayPal account itself is free, but it does apply a transaction fee in case you are receiving money for goods and services.

How to Set Up Recurring Payments Using a Free Plugin?

The plugin we have chosen is WordPress PayPal. Of course, the prerequisite to using this plugin is a PayPal account. Once you have installed and activated the plugin, navigate to your plugin settings page by selecting WP PayPal > Settings from the left-hand side menu on your WordPress dashboard.

WP PP Settings

Once there, you will find the plugin’s few options.

Firstly, there is the Enable Test Mode checkbox. You can mark this box if you want to run some tests using the PayPal sandbox functionality. This way, you can check whether your setup works using a simulated transaction between a simulated buyer and a simulated seller.

Next down are your PayPal data. You need to enter your PayPal Merchant ID and your PayPal E-mail so that the plugin may connect with your account.

Finally, there is the Currency Code. The default is USD, for US Dollars, of course, but you can use any of the PayPal-supported currencies.

Once you have everything ready, all you need to do is Save Changes.

WP PP Config

Now, this plugin supplies you with shortcodes for PayPal buttons you can use. You can find these shortcodes and their parameters on the plugin’s WordPress.org page. If you are looking to set up a recurring payment, you want the subscription button shortcode. The default version of the shortcode is:

[wp_paypal button="subscribe" name="My product" a3="1.00" p3="1" t3="M" src="1"]

This shortcode will set up a subscription button for “My product”. To configure this button, you need to change its shortcode. As is, a sale using this button means a recurring subscription for the price of 1.00 of your set currency, recurring, for one month.

The a3 parameter defines the price. To change the price, simply enter an amount up to two decimal spaces instead of 1.00.

If you want this payment to recur, the src parameter needs to be set to 1, as it is by default.

The t3 parameter is the period of recurrence for the payment. You can set it to D for Days, W for Weeks, M for Months and Y for Years.

The p3 parameter is the number of periods of recurrence for which the payment recurs. Its range of allowable values depends on the t3 parameter, and it is 1-90 for Days, 1-52 for Weeks, 1-24 for Months and 1-5 for Years.

Detailed instructions for the use of these parameters can be found on the developer’s website.

We will now place this button onto a page. You can, of course, place your shortcode wherever you like. First, we will create a new page and click the plus sign to add a shortcode block.

Add Block

We will then simply populate the shortcode block by pasting the shortcode, and then save our changes.

Paste Shortcode

And our page is ready to accept paying subscribers.

PP Live Preview

Clicking the Subscribe button will lead you to the (simulated, in our case) PayPal checkout, where your users can review the subscription they selected.

PayPal Sim Preview

You can, of course, customize the button in several ways.

For instance, we strongly recommend you change the placeholder “My product”. To do that, you need to change the shortcode’s name parameter. Simply replace My product with whatever you want to call your subscription. You can generate multiple types of subscriptions this way, as each shortcode you use generates a different button. That way, you can, for instance, offer discounts to subscribers who subscribe for longer periods of time by offering them a better deal, or create subscriptions for multiple products or services on the same page, using a single plugin.

If you want the PayPal checkout to open in a new tab, you can do it using the target parameter, by adding target=_blank to your shortcode.

And if you want to change the look of the button itself to better suit your website‘s design or style, you can do that by adding the button_image parameter to the shortcode. Simply paste button_image=”XXXXXX” within the shorcode’s brackets, taking care not to disturb any of the other parameters, where you will of course swap the XXXXXX for the URL of your custom button image.

There are more parameters you could add to this shortcode which might be useful to you, but they go beyond the scope of this demonstration. The developers of the plugin have outlined them on the plugin’s WordPress.org page, and you can test them in PayPal‘s simulated environment to make sure that they function to your satisfaction.

Other Recurring Payment Tools for WordPress

The plugin we used for this tutorial will serve you just fine. But it’s worth knowing that there are other excellent (free and premium) tools you can use for setting up WooCommerce recurring payments, so let’s take a quick look at some of them:

GiveWP

GiveWP is an excellent plugin created primarily for allowing WordPress websites to set up and accept donations. The plugin has an addon designed specifically for recurring payments, with flexible recurring options, advanced reporting features, support for multiple gateways and built-in subscription management. The addon is well-documented and easy to set up, and currently costs $149/year.

WP Simple Pay

Just as its name suggests, WP Simple Pay is a straightforward and intuitive plugin designed for quick and easy payments. However, that doesn’t mean it lacks advanced features, and recurring payments are right among them. Setup is simple and convenient, and in addition to recurring payments, you also get over 10 payment methods, landing page builder, custom amounts and secure payment processing. Recurring payments are available with the Plus Plan, which currently costs $99/year.

Payment Button for PayPal

If you want your recurring payments to be done via PayPal, the Payment Button for PayPal is just the plugin for the job. This free plugin lets you add a PayPal Buy Now, Add to Cart and Donation or Subscription buttons, and subscriptions are basically recurring payments. The payments can be made daily, weekly, monthly or yearly, and you can accept any currency that is supported by PayPal.

Paymattic

Paymattic is a plugin for adding a Stripe checkout to your shop, and it stands out for the sheer number of integrations it comes with. You can connect with over 5000 tools via Zapier, create email lists with MailChimp, integrate Slack, secure your forms with Honeypot and manage subscribers via WP User Registration. All this comes with the free version but for recurring payments you’ll have to use Paymattic Pro, with plans starting at $4.99/month.

Woo Subscriptions

And what can be a better solution for WooCommerce-powered websites than an official Woo extension? Woo Subscriptions allows your visitors to subscribe for your services and pay weekly, monthly or yearly. It integrates with over 25 payment gateways, and supports manual renewal payments, automatic rebilling on failed payments, renewal notifications and much more. This is a reliable, robust and streamlined addon that will certainly help you manage your recurring payments with ease. The addon currently costs $19.92/month.

In Conclusion

As we have shown, setting up WordPress recurring payments is easy and needn’t cost you a penny beyond transaction fees. If you are running a subscription service or a paywall-protected service, you can automate billing and avoid pestering your buyers, subscribers and/or tipsters with repeated invoicing and payment requests. And setting the whole thing up takes little to no shortcode parameter adjustments and virtually no time at all. If your business could benefit from it, there’s no reason not to try it.

If for whatever reason the tool we used doesn’t suit you, feel free to explore the other options we mentioned, and if you’re already using one we didn’t mention, let us know about it in the comments!

]]>
https://qodeinteractive.com/magazine/wordpress-recurring-payments/feed/ 0
A Comprehensive Elementor Tutorial for Beginners https://qodeinteractive.com/magazine/elementor-tutorial-for-beginners/ https://qodeinteractive.com/magazine/elementor-tutorial-for-beginners/#comments Fri, 17 Nov 2023 10:00:17 +0000 https://qodeinteractive.com/magazine/?p=6814

It’s safe to say that the space between coming up with an idea for a website and creating that website has never been smaller. These days, we can do a lot with very few resources and basic coding knowledge because big site builders such as WordPress make it easy for us.

WordPress isn’t doing it all on its own. It is trying, though, as we’ve seen from the release of the Gutenberg editor. But what makes WordPress such an easy system to use for creating a website are page builders.

The Elementor plugin has quickly become one of the most widely used WordPress page builders in the world. And today we’ll find out just what makes it so special and show you how you can use it to create stunning WordPress pages. In our beginners Elementor tutorial, we’ll cover the following topics:

What is the Elementor Page Builder

Elementor WordPress page builders

The role of a page builder comes down to two things: to help you make the most out of what your content management system offers and to do it in the most convenient way possible. Because WordPress is a content-oriented website builder, you’d expect a good page builder to allow you to easily add all kinds of content to a page or a post. And Elementor certainly does it.

Elementor is what is called a drag-and-drop builder, which means that you perform a lot of the tasks in it simply by dragging certain elements to where you want them to be. It’s also a front-end page builder, which means that you’re building it by manipulating the same page elements your website’s visitors will see. And it’s a live builder, so you’ll see all the changes as you’re making them.

But that’s just Elementor as a page builder. As a WordPress plugin, it’s one of the most popular ones, counting over four million installations as of April 2020, and a five-star rating based on around five thousand user reviews. Its core functionalities are free to use, but you can also shell out for the Pro version and get some useful options such as additional widgets, predesigned templates, a popup builder, and more.

Elementor is also becoming more frequently included in bundles with premium themes. We’ve integrated Elementor with Bridge, our flagship theme, so our customers can choose between it and WPBakery, a veteran page builder. But that’s not all. We’ve also started shipping more WordPress themes with Elementor, where it’s the main page builder plugin.

How to Install and Set Up Elementor

If all of this sounds exciting to you, great. It should. Especially if you’re in the market for a versatile page builder that will allow you to build stunning pages without having to write a line of code! So, let’s look at how you can install and set up Elementor on your WordPress website.

You start by going through the same plugin installation steps you would for any other plugin. Find Elementor in the plugin finder, click the “Install” button, and then click “Activate.”

After you’ve activated the plugin, you can adjust Elementor’s setting. You don’t have to, however, because it comes set up well out of the box. Still, let’s go through the options you’ll be able to access right from the dashboard.

Settings

Elementor Settings

In the General tab of the Elementor settings, you’ll be able to select the post types you plan to use, as well as disable default colors and fonts — something you should do if you want your website to have the colors of the theme you’re using.

Under the Style tab, you’ll find options that include setting default generic fonts, tablet and mobile breakpoints, as well as a checkbox to enable image Lightbox. You’ll be able to access some of these options later, from within the editor.

The Advanced Tab is filled with things only advanced users should be concerned with. This is where you set the CSS print method, switch the loader method when troubleshooting server issues, and enable SVG support.

Under Features, which is a relatively new addition to the Elementor settings interface, you will find a range of new and “experimental” features, some of which have already become permanent. Here you can toggle on or off features and “experiments” such as Grid Container or Editor Top Bar, as well as stable features, in our case Optimized DOM Output, Improved CSS Loading, and the Flexbox Container.

Role Manager

Elementor role manager

Different types of users can have different levels of access to your website, depending on their role. Elementor gives you some rudimentary role managing options, allowing you to exclude users from having access to the editor. If you have the Pro version, you can also limit the users’ access only to content.

Tools

Elementor tool

The general tools will let you regenerate the CSS on your website and sync your Elementor library manually If you need to. This is where you enable the safe mode and the debug bar, both of which come in handy when troubleshooting your website.

The Replace URL tab is a place where you can, as the name says, replace the URLs if you changed the site address. In the Version Control tab, you can roll back to a previous version of Elementor and become an Elementor beta tester. Neither of these things is something you should do without a clear reason.

In the Maintenance Mode tab, you get all the controls over the website’s maintenance mode you’ll ever need. Besides enabling maintenance mode, you can set who can access your website while it’s enabled and select or create a template for the maintenance mode page.

The remaining settings are either informative or accessible only by Pro users. Under System Info, you’ll see the information about the server environment, the WordPress version, the theme you’re using, the plugins you have installed, and more. Getting Started is an Elementor tutorial section with a button that leads you straight to creating a new page. Finally, Custom Fonts and Custom Icons are two sections you can use if you have the Pro version of Elementor to add custom fonts and icons.

How much you decide to dig into these settings is up to you. For some, such as the ones you find under the General settings, getting to them early would be a good idea. Others, such as the ones you find under the Tools settings, are only there for certain occasions.

The Anatomy of the Elementor Page Editor

When you’re comfortable with the options you’ve chosen for your Elementor installation, head over to Page > Add New. We’ll create a new page and then edit it with Elementor to show you how you can navigate around the page builder. So once you’ve given your page a name, press the blue “Edit with Elementor” button.

Edit With Elementor

Right away, you’ll notice that the page is separated into different parts: the Elementor panel on the left, and the Elementor editing screen on the right.

Elementor Panel

The editing screen is usually bigger than the panel, even though you can drag the rightmost edge of the panel further to the right to make them of roughly equal size. Let’s see all the great things you can find in the panel first.

Navigating the Elementor Panel

Right off the bat, you’ll notice that the panel is dominated by square icons. These are the Elementor widgets, and we’ll get to them in a second. First, however, we want you to look up to the very top of the panel, at that red stripe that says “Elementor.”

The Topmost Menu

Elementor Topmost Menu

The square on the right will always bring the panel back to the view you see now, with all the widgets listed. The menu button on the left, however, will give you access to certain options.

Site Settings

Elementor Site Settings

Under Site Settings, that you’ll reach by clicking on the hamburger icon in the left corner of the menu, you’ll find a range of options that apply globally, from colors and fonts to theme settings like typography, images, etc.

Elementor allows you to pick a color palette for your website if you choose not to use your theme’s default one. You’ll have a choice of premade palettes, and you’ll also be able to pick a primary, secondary, text, and accent color of your liking.

In the Global Fonts options, you’ll be able to choose the fonts for the primary and secondary headlines, as well as the body text and the accent text. You can choose the font family and the weight of the characters.

The Theme Style options only work if you’ve disabled Default Colors and Fonts on the Settings Page. In these options, you’ll be able to adjust anything from typography to form fields. It’s also the place where you can use Custom CSS to change the way your website looks if you have the Pro version of the builder

Particularly important are the options under Settings, where you will set your global layout options, lightboxes, page transition, etc.

The Theme Builder section is reserved for the Pro users, and it’s where they get to set site-wide options for every part of the site, from header to footer, like they’re building their own theme.

Finally, under User Preferences, you can set some of the things that will make your Elementor experience more tailored to your needs, like the UI theme (light or dark or autodetect), responsive preview and so on.

Under these Settings, there’s the Navigate from Page section, which is rather self-explanatory. You get options to search available apps, use the Finder to find anything in Elementor, and the View Page button that will shift you to a preview of the page you’re editing. The Notes are a Pro feature.

The Widgets

Right under the Search Widget bar, you’ll find Widgets — elements that work like units of content. You’ll see a Widget for the header, images, video, button, even dividers — these are the most minute building blocks of your page in Elementor.

Elementor Widgets

You won’t have access to the full range of widgets in the free version. However, between the basic widgets, the general widgets, and the ones provided by the theme you’re using, you’ll have more than enough to populate a page with content.

The Bottom Stripe Menu

Finally, on the bottom of the panel, you have another bar with very useful options and functionalities.

Elementor Bottom Menu

Settings

Elementor General Settings

The Settings are the place where you make changes that affect the whole page. General Setting will, for example, allow you to change the title of the page and its status. This is where you can add an excerpt and the featured image to your page, but also hide the title and select the page layout.

The Style settings are limited to the Body Style, where you can choose the type of background and the padding. As for the Advanced Settings, that’s where you can add custom CSS if you’re using the Pro version of the page builder.

The Navigator

Elementor Navigator

Hands down one of the most useful tools of Elementor, the Navigator is indispensable when you’re creating big, complex pages with lots and lots of elements. As you’re adding content to a page, it will also appear in the navigator window in the hierarchical order of Elementor elements. It will allow you to easily navigate through every section, column, and widget you add to your page.

History

Elementor will keep an eye on all the actions you perform while creating a page or a post. When you want to see what you did, all you need to do is press the History icon and have a look at the Actions tab. And if you’ve saved previous versions of a page or a post, you’ll be able to find them under the Revisions tab.

Responsive Mode

Elementor Responsive Mode

Clicking this icon will bring up a top menu where you can choose between different types of devices. Picking one will give you a preview of how your page looks on that type of device. You’ll be able to pick between a desktop computer, a tablet, and a mobile phone.

Preview Changes

When you click this icon, a preview of the page will open in a separate browser tab.

The Elementor panel is also where the options for all the widgets and elements you place in the editing screen will appear. But before we see that in action, let’s have a closer look at the editing screen itself and the elements that make up a page in Elementor.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

The Editing Screen and the Elements

Initially, you won’t see much in the editing screen apart from the header and footer that come with your theme. You won’t be able to edit them through Elementor unless you have the Pro version. But don’t worry, you can put a lot of content between the two for free.

See the rectangle with the words “Drag widget here” and two buttons in the middle of the page — that’s called a section and it’s where all the fun happens.

The section is one of the elements you use in Elementor to create a page. On its own, it doesn’t do much. But you can look at it as a small part of the page where you can set certain rules that are different from the rest of the page. To create a section, you only need to drag a widget to it or press that plus button. You’ll get the option to choose the structure of the section. We’ll pick the one with the section split in two halves. The Elementor has introduced a feature called Container, which provides a new, more flexible way to edit page content. You can add as many of the containers as you like, and you can add containers within containers. These elements define the layout of a section – the number of columns, the direction of the content, and so on. Adding a container should be the first thing you do when you start editing, and you can add one by clicking on the plus sign in your editor.

Elementor Containers

At this point, you can choose a layout for the container, which means the way the content will be distributed, and in how many columns.

Elementor Structure

We can place lots of widgets in any one of these columns. You simply need to drag a widget from the panel and into the column, and you can easily stuff six widgets into two columns like this.

Elementor Widget Added

Thanks to these containers, you can just stuff your columns with the widgets of your choice, and you can add containers within containers. Each container can be adjusted by dragging its border left or right, which is an easier way to create a ratio between the columns. You can create a Russian doll out of your sections, or you can stack container below container – it’s up to you.

To add a new container, either within an existing one or below it, simply click on the plus sign.

How to Customize Elements in Elementor Page Builder

Each of the elements (the sections, the columns, and the widgets) in Elementor has settings of its own. They will appear in the panel on the left as you add a new element, and you can edit them then and there. If you don’t want to do it that way, don’t worry — you can access all of them later.

There are a couple of ways you can edit elements when you decide to do it. Simply clicking on a widget will be enough to bring up the editing options in the panel.

Elementor Edit Options

To bring up the options for an element in the container, click on the little pen in the upper right corner.

Similarly, if you hover anywhere within a container, you’ll see three buttons appear in the middle of the top border of the section. The left one (the plus sign) serves to create another container, the right one (the “X”) lets you delete the existing one, and the middle one (the six dots) serves to bring up the options.

If you don’t want to chase those buttons around, a more organized way to access all your elements and their respective options is using the Navigator. Bring it up by clicking the second icon from the left in the bottom stripe menu of the Elementor panel. Click on any element you find within it, and you will bring up its options in the panel.

Elementor Bottom Panel
Elementor Show Navigator

Finally, you can right-click on any of the containers in the editing screen to bring up a menu that includes options ranging from editing the container and duplicating it, to saving it as a template or deleting it.

Elementor Navigator Options

As for the editing options you can access, they will vary from one element to the other. For both the sections and the columns, the options are separated into several groups.

Layout

Elementor Layout Tab

This section contains the options that pertain to the physical appearance of the content that’s within the element, as well as its structure in the case of sections. There is a difference between the layout options you’ll get when editing a column and a section — the section will always have more extensive editing options.

Widgets will have their content-specific options instead of the layout in the first group of options. If you’re working with a text widget, for example, you’ll see different options than those you see when you’re editing a spacer widget.

Style

Elementor Style Tab

Background, border, and typography are the options that sections and columns have in common in the style group. If you’re styling a section, you’ll also be able to set up shape dividers and the background overlay.

As for the widgets, their styling options will again vary depending on their contents. If you’re working with video, you’ll be able to set the aspect ratio here. For buttons, you’ll get a lot of options that include typography, padding, and border settings.

Advanced

Elementor Advanced Tab

The Advanced group of options gives you the most extensive customization choices. Starting from setting the margins and paddings — something you’ll be doing a lot when building your pages — and moving to motion effects, background and border settings, and even responsiveness settings, this is the group of options you’ll want to pay attention to.

It’s also the group where you’ll see the most similarities between the options you get for sections, columns, and widgets. You’ll be able to add attributes and custom CSS, too, both of which are a Pro feature.

Elementor in Action: How to Make a Page

So there you have it: you’ve installed Elementor, you’re familiar with the editor, the basic elements and their options, and you have a blank page waiting for you to give it life. First, however, you have to figure out what kind of page you want to build.

If you understand landing pages, you probably know that there are certain things a landing page needs to efficiently do its job. It’s a completely different thing, however, to create an “About” page, because that page will require an entirely different set of elements.

So the bottom line here is that, before firing up Elementor, you first need to figure out every piece of content you’ll want to have on the website. Next, you need to figure out how to best spread that content across different sections. Then, you can use one of three different ways to create a page.

1. Do It From the Grounds Up

With this method, you’re relying on what you’ve learned in this Elementor tutorial to get you through creating your first page. Don’t worry — it’s easy and can be lots of fun. Just remember to approach the content of your page one element at a time. Let’s see how to create a “team member” section for your “About Us” page, for example.

Team member section

As you can see from the Navigator, we’ve used three sections here. The topmost contains one column and a spacer widget to separate this area of the page from the rest of it. The second section contains one column and a heading widget, while the third section contains three columns, each equipped with an image box widget.

We’ve slightly changed the bottom margin of the second section to make more room between the heading and the image boxes, and that’s it. If you have the time and curiosity, you can experiment all you want with your website. Elementor makes it very easy. One section after another, and you’ll have yourself an awesome page.

2. Use Pre-Made Blocks

If you don’t want to spend too much time on building sections for your website, you can always rely on a premade block to, at the very least, light a fire under the heels of your imagination. So instead of pressing the “plus” button in the section-to-be, you can press the “folder” button and go to the Elementor library.

Use Pre Made Blocks

In the library, you’ll find whole pre-made blocks you can download to your page and then further customize to your liking. It’s a great way to get your creative juices flowing, although it’s just as likely to stifle your creativity and get you to settle for something that wasn’t custom-made for your website. You will need an Elementor account to access blocks, and some of them are only accessible by Pro users.

3. Use Premade Pages

If you want to spend even less time on building your website, you don’t even have to arrange the blocks on your page. You can simply go to the Elementor library and pick a whole premade page for your website. Some pages are available only to Pro users, and all of them require you to create an account for free.

Use Premade Pages

For someone who is in a hurry, or who doesn’t see the intrinsic value in having custom-made pages for their website, or who simply saw a layout they liked, pre-made pages are a great option. They are hands down the easiest way to populate your website with all the pages it will ever need.

Let’s Wrap it Up!

Most of us wouldn’t get too far in the digital world if it weren’t for entities such as WordPress that actively try to make it easier for everyone to participate. But even WordPress has its blind spots, which is why we have such a lively and vibrant plugin scene.

Page builders are among the more important members of that scene because, without them, it would be prohibitively difficult for most people to create a WordPress website. But if there’s a page builder involved, and if it just so happens the builder in question is Elementor, you can rest assured that the website will be up and running quickly and smoothly. And if you need some help along the way, you can always come back to this Elementor tutorial to get it.

]]>
https://qodeinteractive.com/magazine/elementor-tutorial-for-beginners/feed/ 2
How to Duplicate Your WordPress Pages or Posts https://qodeinteractive.com/magazine/wordpress-duplicate-page/ https://qodeinteractive.com/magazine/wordpress-duplicate-page/#respond Wed, 08 Nov 2023 12:00:49 +0000 https://qodeinteractive.com/magazine/?p=1978

If you can’t think of a single reason why anyone would need to duplicate their pages or posts in WordPress, you probably never had to redesign your site. If you did, you’d know just how useful duplicating pages or posts can be.

In this article, we’re going to show you how to duplicate a page in WordPress, the benefits of creating duplicate pages or posts and teach you three ways to do it: manually, using a plugin and using code.

Here’s what we’ll discuss:

Why and When to Duplicate WordPress Pages or Posts?

One of the most common situations in which WordPress users can benefit from duplicate pages or posts is when they want to revamp, refresh or overhaul an existing page, but they don’t want to lose all its content. The same goes for posts, of course. It’s an essential technique in repurposing old content, and it’s much better than the simple copy/paste.

“What’s wrong with copying and pasting the content in a new draft to use it again after you make the changes?” you might ask. Well, of course, that would work but it would be pretty time-consuming, for one thing.

Also, and more importantly, it might affect all your previous SEO efforts, and, consequently, damage your page rank. This is because, when you simply copy the content and paste it on a page that you have redesigned, everything you’ve done SEO-wise, as well as your featured image, page templates and other related data, would be lost.

Also, duplicate pages are useful for situations when you just want to tweak a few things in your page design, for example, and compare it with the old version to see which one works better. This is particularly handy for when you’re redesigning your website and need to see how your content will fit your new design elements.

As you can see, there are many situations in which creating a clone or a duplicate of your page or post comes in handy.

How to Duplicate a WordPress Page Manually?

This will depend on the page builder you’re using. For Elementor users, there isn’t a single Duplicate feature as such, but what you can do instead is save your existing page as a template and then use it to create a new one that represents an exact duplicate.

In the page you want to duplicate, navigate down to the bottom left of the screen and click on the arrow to open the menu, where you will select Save as Template.

Save as Template Elementor

This will open a dialog box where you can give your template a name. It will be saved in the Elementor templates folder from which you can always access it and reuse it.

Elementor templates folder

Now go ahead and create a new Elementor page. Give it a title and then click ont he folder icon to access your saved template.

Access your saved template

Navigate to the My Templates section, find the template you need and click on Insert.

My Templates section

And just like that, all the content, design and page settings will be recreated right there in your new page.

Now, as for Gutenberg, the process is similar, except you will be copying blocks. Access the page you want to duplicate and in the upper right corner of the screen click on the three dots. In the menu that opens, select Copy all blocks.

Copy all blocks

Now create a new page, give it a title and simply right-click and select Paste or press Ctrl+V and your copied blocks (design and content) will be pasted into the new page, which will be an exact duplicate of the one you copied.

Now, this is a method that works best for occasionally copying single pages or posts. It may not suffice for bulk actions and for more streamlined duplicating processes, which is why it’s worth considering other solutions.

Duplicating Pages or Posts Using a Plugin

As is so often the case with WordPress, the most useful solutions come in the form of our little friends, the plugins. While there are several excellent plugins for duplicate pages and posts on the market, we can’t possibly feature them all, so we’re going to talk about the most popular one – Yoast Duplicate Post.

Yoast Duplicate Post

This is a neat, simple and functional plugin with over three million active installations that you can download and use for free.

Once you have installed and activated the plugin, go to your posts or pages, and you’ll notice some new options appear as you hover above the post you want to duplicate. There will be two options: Clone and New Draft.

Post options Clone and New Draft

The Clone option creates the exact duplicate of the post you want to edit or change. The duplicate will appear on top of the list of posts and, clicking on it, you will be able to edit it the usual way.

The Clone option

New Draft, on the other hand, creates a clone of the page and then opens the page/post editor right away. Once you’ve made all the necessary changes to the post, click on Publish and review it live.

New Draft option

And that’s really all there is to it. Once you no longer need the clones, you can delete them quickly by clicking on the Trash link that reveals underneath the post upon hover.

Delete post

Duplicating Pages or Posts Using Code

While plugins are certainly of tremendous help in many situations, sometimes we want to get our hands dirty and get things done by ourselves, without resorting to a plugin. This may be because we want to test our knowledge and expertise or show ourselves that we can do it on our own. But more often it’s because we already have dozens and dozens of plugins installed and we feel that installing a new one would weigh the whole thing down too much.

Either way, it is possible to duplicate a page or a post just using code. One GitHub user came up with a neat function for creating duplicate posts or pages that you simply need to copy to your functions.php file:

/*
* Function for post duplication. Dups appear as drafts. User is redirected to the edit screen
*/
function rd_duplicate_post_as_draft(){
global $wpdb;
if (! ( isset( $_GET['post']) || isset( $_POST['post']) || ( isset($_REQUEST['action']) && 'rd_duplicate_post_as_draft' == $_REQUEST['action'] ) ) ) {
wp_die('No post to duplicate has been supplied!');
}
/*
* Nonce verification
*/
if ( !isset( $_GET['duplicate_nonce'] ) || !wp_verify_nonce( $_GET['duplicate_nonce'], basename( __FILE__ ) ) )
return;
/*
* get the original post id
*/
$post_id = (isset($_GET['post']) ? absint( $_GET['post'] ) : absint( $_POST['post'] ) );
/*
* and all the original post data then
*/
$post = get_post( $post_id );
/*
* if you don't want current user to be the new post author,
* then change next couple of lines to this: $new_post_author = $post->post_author;
*/
$current_user = wp_get_current_user();
$new_post_author = $current_user->ID;
/*
* if post data exists, create the post duplicate
*/
if (isset( $post ) && $post != null) {
/*
* new post data array
*/
$args = array(
'comment_status' => $post->comment_status,
'ping_status' => $post->ping_status,
'post_author' => $new_post_author,
'post_content' => $post->post_content,
'post_excerpt' => $post->post_excerpt,
'post_name' => $post->post_name,
'post_parent' => $post->post_parent,
'post_password' => $post->post_password,
'post_status' => 'draft',
'post_title' => $post->post_title,
'post_type' => $post->post_type,
'to_ping' => $post->to_ping,
'menu_order' => $post->menu_order
);
/*
* insert the post by wp_insert_post() function
*/
$new_post_id = wp_insert_post( $args );
/*
* get all current post terms ad set them to the new post draft
*/
$taxonomies = get_object_taxonomies($post->post_type); // returns array of taxonomy names for post type, ex array("category", "post_tag");
foreach ($taxonomies as $taxonomy) {
$post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
}
/*
* duplicate all post meta just in two SQL queries
*/
$post_meta_infos = $wpdb->get_results("SELECT meta_key, meta_value FROM $wpdb->postmeta WHERE post_id=$post_id");
if (count($post_meta_infos)!=0) {
$sql_query = "INSERT INTO $wpdb->postmeta (post_id, meta_key, meta_value) ";
foreach ($post_meta_infos as $meta_info) {
$meta_key = $meta_info->meta_key;
if( $meta_key == '_wp_old_slug' ) continue;
$meta_value = addslashes($meta_info->meta_value);
$sql_query_sel[]= "SELECT $new_post_id, '$meta_key', '$meta_value'";
}
$sql_query.= implode(" UNION ALL ", $sql_query_sel);
$wpdb->query($sql_query);
}
/*
* finally, redirect to the edit post screen for the new draft
*/
wp_redirect( admin_url( 'post.php?action=edit&post=' . $new_post_id ) );
exit;
} else {
wp_die('Post creation failed, could not find original post: ' . $post_id);
}
}
add_action( 'admin_action_rd_duplicate_post_as_draft', 'rd_duplicate_post_as_draft' );
/*
* Add the duplicate link to action list for post_row_actions
*/
function rd_duplicate_post_link( $actions, $post ) {
if (current_user_can('edit_posts')) {
$actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=rd_duplicate_post_as_draft&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce' ) . '" title="Duplicate this item" rel="permalink">Duplicate</a>';
}
return $actions;
}
add_filter( 'post_row_actions', 'rd_duplicate_post_link', 10, 2 );
to join this conversation on GitHub. Already have an account? Sign in to comment

You can do it directly on your server using an FTP client of your choice, but we suggest you simply use the WordPress file editor.

Note here that this code is written for duplicating WordPress posts. If you want to duplicate pages as well, you need to change the last line in the snippet so that, instead of ‘post_raw_actions’ it says ‘page_raw_actions’.

After you have entered the code in your functions.php file, go to your dashboard where your pages and posts are listed (All Posts or All Pages). If everything worked fine, there will be a new option available underneath each of the posts or pages, saying simply Duplicate. Clicking on it will create a clone of that particular page or post, just as it would if you were using a plugin.

New Themes
Curtis
Curtis

Hair Salon WordPress Theme

Aachen
Aachen

Architecture WordPress Theme

KindHeart
KindHeart

Charity and Donation WordPress Theme

Final Thoughts

As you can see, creating duplicate WordPress pages or posts is actually a piece of cake, whether you’re doing it manually, using a plugin or opting for code instead. We are sure you’ll find this option more than convenient in many situations.

Now that you know how to duplicate a page in WordPress, just remember to clean up the unused duplicate posts once in a while – clutter is never a good thing for a website. Also, if you intend to use code to duplicate posts, make sure your website is backed up, as it should be whenever you’re editing WordPress files.

]]>
https://qodeinteractive.com/magazine/wordpress-duplicate-page/feed/ 0
How to Create a Footer in WordPress and What to Add to It https://qodeinteractive.com/magazine/how-to-create-wordpress-footer/ https://qodeinteractive.com/magazine/how-to-create-wordpress-footer/#respond Wed, 01 Nov 2023 09:00:29 +0000 https://qodeinteractive.com/magazine/?p=843

Alongside the header and the sidebar, the footer holds a very important position in the architecture of a WordPress (and not just WordPress) website. It is one of the essential elements of a page and, as such, should be designed and built with great care. In premium WordPress themes, footer already comes with its own structure, but you’re in no way obliged to stick with it.

In this article, you’ll learn exactly what a WordPress footer is, how to make one, and what to include in it. Here’s what we’ll cover:

What Is a Footer?

In web design, the footer usually designates the bottom part of a web page. Most websites have it, and it usually contains some important information, such as links to About Us pages, copyright notices, privacy policy, FAQ, links to support, community and social links, and so on.

As web users, we are accustomed to finding this sort of information in the footer. When we need to, say, find a business’ email address or working hours, we will instinctively scroll down to the bottom of the page.

If a website is using a WordPress theme, the footer area will most likely be defined in the footer.php file. Depending on the theme, the footer area may also be widgetized – this means it includes multiple columns where you can add widgets of your choice.

In the past couple of years, the footer has become a sort of playground for designers to experiment with. In the past, this part of the page was considered to be less important from the design point of view, as it mainly contains practical and necessary information. However, these days we can see some of truly innovative examples of footer design, ranging from minimalist to oversized, interactive and dynamic, often carrying powerful visual content (illustrations, creative typography, animations, etc.)

In addition to widgets, sometimes we might need to add code to your WordPress footer. This may be the case when integrating certain tracking and analytics services such as Google Analytics, Facebook Pixel, Google Search Console, and so on.

How to Create a Footer?

As we said earlier, the footer is usually something that is predefined in your theme. However, that’s not to say you can’t customize it, or, more specifically, edit its content. After all, it is your website and it should be up to you to decide what you want to put in your footer. And you don’t even need any special tools or CSS skills to do it.

Content is placed in the footer using widgets so that’s where you should head for adding and editing footer content.

1. Log into your WordPress Dashboard, go to Appearance and click on Widgets.

Appearance widget options

2. Here you will see all the widgets that are available for the theme you’re using.

Available Widgets

3. Widgets will be listed on the left side of the screen, while the available footer widget areas (in this case, Footer 1 and Footer 2, etc.) will be displayed to the right.

Edit WordPress Footer

Note that this may vary from theme to theme. Some themes have multiple footers, some only have one. Certain templates even come with a top and a bottom footer.

4. To add a widget to your footer, simply drag it and drop it over. Widgets can be rearranged within a footer, again using drag & drop. Modify the settings for each individual widget and click on Done.

WordPress Footer

And that’s all there is to it. Check your live page to see if the footer looks right. If you change your mind about one of the widgets in the footer, you can easily get rid of it by clicking on Delete underneath the widget.

Another way you can add widgets to the footer of your WordPress site is by going to Appearance and clicking on Customize.

Appearance Customize options

From there, select Widgets. Click on the footer and then click on (+) Add a Widget.

Add a widget

Once you’re done, hit Publish, and that’s it.

Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

What to Add to Your Footer?

The footer usually stays the same throughout the entire WordPress site, regardless of the page. This means that the content in the footer should be relevant to the entire website, not just to a specific page. Content that is informational and/or navigational in its nature is usually the best choice. Also, there are certain types of content, such as the “rights reserved” and rights owner info, that are traditionally found in the footer.

Here are some of the things you might want to include in your WordPress footer:

Contact Info

Like we said earlier, visitors tend to intuitively navigate to the bottom of a page to find contact information. Add your email, your phone number and physical address, as well as your business hours.

Privacy Policy and Terms of Use

The footer is usually the place where we look for legal documents of a website, most importantly the Privacy Policy and Terms of Use. These are among the essential legal pages that every website should have. If you have no legal team to draft the privacy policy page for you, there are some handy privacy policy generators you can use.

As for the Terms of Use or Terms of Service, they need to be clear and properly displayed on a separate page, which, like the Privacy Policy, should be linked to in the footer. Note that for some websites it is recommended to require the visitors to sign a terms of service agreement.

Interactive Map

A map represents another useful piece of information your visitors might be looking for. Adding an interactive map to your footer allows them to see your location right away, instead of having to type in your address in Google maps or another service.

About Us, Logo and Mission

Navigation Links

In order to improve user experience, which is always beneficial on many levels, you need to make sure your visitors get to the pages they need quickly and effortlessly. Proper site navigation is crucial here, and this includes adding navigation links to the footer.

Which exact links you will decide to place in the footer will depend on the nature of your website. Blog owners may want to put links to their most popular posts or other content they want to highlight. Online stores usually put the latest products or popular product categories.

Call-to-Action

CTA buttons are used to prompt visitors to perform a certain action leading to your goal. They are usually placed on more than one place on a website, including the footer. Again, the button itself will depend on your website: it can be a Buy Now button, an email or newsletter subscription button, a donation button and so on.

Social Icons

Another thing that visitors are used to finding in the footer are quick links to your social media pages and profiles. These are great tools for building a follower base and extending your reach. The footer is definitely a better place for them than the header (where many people place them) because if your visitors navigate to your social pages right away, they may not come back to your site.

You may also want to consider using social media widgets for this purpose. They are more complex than simple social icons and can give a nice touch to your footer.

Final Thoughts

The footer is a very important part of any website and should not be neglected. Often, people fail to pay proper attention to it, but now that you know how to add and edit your footer, you can make sure it gets proper credit.

Keep in mind a few things, though: make sure that you don’t put too much content in your footer. Clutter is never a good thing and you want to keep things as clean and clear as possible. Also, consider adding titles to the columns in your footer, for improved user experience and easier navigation.

]]>
https://qodeinteractive.com/magazine/how-to-create-wordpress-footer/feed/ 0
How to Start a Gaming Website with WordPress https://qodeinteractive.com/magazine/how-to-start-a-gaming-website-with-wordpress/ https://qodeinteractive.com/magazine/how-to-start-a-gaming-website-with-wordpress/#respond Fri, 20 Oct 2023 10:00:04 +0000 https://qodeinteractive.com/magazine/?p=27437

If there’s one thing you can be sure of when starting a gaming website, it’s that you’ll never, ever run out of content. The gaming industry is huge and it’s growing even bigger. The niches are plenty and more are popping up by the second. The ways to approach the industry and create content from your own unique angle are many and open to exploration.

Gaming is also a part of the culture that seems to bring out much passion in the people who enjoy it. For all these reasons and many others, you might find yourself with something to say about the industry, the culture, or the tech that underpins it. However, instead of looking for websites that will allow you to submit content for publishing – or because you’re done doing that – you think about starting your very own gaming website.

If this sounds at all familiar, you’re in the right place. We’ll help you with the basics of how to start a gaming website with WordPress, covering topics that include:

Why Choose WordPress?

Why Choose WordPress

The first thing to settle when figuring out how to start a gaming website is what platform or framework you want to use. For many, WordPress is the very first thing that comes to mind. The next question you might want to ask yourself is why choose WordPress for your gaming website, and not even the free kind, but the self-hosted kind that costs money? What it boils down to is the level of control and customization that comes with using WordPress. You won’t be able to find it anywhere else – not even on WordPress.com.

For starters, WordPress is notoriously easy to install. Many hosting providers offer things like one-click installation for WordPress. Some even offer managed hosting that takes a lot of the behind-the-scenes work from your hands. You should consider these options when choosing a hosting provider.

Then again, you don’t have to go with a regular hosting provider at all. You can install WordPress on most cloud service providers, including Google Cloud, Microsoft Azure, and Amazon Web Services. You should always do a cost/benefit analysis when choosing the host, as some might give you more than your gaming website actually needs and at a higher price. But that’s one level of control you have with WordPress that some other website builders don’t offer.

With your own hosting and your own website, you’ll also get to choose what monetization model you employ. You can use AdSense or its alternatives, offer affiliate links, have a store section, put your content behind a paywall – you name it, you’ll be able to make it happen with WordPress. How? With plugins, of course.

Plugins – and themes, too – are what make WordPress genuinely great. Thanks to them, you can easily change how your website looks and behaves, add or remove functionalities to it, and spend ridiculous amounts of time making sure that every detail is just the way you want it to be. WordPress is a powerful facilitator of your creativity, and that’s something you’ll learn to love about it.

What Kind of Gaming Website Do You Want?

What Kind of Gaming Website Do You Want

The very first question you should answer when considering how to start a gaming website is exactly what kind of a gaming website you want to create. Because gaming is an incredibly diverse term that encompasses technology, culture, social phenomena, economy, probably even politics – there are just so many different ways to approach gaming.

As you might have imagined, creating a website that’s home for the speedrunning community is quite different than creating a website for, let’s say, an indie developer. A regular gaming website that features reviews and news, might look completely differently. Then again, if the website is the presentation of yourself and your gaming persona, or even your gaming team or guild, you might want to build something unlike anything we’ve mentioned so far.

Then, you should consider whether you want your website to be game-specific or genre-specific. It might also be completely devoted to the nerd culture and all the beautiful and quirky ways fandoms manifest themselves. You can create a website that tracks gaming events and tournaments or even a website that hosts them.

The possibilities are endless, but you’ll need to narrow them down as much as possible because that’s the kind of option that will affect other choices as you move on. So for starters, know what kind of gaming website you want to build.

Gaming WordPress Themes
Overworld banner
Overworld

eSports and Gaming Theme

Entropia banner
Entropia

Gaming and eSports Theme

Playerx banner
PlayerX

A High-powered Theme for Gaming and eSports

Choosing the Hosting

Choosing the Hosting

We’ve already covered the wide variety of hosting options that you might look into when starting your gaming website. If you decide to go with a hosting provider – something that’s a popular choice, even with the availability of cloud hosting platforms, you should take your time and research them properly.

The things you might want to look into include:

  • Great customer service – you should have access to them around the clock, and they should have a good reputation, too.
  • A realistic promise of uptime – generally, 100% uptime is something no one can really guarantee, which makes it a red flag. Aim for 99.9%.
  • The host’s reputation – a host that’s particularly bad or nasty won’t have a good reputation as words about these things tend to spread.
  • Competitive pricing and plans – you’ll have to shop around a bit to find a good balance of price and value but be wary of any offers that look too good to be true.

Some other things you might consider when choosing a host is whether they allow you to register a domain name with them, or you have to go to an independent registrar. Even more importantly, you should make sure that they have a package that would facilitate you building a gaming server on it if that’s what you’re creating the website for. The demands will depend on the game you plan to run, so do your research beforehand and check for leeway to expand later on.

Picking the Name

Picking the Name

Choosing the name for your website is an important step for a couple of reasons. The name is a part of your website’s brand, and as such is a recognizable symbol for everything that you do with the website. But semiotics aside, it’s also a word you might want to use in your domain name. It would be best to have one before registering your website’s domain name.

How to pick a good name? It’s not that easy to tell, especially given all the fantasy elements that are readily found in games, which expand the possible vocabulary tremendously. Things would be complicated enough without them, too, as gaming is a truly global culture that draws upon influences – and words – from national cultures as diverse as Eastern Asian, English-speaking, or even Slavic.

Still, some best practices to follow include:

  • Generally, shorter is better and easier to remember
  • Be very careful when using numbers and signs other than letters
  • Make sure that it’s easy to spell, with little room for mistake
  • Choose a name that’s recognizable in the industry or the culture
  • Make sure to check for copyright first

Finally, you should always come up with a couple of strong choices for the name for your website. In case the domain name is taken, you’ll want to have a fallback.

Installing and Customizing the Website

One of the best things about WordPress is that it’s ubiquitous, which means most hosts have an easy way for you to install it. WordPress is a CMS with a lot of features, so even if the installation is easy, you’ll want to spend some time learning your way around it.

For starters, you should learn what themes are and how to install them. Your gaming website should have all kinds of elements and layouts depending on its niche, and while it’s possible to build them all from scratch, choosing the appropriate gaming WordPress theme can save you a tremendous amount of time and effort.

Artorias

So let’s say you’re building a website to support a game you’re publishing. You’ll probably want to have a landing page that packs a big hero image, possibly even animated, and then shows off a game trailer, maybe some copy about the setting, some cards showing different races or classes people could play in the game, a quote from someone who played an early version, maybe an email capture form, and even a countdown clock – why not. You can either build a page with all of that from scratch, or find a theme with that kind of layout, ready for you to upload your content to it.

The same really goes for any other kind of gaming website. For an eSports website, you’ll need a theme that supports easy YouTube and Twitch integration, has layouts for match lists, and layouts for team presentations. Leaderboards, tournament lists and timetables, and player lists would also be nice features to have.

Overworld

For a news type of website that also does reviews, elements that enable you rate games or products would also be must-haves. You can even stray away from gaming themes and look for a technology theme that might work better for your type of website, as would a blog or magazine theme. What’s important is that you match the look and features of the theme with the feature you need for your website.

Then again, you can use plugins to make it even better.

Leveraging WordPress Plugins

That’s the other thing about WordPress you’ll need to figure outwhat plugins are and how to use them. While you might not need plugins to, let’s say, live stream to your website, you will need them for security, updating, optimization, and a whole host of other things. You can take a hint from business websites and look at the plugins they commonly use, and that should give you a good idea of where to get started with adding your plugins.

For instance, if you already have a website set up with a theme you like and don’t want to change, but that doesn’t come with Twitch integration out of the box, don’t worry. You can quite easily add Twitch integration to your existing website and stream the games directly from your pages using a plugin.

We recommend using StreamWeasels, a free WordPress plugin designed for embedding Twitch streams. It works with Gutenberg – after installing it, you will find a brand new block in your block editor, which you can use to stream games. If you’re not using Gutenberg, the plugin also provides a shortcode with the same function.

The plugin offers a variety of sleek premade designs for the stream, and you can customize it in a variety of ways: start muted, autoplay, embed chat, different color schemes, embed heights and widths. The best thing is that the Twitch API is not required, which really makes things simple.

Another gaming-specific functionality you might need a plugin for are game reviews. If you plan on having them (whether you want to write them yourself or have your visitors write them and benefit from user-generated content), you will probably need a plugin (although some themes have reviews by default).

Game Review Block is another block-based plugin that you can use for this purpose. It adds a review functionality with 1-10 rating system that you can place anywhere you want and your visitors can use it to rate your game, or any other game in case you’re publishing game reviews. What’s important is that this plugin adds Schema.org structured data to your reviews, meaning they qualify for Google rich results. Rich results, just like featured snippets, help you rank higher, boost traffic and significantly improve your CRT rate.

Finally, extending the functionality of your gaming website using plugins doesn’t necessarily mean installing a bunch of them – there are plugins that represent collections of widgets or blocks that can be used for anything from typography and infographics to SEO and business features. One such plugin is Qi Addons for Elementor, with 100+ remarkable widgets, and if you prefer block editing, there’s Qi Blocks for Gutenberg, so make sure to check them out.

What’s Next?

After you’ve taken care of the domain and hosting, installed WordPress, the theme, and have a couple of valuable plugins to keep your website safe and working well – you’ve started your very own gaming website and you could even teach others how to start a gaming website! Congrats!

Now comes the hard part, however. You need to start populating your website with content – whatever type of content you choose to create. You’ll need to hustle to promote the website on social media, monitor its performance, look for ways to reach new audiences, work on it with the utmost diligence while waiting, patiently, for the numbers to start showing that it’s taken off. It’s maddening, but that’s why we love it. We hope you will, too.

]]>
https://qodeinteractive.com/magazine/how-to-start-a-gaming-website-with-wordpress/feed/ 0
How to Add Citations and References in WordPress https://qodeinteractive.com/magazine/how-to-add-citations-in-wordpress/ https://qodeinteractive.com/magazine/how-to-add-citations-in-wordpress/#respond Thu, 05 Oct 2023 13:00:16 +0000 https://qodeinteractive.com/magazine/?p=43726

WordPress, being a remarkably scalable and flexible CRM, is home to many different types of websites. As of 2023, over 455 million websites around the world use WordPress. Many of them are online stores, many are portfolios, SaaS and B2B websites, as well as online communities and eLearning platforms. However, WordPress is still the most popular platform for blogging. In fact, 97% of bloggers use WordPress for their blogs. And many of them come from the academic arena.

In academic writing, it’s vital to follow a certain set of rules when it comes to writing papers. How we add citations, references, and sources is particularly important. If you’re publishing your academic work or research using WordPress or just need a quick and easy way to add citations and references in WordPress, you’ll be happy to hear there’s a new plugin designed just for that. Here’s what we’ll discuss today:

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Display Citations in WordPress Using a Plugin

WordPress doesn’t include the citations feature by default. They don’t come as a default Gutenberg block and don’t exist in Elementor either. So, if you want to make your posts look like a page from a serious academic paper or research, you will need some outside help.

Citations is a relatively new plugin that adds the citations and references functionality to the block editor. It has a dual function: the Cite Rich Text Format function allows you to easily add citations within your text and assign them to a source, which can be displayed on hover. The other function, Bibliography, displays all referenced sources at the bottom of the page.

If you use a lot of sources in your blog content or you’re publishing your research and other academic writing online, this plugin will be one of your most trusted aides by making your text appear professional, serious, relevant, and trustworthy.

After downloading and installing the plugin the usual way, you won’t find it in the dashboard menu as a separate plugin since it doesn’t require any configuration and instead simply introduces a new block to the Gutenberg editor.

You can use the block to introduce citations and references to your existing posts or start with a new one.

Note that this plugin is designed for Gutenberg only. It does not introduce additional functionalities (elements) to the Elementor page builder, so you’ll have to switch to block editing to use it.

In your Block Editor, access the post you want to add citations to. Select the text and, in the floating text editor menu, click on the arrow to open the dropdown where you’ll find a brand new item called Cite. Clicking on it will add a sign next to your text indicating the content is a citation.

Citations Cite

Next, click on the highlighted text to open the box in which you can type in or edit your source. Once you’re done, click on the arrow icon.

Citations Arrow

The source will now be displayed when the selected text is clicked upon. However, you can (and should) also add a list of the cited sources at the bottom of the text, and here’s how to do it:

How to Add Bibliography to Your WordPress Posts

We’re going to use the same plugin and the functionalities it provides to add a bibliography at the bottom of the text. Scroll to where you want to add the block to, click on the plus sign and then search for the block by typing. You can either add the Bibliography block or use the Citations Demo, a ready-made section with dummy content that you can simply edit.

Citations Bibliography

When you select the block, you’ll notice that the plugin will automatically pull any citations you have used and display them.

Citations

Not only will the sources be listed, but the jump-to link will lead the readers to the appropriate source when they click on the footnote mark (number) next to the cited text.

And that’s essentially it. Thanks to the CItations plugin, you now have a quick and easy way to add citations and references to your content without having to write HTML manually.

Best Practices for Citations and References

Citations are a way to let readers know you’ve used outside sources of information in your research or other content. Correctly attributing information is not only the right thing to do but it’s also obligatory in academic and professional settings.

Plus, citations provide hard evidence of what you’re stating in your text. So, even if you’re working on a text that’s not a research paper per se, it’s still recommended to reference sources in order to maintain the professional and trustworthy effect of your content.

Now, if you’re not skilled in citing references on the regular, you may be wondering if there’s a correct way or a preset format to do so. Here are some best practices for citations and source references:

1. Stick to one format.

When it comes to the format, there are several standard formats you can use, like MLA, Chicago Style or APA. It’s important that once you choose a format for your content, you should stick to it and use it throughout the text. If you’re not sure which format to choose, consult your syllabus, writing guidelines or styleguides provided by the entity you’re writing for (university, research facility, company, etc). If it’s just your personal blog you’re writing for, select one of the most widely styles and stay consistent with it.

2. Be mindful of how you use periods.

Periods can be tricky in citations. When using parenthetical citations, we’re often unsure whether the period goes inside the parenthesis, or outside, or perhaps even in both places. While there’s no single rule of thumb here, the period goes outside the parenthesis in all the most widely used style formats.

3. Author, Work, Publisher, Year

Again, it can depend on the format, but in most styles the correct way to cite a work is Author last name, Author first name, Title, Publisher, Publication year.

For works by a group of authors, either give all of their names or the first name that is cited in the referenced book itself, followed by et al.

4. Provide correct URLs

If you’re referencing a paper or work published online, use the same sequence of credit (last name, first name etc) and include a valid URL that leads directly to the paper. Test the URL to make sure it’s valid and make sure it’s not an affiliate link or a link with UTMs.

5. Make sure all citations have a corresponding reference list entry

If you use the Citations plugin we discussed earlier, all citations will appear in the reference list automatically. Still, check the list before publishing the post to make sure everything is in place.

Wrapping It Up

WordPress users finally have a quick and easy way to add citations and reference the sources they used in their posts, thanks to the Citations plugin. The solution is extremely straightforward and spares you from having to write HTML or insert citations only in parentheses, with clunky reference lists that don’t appear serious or professional at all.

The only downside to this plugin is that it doesn’t provide a quick solution for Elementor or WP Bakery users, but since Gutenberg Block Editor is implemented in WordPress by default, even those using other editors can simply switch to block editing for the posts that need citations.

]]>
https://qodeinteractive.com/magazine/how-to-add-citations-in-wordpress/feed/ 0
How to Create Live Sale Notifications for Your WooCommerce Shop https://qodeinteractive.com/magazine/how-to-create-live-sale-notifications-for-woocommerce-shop/ https://qodeinteractive.com/magazine/how-to-create-live-sale-notifications-for-woocommerce-shop/#respond Tue, 19 Sep 2023 07:00:39 +0000 https://qodeinteractive.com/magazine/?p=37104

There are many strategies you can use to boost sales on your WooCommerce site, like setting up free shipping or adding coupons, to name only a few. But among all those strategies, using social proof might be easily one of the best ways to attract the attention of potential customers. To be more specific, by adding live WooCommerce notifications to your site, you can easily inform your visitors about any important happenings on your online store and effectively enhance the overall credibility of your business, which can only lead to more sales and conversions in the long run.

So that’s why this time around, we’ve decided to talk more about the effectiveness of using live WooCommerce notifications on your online store. Then, we will also explain how to easily add live sale notifications to your own WooCommerce site, so make sure to keep reading.

eCommerce WordPress Themes
Tonda WordPress Theme
Tonda

A Modern Elegant WooCommerce Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

Gioia WordPress Theme
Gioia

Modern Fashion Shop

What Are Live Sale Notifications and Why You Should Add Them to Your WooCommerce Store?

As we’ve already said in the beginning, using social proof is a great way to increase the online credibility of your business. This can include different types of product reviews, business testimonials, or, in our case, live notifications related to your products.

Now, when it comes to live notifications, these usually represent a popup that lets your visitors know about any new product sales you might have on your site at that very moment. The thing is, these notifications can indicate to users that people are actually buying your products and can also help create a sense of urgency. As a result, many users won’t want to miss an opportunity to make their purchase. So ultimately, they may become motivated to go ahead and buy your products as well.

Aside from letting visitors know about any real-time product purchases, you can also use these WooCommerce notifications to alert them each time a customer leaves a positive rating, subscribes to any of your services, and so on. All these notifications can only contribute to your brand’s reputation and can help you boost your sales and conversions, so we highly recommend that you apply this strategy to your WooCommerce store.

With all that said, let’s see how you can easily set up live WooCommerce notifications on your own eCommerce store with a plugin.

Creating Live Sale WooCommerce Notifications With a Plugin

The plugin we’ll be using to display live sale notifications is Live sales/Fake sales notification (full name “Live sales notification for WooCommerce, Fake sales notification for WooCommerce, Recent sales notification for WooCommerce”). As we can see from its name, it’s a plugin designed to boost sales using notifications even when the store doesn’t really have that many sales to highlight. It gives you two options – to send popup notifications about live original sales and virtual sales, which is a nicer way to say “fake sales.” If you opt for fake sales, your visitors will get notifications that an item has just been sold even though it hasn’t, and it will hopefully prompt them to purchase something themselves, for reasons we discussed above (social proof, FOMO, etc).

Now, if you don’t feel comfortable lying to your visitors and potential customers, you obviously don’t have to. The plugin can be set to display notifications about real sales only. However, bear in mind that if your shop doesn’t have a high frequency of sales on the average, the real sale notifications may not be that useful.

To get started, you first need to download, install and activate the plugin. You can search for it by name in the plugin section of your WordPress dashboard, or download it from wordpress.org and then upload it.

After installing the plugin, it will appear in the left-hand dashboard menu. Before you start using it, you should configure its settings.

Sales Notification

The first thing to set is the Product selection. Here you can specify where you want to select products from. For notifications about real orders and sales, select Orders placed. In the Order related options you can specify the status of the order you want to display notifications for. It can be just the completed orders, but it can also include orders pending payment, processing, on hold, completed, even canceled, refunded and failed. Here you’ll also set how many notifications to show per page. The number you set is only for virtual orders. With real ones, the number will represent the number of your actual orders made, and if that number is lower than the number specified in this field, the plugin will not add virtual orders to add up to the number.

Next, if you want to set up virtual (fake orders), select Recently viewed products.

Recently Viewed Products

Here you can set the virtual names you want displayed in the notification. These names will represent the customer who “bought” the item. You can also specify the location, so the popup displays, for example, “John from Colorado.”

You can also set the product to show in the popup. In the Select product field, pick one of your items from the dropdown menu or type its name. Again, you can set the virtual name and location, as well as the number of notifications per page.

Show Related Products

The last option, Show product from selected category, does a similar job – it lets you pick a category of products to display in the notification.

After you’ve set the product selection, it’s time to configure the popup. Click on Popup setting. The first thing to do is to check if the notifications are enabled (which they are by default, but it doesn’t hurt to double-check. Here you can set whether you want notifications to display on mobile devices too. Many shops keep mobile notifications off as they tend to hinder the user experience on smaller screens.

Popup Setting

This section also allows you to set the timing and duration of the popup. We recommend keeping the default settings. The Loop through option, when enabled, makes your first popup appear again once all the other popup notifications have been displayed.

Next up, we have the Design options. Use them to set the position of the popup (left bottom, right bottom, left top, right top), the position of the image, background color for the popup, popup layout (width, image width, borders, spacing, link to product). You can also set the close button or upload your own icon for that purpose. It’s here that you’ll also set the audio alert. Bear in mind, though, that the sound will depend on user permissions and browser settings (many users turn the notification sounds in their browser).

Design

In the Message text field, you can customize the default message of the notification. Note that text in brackets (product link, name, location) shouldn’t be changed since these are pulled automatically. You can customize the text in between or add more text if you like.

Message Text

Here you can also customize font size, font weight, colors, etc.

And that’s basically it. After leaving most of the default options on and using a dummy product, our live sale notification looks something like this:

Popup

Your popup will, of course, be different after you customize everything to your liking and set the product selection the way it suits you best.

In Conclusion

Adding live sale notifications to your WooCommerce site can only help improve the credibility of your online store and boost your sales. We suggest that you try using the Live sales/Fake sales notification plugin to create, customize, and popups to your pages quickly and effortlessly. Not only is the plugin extremely lightweight and easy to use, but it also comes with every option you may need to completely customize the look of your notifications according to your specific needs. We encourage you to go ahead and start the process of making your online business look trustworthy enough to convert your new site visitors into actual buyers.

]]>
https://qodeinteractive.com/magazine/how-to-create-live-sale-notifications-for-woocommerce-shop/feed/ 0