Learning how to edit footer in WordPress is an essential skill for any DIY WordPress website builder. Usually, after installing WordPress, you’ll find the “Proudly Powered by WordPress” or “Powered by ‘a specific’ theme” footer copyright text on your new site. This text can create the wrong impression about your website. So you’d want to change or remove it.

Thankfully, you can modify the text and make several other modifications to your website footer. You can also add custom text, links, images, and several other widgets to your footer.

We created this tutorial to show you how to edit footer in WordPress in a few steps. Keep reading to learn more.

Table of Contents

• What is WordPress Footer?
• Importance of Having a Footer on Your Website
• How to Remove “Proudly Powered by WordPress” Copyright Text From Footer Content
• How to Modify the WordPress Copyright Text
• How to Edit WordPress Footer Widgets
• How to Add Various Footer Components
  • 1. Modify Footer Layouts (Columns)
  • 2. Add Footer Menu
  • 3. Add Navigational Footer Links
  • 4. Add Social Profiles and Communities
  • 5. Add ‘About Us’ Content
• How to Change Footer Color
• Tip to Make Your Footer Responsive
• Conclusion
• FAQs

What is WordPress Footer?

The footer, as the name suggests, is the section of a website that appears at the foot (bottom) of a website. You can see the footer of your site by scrolling all the way down. It typically contains copyright text like ‘Proudly powered by WordPress,’ as well as menus, navigation links, about us content, images, and more.

Importance of Having a Footer on Your Website

Here are some of the benefits of having a footer section on your site:

• Keyword Placement: Including relevant keywords in footer links can improve SEO by providing context to search engines.
• Internal Linking: Properly structured internal links in the footer improve site navigation and help search engines index pages more efficiently.
• Alt Text for Images: Adding descriptive alt text to footer images aids SEO and makes content accessible to visually impaired users.
• Semantic HTML: Using appropriate HTML tags (e.g., <footer>) helps search engines understand the page structure and boosts accessibility.
• Build Trust: You can use the footer section of your website to incorporate security tags, reliable certificates, great reviews, etc. Customers will view your site as more trustworthy.
• Branding: Your company name, logo, and tagline are best displayed in the website footer. This helps buyers recognize your company’s brand identity.
• Integrate Contact Details: You can embed interactive features like a contact form, location information, contact data, etc., in the footer to create a line of communication with your visitors.
• Contrast and Readability: Ensuring high contrast and readable text in the footer improves accessibility for users with visual impairments, improving overall user experience and engagement.

Now let’s look at how to edit your website’s footer.

How to Remove “Proudly Powered by WordPress” Copyright Text From Footer Content

Before we show you how to remove the proudly powered by WordPress copyright text, we first need to tell you how not to do it. While researching this topic, we saw that people recommend editing CSS and adding a code to remove the footer content. The code they recommend using looks something like this:

.site-info(

display:none;

)

While this code may seem super handy, you should never use it. why? Because it doesn’t remove the text; it only hides it, and secondly, because it might end up hurting your SEO.

Google hates this practice, and using the code can mean your site won’t rank well in the search results. There are other ways to edit your WordPress footer to change or remove the copyright text without hurting your SEO.

How to Modify the WordPress Copyright Text

Almost all WordPress themes will let you modify the footer text of your website. There are multiple ways you can do this, including using the customizer, code, and plugin.

i. Edit Copyright Text With WordPress Customizer

One of the easiest ways to modify the text is to use the WordPress customizer. For this illustration, we’ll use the OceanWP theme. Follow these steps to edit the footer copyright text using the customizer:

First, log into your WordPress admin Dashboard. Then go to Appearance>>Customize

On the customizer, look for the footer section. It’s called the “Footer Bottom” for this theme.

Click on it.

Next, find the field that contains the copyrighted text. Change the text or remove it entirely.

In this example, we will modify it to include FixRunner.

Once done, click on Publish at the top to update the text. Here’s our updated footer text.

ii. Edit Theme Footer Code

Not all themes will allow you to change footer copyright text using the customizer. Thankfully, you can also edit theme files directly to remove footer text.

But before you start editing your WordPress footer, it’s recommended that you create a child theme and a backup. Here’s our guide on how to perform a WordPress backup.

For this example, we are going to edit the WordPress theme called “Twenty Seventeen”. The theme comes with a “Proudly powered by WordPress” footer text but doesn’t have the option to edit the footer text on the customizer.

To change the footer copyright text, you have to modify the code in thetheme file. Depending on your theme, there are two ways to do this;

Method 1: Edit the Footer.php File

One way to change the footer text is to edit the footer.php file. To do this, navigate to the same theme editor; Appearance >> Theme Editor.

Next, click on the Theme Footer (footer.php) file. Then find the code below:

get_template_part( ‘template-parts/footer/site’, ‘info’ );

Replace the code with the one below.

//get_template_part( ‘template-parts/footer/site’, ‘info’ );

echo ‘add text here’;

Replace “add text here” with the new footer text you want.

For example: //get_template_part( ‘template-parts/footer/site’, ‘info’ );

echo ‘Copyright (2024) Fixrunner’;

Then click Update File, and you are done.

And here it is. The footer copyright text has been update.

How to Delete the Footer Copyright Text

If you don’t want the text at all, then just delete the code to remove the entire copyright text.

To remove the text, navigate to the Theme Footer (footer.php) file, then find and delete the code:

//get_template_part( ‘template-parts/footer/site’, ‘info’ );

Then click on Update file

This will remove the footer entirely, as seen below.

Method 2: Edit the Template File

Another way to modify the copyright text is to edit the template file. To do this, first open WordPress admin dashboard, then go to Appearance >> Theme Editor

In Theme Files, go to template-parts >> footer >> site-info.php.

Now you have to find the footer text. If the text is “Powered by WordPress,” do a search for the text by pressing Ctril+F. Typically, if you find the text, you just need to replace it with your preferred text.

For this theme, you can find the code below, which contains the text and link.

<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, ‘twentyseventeen’ ) ); ?>” class=”imprint”>

<?php

/* translators: %s: WordPress */

printf( __( ‘Proudly powered by %s’, ‘twentyseventeen’ ), ‘WordPress’ );

?>

</a>

Replace ‘https://wordpress.org’ in the code with your url (the url you want to text to redirect to). E.g https://www.fixrunner.com/

Next, divide your custom footer text into two parts. Replace ‘Proudly powered by’ with the beginning part of the text and replace ‘WordPress’ with the ending part of the text.

Note: Ensure all the text remains inside the single quotes.

Once you are done, click Update File.

Here’s how we changed the footer text to ‘Copyright (2024) Fixrunner’

Here’s the outcome:

Deleting the Footer Text

If you don’t want the text at all, then just delete everything in between tags <a and </a> and click Update File. This will remove the entire footer copyright text.

iii. Use a Plugin

There are several plugins that allow you to modify your WordPress footer copyright text. Some of the top plugins include:

• Visual Footer Credit Remover: This plugin allows users to easily remove or edit the footer credit text on their WordPress site without any coding.
• Remove Footer Credit: A straightforward plugin designed to help users modify or delete the footer credit text on their WordPress site with a user-friendly interface.
• Elementor Header & Footer Builder: This plugin enables users to create custom headers and footers using Elementor’s drag-and-drop interface, providing extensive customization options, including editing footer credits.
• Footer Credits: This plugin offers an easy solution for changing the footer credit text on WordPress sites, allowing users to personalize their site’s footer content effortlessly.

All you have to do is install one of these plugins and follow the prompts to modify your footer text using code.

How to Edit WordPress Footer Widgets

Almost all WordPress themes have a footer section that you can edit to add links, menus, images, and other content. There are three ways you can do this.

The easiest way to go about it is to use the WordPress customizer. There is also the option of adding a widget to the footer through the WordPress admin panel. Otherwise, you can use a plugin to edit it.

Method 1. Use a Customizer to Edit the Footer

To edit the footer in WordPress with Customizer, follow these steps:

Go to Appearance >> Customize

When the customizer loads, go to the Footer Widgets section. The footer section differs for each plugin. We are using the OceanWP theme for this example.

Most plugins don’t have a footer section set up by default, especially if its a free theme. So you have to set it up yourself.

To start, ensure the footer feature is turned on.

Set Up Column/ Layout

Next, you have to set up the columns and layouts. Most themes allow you to decide on the number of columns, whether its one, two, three, four, or more.

The column is set to four by default for this theme. This means that you can add four or more widgets to your footer. One or more for each column.

Add Widgets

Once you’ve set the columns, then it’s time to add the widgets. Widgets are the building blocks of the footer.

To add a footer, go to Appearance>>Customize. Then go to the widgets section of the customizer.

This should take you to the area where you can add widgets for different parts of the website, including the footers. To proceed. Click on each footer and add the widgets you want.

For example, if you want to add the “latest posts” widget to Footer 1, just click on the add widget + button and search for the widget. Then add the widget once you find it.

If you scroll downward, you can see a preview of the changes.

You can follow the same steps to add a widget to Footer 2, Footer 3, and Footer 4. You can even add multiple widgets to a single footer column.

Here’s a preview of our footer update with one widget in each column.

Method 2. Adding Widgets Through WordPress Admin Dashboard

Another way to edit the footer is through the WordPress admin panel.

To do this, open the WordPress admin panel, then go to Appearance>>Widgets

Just like with the customizer, you can add one or more widgets to each footer column, from Footer 1, Footer 2, Footer 3, and Footer 4.

To add a widget to a footer column, click on the Add footer + button.

Alternatively, you can also click on Browse all.

Drag and drop the widget from the left side to the desired footer section on the right side.

Add as many widgets as you want to the footer columns. Once you are satisfied with the look of the footer section, click on Update.

Here’s the outcome with one widget for each column.

Method 3. Edit Footer with a Page Editor

WordPress page editors like other page builders like Elementor, Divi, Beaver Builder, and Brizy allow you to edit your footer. These editors breaks up different components of a page, allowing you to add and remove various components.

The “Twenty Twenty Four” theme comes with the WordPress site editor by default. To edit the footer copyright text with the WordPress Editor, navigate to your homepage and click on Site Editor.

Once in the editor, scroll down to the footer. Now you can edit any part of the footer you want.

For instance, you can change the footer copyright text. To do this, click on the text to make it editable. Then delete the old text and enter your new footer text.

You can also change the footer background, delete existing elements, add new ones, etc. To do this, you have to click on the + sign at the top-left side of the screen.

Then drag and drop your desired elements into place.

This article explains how to use the WordPress Block Editor.

Widgets can be a great way to add extra functionality to your footer, but they need regular updates and optimization. WordPress support and maintenance services can help you manage and maintain these widgets, ensuring they stay functional and error-free.

Method 4: Use a plugin

Just like for most things on WordPress, there are plugins that allow you to edit the footer section. Here are some recommended WordPress plugins to edit your plugin.

• Head, Footer and Post Injections: This versatile plugin enables the insertion of scripts and HTML code into the header, footer, and individual posts, offering flexibility for customization.
• Insert Script in Headers and Footers: This plugin lets users add custom scripts to the header and footer sections of their WordPress site for added functionality.
• Scripts To Footer: This plugin moves scripts to the footer, improving page load times by ensuring that scripts are loaded after the main content of the page.
• Head & Footer Code: This plugin provides a simple way to add custom code to the header and footer sections of a WordPress site without editing theme files.
• Elementor Header & Footer Builder: Designed for use with the Elementor page builder, this plugin allows users to create custom headers and footers using Elementor’s drag-and-drop interface.

Edit Footer with the Remove Footer Credit Plugin

To use the Remove Footer Credit, you will first need to install the plugin. Here’s a guide on how to install WordPress plugins.

Once you install the plugin, you will find it under Tools on your WordPress dashboard. Navigate to your dashboard, then go to Tools>>Remove Footer Credit

This will take you to the plugin’s dashboard, where you can enter the HTML code you want to remove in first box and the one you want to add in the lower box.

How to Add Various Footer Components

Here’s how to add various components to your footer:

1. Modify Footer Layouts (Columns)

One of the first things to do when building a footer is to create the layout. The footer section is divided into different columns, whether it is one, two, three, four, or more columns. There are two simple ways you can do this:

i. Use WordPress Customizer:

To set your footer layout, navigate to the Customizer from your dashboard Appearance>>Customize.

Once in the customizer, look for the footer or layout option. These options differ depending on the theme. For the OceanWP theme, you can find the footer column option under Footer Widgets. Set the number of columns and choose the layout you want for your footer.

Some themes like Astra come with a footer builder feature that provides a visual structure to guide you while building your footer.

To set the layout and columns using a footer builder, click on the setting icon, then choose the number of columns you want for each section and the layout for the footer section.

Click Publish to save your changes.

ii. Use a Page Editor

Using a page editor provides more flexibility when setting up your footer layout.

To set your footer layout using the WordPress editor, go to your homepage while logged into WordPress and click on Site Editor

This will take you to the editing interface where you can set the footer layout and add new elements to it.

2. Add Footer Menu

It’s common to add menus to your footer to help with navigation. However, you’ll need to first create the menus before you embed them in the footer. Here’s our guide on how to create a custom menu.

Once your menu is set, the next step is to add them to your footer. You can do that with the customizer or directly from your WordPress dashboard.

To add menus with the customizer, go to Appearance>>Customize>>Menu>>View All Locations.

Select the footer menu category and choose the footer menu you created from the drop-down.

Click Publish once you are done to save the changes.

Alternatively, you can go to Appearance>>Menus, then click on Manage Locations. Click on the drop-down under the footer menu and select the footer menu you created earlier.

3. Add Navigational Footer Links

Adding essential links in the footer can help with navigation. You can add links to pages like About, contact, privacy policies, terms of service, and copyright notices.

To add footer links, you need to add a ‘navigation menu’ or a ‘page list’ widget to your footer.

• The page list widget adds links to all the pages on your site on your footer.
• The navigation menu widget allows you to add a menu with essential links to your footer.

To use the navigation menu widget, you first need to create a menu that contains all the links you want included. Here’s our guide on how to create and manage custom navigation menus in WordPress.

4. Add Social Profiles and Communities

Another component you can add to your footer is your social profiles, like Facebook, Twitter, and others. You can add these social links with a menu, but if you want a stylish look, then you can use the’social icons’ widget.

To add the social icon widget, navigate to the customizer, Appearance>>Customize>>Widgets>>Footer. Click on the plus sign to add a new widget, and search for and add the social icons widget.

Once you add the widget, edit it, and click on the plus (+) sign to add all the social profiles you want. Add the link to each profile to activate it, and then click Publish once done.

You will end up with something like this, which users can click to access your social profiles.

5. Add ‘About Us’ Content

Adding “about us” content to the footer page is another common practice. The About Us content tells users about your website or services.

To add the ‘about content,’ you will need to add text widgets to your footer. Go to Appearance>>Customize>>Widgets>>Footer, and click on the add widget + icon. Now add a ‘Heading’ widget for the about us header, and add a paragraph widget for the about text.

Edit the header and enter your ‘About Us’ content into the paragraph widget.

How to Change Footer Color

Changing the color of your footer is another step you can take to customize your website. You can change your footer from the default color to any color you want using the customizer or with CSS code.

i. Change Footer Color With Customizer

To change the footer color with the WordPress customizer, go to Appearance>>Customizer. Then search for the footer color section.

Now use the color picker to choose the color you want for your footer.

Click Publish to save your changes.

ii. Change Footer Color With Additional CSS

Another way to change the footer color is to use the additional CSS feature. The additional feature allows you to assign properties like color, size, and display to the HTML tags.

To change the footer color using additional CSS, go to Appearance>>Customizer>>Additional CSS, and paste in the code below:

footer {

background-color: #yourcolorcode;

color: #yourtextcolorcode;

Replace ‘yourcolorcode’ with the code for the color you want to use for the footer background. Also replace ‘yourtextcolorcode’ with your desired footer text color.

Click Publish once you are done to save the changes you’ve made. Check your footer section to ensure the color has been updated as desired.

Footer Troubleshooting tips

Here are some tips to troubleshoot common footer issues:

1. Footer Not Displaying:
   • Check Theme Settings to ensure the theme supports a footer section and that it is correctly configured.
   • Confirm footer.php is included in the theme and properly referenced.
2. Styling Issues:
   • Use browser developer tools to identify conflicting or missing CSS styles.
   • Clear browser and plugin caches to see recent changes.
3. Misalignment:
   • Check HTML Structure to ensure proper closing of tags and correct nesting.
   • Apply CSS Flexbox or Grid for better control over footer alignment.
4. Responsive Design Problems:
   • Use CSS media queries to adjust the footer for different screen sizes.
   • Test the footer on multiple devices to ensure it looks good everywhere.
5. Widget Issues:
   • Ensure widgets are correctly placed and configured in the footer widget area.
   • Keep all plugins updated to avoid compatibility issues that may affect the footer.

Tip to Make Your Footer Responsive

• Apply CSS media queries to adjust the footer layout for different screen sizes to ensure optimal display on all devices.
• Utilize percentage-based widths and flexible grid systems to allow the footer to adapt to various screen sizes seamlessly.
• Implement responsive font sizes using relative units like em or rem to maintain readability across devices.
• Use CSS to hide or show specific footer elements based on screen size to ensure a clean and functional design.
• Regularly test the footer on various devices and screen resolutions to ensure consistent and appealing appearance.

Conclusion

We presented you with a few options on how to edit a footer in WordPress. Now you need to go and create an awesome footer for your website. We also highlighted several footer modification plugins you should check out.

Using one of those plugins might save you time, so it’s something worth looking into. Also, if you are in the process of building a website, choosing a theme with good footer options is a good idea.

Also, ensure to check out our guide on how to customize WordPress header. Check out our WP College for more WordPress tutorials. If you have further questions, write them in the comments section below. Have a great day!

More Resources:

• Hide Page Title in WordPress – 4 Easy Methods
• How to Completely Delete WordPress Site
• How to Add Dummy Text to WordPress Sites

FAQs on How to Edit a Footer in WordPress

1. How do I edit a WordPress footer?

There are several ways to edit the WordPress footer. You can use the WordPress Customizer: To do this, go to Appearance>>Customize and find the “Footer” section. Adjust settings as needed. Alternatively, you can edit your footer in the widget section. Go to Appearance > Widgets and add or modify widgets in the footer widget area.

Another option is to edit the theme files. Go to Appearance>>Theme Editor, open footer.php, and make the necessary changes. (Backup files before editing.)

2. Where is the footer menu in WordPress?

Before you set up the footer menu, you must first create a unique menu that incorporates all the relevant links you want in your footer menu. To do this, go to Appearance>>Menus. If there’s no existing footer menu, then create one and add the relevant pages and links you want to it. Now you can assign the menu as your footer menu if your theme has the option. Otherwise, you can add the menu to your footer using a navigation menu widget.

3. How to edit footer in WordPress Astra theme?

The Astra theme comes with a footer builder that allows you to easily setup and modify your footer as you want. To access the builder, go to Appearance>>Customize>>Footer Builder, then use the drag-and-drop interface to customize footer layout, content, and style.

Alternatively, you can edit the Astra footer in the WordPress widget section. Go to Appearance>>Widgets then add the widgets you want to the footer areas.

4. How do I add a background color to my footer?

To change the footer background color, you can use the customizer. To modify footer color with the customizer, go to Appearance>>Customize>>Color>>Footer. Then use the color picker to choose your idea footer color. Alternatively, go to Appearance>>Customize>>Additional CSS, then enter the code below, replacing ‘yourcolorcode’ with the footer background code and ‘yourtextcolorcode’ with your preferred footer text color code.

footer {

background-color: #yourcolorcode;

color: #yourtextcolorcode;

5. How do I fix the footer at the bottom of all pages?

To fix the footer at the bottom of your page, first check your theme settings for options related to footer positioning and adjust accordingly. You can also use plugins like “Sticky Footer” to ensure the footer remains at the bottom. Alternatively, you can add the following CSS to ensure the footer stays at the bottom:
body {

display: flex;

min-height: 100vh;

flex-direction: column;

}

.site-footer {

margin-top: auto;

}

The post How to Edit Footer in WordPress appeared first on FixRunner.com.

Are you looking for the best drag and drop WordPress Theme Builder? Then this article is for you. In today’s digital era, establishing an online presence is important for businesses, bloggers, and individuals alike. This is because a captivating website allows you to showcase products, share ideas, and engage with audiences. However, the process of designing and developing a website can be daunting, especially for those without technical expertise. This is where WordPress theme builders come in.

WordPress theme builders enable users to unleash their creativity and bring their website visions to life, without the need for coding skills. So in this article, we will explain what WordPress Theme Builders are, their functionalities and benefits. We will also list some of the best WordPress Theme Builders in the WordPress marketplace.

Contents:

• What are WordPress Theme Builders?
• Benefits of Using WordPress Theme Builders
• Best WordPress Theme Builders
  • Elementor Pro
  • Beaver Builder
  • Divi Builder
  • Thrive Theme Builder
  • WPBakery Page Builder
• Conclusion
• FAQs

What are WordPress Theme Builders?

WordPress theme builders are tools designed to simplify the process of website design and customization. Usually, building a website requires a combination of coding skills, design expertise, and time-consuming manual labor.

With WordPress Theme Builders, however, you can easily design and customize your website. And you do not have to spend hours and hours writing codes.

WordPress theme builders provide you with a blank canvas upon which you can create your website layouts. You can also insert various elements such as headers, footers, sidebars, and content blocks.

Further, theme builders typically offer a wide range of pre-designed templates and modules. Therefore, you can choose from a selection of layouts and customize them to suit your specific needs.

In addition, theme builders provide advanced features. Some of them include responsive design options, dynamic content capabilities, and integration with third-party plugins. All of these, therefore, enable you to create fully functional and visually stunning websites with ease.

WordPress theme builders are simple and accessible. So whether you’re a seasoned web developer or a complete novice, these tools enable you to design and customize your website. And you do not need extensive technical knowledge.

With a theme builder at your disposal, the possibilities are endless. That means you can get creative and build a website that truly reflects your vision and brand identity.

Benefits of Using a WordPress Theme Builder

WordPress theme builders offer a plethora of benefits that make them essential tools for website design and customization. Let’s explore some of the key advantages.

Ease of Use

One of the most notable advantages of WordPress theme builders is their user-friendly interface. With its intuitive drag-and-drop interface, users can simply click, drag, and drop elements onto their website canvas. All these, therefore, remove the need for complex coding or design skills.

This intuitive approach to website design streamlines the process, allowing users to quickly create professional-looking websites, in contrast to using traditional methods.

Flexibility

WordPress theme builders provide users with unmatched flexibility when it comes to customizing their websites. From layout and typography to color schemes and dynamic content, theme builders offer a wide range of customization options. They allow users to create truly unique and beautiful websites.

From a portfolio website, an e-commerce store, or a corporate blog, a theme builder allows you to tailor your website to suit your specific needs and preferences. This ensures that your online presence stands out from the crowd.

Time-Saving

Building a website from scratch can be a time-consuming process, with hours of coding, design, and testing. But with a WordPress theme builder, users can drastically reduce the time it takes to create a website.

Theme Builders provide pre-designed templates, layouts, and modules. These enable users to get started quickly and easily, eliminating the need to start from scratch. Additionally, the intuitive interface of theme builders simplifies the design process. Therefore, users can make changes and updates to their website in real-time, without the need for extensive revisions/coding.

Cost-Effectiveness

Hiring a professional web designer to create a custom website can be expensive, especially for small businesses or individuals with limited budgets. However, with a WordPress theme builder, users can design their own websites at a fraction of the cost.

Without the need to hire a developer, theme builders offer a cost-effective solution for creating professional-looking websites that meet your specific needs. Whether you’re a freelancer, a small business owner, or a blogger, a theme builder provides an affordable way to establish an online presence and reach your target audience.

When selecting a theme builder, it’s essential to consider not just the design capabilities but also the security features. A secure theme builder reduces the risk of vulnerabilities that hackers could exploit. Nonetheless, it’s always wise to be prepared to clean an infected WordPress site in case any security issues arise.

Best WordPress Theme Builders

WordPress boasts a plethora of theme builders, each offering its unique set of features and functionalities. In this section, we’ll delve into two of the most popular WordPress theme builders: Elementor Pro and Beaver Builder.

Elementor Pro – WordPress Theme Builder

Elementor Pro is a leading drag-and-drop page builder plugin for WordPress, known for its user-friendly interface and extensive range of features. Launched in 2016, Elementor has quickly risen to prominence, becoming the go-to choice for millions of website owners worldwide.

With Elementor Pro, users can design and customize their websites with ease thanks to its intuitive drag-and-drop editor and comprehensive set of design tools.

Pricing:

Elementor Pro offers three pricing plans: Personal, Plus, and Expert. The Personal plan is suitable for single-site owners and costs $59 per year. The Plus plan, priced at $99 per year, allows for use on up to three websites. The Expert plan, priced at $199 per year, is suitable for web developers and agencies. It also includes access to additional features and support.

Key Features:

• Intuitive Drag-and-Drop Editor: Elementor Pro’s drag-and-drop editor makes designing websites a breeze. It allows users to create custom layouts and designs without any coding knowledge.
• Extensive Template Library: Elementor Pro offers a vast library of pre-designed templates and blocks, covering a wide range of industries and website types.
• Theme Builder: With Elementor Pro’s theme builder feature, users can customize every aspect of their website’s design. This includes headers, footers, and archive pages.
• Dynamic Content: Elementor Pro allows users to add dynamic content to their websites. With its dynamic content widgets, users can add post grids, sliders, and pricing tables, using its dynamic content widgets.

Drawbacks:

• Learning Curve: While Elementor Pro’s interface is user-friendly, mastering all of its features and functionalities may require some time and effort.
• Pricing: Elementor Pro’s pricing plans may be prohibitive for some users, especially those with limited budgets or who only require basic functionality.

Setup Process:

1. Install and activate the Elementor Pro plugin from the WordPress dashboard. For a detailed tutorial on how to install a WordPress plugin, do check out out article on how to install WordPress plugins.
2. Create a new page or edit an existing one using Elementor Pro’s drag-and-drop editor.
3. Customize your page layout and design using Elementor Pro’s extensive range of widgets and templates.
4. Preview and publish your changes to make them live on your website.

Beaver Builder

Beaver Builder is a popular drag-and-drop page builder plugin for WordPress, known for its simplicity and ease of use. Thanks to its intuitive interface and robust set of features, Beaver Builder has garnered a loyal following amongst website owners and developers alike.

Pricing:

Beaver Builder offers three pricing plans: Standard, Pro, and Agency. The Standard plan is suitable for single-site owners and costs $99 per year. The Pro plan, priced at $199 per year which allows for use on an unlimited number of websites. It also includes additional features such as Beaver Builder Theme and Multisite Capabilities.

The Agency plan, priced at $399 per year, is designed for web developers and agencies and includes white labeling and multisite network settings.

Key Features:

• Front-End Editing: Beaver Builder’s front-end editing interface allows users to see changes to their website in real-time. This makes the design process intuitive and efficient.
• Extensive Template Library: Beaver Builder offers a wide range of pre-designed templates and modules. Thus, making it easy for users to get started with their website design.
• Mobile-Friendly Design: Beaver Builder ensures that websites created with its plugin are fully responsive and mobile-friendly. This ensures a seamless user experience across all devices.
• WooCommerce Integration: Beaver Builder seamlessly integrates with WooCommerce. It allows users to design custom product pages and layouts for their online stores.

Drawbacks:

• Limited Dynamic Content: Beaver Builder’s dynamic content capabilities are more limited compared to other theme builders. This makes it less suitable for websites that require extensive dynamic content customization.
• Lack of Advanced Features: Some users may find that Beaver Builder lacks certain advanced features found in other theme builders. These include advanced animation effects or dynamic content widgets.

Setup Process:

1. Install and activate the Beaver Builder plugin from the WordPress dashboard.
2. Create a new page or edit an existing one using Beaver Builder’s front-end editor.
3. Customize your page layout and design using Beaver Builder’s drag-and-drop interface and pre-designed templates.
4. Preview and publish your changes to make them live on your website.

 Divi Builder – WordPress Theme Builder

Divi Builder is a powerful drag-and-drop WordPress page builder plugin bundled with the Divi theme. It is one of the most popular WordPress themes available. Developed by Elegant Themes, Divi Builder offers a comprehensive suite of design tools and features. This makes it a favorite among both novice and experienced website owners.

Pricing:

Divi Builder is available as part of Elegant Themes’ membership. It includes access to Divi Builder, the Divi theme, and other Elegant Themes products and plugins. Membership plans start at $89 per year for access to all themes and plugins, or a one-time fee of $287 for lifetime access.

Key Features:

• Visual Drag-and-Drop Editing: Divi Builder’s intuitive drag-and-drop editor allows users to design and customize their websites in real-time. This means all changes will appear instantly on the screen.
• Extensive Module Library: Divi Builder comes with a wide range of modules and elements. These include text, images, sliders, galleries, and more. As a result, users are able to create virtually any type of layout or design.
• Theme Customization: Divi Builder integrates seamlessly with the Divi theme, allowing users to customize every aspect of their website’s design, including headers, footers, and page layouts.
• Global Elements: Divi Builder’s global elements feature enables users to create reusable elements. Some of these elements include headers, footers, and sidebars that can be applied across multiple pages on their website.

Drawbacks:

• Learning Curve: While Divi Builder’s interface is intuitive, mastering all of its features and functionalities may require some time and effort, especially for beginners.
• Dependency on Divi Theme: Divi Builder is tightly integrated with the Divi theme. So users who prefer to use a different theme may not be able to take full advantage of its features.

Setup Process:

1. Purchase an Elegant Themes membership and download the Divi theme and Divi Builder plugin.
2. Install and activate the Divi theme and Divi Builder plugin from the WordPress dashboard.
3. Create a new page or edit an existing one using Divi Builder’s drag-and-drop editor.
4. Customize your page layout and design using Divi Builder’s extensive range of modules and pre-designed templates.
5. Preview and publish your changes to make them live on your website.

Thrive Theme Builder

Thrive Theme Builder is a complete drag and drop WordPress theme builder developed by Thrive Themes. This is a company known for its conversion-focused WordPress plugins and themes. Launched in 2019, Thrive Theme Builder offers a unique approach to website design. It combines drag-and-drop editing with conversion-focused features to help users create high-converting websites.

Pricing:

Thrive Theme Builder is available as part of Thrive Themes’ membership. It includes access to Thrive Theme Builder, Thrive Architect (a drag-and-drop page builder plugin), and other Thrive Themes products and plugins. Membership plans start at $149 per quarter for access to all themes and plugins.

Key Features:

• Front-End Editing: Thrive Theme Builder’s front-end editing interface allows users to see changes to their website in real-time. This, in turn, makes the design process intuitive and efficient.
• Conversion-Focused Design: Thrive Theme Builder comes with a range of conversion-focused features. They include customizable call-to-action buttons, opt-in forms, and scarcity timers. All of these are designed to maximize engagement and conversions.
• Theme Customization: Thrive Theme Builder enables users to customize every aspect of their website’s design. These include headers, footers, blog layouts, and category pages, using its drag-and-drop editor.
• Thrive Architect Integration: Thrive Theme Builder integrates seamlessly with Thrive Architect, thus, allowing users to create custom page designs and layouts with ease.

Drawbacks:

• Learning Curve: Like other theme builders, Thrive Theme Builder has a learning curve, and mastering all of its features and functionalities may require some time and effort, especially for beginners.
• Limited Template Library: Thrive Theme Builder’s template library is more limited compared to other theme builders. Therefore, users may need to create more elements from scratch.

Setup Process:

1. Purchase a Thrive Themes membership and download Thrive Theme Builder and Thrive Architect.
2. Install and activate Thrive Theme Builder and Thrive Architect from the WordPress dashboard.
3. Create a new theme template or edit an existing one using Thrive Theme Builder’s front-end editor.
4. Customize your theme layout and design using Thrive Theme Builder’s drag-and-drop interface and conversion-focused features.
5. Preview and publish your changes to make them live on your website.

WPBakery Page Builder

WPBakery Page Builder, formerly known as Visual Composer, is one of the original drag-and-drop page builder plugins for WordPress. Developed by WPBakery, the plugin has been around since 2011 and has amassed a large user base for its ease of use and extensive range of features.

Pricing:

WPBakery Page Builder is available as part of many premium WordPress themes, where it is bundled as a built-in page builder. Alternatively, users can purchase a standalone license for $45. The license includes access to lifetime updates and six months of support from the WPBakery team.

Key Features:

• Intuitive Drag-and-Drop Editor: With WPBakery Page Builder’s drag-and-drop interface, users can easily design and customize their websites visually. The changes will also reflect in real-time.
• Extensive Element Library: WPBakery Page Builder comes with a vast library of pre-designed elements and templates. They include text blocks, image galleries, sliders, and more. This enables users to create complex layouts with ease.
• Backend and Frontend Editing: WPBakery Page Builder offers both backend and frontend editing options. So users can choose their preferred editing mode.
• Compatibility: WPBakery Page Builder is compatible with most WordPress themes and plugins. This ensures seamless integration and compatibility with existing websites and content.

Drawbacks:

• Bloated Code: Some users have reported that WPBakery Page Builder generates bloated code. This can impact page load times and website performance, especially on larger websites with complex layouts.
• Limited Design Flexibility: Compared to some other WordPress theme builders, WPBakery Page Builder may offer less flexibility and customization options in terms of design and layout customization.

Setup Process:

1. Purchase WPBakery Page Builder or activate the plugin if it is bundled with your premium WordPress theme.
2. Install and activate WPBakery Page Builder from the WordPress dashboard.
3. Create a new page or edit an existing one using WPBakery Page Builder’s visual editor.
4. Customize your page layout and design using WPBakery Page Builder’s drag-and-drop interface and extensive library of elements and templates.
5. Preview and publish your changes to make them live on your website.

Conclusion – WordPress Theme Builder

In summary, WordPress Theme Builders have transformed the way we design and customize websites. Now, users can create professional-looking websites with ease. Whether you’re a beginner or an experienced developer, a theme builder offers a flexible and efficient solution for bringing your website visions to life.

Drag-and-drop WordPress theme builders offer a convenient way to design professional websites without coding knowledge. By choosing a builder that focuses on performance, you can create a visually appealing site and boost WordPress speed at the same time.

For more articles like this, do visit our wp college.

FAQs

What is the best WordPress theme builder?

This solely depends on the individual needs and preferences. Some popular options include Elementor Pro, Beaver Builder, Divi Builder, and Thrive Theme Builder. So when choosing, consider factors such as ease of use, features, pricing, and support.

How can I create my own theme in WordPress?

Creating your own theme in WordPress requires knowledge of HTML, CSS, and PHP. So to do this, users can start by creating a new directory in the `/wp-content/themes/` folder of their WordPress installation.

Within this directory, they can create files for the theme’s stylesheet, template files (such as index.php, header.php, footer.php), and functions.php for adding custom functionality. Additionally, users can utilize WordPress’s Theme Development Codex and various online tutorials for guidance.

How do I access theme builder in WordPress?

Accessing the theme builder in WordPress depends on the specific theme builder being used. For example:

• In Elementor Pro, users can access the theme builder by navigating to Templates > Theme Builder from the WordPress dashboard.
• In Beaver Builder, users can access the theme builder by navigating to Beaver Builder > Themer Layouts from the WordPress dashboard.
• In Divi Builder, users can access the theme builder by navigating to Divi > Theme Builder from the WordPress dashboard.
• In Thrive Theme Builder, users can access the theme builder by navigating to Thrive Dashboard > Thrive Theme Builder from the WordPress dashboard.

The post Best Drag-and-Drop WordPress Theme Builder appeared first on FixRunner.com.

If this is the case with you, you’ve got two options – try fixing it yourself or get an experienced WP expert to resolve it. The latter option is much better if you aren’t so comfortable working with codes or you just need extra time to focus on more productive issues.

At FixRunner, we understand the importance of creating a well-functioning website, and that’s why we’ve put together this guide to help you fix your media query issues in WordPress. Whether you’re a beginner or an experienced web developer, this article will provide you with the information you need to get your media queries working correctly.

If managing these technical details feels overwhelming, our WordPress care plans can provide the necessary support to keep your site functioning smoothly.

Content:

• Definition and Usage of CSS Media Queries
• How Media Queries Look
• How To Fix Media Query Not Working
• Conclusion

Definition and Usage of CSS Media Queries

Firstly, we will take you through the structure of CSS Media queries. However, if you simply want to find out what to do when your media query does not work, skip to the related section below.

As we earlier mentioned, Media Query is a CSS (Cascading Style Sheets) technique used to customize the appearance (font size, color styles, etc) of a page’s content across different screen sizes and resolutions.

The primary goal of every website owner is to offer the best experience to everyone who visits the site. Desktop users must have a great user experience, so also iPhone and smartphone users.

So this is where a media query comes in. It essentially tells the browser what to do when a mobile device is used to view the page and what to do when a larger device is used.

This is a simple example of a media query:

@media screen and (max-width: 480px)

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

They can be inserted within a webpage’s HTML or declared in an individual .CSS file. A few uses of Media queries include:

1. Adjusting column width based on screen-size of a device: You can use CSS media queries for adjusting column widths and their related elements. This will provide the best user experience for all visitors.
2. Changing layouts: You may also use the CSS media query to convert a 2-column layout to a 1-column layout for mobile devices.
3. Moving Sidebar: By declaring a media query, you can tell a browser to move the sidebar below the site’s content when the page is being viewed on a mobile device or when it is in portrait mode.

Media Queries Syntax

In order to use media queries appropriately, it’s important to understand its syntax.

A media query has these four elements:

1. @media rule
2. Media type (this is optional)
3. Logical operators
4. Media feature expressions.

@media rule:

The first thing to do when setting up a media query in CSS is to declare what you intend to do. To do so, enter @media with no space in-between.

Media type:

The next element to follow the @media rule is the media type. It refers to the type of device for which you are setting up the query. Media types include:

all: This media type is suitable for all devices. If you do not use a specific media type like this: @media (max-width: 480px), ‘all’ will be implied.

Print: This media type is used when you intend to set up a media query for paged materials and documents in print preview mode.

Screen: This media type is used for screens. The CSS rules that follow will be applied to screens – mobile devices, tablets, desktops, etc. This is the most commonly used media type.

Speech: This is intended for screen readers.

Media Features:

Media features give more specific details. For instance, you can apply the style to screens that have a max-width of 600px (mobile devices). In this case, max-width is the media feature used for targeting mobile phones.

So here are a few media features and their functions:

• Height – This describes the viewport height
• Max-height – This refers to the maximum height of the browser window
• Width – Width of the viewport
• Max-width – This media feature defines the maximum width of a browser window
• Min-height – This defines the minimum height of the browser window
• Orientation – This refers to the orientation of the viewport.

To clarify, each media feature expression must be placed within brackets.

Logical Operators

When composing complex media queries, you’ll need logical operators such as: not, and, and only. You may also join more than one media query by using a comma.

and: The ‘and’ operator combines 2 or more media features to form a single media query. It is also used to join media types with media features.

not: The ‘not’ logical operator negates a media query. When using the not operator, a media type must be specified.

only: This operator helps to prevent older browsers from interpreting the media query wrongly. When you do not use ‘only’, media queries may not work well on older browsers.

They may interpret the ‘screen and (max-width: 767px)’ as ‘screen’, thereby applying the query to all screens. Note that this operator has no effect on modern browsers. When using the ‘only’ operator, a media type must also be specified.

, (comma): Commas are used to combine 2 or more media queries into one rule. This means when several queries are separated with a comma, each one is handled separately from the other. So, if one query in the list is true, the whole media query remains true.

Typical Example of a Media Query

If you are still wondering what a media query looks like, you can see a lot of them in the style.css file of a responsive WordPress theme. They begin with @media and are usually located at the bottom of the style sheets.

This is because the rules at the bottom of a stylesheet will overwrite the rules at the top (except you use the !important tag to prevent that from happening). Here’s a sample:

@media only screen and (max-width: 600px) {

body {

background-color: green;

}

}

In the example above, the query already sets a condition that clearly states ‘change the background color of the <body> element to green when the screen size is 600px or less.

So, even if your background color was initially set to ‘white’, the design changes to ‘green’ for mobile devices because of the media query. So ‘600px’ is the break point where your design element will behave differently.

Here is another example:

@media screen and (max-width: 850px) {

.column {

width: 50%;

}

}

@media screen and (max-width: 600px) {

.column {

width: 100%;

}

}

The first media query tells the browser to make column width 50% of the browser or container window when the screen 850px and below.

The second media query further instructs the browser to set the column width to 100% when the screen width is 600px and below. The next section explains what to do when the media query is not working.

How To Fix Media Queries Not Working

It is possible to run into errors while working with media queries. Sometimes, however, the media queries may not work at all, at other times they may not work on mobile devices or desktops.

So, after setting up your media queries and they do not work, do the following:

Ensure it is rightly positioned

Sometimes, your media query does not work because it is wrongly positioned.

Ideally, media queries should be placed at the end of the stylesheet. As you know, browsers read stylesheets from top to bottom. So, codes at the end of a stylesheet override declarations made at the beginning (except when !important is used to force the implementation of a code).

Also, media queries for smaller queries should be placed before larger screens. See the following lines:

body {

background-color: grey;

}

@media screen and (min-width: 480px) {

body {

background-color: green;

}

}

@media screen and (min-width: 850px) {

body {

background-color: lightblue;

text-align: centre;

}

}

The first rule sets the page background color to grey if it is less than 480px. The media queries then set the background to green – for screens between 480-849px, and sets the background color to light blue while also center aligning the text – for screens of 850px and more.

CSS declared inline

This may be the reason why your media queries aren’t working. That is to say, you may have declared CSS within your HTML document. So if this is the case, simply go through the HTML document and remove the CSS declared inline.

Alternatively, you can override the inline CSS with !important. As a result, this may solve the ‘CSS media query not working’ problem.

So let’s say that you are trying to change the text color for paragraphs in mobile devices to black with these lines of CSS.

@media screen and (max-width: 1024px){
  p{        
        color: black;
    }
}

But this isn’t working, likely because of an inline style applied for the same element. Therefore, you can add !important to this rule so it overrides the inline style as follows:

@media screen and (max-width: 1024px){
  p{        
        color: black !important;
    }
}

So, this should fix your media query issue.

Conflicting CSS rules can override your media queries. By properly organizing your stylesheets and using correct specificity, you can resolve these conflicts. This practice helps streamline your CSS, which can reduce WordPress page load time by minimizing code bloat.

An earlier declaration has the !important attached to it

As we saw above, !important can override other styles, even inline styles set for an element. If you have also used !important earlier in your spreadsheet for an element, media queries declared after that won’t work.

So, the easiest thing to do is to search for and remove it to get your media queries working.

Media Query Not Working on Desktop

Ideally, your media queries should work on mobile devices as well as on desktop computers. But, if they do not work on desktops, use max-width instead of max-device-width as your media feature. So, here’s the difference between the two.

Max-device-width: This refers to the actual screen-size of a device.

Max Width: This refers to the size of a device’s display area (the browser window).

So, let’s say the max-device-width is set at 600px. It won’t work on a desktop device (even if you reduce the browser window to 600px) because the display size of the device is more than 600px.

However, if you use max-width, you’ll get a better result since it defines the browser display area and not the entire screen size of the device.

Media Query Not Working on Mobile Devices

If media queries work on desktop and not on mobile devices, then you most likely haven’t set the viewport and default zoom.

To do this, add either of the following lines of code to your site’s header, within the <head> </head> element:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Or

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Note: You only need to add one of the code lines above, and usually, the first one does the job.

The width property defines the viewport size and is set to device-width, which tells the browser to render the website just as wide as it is naturally.

The initial-scale property defines the zoom level when a user first loads the page.

Frequently Asked Questions

What is a media query?

A media query is a technique used in web design that allows the webpage to adapt its layout and styling based on the user’s device or screen size. It allows you to specify different styles for different devices.

Why is my media query not working in WordPress?

There could be several reasons why your media query is not working in WordPress. One of the most common reasons is that you may have made a mistake in the syntax of your CSS. Additionally, your media query may not be targeting the correct element or may be overridden by other styles.

How can I check if my media query is working?

You can check if your media query is working by inspecting your website’s CSS using your browser’s developer tools. In the Styles tab, you should see the styles being applied to the element in question.

How do I fix a media query that is not working in WordPress?

To fix a media query that is not working in WordPress, you can start by checking the syntax of your CSS to make sure it is correct. You can also check that your media query is targeting the correct element and that it is not being overridden by other styles. Another option is to use a plugin like WP Add Custom CSS or Simple Custom CSS to add your media query to your website.

How do I add a media query in WordPress?

To add a media query in WordPress, you will need to modify your website’s CSS. You can do this by either editing your theme’s CSS file directly or by using a plugin like WP Add Custom CSS or Simple Custom CSS. Within your CSS, you can add a media query using the @media rule followed by the device or screen size you want to target.

What are some common media query sizes for responsive web design?

Some common media query sizes for responsive web design include:

• 320px (small smartphones)
• 480px (larger smartphones)
• 768px (tablets)
• 992px (small desktops)
• 1200px (larger desktops)

Can I use media queries with WordPress plugins and widgets?

Yes, you can use media queries with WordPress plugins and widgets. However, you will need to target the specific plugin or widget’s CSS class or ID to apply the styles correctly.

Conclusion

With the rapid rise in the number of mobile web users, site owners must take responsive design seriously. We already mentioned that one of the ways of making your web page mobile-friendly and responsive is by using a media query.

Media queries are also quite easy to set up. However, if you need further help, contact us or leave a comment below.

The post How To Fix Media Query Not Working In WordPress appeared first on FixRunner.com.

Do you want to learn tips that’ll make you a better Elementor web designer?

Although it is popular, you may not know the useful tips that can save you much time when building your website.

So in this tutorial, we’ll share helpful Elementor tips and tricks to make you a power user of this amazing drag-and-drop builder plugin. Some of the tips we’ll share can only be accessed with the premium version of Elementor.

Table of Content:

• Is Elementor Good For Beginners?
• 14 Elementor Tips and Tricks You Should Know
  • Use a Starter Template
  • Easily go to Section Using the Navigator
  • Switch Between Pages Using the Finder
  • Utilize the Power of Keyboard Shortcuts
  • Save Sections as Templates
  • Use Global Widgets
  • Add Global Settings
  • Use Revisions to Revert Changes
  • Copy and Paste Sections and Styles
  • Custom CSS
  • Background Carousel (Image Slideshow)
  • Add Parallax Effects to Images
  • Replace URLs
  • Extend Elementor With 3rd Party Addons
• Frequently Asked Questions
• Conclusion

Is Elementor Good For Beginners?

Like we mentioned earlier, Elementor is one of the most popular website page builders. The reason for this popularity is its intuitive interface and easy-to-use tools.

With Elementor, you can build a functional website with its drag-and-drop builder. Also, this is ideal for beginners because no coding skills are required to use the Elementor plugin.

14 Elementor Tips and Tricks You Should Know

In this section, we’ll share useful tips for web designers to save time when using the Elementor page builder plugin.

Before getting started, you’ll need to have the Elementor plugin installed and activated on your WordPress site. Believing that you have done that already, here are 14 useful Elementor tips for WordPress websites.

Use a Starter Template

Elementor has a library of pre-designed templates and blocks to use as a starting point for your designs. These templates and blocks are fully customizable, so you can easily change the colors, fonts, and other design elements to match your branding.

Once you open the Elementor builder, click on the Starter Template icon to get started.

On the “Pages” tab, you’ll find free and premium templates you can import to your page by clicking on any of them.

Elementor templates with the Premium tag can only be accessed with the pro version of the plugin.

If you’d like to import just a section, click on the Blocks tab. You’ll find a list of page sections available to import into the Elementor builder.

These blocks can be useful for adding testimonial, pricing sections, and other similar modules to your page.

Quickly Go to a Section Using the Navigator Feature

As the page you’re building becomes bigger, it’ll be difficult to locate sections within the Elementor builder. But with the Navigator feature, you’ll see a list of all the sections you’ve added in hierarchical order. You can click on a particular section to navigate to that section.

To use the navigator option, click on the Navigator icon at the bottom of the sidebar.

It’ll open the Navigator menu in the preview area. You can click on a particular section to access it.

Switch Between Pages Using the Elementor Finder

When working on multiple pages, you may need to quickly switch to another page from within the Elementor builder.

Instead of exiting the current page and opening the new page from your WordPress dashboard, you can use the Finder option to locate the page you wish to edit.

To use the finder tool, click on the 3 horizontal lines icon on the sidebar menu of the Elementor builder.

Next, select the Finder option under Navigate From Page.

A new search box will pop up in the Preview area. You can type the name of the page you wish to find, then click on it to switch to that page from within the page builder.

Alternatively, you can use the shortcut key Ctrl + E to open the Finder option. This also works when you are on the WordPress admin dashboard.

Note: This feature is accessible to both free and premium users.

Utilize the Power of Keyboard Shortcuts

Elementor includes several keyboard shortcuts to help you work faster and more efficiently. For example, you can use the Ctrl+S shortcut to save your changes or the Ctrl+Z shortcut to undo an action.

Below is an image containing a list of available keyboard shortcuts from Elementor.

Save Sections as Templates – Useful Elementor Tip

Let’s say you have an entire section on your website that you want to reuse across multiple pages. It’ll save you a lot of time if you can quickly access the section as a template.

To save a section as a template, right on the section you’d like to save. Then select the Save as Template option.

On the popup that appears, enter a name for the template, then click Save to save your template.

Once it’s saved, you can access the template from the My Templates section in the Elementor builder, and you can then reuse your section templates from here.

You can also use the shortcode Elementor generates to add the saved template to your posts or pages in WordPress.

To get the shortcode, go to Templates >> Saved Templates from your WordPress dashboard. On the “Saved Templates” tab, you’ll find a list of all the templates you’ve previously saved.

On the “Shortcode” column, you’ll find the shortcode for each template. Copy the one you’d like to use, then simply add it to the post you want to display the template on.

Saving sections as templates make it easy to reuse common sections across various Elementor designed pages. It’s also a great idea to use this feature to avoid duplicating your efforts.

Use Global Widgets – Elementor Tip

With Global widgets, you can create a widget once and reuse it on multiple pages or posts. This can save you time and make it easy to maintain consistency across your site.

To create a global widget, simply right-click on the Widget icon and select the Save as a Global option from the available options.

Next, you’ll need to enter a name for the Global widget. Then, click on the Save button.

After that, you’ll be able to access this widget from the Global tab on the Elementor sidebar menu.

You can also use it on any page you edit with the Elementor builder by simply clicking on it or dragging it to the widget area where you wish to add the Global template.

Once you add it to the preview area, you can edit the widget globally and update it everywhere the widget has been used.

Alternatively, you can click the Unlink button to separate the one you imported from the Global widget. Doing this allows you to edit and update the widget only on that page. The Global widget, however, will remain untouched.

Note: This feature is available with Elementor Pro. So you’ll need to upgrade to the premium version of Elementor before you can use it.

Add Global Settings

If you have multiple pages on your WordPress site that’ll use the same layout and elements, you can use the Global settings feature to create a default layout for your pages.

Global Settings allows you to set fonts and colors, theme styles, layouts, make changes to your site identity and lightbox, etc. Basically, your website’s global elements are controlled from one place.

To open the Global Settings menu, click on the 3 horizontal lines icon within the Elementor builder.

Under the “Settings” section, select the Site Settings option.

You’ll find various customization options on the Site Settings panel.

With Global Colors, you can set default global colors (Primary, Secondary, Text, Accent) or select and save your own.

The Global Fonts feature makes setting default fonts and typography styles easy through Elementor’s Site Settings.

Theme Styles allow you to control your website’s design (buttons, headings, backgrounds, contact form fields, image styles, etc.)

Go ahead and use the settings in this section to create standards for your whole site.

Use Revisions to Revert Changes

Elementor keeps a revision history of your designs, so you can easily go back to a previous version if needed. This is useful for undoing any changes you don’t like or that cause problem with your design.

To quickly access the revisions settings, click on the Revisions icon at the bottom of the sidebar.

It’ll open up a section that contains all the recent actions you’ve done since you opened the editor. You can click on any of them to revert the changes made.

On the Revisions tab, you’ll find the versions at each point where your Elementor changes were saved. At the top, it’ll contain the current version. As you scroll down, it shows older versions of the changes.

The revisions will also show the author that made the change on the Elementor page. If you’d like to revert your changes, simply choose an earlier version from the Revisions menu.

You can access this feature on the free and premium versions of Elementor.

Copy and Paste Sections and Styles

If you have a section on your Elementor page that you’d like to reuse, you can copy the section and paste it on a different page in the Elementor builder.

If you’d like, you can also paste the styles you copied from another section into a new one. This would save you from repeating customizations on all your Elementor sections.

To copy a section, right-click on the section you’d like to copy. It’ll open available options. Click on Copy to copy the entire section.

To use the widget you just copied, scroll to the section you want to add it to, then right-click and click on Paste.

If you’d like to paste only the styles, right-click and choose the Paste Style option.

It’ll add any customization you’ve set up on the widget to the new widget.

Custom CSS – Pro Elementor Tip

The custom CSS class option allows you to add CSS styles to any element on your page. This is useful for fine-tuning your design and adding custom effects. You’ll find this option useful if you are a tech-savvy user.

To add custom CSS in Elementor, you’d need to click on the section where you wish to apply the custom CSS.

Next, click on the Advanced tab on the sidebar menu to access more options, then scroll down and click on the Custom CSS option.

Within the textbox, you can add custom CSS styles, and it’ll reflect in the Preview section.

Please note that this feature is ideal for users with some knowledge of CSS. If you are not tech-savvy, you can still utilize the drag-and-drop builder to build your Elementor website.

Note: This feature is only available with the premium version of Elementor.

Background Carousel (Image Slideshow)

With Elementor, you can select images that’ll display on the background of a section. This is helpful if you want to add a slideshow in the background while maintaining the content of that section.

The background image slideshow works like an image carousel added to a page.

To add a slideshow as the background in Elementor, click on the Edit section icon. It will open up options for this section on the left sidebar.

On the left panel, click the Style tab and select the Slideshow icon.

From there, you’ll be able to choose images from your media library. To add images, click on the plus icon. It’ll take you to your media library, where you can either upload new images or select existing images.

After selecting the images, click on the Insert gallery button.

It’ll add all the images you selected and display them as a slideshow.

There are options available to further customize how the slideshow works. You can change the duration, animation, background size, and position of the images.

You can access this feature with the free version of Elementor.

Add Parallax Effect To Images

Parallax scrolling is a technique that’s used to create 3d effects on your page. With parallax effects, some elements will appear to move faster than others. This gives the users a stunning experience while browsing through your page.

To enable parallax scrolling effects in Elementor, click on the section you’d want to enable it on to open the available options.

On the sidebar menu, click on the Advanced tab, then select the Motion Effects tab. From here, toggle the Scrolling Effects option to the ON position.

Once you enable scrolling effects, it’ll open additional options. Each available option will add effects as you scroll past the widget area.

You’ll see a preview of how it works in the preview area while editing your page. Be sure to update your changes after adding the scrolling effect.

Note: Scrolling effects is an Elementor pro tip, accessible to premium users only.

Replace URLs – Elementor Tips

Elementor has a find-and-replace feature that allows you to update links on your website. This can be useful when you migrate from an insecure HTTP connection to a secure SSL (HTTPS) connection.

To access this feature, log in to your WordPress dashboard and then go to Elementor >> Tools.

Then click on the Replace URL tab. Here, enter the old and new URLs in their respective boxes. Once you’ve done that, click the Replace URL button to update your links.

Extend Elementor With Third-Party Addons

Elementor is a robust plugin that’ll likely contain all the features you need to get your website up and running. However, there are many addons for Elementor that you can use to extend the features of the plugin.

For instance, if you’d like to design navigation menus on Elementor, you can use the Sticky Headers and Menus addon to enable the Elementor plugin to manage your site navigation from the drag-and-drop builder.

There are free and premium addons for Elementor that you can download from the Elementor marketplace.

You can use this link to access and download Elementor Addons.

Frequently Asked Questions

Below are responses to some of the questions Elementor web designers ask about using the plugin.

What is the best way to learn Elementor?

The best way to learn anything online is by practising how to use it. You may make mistakes at first, but that’s part of the learning process. The more you practice, the better you’d become at using Elementor. You can also read guides like this one, or consult online tutorials to speed it up.

Is Elementor Pro worth it?

It depends on your use case. If you want to use Elementor to design your website without all the extra features, then there is no need to opt for the pro. Also, if you’re tech-savvy and like the manual approach, you can implement some Elementor pro features by writing some lines of code.

However, if you need more design flexibility without having to write code, then opting for the pro version of Elementor can be beneficial. It gives you access to premium resources and features we explained in this guide.

Conclusion – Elementor Tips

There you have it! 14 useful tips to streamline your Elementor workflow. These tips for Elementor work for beginners as well as seasoned web developers.

Elementor is a feature-rich plugin. While this is great, it could have the side effect of slowing down your website. If you’d like to speed up your Elementor website, be sure to check our speed optimization guide for a complete tutorial.

And if you’d like to learn how to use Elementor to build a complete business website, check out our ‘how to make a business website in WordPress’ guide.

The post 14 Elementor Tips You Should Know About appeared first on FixRunner.com.

Do you want to change your WordPress sites’ homepage? As a website owner, having a good homepage is crucial for your site.

Thankfully, WordPress provides different solutions to help you create a customized homepage to suit your brand. And the process is pretty simple.

This article covers what a homepage is, its importance, and different ways to change and customize your WordPress sites’ homepage. Let’s dive in.

Content:

• What is a Homepage?
• How an Ideal Homepage Should Look
• Changing Your WordPress Homepage
• Creating a Custom Homepage for WordPress
  • Change your Current Theme
  • Using the WordPress Theme Customizer
  • Edit the Homepage Using the Block Editor
  • Using Classic Editor
  • Bonus Tip: Using Page Builder Plugins
• Build a Menu for your Homepage
• Conclusion

What is a Homepage

Your homepage is like your site’s reception area. It is the first page your visitors see when they type in your site’s URL.

A good homepage design not only attracts visitors but also makes them explore your products and services and possibly, make a purchase.

Therefore, your homepage design should be as welcoming and engaging as possible. Remember, you’ve got only one chance to make a first impression.

Here is a newly installed WordPress site with the twenty twenty-two default WordPress theme.

You will agree that this looks basic and unprofessional. Thankfully, you can change it into a beautiful page that introduces users to your business.

How an Ideal Homepage Should Look

Before customizing your WP homepage, you should at least know how an ideal homepage should look. We’ll introduce you to the most important elements every homepage should have:

Logo

A well-designed logo distinguishes your brand from the rest. You can use an online logo maker tool or hire a professional designer to help you design your site logo.

Headline

A visitor should know what your website is all about from a glance. Therefore, clearly and simply, state what you have to offer.

Subheadline

This further describes what you do. You should keep this simple as well.

Call To Action

What would you like your visitors to do? Fill out a contact form? Subscribe to a monthly newsletter? Whatever it is, state it clearly.

Make sure the CTA button stands out from the other elements on the page. You can do this by using contrasting colors as seen in the image below.

Supporting Image

Most people absorb visual information more than texts. Use an image that describes what you do. Avoid stock images or copyrighted images.

Navigation Menu

This will help users navigate through your website and reduce bounce rates. Therefore, you should place it at the top of your website where users can see it easily.

Benefits

Your visitors want to know what they stand to gain. So give details of the benefits of working with you.

Testimonials

Testimonials are a powerful means of stimulating trust in potential customers. It lets them know you are capable of delivering on your promise. So after an incredible transaction with a client, do not forget to get a review and add it to your homepage.

Changing the WordPress Homepage

Now that you know how an ideal homepage looks, let’s look into how to create a custom homepage for your website. By default, WordPress displays blog posts on the homepage. This is ideal if you are running a WordPress blog.

To make your site professional, you need a static homepage that describes who you are, and what services you offer.

So to change the WordPress homepage, you need to create two new pages. One page is for the homepage and the other for your blog page.

For this, log into your WordPress admin dashboard and click Pages >> Add New:

Name the new WordPress homepage. We’ll name ours ‘Home’. Hit the Publish button once done.

Don’t bother about its layout for now. We’ll explain how to customize your homepage further in the next section.

Adding a Separate Blog Page

If you want to run a blog on your business website, then you need to create a separate blog page to display your blog posts.

Once again, go to Pages >> Add New and create a page titled ‘Blog’. Go ahead and publish the blank page.

After creating the pages, you need to update your WordPress settings to use the new pages for your home and blog pages.

On your WordPress dashboard, go to Settings >> Reading. From here, select the ‘A static page’ option next to ‘Your homepage displays’. After that, you need to select the home and blog pages you created earlier.

Remember to click on the Save Changes button to store your settings.

While performing these steps, it is advisable to put your site into maintenance mode. Doing this will prompt an alert message to inform visitors about the updates being made. It is also done to keep your website from appearing broken or giving a generic error page.

Also, if your site already has some traffic coming from external sources, doing this will prevent your site’s rankings from being affected.

You can use the WP Maintenance Mode plugin to set this feature up:

WP Maintenance Mode

This responsive plugin allows you to create a page informing site visitors that your site is under maintenance. The plugin also allows you to create a countdown timer to show when the site will be live.

Creating a Custom Homepage for WordPress

After you have created a custom homepage, the next step is to design the page. Keep reading, as we will be showing you different tools you can use to achieve this.

Change Your Current Theme

This solution is suitable if you just started building your site. There are many themes with homepage templates that you can simply import and modify to suit your needs.

One great example is Astra. This theme comes with tons of templates for business. You will almost surely find one to suit your needs. Here’s how to change your theme.

From your admin dashboard, head on to Appearance >> Themes. Click the Add New button at the top next to “Themes”.

On the “Add new” page, search for the Astra theme. However, if you want more theme options, browse through the free themes and check the demo to see what the homepage will look like.

After you’ve selected a theme, click on the Install button. Once it has been installed, activate the theme by clicking the Activate button.

You can go on to customize the new theme you just installed.

Using the WordPress Theme Customizer to Change Homepage

Another way you can change your site’s homepage is by using your themes’ built-in tools to edit it. These tools can be accessed via the Theme Customizer.

To launch the tool, click on Appearance >> Customize in your admin area. This will take you to the WordPress live customizer. This tool lets you edit your homepage and also shows a live preview of the changes being made.

Side note: Theme customizer options may vary from one WordPress theme to another. However, some settings are common among them.

To edit any part of the homepage, navigate the menu tabs or click the blue pencil icon next to an element. When you click the pencil icon, the customization options become available on the left side of the screen. In the image below, we edited the site tagline at the top of the homepage:

You will see your changes taking effect in real-time on the preview panel. However, they will not reflect on your website until you hit the Publish button.

Go ahead and explore other options like adding your site logo, background images, sidebar widgets, etc. Remember to click the Publish button to save the changes on your website.

Edit the Homepage using the Block Editor

You can also customize the homepage from scratch using the WordPress block editor. For this tutorial, we will be using simple blocks to edit the homepage.

To begin, go to Pages >> All Pages and place your mouse over the homepage you created. Underneath the page name, click the Edit link. This will open the block editor.

Once you’re on the page, you can start by writing an introductory message about your WordPress site using the default paragraph block.

To add a new block, click on the Plus icon on the editor and then select the block you want to add. You can also use the search box to search for a specific block.

On the right side of your screen is the sidebar which has two tabs – Page and Block tabs. On the “Block” tab, there are different settings to explore. In the “Typography” section, you can change your font size by selecting from the presets or a custom size.

Next is the color settings section. Here you can change your text color and the text background color. Choose from the set of predefined colors or use a custom color.

Under the text settings section, you can add a drop cap to your text.

Adding an Image to the Homepage

To add an image to your page, click the Add Block (plus) icon at the top left corner of the editor. This will reveal all available blocks that WordPress supports.

Select the image block from the section. You can also use the search box to find the block you need.

After adding the block, you can either upload an image from your pc, select it from your WordPress media library, or add it via a URL.

Once the image has been added, use the toolbar above the block to make needed adjustments. For more image settings, click the 3 dotted lines, then select Show more settings to open the sidebar.

From the block settings, you can change your image style and size, add alt text and title attribute, and also add a link to the image.

Adding Image and Text Block

If you want to add an image and text side by side, you can use the “Media and Text” block. Using the process shown above, add the block, and insert your image in the media area and the text in the box next to it.

If you wish to remove a block, simply click the 3 vertical dots on the toolbar. Scroll down and select Remove block.

The block editor provides tools to help you create an amazing homepage. So keep adding as many elements as you desire using the blocks in the editor. After creating your perfect homepage, preview to see how it looks, then click the Update button to save your edits.

And that’s how you customize your homepage using the Gutenberg editor. To know how to use it like a pro, check our detailed tutorial on the WordPress Gutenberg editor.

Note: If you are using a block theme on your WordPress site, you will have access to Full Site Editing features that come with WordPress 5.9 and higher. You can learn more about this in our WordPress 5.9 guide.

Using the Classic Editor to Change Homepage Content in WordPress

If you prefer using the classic editor, this is for you. From the admin dashboard, click on Pages >> All Pages. Next, click on your homepage to open it for editing.

On the editor’s page, the text you type will be a paragraph by default. However, you can format the text using the style drop-down menu. Simply highlight the text you want to format, then click the drop-down menu to expand it.

From this menu, you can format your text into different headings and other predefined styles built into your theme.

Next to the style menu is the text toolbar. With it, you can bold your text, italicize it, add bullet points, insert/edit links, align and change text color and much more.

You can also add images with the classic editor. For this, click the Add Media button above the toolbar to open up the media library.

To upload a new image, click the Select Files button on the “Upload Files” tab. Otherwise, select an already uploaded image by clicking on the Media Library tab. After selecting the image, click the Insert into page button.

Once the image is on the page, click on it to reveal the toolbar. This is where you adjust the image alignment. For more edit options, click the pencil icon on the toolbar.

This will open up a new window. There, you can input alt text, title attribute, edit the image size, etc. After making your changes, click the Update button at the bottom of the window.

Keep previewing each change made to your WordPress homepage. Once you are satisfied with its appearance, click the Update button to reflect it on the site.

Bonus Tip: Using Page Builder Plugins

The default WordPress page builders have good features. However, if you want a robust tool with more options, then you need a page builder plugin such as Elementor or beaver builder to design your homepage.

These plugins have a drag and drop feature that let you add elements to your page easily. You will also see your changes taking effect in real-time.

If you want to use Elementor to design your homepage, then check this official guide on how to use the page builder plugin.

Build a Menu for your WordPress Site Homepage

Another important element that you should consider adding to your homepage is the Navigation menu. This is necessary as it makes your website easily navigable for your visitors. The navigation menu also gives new users more time to explore your site, thus, increasing conversion rates.

From your WordPress admin dashboard, go to Appearance >> Menus. If there are existing menus, simply go ahead and edit them. For this tutorial, we will be creating a new menu.

To begin, click the create a new menu link. Under the “Menu structure” section, type the menu name in the text field provided then click the Create Menu button below.

You can check the “Auto add pages” box under “Menu settings” to add top-level pages automatically.

To add the menu items individually, expand each section and select the View All tab. Check the box next to the menu item you want to add and click the Add to Menu button after making your selections.

Once the menu items have been added, determine the order they will appear by dragging and dropping them in place. After that, select the location you want the menu displayed under the “Menu Settings” section and click Save Menu.

Go ahead and repeat the same process to include posts, custom links, and other menu items of your choice. You can also check our article for a more detailed guide on navigation menus.

Conclusion – Change WordPress Homepage

To sum up, the design and content of your homepage play a huge role in the success of your site and business. You should spare nothing to get this page up to par.

This article has provided you with tips to help you create a customized homepage. You can choose from one of the different methods listed above when designing your homepage.

We hope you found this guide helpful for editing your WordPress homepage. If you have any questions, do leave a comment below. For more WordPress tips, check out our wp college.

Recommended reading:

• White label WordPress support for agencies

The post How to Change Homepage on Your WordPress Website appeared first on FixRunner.com.

The WordPress platform comes with a lot of features out of the box. However, there are times when you need better performance and more flexibility on your website. In such a scenario, converting your WordPress site to a headless CMS is a great solution.

Don’t worry if the whole concept sounds like rocket science to you now. This guide will explain in detail what headless WordPress is all about. Then we will show you how to use it in WordPress.

Content:

1. What is Headless WordPress?
2. Pros and Cons of Headless WordPress
3. How WP Headless Works
4. How to Create a Headless WordPress Website
5. Conclusion

What is Headless WordPress?

WordPress is one of the most popular content management systems available. A CMS is a complete software solution that provides the tools you need to manage your content online. This includes both frontend and backend implementation.

The backend takes care of retrieving your WordPress data from the database and sending that data to the user’s browser as content. The frontend is what your users see when they visit your WordPress site.

The concept of headless CMS was brought about in a bid to make sharing content easier. Headless CMS makes use of Microservices architecture. This means you are decoupling your WordPress installation into its frontend and backend components.

When decoupled, you can host your backend and frontend on separate servers. That gives you the flexibility to customize your website using any frontend framework.

WordPress core does not come with a headless CMS by default. However, using the REST API that comes with WordPress, you can turn your WP installation into a headless content management system.

The backend and the REST API retain the default WordPress interface. This means you can add content and perform other administrative tasks from the familiar WordPress dashboard.

On the other hand, the frontend is no longer dependent on WordPress. This means your WordPress theme is disabled, but you have more flexibility in choosing any frontend framework to build your website.

Examples of headless WordPress sites can be seen on some major brands such as Techcrunch, Facebook Brand Resources, Uber Brand Experience, NPM, amongst others.

Pros and Cons of Headless WordPress

Headless CMS architecture gives you more flexibility and control over the way you publish and display content on your website. However, it also has some drawbacks that are worth mentioning.

In this section, we will discuss some of the pros and cons of using headless architecture on your WordPress site. That way, you can make an informed decision on whether or not to implement it on your website.

Pros of Headless WordPress

Multichannel Content Publishing

Publishing content using traditional WordPress can be challenging because you are restricted to the number of platforms you can use. However, with headless architecture, you can publish your content on any platform while using a single WordPress backend.

The REST API makes it easy to integrate a WordPress site on platforms such as mobile apps, desktop applications, Single Page Applications (SPAs), and Progressive Web Apps (PWAs).

Programming Language Flexibility

Vanilla WordPress is built using PHP and a little JavaScript. This means, to become a WordPress developer, you need to be familiar with PHP.

After separating the backend from the frontend using headless WordPress, you can build your website using any programming language you are comfortable with.

This means you can combine WordPress with frameworks such as Django, React, Vue or Angular. In addition, you can build mobile applications using tools such as Flutter or Swift.

Improved Security

WordPress is a secure platform and also allows you to improve the security of your site using security plugins. However, WordPress uses a monolithic architecture where both frontend and backend sit on the same server. Your server is at risk with this type of implementation.

WP headless enables you to decouple your WordPress site and host the frontend on a separate server. This headless approach means only the frontend of your site is accessible to the general public. Therefore, that makes it difficult for hackers to access sensitive information on your site.

Fast Loading Website

When you separate your frontend from the backend, it relieves your server of some duties, thereby speeding up your site.

Additionally, when you integrate your WordPress site with a frontend library such as React, it will significantly improve your sites’ loading time.

This is because React uses Single Page Application (SPA) architecture that prevents sites from loading in the background when retrieving data from the server.

Easily Switch Frontend Framework

By decoupling your WordPress site, you can easily integrate it with any frontend framework as we mentioned earlier. In addition, it makes it easy to switch to a different framework because you don’t have to make any changes on the server.

It also simplifies the workload since you only have to be familiar with the frontend framework or hire a frontend developer.

Cons of Headless WordPress

WP headless appears to be the future of WordPress due to its numerous advantages. However, there are also drawbacks to using this system on your website. Here are a few of them;

Large Learning Curve

Before you can start using headless WordPress on your website, you need a solid understanding of how REST API works. In addition, you need to know how to fetch and consume data from REST endpoints.

This requires a lot of work and time to understand. Unless you are already a developer, you are better off using the vanilla version of WordPress. Otherwise, you would have to hire a professional developer.

No Live Preview and WYSIWYG Editor Functionality

WYSIWYG is short for What You See Is What You Get. In WordPress, this means the way your content appears on the Gutenberg block editor is the way it would appear on your site’s frontend.

This is one of the features that ranks WordPress as one of the best CMS in the world. In addition, WordPress also has a live preview feature that shows you how your site looks when editing or adding sections to your website.

If you decouple your WordPress CMS, you lose access to both the live preview and the WYSIWYG editor. This means you must manually check every change you make by previewing on the browser which can be time-consuming.

Requires Extra Technical Knowledge

Decoupling WordPress in most cases means you want to build your site manually. To build the frontend requires that you are familiar with at least one frontend framework.

If you are not tech-savvy, it may be difficult for you to use this technology on your website.

Also, before using WP REST API, you need to have some technical knowledge of how web technologies work in general.

No More Themes and Plugins

Themes and plugins make WordPress fun and easy to use, especially for beginners. When you switch to a headless WordPress platform, you lose access to these features.

This means you have to manually build out any functionality you want to have on your website, which can be complex and time-consuming as opposed to using plugins and themes.

In addition, implementing authentication will become complex since you have to build out the logic to authenticate users on your website.

High Maintenance Cost

Most times you would need to hire a frontend developer to assist with making updates on your site if you are not tech-savvy.

Because the frontend is built manually, any change you want to make has to be manually implemented as well.

If your business does not have a tech-savvy individual, it means you have to pay extra to hire a frontend developer that will perform daily maintenance on your website.

How WP Headless Works

Before implementing headless WordPress on your site, it is important to learn how the system works. Headless WordPress is similar to a decoupled architecture because both separate the frontend and the backend of a CMS.

However, in headless, you are not confined to a particular frontend technology like that of a decoupled CMS.

In a headless WordPress setup, the backend uses the traditional WordPress admin panel for adding and managing content on the CMS.

An API is then used to fetch data from your database. You can display the data from the API on your frontend website or any channel you want to publish your content.

A headless WordPress site is implemented using the WordPress REST API. The API is responsible for sending and retrieving data from the backend server to the frontend.

Fortunately, WordPress API makes the process easy for developers. To further simplify things, you can use WPGraphQL to implement wp headless on your site.

The WordPress API provides endpoints that you can use to access any aspect of your website, such as posts, pages, users, or custom post types.

How To Create a Headless WordPress Website

Now that you are familiar with the architecture behind the wp headless, we will show you how to use it in a WordPress installation in three easy steps.

Step One – Configuring a Custom Redirect

This step involves setting up a redirection from your WordPress homepage to the URL of your new frontend implementation.

You can set the redirection manually or using a WordPress plugin. Here, we will use the Headless Mode plugin to handle the redirection.

This plugin lets you add a destination URL in the wp-config.php file, though you have to access your WordPress hosting server to do this. After adding the URL, the plugin will redirect all users trying to access your website to the URL you specify.

It will only allow requests from WP REST API or WPGraphQL. This enables you to get data from your backend through the API.

To get started, you need to install and activate the Headless Mode plugin on your WordPress website. Please check this guide for steps on how to install WordPress plugins.

After activating the plugin, you need to add a piece of code to your wp-config file.

For this, connect your site to an FTP client such as FileZilla. Learn how to do so here.

Once connected, on the right side, navigate to the directory containing your site files (usually public_html).

Here, right click on the wp-config.php file and select View/Edit. Select a text editor to open the file.

Next, add the line of code below into the file.

define( 'HEADLESS_MODE_CLIENT_URL', 'https://mysite.com' );

Ensure you replace mysite.com with the actual frontend address. Save the changes, you will be prompted to override and re-upload the file.

Now anyone trying to access your website will be redirected to the new address you specified on the config file. This can be a static site for now. The backend remains untouched, meaning you can still perform administrative tasks such as adding posts or pages from your WordPress dashboard.

Step Two – Fetch and Display Content Using API

Now, you have successfully converted WordPress into a headless CMS. The next step is to retrieve content from the backend and then display it on any channel you intend to use.

You can use the WordPress REST API for this purpose. Other options such as WPGraphQL are available as well, however, we will stick with the WordPress API in this guide.

To start, simply enter your site address and then add ‘/wp-json’ to the address bar. The URL should look similar to the one below:

https://mysite.com/wp-json

Replace mysite.com with the address of your WordPress blogs’ backend. Once you open the page, it will show your entire WordPress site in JSON format.

To access your posts, change the URL to the one below:

https://mysite.com/wp-json/wp/v2/posts

This will display an array containing all the posts on your WordPress site as JSON data. Each post data will have all the parameters such as the post_date, author, post_title, etc.

You can then display the response from the JSON API calls on your sites’ frontend using JavaScript frameworks such as ReactJS, or any other frontend technology.

Like we mentioned earlier, you need some technical knowledge to use the WordPress API. You can check our WordPress API guide for more details on how WP REST API works. The guide will show everything you need to know about the API.

Step Three – Building Your Website

This section involves building the website from scratch using your desired frontend framework. You can also use a static site generator such as Gatsby to build the frontend of your website.

Note that you need to be a proficient frontend developer to consume the data from the WordPress API. Otherwise, you would have to hire a frontend developer to spin up your web pages.

There are many frontend frameworks you can choose from such as React, Vue, Angular, or Gatsby. React is popular amongst them because of its lightweight design and speed.

When implementing your frontend, you will have to fetch data from the REST API and then render the data on your webpage.

React JS has a boiler template (create-react-app) that you can use to start developing your headless WordPress React website. You can check the official documentation for more information.

After developing the website, you can host it on the same server as your backend or host it on a separate server. When users visit your site, the custom-built frontend site will be displayed to them.

In the background, the API will fetch your content from the database and then the frontend takes care of displaying the content to your users.

Should You Use Headless WordPress?

There is no right or wrong answer to this question. Depending on the scenario, using WordPress as a headless CMS can be beneficial to your brand.

For instance, if you want to build a multichannel content publishing website, WP headless is a good solution. It makes the process easy because you can use one data source (REST API) for each of the applications.

Meanwhile, if you are creating a website for a client that is not tech-savvy, think carefully before using headless WordPress architecture. Using it will make managing the website difficult.

While headless wp seems to be the future, it may be overkill especially when you just need a simple site to manage your WordPress content.

So if you decide to use WordPress headless, we have shown you how to get started and how to apply the concept to your site. We hope you find this guide helpful.

The post Headless WordPress – Complete Guide on How to Use it For Beginners appeared first on FixRunner.com.

A background image is a picture or design that is placed behind the content of a page to beautify the page. And there are different ways of adding background images to WordPress websites.

In this guide, we will show you three ways to do this quite easily. But before that, let’s discuss some of the benefits of WordPress background images. Of course, if you simply want to learn “the how”, skip to that section.

Content:

1. 1. Why Add Background Image
   2. Cons of Adding Background Image
   3. How to Add Background Image 
      • Default Theme Option
        • Cons of Default Theme Option
      • Using WordPress Plugins
        • How to add Background Image in WordPress using Elementor
        • Adding Background Overlay
        • Advanced WordPress Backgrounds (AWB)
          • How to use AWB Plugin
      • Manually add Background Image using CSS
        • How to add Background Image in WordPress Pages
        • Add Background Image on Post Pages
        • Adding Background Image to Category Pages
   4. Conclusion

Why Add Background Image to WordPress

Simply put, they beautify your website. Having an image display on the background of your site adds some aesthetics and professionalism, as opposed to using a plain background throughout your site.

In the past, people tried to keep their website designs as simple as possible. While that worked well at the time, things have since changed. With the number of websites increasing globally, ensuring you stand out amongst the competition is important.

One way of achieving this is to improve your websites’ design. Using a background image does just that for your WordPress site.

Cons of Adding Background Image

As with everything that has advantages, there are also bound to be downsides if not used properly. Below we will discuss some of them.

Firstly, some background images may appear totally out of place and disrupt the content of your page. This would result in users missing the message you intend to deliver on your page.

Secondly, background images that are not mobile responsible may affect the mobile usability of your website. Most users access the internet from their mobile devices. And for this reason, mobile friendliness should be your primary concern as a website owner.

Lastly, if you are using an image with a large file size, this may increase the loading time of your website. Consequently, an increase in loading time can lead to high bounce rates, which in turn could affect your page SEO.

Of course, you can avoid this by using an image compressing plugin or simply compressing the image online before uploading it to your website.

How to Add Background Image on Your WordPress Posts and Pages

There are three ways to add a background image to WordPress sites. Those are either using the default theme option, with plugins or using custom CSS codes. Below, we will show you how to use each of them.

Default Theme Option

Some WordPress themes have support for using an image as the background of your pages. If your theme supports it, you can enable it from the customize page on your admin panel.

To start, login to your WordPress dashboard and then go to Appearance >> Customize. This will bring up the WordPress theme customizer page.

On the right, you will see a live preview of your site with the recent changes. The left panel contains the various customizations your theme provides. To set the background image, click on Background.

On the “Background” menu, you can either use an image or colors for your background. To use an image, click on the Select Image button.

Next, select an image from your WordPress media library. To upload a new image, select the “Upload files” tab. Then click on Select files and choose the image from your computer.

After uploading the image to your site, click on the Choose Image button.

To change the image size and display, click on the “Preset” dropdown and select from the options available. You can test each option to determine which works best with your image.

Under “Image Position”, you can choose the angle you want to align the image with. When you are done customizing the image, click on Publish to effect the changes.

You can visit any page on your website to see how the background looks.

Cons of Default Theme Background Option

The downside to using the default background option provided by most themes is that it does not provide a lot of flexibility and control over how the background images look on your pages.

Additionally, the background image is applied globally on your entire websites’ posts and pages. So if you want to use a different background for other pages and posts, you may find it difficult.

Fortunately, with WordPress plugins for adding background images, you get a lot of control and flexibility in adding a background photo to any section or page on your site.

Using WordPress Plugins

If your theme settings does not have an option to add a background image, you can use a plugin to add it. In this section, we will show how to do so using two plugins.

How to Add Background Image in WordPress Using Elementor

Elementor is one of the most popular drag and drop page builder plugins for WordPress. The plugin comes with a lot of features that let you build a complete website using an interactive dashboard without having to write a single line of code.

Here, we will use the Background feature to add a background image to sections on a WordPress website.

To start, you need to install and activate the Elementor plugin from your WordPress dashboard. Read our how to install WordPress plugins guide for help with this.

After activating the plugin, you can use the intuitive dashboard to edit your WordPress posts and pages.

To start, go to Pages >> All Pages and then select Edit below the page you want to modify.

On the page editor, click on the Edit with Elementor button to open the dashboard.

The Elementor dashboard is packed with a lot of features to help you edit any section on your website. You can add texts, headings, images, videos, etc. from the “content” tab.

Say we want to add a background image to a section on your page, click on the six-dot icon to highlight the entire section as seen below.

On the “Style” tab, click on the Background dropdown. Next, select the pen icon and then click on Select Image.

Now choose an image from your WordPress media library or upload a new image.

Adding Background Overlay

After selecting the image, you can add a background overlay so that the image doesn’t disrupt your content. For this, click on the Background Overlay dropdown.

Then select the color you want to use in the “Color” section.

When you are done adding the image and effects, click on the Update button to save your changes.

With this method, you can add unlimited background images to any section or page of your website. Simply select the page, then edit with the Elementor plugin and add your background image.

Advanced WordPress Backgrounds (AWB)

Another plugin you can use to add background images in WordPress is the Advanced WordPress Backgrounds plugin.

Asides from adding background images, you can also use a video as your background element. The videos can be from your media library, YouTube, or Vimeo videos.

There are also special effects you can apply to your images such as Parallax scrolling effects. Here, we will focus on adding a background image, but if you want to learn more about background effects, check our detailed guide on adding parallax effects in WordPress.

To start, you need to install and activate the plugin from your WordPress dashboard. For this, go to Plugins >> Add New. On the search box, type “advanced WordPress backgrounds”. Next, hit the Install Now button and activate the plugin after the installation completes.

How to Use AWB Plugin

To use this plugin, go to Pages >> All Pages. Then select Edit below the page you wish to add the background.

On the editor, click on the Add Block icon, and then type ‘awb’ in the search box. When it appears, select the Background (AWB) block.

Next, select the type of background you want to add on the right side. You can use background colors, images, or videos. Select the “Image” tab and click on Select image.

After that, choose an image from your media library.

You can change the size of the image and background using the “Size” and “Background size” options respectively.

After adding the image, click on the Update button to save your changes.

If you are using the Classic editor, navigate to the page or post you wish to add a background image.

Once there, click on the Advanced WordPress Backgrounds icon.

On the ‘General’ tab, click on the Background Type dropdown and then select the Image option.

Next, click on the Select Image button and then choose an image from your WordPress media library.

You can update the size of the image and the position as well. If you want to add an overlay, click on Select Color below “Overlay Color”. Next, choose the color you want to use.

And now, click on Insert after customizing the background image.

This will generate a shortcode and automatically insert it into your editor. Within this shortcode, you can enter the text you wish to display on the background image.

Once done, hit the Publish/Update button to effect the change. Now you can view the page on your website to see how the background image looks.

Manually Add Background Image using CSS

If you are more technically inclined, you can use custom CSS codes to add custom backgrounds to your pages and posts.

Using custom CSS gives you a lot of flexibility and control over the appearance and placement of the images.

There are many background image placements available using the CSS method. First, we can create a global CSS background image that will show on all pages. Much like the option provided by some WordPress themes.

Alternatively, we can add category-specific background images, or create a CSS class with the background image. Then you can apply the class to individual posts and pages.

Note: This section requires basic knowledge of CSS and how CSS classes work. If you don’t have the experience, you can use the plugin method above.

To start, go to Appearance >> Customize from your WordPress dashboard. This will open the theme customizer menu.

After that, select the Additional CSS menu.

On the “Additional CSS” box, copy and paste the code below.

body {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Ensure you replace example-image.jpg with the URL to the image you want to use as your background image.

You can upload an image from your media library or use royalty-free images from stock image websites. Click on Publish once done.

The code above will set a global background image for all the pages on your website. But you can use separate background images for categories, pages, and posts. Below we will show you how to do it.

How to Add Background Image in WordPress Pages

WordPress automatically creates separate classes for pages, posts, and other content types. To find this class, simply open a page from your website on the browser. Then right-click and select Inspect to open the Developer Options.

On the <body> tag, you will see the list of classes for that page.

Usually, the class name should be ‘page’ but may differ depending on your WordPress theme.

After copying the class, head back to the ‘Additional CSS’ submenu under the Theme Customizer page.

Now copy and paste the code below into the box.

.page {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Replace .page with the CSS class you got from the Developer Menu on your browser. Also, replace the background image URL with the link to an image from your WordPress media library.

Hit the Publish button once done.

Add Background Image on Posts

This works similarly to the pages we just set in the section above. Firstly, open a post from your website on the browser.

After that, open the Inspect tool and locate the class on the <body> tag of the page. In my case, it is ‘single-post’.

This class is used on all the posts on your website. So the customizations you apply will be global to your post pages.

To add a background image for posts, head back to the theme customizer page, then copy and paste the code below into the ‘Additional CSS’ box.

.single-post {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Similarly, replace ‘single-post’ with the class you find on the developer option of your post page. Next, replace the background image URL with an actual link to the image you want to use.

Lastly, hit the Publish button to save your changes.

Adding Background Image to Category Pages

When you create a new category on your website, WordPress automatically assigns a CSS class for that specific category.

The class is in this format “category-category-name”, where category-name is the name of the category. So if the name of the category is ‘dogs’, the class WordPress creates will be ‘category-dogs’.

Here’s a practical use case for this. Let’s say you have a category about dogs, you can use an image of a dog in the background, which appears when users are viewing a list of posts in that category.

This can easily be added using the class created by WordPress for categories. On the Theme Customizer page, go to the Additional CSS option and then copy and paste the code below into the box.

.category-category-name {

background-image: url("example-image.jpg");

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

Replace ‘category-name’ with the name of the category you wish to add a background image to. Also, change the background-image url to the link for the image you intend to use. Once done, click on the Publish button to save the changes.

With this method, you can use a custom background image for all the categories on your website. Simply replace the CSS class with the name of the category and then add the URL to the image.

While adding background images to individual posts or pages can give your content a unique look, it’s important to ensure that the added design elements do not slow down your site. WordPress care plans can handle the regular monitoring and optimization needed to keep your site running smoothly.

Conclusion

Depending on where you want to place the WordPress background image, one of the methods above will work on your site.

If you want to use a global background image across all pages on your site, you can use the option your WordPress theme provides.

But if you need more control and flexibility, using a WordPress plugin or custom CSS code will be your best option.

This guide has shown you different ways to add a background image on any page or section of your WordPress site.

For more WordPress tutorials, please check our blog with a vast collection of WordPress guides to help you manage your site effectively.

The post How To Add Background Image On Your WordPress Posts And Pages appeared first on FixRunner.com.

In this guide, we’ll walk you through the ins and the outs of the editor – how it differs from the old editor and how to use it like a pro.

Content

1. 1. The WP Block Editor
   2. Which is better? The classic editor or Gutenberg
   3. How to Use Gutenberg – The WordPress block editor
      • The Gutenberg editor interface
      • How blocks work in the new editor
      • Creating content with the Gutenberg editor
      • Saving and reusing blocks in Gutenberg
   4. Bonus tips
   5. How to add more blocks to the Gutenberg editor
   6. FAQs about the Gutenberg block editor
   7. Conclusion

The WordPress Block Editor

The WordPress block editor, also known as ‘Gutenberg’, was introduced with the WP 5.0 version in December 2018. It replaced the old classic editor which has been in use since the inception of WordPress.

Content creation in the new editor can be likened to the process used in building a house. You know building a house involves placing smaller blocks incorrect positions. Similarly, the Gutenberg editor works like that too.

Every post and page you create with this editor is made up of several blocks – paragraph block, image block, video block, gallery block, widget block, table block, and more. They add up into a beautifully arranged post or page for your visitors to read.

Most content elements (paragraphs, lists, images, tables, etc.) you need on your posts are already present in the editor.

You may also consider using a WordPress plugin to add more advanced blocks.

Which is Better? The Classic Editor or Gutenberg

Several WordPress users wonder if the editor upgrade was necessary. Well, let’s compare both editors.

The classic editor has an interface similar to the popular Microsoft Word. You simply type in (or paste) your content and format. The Gutenberg editor, as we mentioned earlier, uses a block-based approach.

Although the classic editor may seem easier to use, the WordPress block editor allows you to add any type of content to your posts and pages. For instance, to add a table to your post in the classic editor, you’ll need to install a table plugin.

The Gutenberg editor, however, simplifies this process. To add a table with the new editor, simply add a table block, choose the number of rows and columns you want. Then add content to the table.

Also, the block editor sometimes eliminates the need for shortcodes. For instance, if you need to embed a contact form on a post, instead of adding a shortcode, you can simply add the form plugin’s block. On the other hand, the classic editor would require that you use a shortcode to embed the form.

Lastly, the WordPress block editor allows for easy manipulation of content and lets you create content with complex layouts.

How to Use the Gutenberg Editor

Now that you know what the block editor (Gutenberg) is all about, let’s see how to use it to create great content. We’ll start with an introduction to the interface, and then move on to how to use it like a pro.

The Gutenberg Editor Interface

To access the editor, click Posts >> Add New in your WordPress admin if you intend to create a post. If you intend to create a page, navigate to Pages >> Add New menu.

This will open the block editor.

The Gutenberg block editor is a clean full-screen writing environment, with great typography and lots of space for your content to stand out.

As you can see, the editor has three parts:

1. Content: This is the largest part. This is where you type your content.
2. Sidebar: This is located at the right-hand side of your screen. It has two tabs – The Post tab (Page tab when working with pages) and the Block tab. The Block tab allows you to make changes to a selected block while the Post tab allows you to configure settings that relate to the entire post.
3. Toolbar: Located at the top of your screen, the toolbar allows you to insert new blocks and access other settings.

If you need a larger space, you can close the sidebar by clicking the ‘gear’ icon in the top-right corner of your screen. Click the same icon to bring it back.

How Blocks Work in Gutenberg

The first block on the editor is the title block. This is where you enter your post or page title.

The next block after the title is a paragraph block. You can get into the main post right away. Simply press the ‘Enter’ button on your keyboard or move your cursor below the title and click.

However, if you need to add another content element, click the ‘add new block’ button (+) located on the top-left corner of the editor.

Clicking the button will reveal many blocks you can add, so go ahead to select a block. If you need an image block for example, simply click ‘Image block’. You may also use the search bar located on the top of the menu to quickly find a block.

Each block has a toolbar that appears on top of it. In other words, the buttons in each toolbar vary depending on the block you are editing.

For instance, the screenshot above shows an image block. Above the block is a toolbar with basic formatting buttons like image alignment, crop image, insert link, and more.

Also, each block has extra settings located on the right side of your edit screen.

Further, you can move blocks by using the arrows located close to the block or by simply dragging the blocks.

Creating Content in The New WordPress Editor

The block editor does everything the classic editor could do and even better. Let’s see how to add images, links, tables, etc.

1. Adding an Image in the WordPress Gutenberg Block Editor

To clarify, the WordPress block editor comes with a ready-to-use image block. So simply add the block by clicking the ‘+’ symbol at the top-left corner of your screen. Then, scroll to find the image block and click on it.

You can choose to:

• Upload an image file from your local device.
• Select from the media library.
• Insert from a URL.

You may also drag and drop images from your computer. An image block will be created automatically for it.

After adding the image, you can use the block settings on the right side of your screen to add alt text, change the size, and add a link.

2. How to Add an Image Gallery in Gutenberg

Adding a gallery block is similar to the way you add an image block. The only difference is that you select the ‘gallery block’ instead of the ‘image block’, and you upload multiple images.

Then you can build your gallery by uploading new files or selecting files from your media library.

3. How to Add Shortcodes in WordPress Posts Using Gutenberg

Shortcodes help insert dynamic content quickly into your posts and pages. So to add a shortcode in the WP block editor, you can use the shortcode block.

You can also add shortcodes in the paragraph block.

5. How to Add an Image Next to Text in WordPress

In the classic editor, adding an image next to a text was impossible. On the other hand, this limitation has been fixed in the modern block editor. Therefore, if you need your text and media to stay side by side, use the Media & Text block.

Now you can add an image in the media area, and then add some text in the box next to it.

5. How to Add a Button in WordPress Posts and Pages

In the previous WordPress editor, adding a button was quite a pain in the neck. You either had to write codes or use a plugin that generated a shortcode for the button.

Thankfully, the new Gutenberg editor comes with a button block. This has removed the need for installing a plugin just to add buttons on a page or post.

Don’t forget to add text, adjust the color of your button as needed, and add a link. You can perform these functions using the toolbox located at the top of the block, and the button block setting on the right of the page.

7. How to Add Cover Images in Blog Posts and Landing Pages

A cover image is a wide image used for each new section in blog posts and pages. They help your content stand out. With the WP block editor, they are easy to add using the ‘Cover’ block.

Simply add a cover block, then upload an image file that is large enough, or select one from your library.

8. Creating Tables Inside Articles

This is one breakthrough the Gutenberg editor has brought to WordPress. Previously, WP users had to create tables using a plugin or by writing custom CSS and HTML.

With the default Table block in the new Gutenberg editor, all that is in the past. Simply add the Table block, choose the number of rows and columns you want, then click Create Table.

You can also choose from the two basic styles available from the blog settings on the right side of your screen.

9. How to Create Multi-Column Content

Inability to create multi-column content was another issue with the old classic editor. The block editor, on the other hand, allows you to add up to 6 columns in a row using the Columns block. You can also use other blocks within the column block.

This can be very useful for structuring content within your pages and posts as you design them. For instance, let’s say you are trying to create a page that lists your employees, with a profile picture, some text about the person, and a link to their social pages, websites, etc.

You can create 3 columns, 1 for each set of information you want to present.

Saving and Reusing Blocks in The WordPress Block Editor

The block editor allows you to save and reuse blocks. This means you can save a block or a group of blocks and use them later in another post or page.

If you frequently need to add the same content snippets to your pages and posts, this feature will save you a great chunk of time.

To save a block, select a block. Then click on the 3 dots at the top of the block’s toolbar. From the drop-down menu, select Add to reusable blocks.

Next, provide a name for your reusable block and click Save.

And that’s it, you have created a reusable block.

Now to add the reusable block in your posts and pages, here is what to do:

Open the post or page where you want to add the block for editing. Then, click on the add block (+) button.

You will find the saved block under the ‘Reusable’ tab.

Finally, click on the block to insert it into your WordPress page or post.

You can also manage your saved blocks by clicking Manage all reusable blocks.

This will take you to a page where you can edit, trash, or export any of your reusable blocks.

Bonus Tips

Having looked at how to add blocks in the WP block editor, it may seem as though the new editor consumes too much time. Well, here are some bonus tips to help you work faster with this editor.

1. You can move the block toolbar to the top.

As we mentioned earlier, each block comes with a toolbar at its top. You can move this bar to the top of your WP editor. This allows you to access all block and document tools in one place. To do that, click the 3-dot button at the top right corner of the screen. Then select the Top Toolbar option.

2. Keyboard shortcuts

The WP block editor comes with several shortcuts to make your workflow much better. One of them is the forward-slash symbol (/).

Simply enter / in the paragraph block. It will present a list of blocks that you can use immediately.

For more shortcuts, click on the 3-dot menu on the top-right corner of your screen. Then, choose ‘Keyboard Shortcuts’.

This will reveal a list of all the keyboard shortcuts you can use. Windows and Mac users have different shortcuts.

3. Drag and drop media functionality

The block editor allows you to just drag and drop image files anywhere on your screen and it will immediately create a block for you.

You can also drag and drop multiple image files to create a gallery block.

4. Classic editor block

Let’s say you want to add some content, and you wish you could just format it using the classic editor. Well, you can, using the classic editor block.

This block creates a section that works just as the classic editor does. So there’s no need for complaint. If you miss the classic editor, just use it.

Add More Blocks to Gutenberg Block Editor

The WordPress block editor is so flexible, you can add your own new blocks. Here are some plugins that can help you supercharge the block editor with more advanced blocks.

1. Ultimate Addons for Gutenberg

This plugin lets you add a couple of unique blocks without writing a single line of code. It comes with over 20 pre-built free starter sites using the Astra theme, Gutenberg, and the Ultimate Addons for Gutenberg. Each starter site can be imported in just one click.

2. PublishPress Blocks

Here is another powerful block library that allows you to extend the Gutenberg block editor.

It comes with over 20 extra blocks, including sliders, layout options, recent posts, buttons, icons, image galleries, maps, tabs, testimonials, accordions, etc.

With this plugin, you can control who uses the blocks, choose from several layout options, and add custom CSS for blocks.

3. Stackable – Gutenberg Blocks

This is an all-in-one solution for creating a stunning website. It provides blocks for feature grid, image box, accordion, icon list, call to action, container, posts, etc.

FAQs About the Gutenberg Block Editor in WordPress

Here are a few commonly asked questions about the block editor in WordPress:

1. Are my old WordPress posts and pages safe?

Yes, they are safe even if your previous posts and pages were edited using the classic editor. You can still edit them either using the old editor or the block editor.

2. I prefer the classic editor, can I keep using it?

Sure! Although Gutenberg is now the default editor in WordPress, you can revert to the old classic editor. To do this, install and activate the Classic Editor plugin.

After activation, the Gutenberg block editor will be disabled and you’ll have the classic editor back.

Side Note: The Classic Editor will be officially supported until December 31, 2021. During this period, you can acquaint yourself with how the WordPress block editor works because it is here to stay.

3. My block editor isn’t compatible with my theme or plugin?

Although this is an uncommon occurrence, do any of the following if it happens:

• Contact your theme or plugin developer to lay a complaint.
• Install the classic editor plugin.
• Use an alternative theme or plugin.

4. My WordPress block editor is not working

This is most likely a theme or plugin conflict. To solve this, disable all plugins and install a default WordPress theme like the twenty-twenty one theme. If the problem goes away, reactivate each plugin one after the other to identify which plugin caused the conflict.

Conclusion – WordPress Block Editor

In this post, we have covered all you need to know about the WordPress block editor. If you aren’t comfortable with the editor, you can disable it by installing the ‘Classic Editor’ plugin.

However, with the extra features being added to the editor with each WP update, you may not be able to ignore it for too long.

The long-term plan of the Gutenberg project is to make it a Full Site Editor. This means you’ll be able to edit 100% of your website (header, footer, sidebar, etc.) using the Gutenberg editor. Trust us to keep you updated when this feature comes into play.

For more WordPress tutorials on how to work with your site, please check our blog.

Recommended reading:

• White label WordPress services

The post How To Use WordPress Block Editor appeared first on FixRunner.com.

Content:

• • What is an FTP Client and why do you need it?
  • Features to look out for
  • Top WP FTP clients on the market
    • FileZilla
    • Cyberduck
    • WinSCP
    • Core FTP LE
    • ForkLift
    • Transmit
    • WS_FTP® Professional
  • Conclusion

What Is an FTP Client and Why Do You Need It?

File Transfer Protocol (FTP) is a standard network protocol used for transferring files between 2 computers over a TCP-based network, like the internet. It allows you to upload files to a web server and download files from a remote server.

To use this protocol, you’ll need an FTP client. This is a program that helps you manage your files on your web server like they were on your local computer. For example, an FTP client allows you to connect your computer to your WordPress hosting account, thereby accessing the files. Then you can edit, update and download your files with so much ease.

Although there are a few security concerns when using FTP, Web developers still use it to copy files, such as Web pages and graphics, onto Web servers. It is also used to resolve common errors that cannot be fixed in the WordPress admin area.

For instance, a failed WP update can result in the dreaded white screen of death, denying you access to your dashboard. In that case, an FTP client comes handy.

Features to Look out for in an FTP Client

No doubt – FTP clients perform the same function but you may find features in one of them that makes it stand out from the rest. Before selecting an FTP client, here are a few questions to ask:

• Is it compatible with my operating system?

This is probably the most important thing to look out for. Every FTP client on the market was built to suit one (or more) operating systems. If you use windows, opt for a client that is compatible with it. The same goes for Linux and Mac.

• What version of my Operating system does it support?

Here is another question to ask. Operating systems come in different versions. Some FTP clients do not support all OS versions. Go through each program description to find out this detail.

• Is its interface user-friendly?

Opt for an FTP client that comes with a clean interface as well as drag and drop functionality. It would also make sense if it displays directories side by side. This saves you time.

• Does it come with search tools for locating my files?

The best clients have search tools for locating your files even if they are many.

• What type of server does it connect with?

Not every FTP client can connect to all types of servers. Some are great for transferring files from remote to online servers. Likewise, others go a step ahead to connect with storage servers like Google Drive, Dropbox, etc.

• Does it support the protocols I need?

FTP, SSL, SSH are some examples of protocols you may need. So, find out if the client supports the protocols you want.

• How fast is it?

The essence of FTP is to make file transfer fast and easy. The best FTP clients transfer files with great speed.

• Can it transfer heavy files?

Ensure that your FTP client does not have a small file-size limit. This will allow you to transfer files no matter how heavy it is.

• Is it secure?

Keep security in mind when selecting an FTP client. There has been a couple of FTP software containing viruses and malware. Be on guard!

Best FTP Clients For WordPress

Here is our selection of the top 7 FTP clients for WordPress.

1. FileZilla (for Windows, Mac, and Linux)

FileZilla is one of the most popular FTP clients for Windows, Mac, and Linux. While its interface isn’t the most beautiful, it is clean and simple to use. It runs on older Windows versions, which isn’t a common feature among most FTP clients.

FileZilla comes with one main window, a website manager, and a filename filter section. The main window displays your local files and remote files side-by-side. You can also easily drag files from one side and drop them on the other.

It supports authentication of data, bandwidth controls, and the FTPS, FTP, and SFTP protocols. The software also supports the transfer of files over 4GB without slowing down.

See reasons why FileZilla is one of the best FTP clients for WordPress:

• It is one of the most versatile FTP clients that supports any machine type and OS version.
• FileZilla has a supportive community and in-depth support documentation to help you.
• Its side-by-side file display allows you to transfer files easily.
• The client supports a wide range of protocols.
• It supports multiple languages.
• The remote file search function helps you locate files with ease.
• Its bookmark feature helps you remember where your files are.
• You can edit files remotely so you don’t need to log in to your host account always.
• You can copy or move large files to and from your WordPress site.

Is FileZilla the best choice for you?

FileZilla is an all-round FTP solution. So if you use Mac OS at work and Windows at home, FileZilla is sufficient to use across. It is also a go-to choice for users who love the side-by-side display of files.

2. Cyberduck (for Mac and Windows users)

This is another free and open-source FTP client built for transferring files between local and remote locations. It supports FTP, SFTP, WebDAV, Dropbox, Google Drive, Amazon S3, Backblaze B2, Microsoft Azure, etc.

This client works perfectly with any third-party text editor which lets you edit your files conveniently. It also comes with a feature that lets you preview files without downloading them.

Cyberduck’s biggest selling point is a feature called ‘Cryptomator’. This feature adds an extra layer of encryption during file transfers. As a result, even if a hacker intercepts your transfer, they won’t see your files.

It is free, however, you may encounter regular donation popups. So, you can choose to ignore or donate $10 to the developers to stop the popups.

Here are some other features you’ll love:

• It has a URL generator that eases the file transfer process.
• Cyberduck supports the most popular cloud storage platforms.
• You can transfer any file with Cyberduck with the help of its drag and drop functionality. You can also copy and paste.
• The quick look feature allows you to browse your files easily.
• It offers advanced bookmarking capability.
• The interface is simple and user-friendly.
• It supports multiple languages.
• Cyberduck integrates seamlessly with services like the Bonjour auto-discovery platform and the Keychain password protector.

Is Cyberduck the best choice for you?

If you use Linux OS, you can’t use Cyberduck. However, Windows and Mac users will rather love its simple yet modern interface.

It’s also a great choice if connecting to cloud services is a priority.

3. WinScP (for Windows)

This is one of the most sought-after FTP clients with roughly 157 million downloads to date. It is a free file manager which lets you transfer files between a remote server and a local computer. The following transfer protocols are allowed – FTP, SFTP, FTPS,  SCP, WebDAV, and S3.

WinSCP has a simple and easy-to-use interface with a dual-pane module for copying files. It integrates well with MS Windows and offers seamless drag-and-drop functionality and desktop shortcuts.

This client also comes with a built-in text editor that allows swift editing of remote files. It also has some other great features, which include:

• Seamless integration with your text editor of choice.
• Allows multiple sessions at a time.
• Its user interface is customizable to fit your needs.
• WinSCP can restore a lost workspace.
• It comes with in-depth documentation and support tools to help users.
• It supports multiple languages.
• Files sent through this client are encrypted.
• It allows you to set admin restrictions. This is useful if you do not want anyone gaining access to your files.

Who should use WinSCP

WinSCP is a Windows-based FTP client. So, if you use the Windows OS, this is a great choice. Also, if you prefer a free open-source client with a simple interface, you’ll love WinSCP.

4. CoreFTP LE (for Windows)

With its dual-pane layout and basic interface, Core FTP LE is similar to FileZilla. The major difference being that Core FTP LE is built exclusively for Windows users, plus it has a few unique features you won’t find on FileZilla.

It allows drag-and-drop transfers and displays the status of your file transfers. Most of your tasks including bookmarking and search for files can be done on the main window.

If you run into any issues, there are several support resources on the official website. This includes an FAQ section, feature list, and documentation. You may also interact with community members or send an email to the developer.

CoreFTP LE is free. However, it has a premium version named Core FTP Pro. The pro version comes with extra features like unattended scheduled FTP transfers, encryption, and file syncing, etc.

Here are some features that make it a great option:

• Core FTP LE is free.
• It supports FTPS, TLS, SSL, and SFTP.
• Its mode Z compression feature speeds up transfer rates.
• The FTP client retries all transfers in case of a transfer failure.
• Comes with good support from developers.
• You can create desktop shortcuts.
• It allows multiple transfer of files simultaneously.
• You can manage file permissions at the admin level.

Is this FTP client the best for you?

This client can only be used by Windows users. Also, if you need an FTP client that offers fast transfer, Core FTP LE is the way to go.

5. ForkLift (for Mac)

This is an advanced, Mac-only file transfer client which lets you connect to multiple servers at a time. You can connect remotely with Google Drive, SFTP, FTP, WebDAV, Rackspace CloudFiles, SMB, AFP, and more.

Its dual panes allow users to compare multiple file locations and see which files are being managed. The software also uses a drag and drop system with a beautiful interface that lets you move files easily.

See other reasons why ForkLift is a great client:

• Although it is premium software, it comes with a free trial.
• It supports SFTP and FTP.
• You can drag and drop files from one location to the other.
• You can also sync all your favorite files using Dropbox.
• Several remote connections are possible.
• It comes with a preview panel for previewing file details.
• ForkLift allows you to customize your interface as you want.

Is Forklift the right FTP client for you?

You can use Forklift only if you are a Mac user who doesn’t mind paying for an FTP client. Also, if access to numerous remote connections is a priority for you, consider it.

6. Transmit (for Mac)

Just like Forklift, Transmit is a Mac-only file management software with extra features. After installation, it presents a beautiful interface for managing your files and connecting them to multiple servers at a time. You can upload, download, and manage files while connected to a cloud storage service.

Transmit sells for $45 for a single license. However, you get a little discount when you purchase more licenses. While it is more expensive than most FTP clients, it records great file transfer speed.

Here are some other reasons why Transmit will make a good FTP client:

Other reasons to consider transmit:

• It has a 7-day free trial to help you test it out before purchasing it.
• Its interface is sleek and easy to use.
• It comes with file-searching tools and a dual-pane module for viewing your files.
• Transmit supports FTP, WebDAV, and SFTP and allows you to connect with cloud storage services like Dropbox, Rackspace, and Backblaze.
• It offers a drag and drop system for transferring files.
• The Transmit “Panic Sync” tool helps prevent your data from getting lost when things go wrong with your computer or server.
• You can see the details of a file in the sidebar.

Is Transmit the right FTP client for you?

As earlier stated, Transmit works only for Mac users. It is also great for anyone seeking a sleek interface and fast transfer speed.

7. WS_FTP Professional

WS_FTP Professional is a premium FTP client for Windows used by over 40 million people. It offers a high level of security, thus protecting your files during a transfer.  Also, its extreme encryption level helps keep your data safe from hackers.

This FTP client is easy to customize and comes with advanced admin tools.

WS_FTP Professional, however, is not free. It costs $49.95 for a single license. Further, to enjoy better features like community and email support, you must upgrade to a higher version starting from $89.95.

See some other features that make WS_FTP a great client:

• Its security is superior to several other clients.
• You can back up your files on a regular basis and also compress them.
• It has an email notification feature that sends emails to you after a successful transfer process.
• It offers premium customer support as well as a community forum.

Is this FTP client right for you?

If you are a Windows user who wants maximum file security, WS_FTP is the right client for you. Its file encryption, signature keys, and FIPS 140-2 validated cryptography all work together for your online safety.

Conclusion – Best FTP Clients For WordPress

When selecting an FTP client solution, you’ll need to find out which OS it works with. While some FTP clients only support one OS, such as Windows or Mac, there are others that work with two or more OS.

Afterward, decide how much you are willing to spend. Free solutions like WinSCP, FileZilla, and Cyberduck may have all you need, especially as a beginner.

However, for powerful security and speed features, Premium FTP clients like Transmit, Forklift, and WS_FTP Professional are worth purchasing.

Which FTP client solution have you used? What do you love or hate about them? Let us know in the comments below.

The post Best FTP clients for WordPress – Our Top 7 Picks appeared first on FixRunner.com.

This powerful function does just as the name indicates. It enables you to retrieve posts from the database, which you can then display on a page.

Beyond posts, it is interesting to know that anything stored in the wp-posts table can be retrieved using this function. This includes pages and custom post types.

There are many scenarios where you would need to use this function. For example, let’s say you want to create a page that displays all posts with the category “WordPress Tutorials”. You can quite easily do this with WordPress get_posts function.

But how?

In this article, we will show you how this function works, and how you can use it to retrieve and display posts, pages, and custom types.

Let’s get started.

Content:

1. When to use get_posts
2. How get_posts works
3. Overview of get_posts parameters
4. Retrieving posts with get_posts
5. Display posts with WordPress get_posts function
6. Conclusion

When to use get_posts

WordPress core provides different methods for developers to manipulate the wp_post table. The get_posts function is one of the methods available. Here are some use cases for the WordPress function.

If your WordPress site has multiple authors and you need to build a custom page for each author, then the get_posts function can be a handy tool to easily achieve this.

Secondly, the function provides an easy way to display posts on specific pages or if you want to filter posts by category. Also, you can perform advanced queries using custom taxonomies or custom post types.

How get_posts works

In WordPress, get_posts is a PHP function that can be used to retrieve posts (posts, pages, and custom post types) from the database based on certain query parameters.

You can apply custom filters, taxonomies, and other parameters to control the results from the query. This function takes one argument which is an array of parameters you wish to query the database for.

The code above shows the basic usage of this function. The $args variable is used to define the set of parameters and filters such as post_status, taxonomy (category or tags), post type, etc.

This variable is then passed as a parameter when you call the get_posts function.

The get_posts function returns an array of WP_Posts objects which you can loop over to display the posts on a page on your website. In the next section, we will show you how to retrieve posts using this function.

Overview of get_posts Parameters

Before we show you how to retrieve posts from the wp_posts table using this function, let us first go over all the parameters available for building custom queries.

Depending on the type of query you intend to build, you may have to use one or some of the parameters below.

• Author Parameters
• Category Parameters
• Date Parameters
• Post & Page Parameters
• Password Parameters
• Post Type Parameters
• Tag Parameters
• Custom Taxonomy Parameters
• Search Parameters
• Order & Orderby Parameters
• Custom Field Parameters, i.e. Post Meta Parameters
• Permission Parameters
• Mime Type Parameters
• Caching Parameters
• Return Fields Parameters

The list above contains the 15 query parameters provided by WordPress core, however, you may not always use them all.

Commonly Used Query Parameters

Here are some commonly used parameters for building custom queries.

‘numberposts’

This parameter specifies the number of post objects to retrieve from the custom query. By default, the function retrieves the 5 most recent posts. If you use -1, the function will retrieve all the posts from your database. In the example below, we want the query to return 15 posts.

‘post_type’

This lets you choose the type of content to retrieve from your custom query. The function supports posts, pages, or custom post types. The default value is ‘post’ which will pull your blog posts. In the example below, we want to retrieve pages instead.

‘order_by’

This parameter lets you choose how to sort the result from your query. The values you can use for this parameter include the date, rand, comment_count, and none. There are advanced filtering parameters you can use as well such as meta key (meta_key) and meta value (meta_value).

‘order’

This works together with the order_by parameter. After choosing the sorting parameter, you can use ‘order’ to specify how the result is displayed. The options available include ASC (ascending order) and DESC (descending order).

‘category’

This parameter lets you choose a category for the post to filter content from. It takes an ID or a list of category IDs separated using a comma.

‘include’ and ‘exclude’

Both parameters are used to specify an array of post IDs to include or exclude respectively.

If you use the ‘include’ parameter, it will only retrieve the posts matching the IDs you specify in the array. Using ‘exclude’ will retrieve the post or posts excluding those in the array.

‘post_status’

This parameter lets you retrieve posts based on their status. By default, this will retrieve all posts with ‘publish’ status. Other post statuses available include draft, pending, any, future, and trash.

Retrieving WordPress Posts with get_posts Function

Now that we are familiar with the parameters you have available on the get_posts function, we will perform simple queries using some of the parameters to build lists of posts.

Before we start, we recommend testing the code on a staging site or a local installation on your computer. Also, backup your site before pushing the code to your live site.

To use this function, you have to edit a theme template file. You can access your templates by going to Appearance >> Theme Editor in your WP dashboard. In this example, we’ll show you how to retrieve a list of posts and display them on your blog page. In that case, you have to paste the code below in the blog.php template.

Sidenote: If this template does not exist, you may have to create it. See our guide on creating custom templates. Also, if you are creating a new template, then all the code below should be placed in between opening and closing php tags. I.e. <?php all_code_here ?>.

Copy this code and paste it into your blog.php template.

The code above retrieves an array of wp posts. We set the custom parameters to retrieve a list of the first 20 posts.

Additionally, we use the order_by parameter to order the results in ascending order of comment counts. This means the posts with the most comments will be displayed first.

Lastly, we call the get_posts function and store the results in the $posts_list variable.

How to display posts with WordPress get_posts function

In the section above, we used the WordPress getposts function to retrieve a list of post objects.

Now, we will display the results on a page using the PHP foreach loop in WordPress. Copy and paste the code below into the blog.php template, just underneath the code we pasted in the section above.

After retrieving a list of wp_post objects, we use the foreach cycle to loop through the array of posts and then render a link with the posts permalink and the post title. If you visit your blog page, it should display the list as seen below.

Side note: For this to work, you may have to select the blog.php template as the one used on your blog page.

If this template does not appear on your list of templates, add this code just after the opening php tag at the top of your blog.php template:

/* Template Name: Blog Template */

There are other parameters available on every wp_post object that you can render on your page. Below are some of the commonly used post parameters.

Commonly Used Post Parameters

• ID: A unique identifier for each post object.
• post_author: The author of the post identified using the author id parameter.
• post_date: Date and time which the post was published
• post_content: The main content or body of the post.
• post_title: This is the title you set when creating the post
• post_excerpt: Brief summary of the post.
• post_status: Specifies whether a post is published, draft, or trash.
• comment_status: A boolean that returns true if comments are allowed on the page. Otherwise, it returns false.
• post_modified: This shows the date and time the post was last modified.
• post_type: Specifies the type of the post object. Options include post, page, and custom post types.
• comment_count: An integer that shows the total number of comments on a particular post.

You can find other parameters available in the wp_post table in your WordPress database. Simply go to the PHPmyadmin section of your WordPress hosting.

Display other Post Types with the WordPress get_posts Function

If you want to display a list of pages on your website, simply change the post_type parameter to pages. For this, copy and paste the code below.

You can also use this function to build complex queries to display custom lists of posts, and the result set will be customized based on the filters you use.

In the code sample below, we have selected the music post type and filtered the results from a particular genre using the array taxonomy parameter.

Conclusion – WordPress get_posts

The get_posts WordPress function is a powerful tool for creating custom queries and manipulating the wp_post table.

It is a handy tool for WordPress developers intending to create a page or section on a website to display posts based on some parameters.

For instance, if you want to add a widget on your site to display the most popular posts on your website, you can use the get_posts function and use the comment_count keyword to order the result.

This guide has shown you how get_posts works and how to retrieve and display WordPress posts using this function.

The get_posts function is a valuable tool for retrieving content on your WordPress site, but ensuring optimal performance requires ongoing care. Monthly WordPress maintenance services provide the regular updates and optimizations needed to keep your site running smoothly as you implement custom features.

The post WordPress Get_Posts – Easy Guide To Using This Function appeared first on FixRunner.com.

Images are super important on all social media platforms. This is because they convey vital information, increase engagement and help to attract more attention to the page. Social media images are also very useful in marketing a brand especially when they are correctly sized. A simple example is the YouTube play icon, wherever you see this, you think YouTube.

Further, they can be used for entertainment and they help improve SEO. There are so many benefits to using images, which is why it is important to get the right social media image size. By following the right size guidelines, you will give your image post the professional look it needs.

In this guide, therefore, we will be giving you the updated image dimensions of different social platforms. Of course, image sizes are reviewed regularly. But that shouldn’t bother you, we will always keep this article up-to-date.

Contents:

• Facebook image sizes
• Instagram image sizes
• Twitter image sizes
• LinkedIn image sizes
• Pinterest image sizes
• YouTube image sizes
• Conclusion

Facebook Image Sizes

Facebook is by far the most popular social media network in the world.

The platform is known for constantly updating its design interface. So for your images to remain appealing, you need to keep updating your file format. Here are the dimensions for the different image types on Facebook.

Profile Photo Size – 180 x 180

This is probably the most essential image on your Facebook page. When you make a post, send a message, make a comment, anything you do, this is the image that’ll be displayed. It basically represents you in all your activities on Facebook.

Here are the recommended guidelines to follow:

• The recommended size is 180 x 180 pixels.
• On a desktop, the image will display as 170 x 170 pixels.
• On a smartphone, it will be displayed as 128 x 128 pixels.

Cover Photo Size – 820 x 312

The Facebook cover image is larger than your profile picture. It will only be seen when someone goes to your Facebook page. This does not mean it is irrelevant. On the other hand, it should be clear and must convey your brand message. You can add an image of your company logo or a more creative picture.

These are the size guidelines applicable to cover photos.

• Recommended size is: 820 x 312 pixels
• Minimum size: 400 x 150 pixels
• Displays on a desktop as: 820 x 312 pixels
• Displays on smartphones as: 640 x 360 pixels

Anything less will make the image look stretched.

Shared Images – 1200 x 630

These are the images that generate engagement on your timeline. Usually, Facebook resizes your pictures to fit the aspect ratio of 1.91:1. However, for best results, upload an image of over 1200 x 630 pixels.

Facebook Event Cover Photo – 1200 x 626

The recommended size for an event image is 1200 x 628 pixels (that’s a ratio of 1.91:1). However, to ensure that the image displays correctly on retina screens, which are pixel-dense, you can use 1920 x 1080 pixels.

Its minimum dimension is: 470 x 174.

Shared Link Image Size – 1200 x 628

When a link is shared, an image together with the content’s description will be displayed. Having the right size will prevent your image from being cropped or stretched out when Facebook resizes it.

• The recommended size is 1200 x 628 pixels
• For square photos, the minimum sizes are:
  • 154 x 154 pixels in your feed
  • 116 x 116 pixels on page
• The minimum sizes for rectangular photos are:
  • 470 x 246 pixels in feed
  • 484 x 252 pixel on page
• Aspect ratio is 1.9:1.

Facebook Stories – 1080 x 1920

These images are found at the top of your feed or your profile picture itself. Unlike other images, Facebook stories take up a large portion of a phone screen. That’s an aspect ratio of 9:16. Follow these guidelines when uploading a Facebook story.

Size Guidelines:

• Recommended size is 1080 x 1920 pixels
• Use an image with a width larger than 500 pixels.

Instagram Image Sizes

Unlike Facebook where you can create a post without pictures, Instagram is mostly images. So having the right size for Instagram photos is crucial. So here are the size guidelines to follow.

Profile Photo – 180 x 180

By now we know that profile pictures serve as an avatar. Whatever you do on your page, it will be seen because it shows the individual or company who owns the account.

An image size of 110 x 110 pixels is fine, but taking into consideration desktop users, a larger image will be best. Therefore, an image of 180 x 180 pixels is recommended.

Note that Instagram profile pictures are displayed as a circle. Therefore, some parts of the image will be cropped out. So when setting your picture, position the important part at the center.

Instagram Posts – 1080 x 1080

Instagram resizes images uploaded on a feed. So if you upload a photo that’s more than the required pixels, it will be cropped out. If it’s less than, it will be stretched. So here are the rules to follow:

• Upload a picture of 1080 x 1080 pixels
• Instagram will scale it down to 612 x 612 pixels
• On someone else’s profile page, it’ll appear as a 161 x 161 photo thumbnail.

Stories – 1080 x 1920

These are the short image slides or videos that you find at the top of a feed. Since its launch in 2016, it has been a very useful feature for users. You can entertain your followers or even promote your brand with it. These are the recommended resolutions to give you the best images:

• 1080 x 1920 pixels
• This is an aspect ratio of 9:16

These resolutions also apply to Instagram story ads.

Instagram Ads

Ads are used to promote your brands on user’s feeds for more audience.

Here are the ads image sizes for Instagram:

• For rectangular photos: 1080 x 566 pixels
• Square photos: 1080 x 1080 pixels
• Aspect ratio is between 1.91:1 and 4:5

Twitter Social Media Image Sizes

This is a popular social platform where people send or receive short posts called tweets. Images are also highly used, and they receive more engagements than text-only posts. So let’s take a look at their dimensions.

Profile Photo – 400 x 400

Since this will be your identity on the platform, it needs to be attractive. Even more so if you’re running a business online.

Size Guidelines:

• 400 x 400 pixels
• Maximum file size: 2MB
• Aspect ratio of 1:1.

Header Photo – 1500 x 500

This is just like the cover image on Facebook. It is displayed as a banner image on your profile page and is much larger than your profile photo. This image thus gives you more opportunity to advertise your brand or entertain your followers.

Size Guidelines:

• 1500 x 500 pixels
• This is an aspect ratio of 3:1.

In-Stream Photos – 1024 x 512

These are images that are uploaded with tweets. The size guidelines for these pictures are:

• Maximum: 1024 x 512 pixels
• Minimum: 440 x 220 pixels
• File format: PNG, JPG and GIF
• Aspect ratio: 16:9.

LinkedIn Image Sizes

This social platform was designed for business professionals. Users can put up their CV, promote their brand, and also recruit more partners. So let’s look at the recommended sizes for the different image types.

Profile Photo – 400 x 400

Since you are basically showcasing your professional skills here, your picture should not look sloppy. This image appears on your profile, your LinkedIn posts, and pretty much everywhere else you interact on the platform.

The recommended dimension is 400 x 400 pixels.

Background Image – 1584 x 396

Similar to cover photos, the background image is larger than the profile photo. It gives you the opportunity to further display your brand. So for best results, upload an image of 1584 x 396 pixels. That’s an aspect ratio of 4:1.

Note: Images appear differently on mobile and desktop. So before you decide on a particular picture, preview it on both devices to make sure no important part is cropped out.

Company Page

On your company profile page, it is only natural to display your brand’s logo on the platform. So when your company is searched for, this image will be shown. Here are the dimensions:

• Logo image: minimum of 300 x 300 pixels, maximum of 400 x 400 pixels
• Company cover image: 1128 x 191 pixels
• File types: JPG or PNG file
• Square logo: 60 x 60 pixels

LinkedIn Life Tab

Here, a user can disclose more of what the company is about, thus giving possible future clients and job seekers an inside view.

• Hero image size: 1128 x 376 pixels
• Photo sizes: 900 x 600 pixels
• Custom module: 502 x 282 pixels

Images For Ads

• Company logo and Spotlight logo: 100 x 100 pixels
• Spotlight background image: 300 x 250 pixels
• Sponsored content: 1200 x 627 pixels (1.91:1 aspect ratio)

Pinterest Image Sizes

Another popular social site is Pinterest. It is such an amazing platform for driving referral traffic to your site.

The platform works by helping individuals find creative ideas for their hobbies using pins. These pins can be images, videos or products. So, we can safely say that Pinterest deals largely on visual content. When setting up a Pinterest profile page, follow these guidelines:

Profile photo 165 x 165

A profile size of 165 x 165 pixels is recommended. Note that it will be displayed as a circle.

Cover Photo – 800 x 450

For your cover photo, use these dimensions:

• Minimum size: 800 x 450 pixels
• That’s an aspect ratio of 16:9

Pin Sizes

• 236 pixels in width x an adjustable height
• Aspect ratio: 2:3
• Maximum file size: 20MB
• File format: PNG or JPG

Board Preview Image

• 222 x 150 pixels

Story Pin Sizes

• 1080 x 1920 pixels
• Aspect ratio: 9:16
• Maximum file: 20mb

YouTube Social Media Image Sizes

YouTube is a great platform for uploading and watching videos, as well as sharing video content. It has over 30 million users visiting the platform daily. So with the right image and video sizes, and the right strategies, you can catch the attention of thousands or even millions of users.

Channel Icon – 800 x 800 pixels

This is your profile picture. It appears next to every comment you make on YouTube. So keep it simple, eye-catching, and brand-relevant. An image size  of 800 x 800 pixels is recommended.

Channel cover – 2560 x 1440

A user only sees this when browsing through your channel page. Even then, a clear and perfectly-sized cover image can earn you more subscribers.

The recommended cover photo size is 2560 x 1440 pixels. Here are a few other guidelines for your channel cover image:

• Maximum file size: 4mb
• Image types: JPG, GIF, BMP, and PNG
• Safe area for mobile and web (without logo and text cropping) – 1546 X 423 pixels

Video Uploads

All video uploads must maintain a 16:9 ratio. With the fixed ratio, you can upload your videos in these resolutions:

• 4K: 3840 x 2160 pixels
• 2K: 2560 x 1440 pixels
• 1080p (HD): 1920 x 1080 pixels
• 720p (HD): 1280 x 720 pixels
• 480p: 854 x 480 pixels
• 360p: 640 x 360 pixels
• 240p: 426 x 240 pixels
• 144p: 256 x 144 pixels

YouTube allows you to upload file size of up to 128GB. But this will be possible if your browser is up-to-date.

Conclusion – Social Media Image Sizes

Images rule the entire social media space. If you must have a solid social media following, optimize your images well. They are most likely the first thing a user notices about you.

In this guide to social media image sizing, we have given you the various image dimensions used in popular social platforms. Getting your pictures to look its best should be a walk in the park. Like we mentioned earlier, changes are inevitable, so we will keep updating this article to keep you up to speed.

For further assistance or suggestions, kindly leave a comment below or contact us.

The post Social Media Image Sizes | A Complete Up-To-Date Guide appeared first on FixRunner.com.

PNG vs JPG : Which is better for your website? Visual appeal is crucial in web design. It has the power to attract, trigger emotions, and ultimately improve your site’s traffic. There are a number of components that contribute to the overall beauty of a website.

Images are one of them. But beyond making your site beautiful, images tell stories and give life to your text. They convey information and make them easy to comprehend.

Yes, images are great! But the image file format matters too. Using the right format for the right purpose means your design would appear just as you planned. And you will get the best balance of image quality and size.

Although there are dozens of image formats available, JPG and PNG are two of the most commonly used image formats on the internet.

Let’s take a quick look at the features of JPG and PNG and the differences between both file formats.

Content:

• Why should you care about image formats?
• About JPEG
• About PNG
• JPG vs PNG: Compression
• PNG vs JPG: Size
• JPG vs PNG: Transparency
• Compressing an Image
• Conclusion.

Why should you care about image file formats?

As stated earlier, there are dozens of image file formats available. Why should you bother about them?

Well, as simple as it may seem, a wrong format could mean a bad web image, a missing detail, or a large download. Let’s see this in greater detail.

Site’s loading time:

This subject is very dear to every website owner. Multiple studies show that if a site’s loading speed exceeds 3 seconds, the abandonment rate increases.

Heavy images mean longer loading time. On the contrary, lighter images result in faster loading time and could improve your site’s performance.

Now, some image formats are heavier than others. It would make a lot of sense to utilize lighter images on your site.

Site’s appearance:

Anyone can tell when an image lacks good quality. Blurred and low-quality images could send a wrong message about you and your brand.

Some file formats provide better-looking images than others.

Whichever format you use, there should be a balance between quality and performance. Let’s have a look at both file formats (PNG and JPG) and their features.

About JPEG

JPEG stands for Joint Photographic Experts Group and was developed in 1992. It is a lossy compressed image format. This means the image quality reduces as you compress it.

This is an ideal format for the web and is a great choice for saving photographs and images with complex colors and shadings. Just like the image below:

JPEG files are one of the most popular file formats on the internet for obvious reasons. They are small in size, are easy to load, and can contain over 16 million different colors.

If you need to share a photograph, JPEG is your best option. It is adequately optimized for photography and is supported across a wide range of platforms.

Side note: JPG and JPEG are the same. The original extension for the Joint Photographic Expert Group image format was ‘JPEG’. But, Windows (earlier versions) required a three-letter file extension, hence reducing JPEG to JPG. However, Linux uses JPEG since it had no such requirement.

About PNG

PNG (pronounced as ‘ping’) stands for Portable Network Graphics and was first released in 1996. It was developed as a non-patented and enhanced version of the Graphics Interchange Format (GIF).

This type of image format is best used for storing files with fewer colors like graphic works, illustrations, and screenshots. It is a lossless compression file format. This means it retains an image’s quality even after reducing its file size.

PNG images are usually large files and are not so good for photographs. They are better used for images with some text or line art. This is because PNG does a great job of making the contours of the letters and the fine lines from graphics appear sharp.

PNG file type also gives you control over transparency which makes it a good choice for saving logos.

The screenshot below was saved in PNG format.

You can clearly see the letters, the dark and light backgrounds, and the sharp lines.

PNG vs JPG: Compression

JPEG and PNG use different compression methods or codecs to store a file’s data.

To start with, JPEG relies on DCT (Discrete Cosine Transform) compression. This technique works by dividing an image into parts of differing frequencies. Then, it eliminates the less important frequencies. This is why we say JPEG is ‘lossy’.

While this method is efficient,  certain ‘unnecessary data’ are permanently lost. As a result, each time you open, make changes and save a JPEG file, there would be a quality drop. Although, this drop in quality may go unnoticed.

PNG, on the other hand, relies on LZW (Lempel-Ziv-Welch) compression. It is a lossless data compression algorithm that results in the same quality image. PNG provides a near-perfect representation of an image. This is its biggest disadvantage over JPEG images.

PNG vs JPG: Size

Real-life photos and images with many colors are smaller in size when you save them in JPEG format.

Here is a side-by-side image of a flower in both formats.

Obviously, JPEG is a fine choice for photographs and real-life images because you end up with much smaller files. Saving the image in PNG format would consume more space and bandwidth.

PNG file sizes, on the other hand, are smaller for illustrations, logos, line art, etc.

The above screenshot was saved in PNG format and has a file size of 67.5KB. In JPEG format, it is 3.5KB heavier, weighing in at 71KB.

In summary, saving real-life, color-filled photos, and graphics in JPEG format results in smaller files and better images. On the other hand, screenshots, logos, and the likes are better saved in PNG format for smaller file sizes and better quality.

PNG vs JPG: Transparency

PNG supports transparency while JPEG doesn’t. This lets you create images that overlay flawlessly with your site’s content.  Like this:

Most editing programs use a checkered background to show the transparency of an image. This feature is great for logos.

JPG, on the other hand, has a non-transparent background.

Compressing your Images

Regardless of the file format you use (JPEG or PNG), you may need to optimize/compress your images for the web. This would mean a smaller sized image, more memory space, and a fast website.

How do you compress images for the web? There are two ways.

The first method involves the use of image editing software (like Photoshop) before uploading the image to your website. This process gives you more control over your image quality.

If you aren’t comfortable using an image editing software, there are WordPress plugins for you.

The plugins optimize your image files by compressing them automatically while retaining their quality as much as possible.

Let’s see some of the tools used for optimizing your images.

WP Smush

This WordPress plugin lets you optimize your images, and resize and compress them without a visible quality drop. With over 1 million active installs and an almost perfect 5-star rating, it sure is a crowd-favorite plugin.

Compress JPEG and PNG images

This plugin compresses and optimizes JPGs and PNGs by integrating with TinyJPG and TinyPNG image compression services. On average, PNG images are automatically compressed by 50-80% and JPG images are compressed by 40-60% without obvious loss in quality.

The Kraken WordPress plugin

This plugin lets you compress and optimize your images (JPG, PNG, and GIF formats) through Kraken.io Image Optimizer’s API. It supports both lossy and lossless optimization modes.

PNG vs JPEG – Conclusion

So,  PNG vs JPEG: which is better for your site? As you must know by now, the answer is “it depends”.

They both serve different purposes well.

JPG formats are best suited for real-life images, and images with many colors like photographs. PNG is ideal for line drawings, charts, iconic graphics, illustrations, document scans, architectural plans, logos, or any image with text.

More Resources:

• Speed Up WordPress Website
• WordPress Malware Cleanup Services
• WordPress Support

The post PNG vs JPG: Which is better for your website? appeared first on FixRunner.com.