Free WordPress Tutorials - Visual Composer Website Builder https://visualcomposer.com Create Your WordPress Website Thu, 30 Jun 2022 08:50:58 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.4 https://visualcomposer.com/wp-content/uploads/2018/11/cropped-vcwb-favico-32x32.png Free WordPress Tutorials - Visual Composer Website Builder https://visualcomposer.com 32 32 How to Secure Client Sites from Unwanted Changes https://visualcomposer.com/blog/how-to-secure-client-sites-from-unwanted-changes/ https://visualcomposer.com/blog/how-to-secure-client-sites-from-unwanted-changes/#respond Wed, 29 Jun 2022 20:40:12 +0000 https://visualcomposer.com/?p=35309 As a web creator, you want to ensure that your client sites stay in shape long after you deliver the project. I have collected my tips that will help you.

The post How to Secure Client Sites from Unwanted Changes appeared first on Visual Composer Website Builder.

]]>

As a web creator, you want to ensure that your client sites stay in shape long after you deliver the project.

Whether there is a plan to add the site to your portfolio or reduce the time your spend on maintenance - you want to avoid unwanted changes.

I've been a web designer for 10 years and can surely relate to that. In fact, client changes have always been one of my strongest fears.

It is much preferable to spend your time working on a new exciting project rather than fixing what should not have been broken.

To avoid issues, web developers tend to restrict access to certain parts of the site. Some are suspicious about WordPress since it gives lots of freedom.

But the cherry on top is page builders.

WordPress page builders give enormous flexibility to manipulate layouts - is it the default Gutenberg editor or a power tool like Visual Composer.

As a web creator, you can design anything - as a client, you can break it.

To deal with the hassle, I want to share three things that satisfy my “freelancer” needs and may help your agency to reduce risks and save time.

User role management

To build a decent website, we choose powerful tools with options tailored for professionals rather than beginners.

WordPress page builders allow web creators to design custom headers, footers, post templates and even incorporate custom CSS.

In fact, based on our research, up to 45% of all Visual Composer users love to use custom CSS in their projects.

These are essential things for every web developer but can be harmful in the hands of your clients.

What I love to do is disable advanced features for my clients which results in benefits for all of us.
From the agency's point of view, you are sure that your clients will not interfere with advanced features like post templates or page options.

Manage WordPress page builder features with the Role Manager

As for the client, he/she will receive a simpler interface to manage the content.

We all know that there is a learning curve for every page builder - no matter what ads are telling you.

As a pro, you will get the basics in an hour and become a power user in a week. As a client, you may need days to cover the basics.

Plus, you can always enable features back or use role manager as your onboarding strategy.

The role manager has proven to be a very effective instrument for me and I highly recommend it to all web creators.

WordPress admin panel

Same as for the page builder, your WordPress admin panel could require a facelift.

And by facelift, I mean, it is worth reducing the number of sections available to users other than the Administrator.

To me, the WordPress admin panel has always been bloated when it comes to an average user. You, as a web creator, are in charge of setting the correct permalink structure, managing plugins, working with the Appearance, and so on.

All these options can be hidden from other users to lower the barrier.

While there is no specific favorite on my list, plugins like User Role Editor will do the job.

Last, but not least, sometimes it is worth considering removing the admin bar as well. Just to make things cleaner.

While there is surely a plugin for that, I would go with a simple code snippet to avoid bloating my clients' sites with micro plugins. All you have to do is add this small code snippet:

add_filter( 'show_admin_bar', '__return_false' );

Element and layout locking

Any page you make consists of the layout and content. The content management process is a process when a person interacts with the content to modify it to their liking.

But what if you can modify the layout as well? The border between layout and content disappears and your clients may try to interfere with your layout.

To avoid such a scenario, I use the element lock feature that allows literally locking any element, row, or section of your page to make it accessible only by the admin.

Lock elements and sections with the Element Lock feature

Though, I leave only essential elements that require constant updates open. Things like paragraphs and images are still accessible to the client while styled rows are out of the content management scope.

Just like with the role manager, clients simply don't have access to certain parts of the page. The number of controls is reduced and navigation becomes easier.

To get the most out of it, I lock all elements on the page and then unlock the ones I want clients to edit. Usually, there are more elements to lock than to leave unlocked.

It will require some time, but this is how you can get 100% safe when it comes to handling the project over to your client.

Outro

Does setting up user permissions and locking down elements sound like a lot of work to do?

Yes.

Most likely, you will have to spend several hours configuring settings and locking layouts.
Nevertheless, a web creator spends up to 10 hours weekly fixing bugs (roughly 25% of all your time). And we know - fixing bugs means stealing time from development.

While the user role manager and element lock may not solve all the problems, they can help to reduce the time you spend on unwanted maintenance.

The time that is critical for your agency's growth and success.

As with everything, you will start slower and have to wait for results to come. But, I can promise you one thing - your life get easier.

Discover Website Builder used by Web Professionals to scale their business to success

The post How to Secure Client Sites from Unwanted Changes appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/how-to-secure-client-sites-from-unwanted-changes/feed/ 0
10 life hacks for faster and more efficient web design with Visual Composer https://visualcomposer.com/blog/life-hacks-for-faster-and-efficient-web-design/ https://visualcomposer.com/blog/life-hacks-for-faster-and-efficient-web-design/#respond Tue, 15 Mar 2022 19:18:40 +0000 https://visualcomposer.com/?p=34564 I have collected 10 life hacks that I use when working with Visual Composer. There is something for every web creator out there.

The post 10 life hacks for faster and more efficient web design with Visual Composer appeared first on Visual Composer Website Builder.

]]>

We do the same things in different ways. This is what makes our work unique. Everyone has their own workflow and life hacks to fasten things up and make their work more productive.

Working with Visual Composer is no exception. Even my teammates use features I don't and vice versa. And we work at the same company.

As I had my first Facebook live video, I decided to share some of the tricks I use when working with Visual Composer. The response was brilliant. Messages like “Oh, I did not know that!” made me think about sharing more tips to help you to become more productive.

In this article, I have collected 10 life hacks that I use when working with Visual Composer:

  1. Custom row names
  2. Global templates
  3. Column cloning
  4. Global and local CSS
  5. Right-click controls
  6. Template export and import
  7. Page to page copy
  8. Element presets
  9. Row resizer
  10. Append and prepend columns

After seeing how much our users love to both use and share their own Visual Composer hacks, our lovely colleague Irma created a walkthrough video showcasing just how to use each of the hacks mentioned in this article. Enjoy!

Custom row names

You can give custom names to your content elements, including rows and columns. To change the element name, click on the element title in the edit window or in the Tree view.

Why do you even need to rename the elements?

As your page layout becomes bigger, it can get harder and harder to navigate around. Especially, if you need to make changes after some time.

Plus, working in an agency has a high probability of someone else working on the same page. The same applies to delivering your project to the customer.

Name your rows, columns, and sections in Visual Composer

How to name your elements?

I do not name all of my elements. It feels like a waste of time.

Instead, I like to name my first-level rows and sections. I think you will agree that names like “Header”, “Hero section”, and “Features” make a lot more sense than “Row”, “Row”, “Row” when navigating around the page.

Global templates

A global template is a powerful tool available to Visual Composer users. It allows you to create a template that you can manage from one place and it will automatically get updated all across your website.

As I design a page, I search for the sections that I may want to reuse later on. If the content won't change, it makes sense to convert this part into a global template.

In Visual Composer, you can save any row as a template. And this is what I often do.

Save row and section as a block template

I save my reusable rows as global templates. Delete the content I have just created and replace it with the global template.

Visual Composer global templates

Such an approach also helps me to instantly see the template in a real layout.

Plus, I can easily add the same content on different pages and make changes to the template from one place whenever I need it.

Column cloning

Imagine you have four features you want to display in four columns next to each other. The easiest way (in my opinion) is to create a single feature and clone to result.

To illustrate the process, let's imagine that each feature consists of the icon followed by a description.

I will start my design process by adding a row with a single column. In the column, I will add my icon element and description.

Visual Composer column cloning

To save extra time, I will style the icon element and description by applying the Design Options needed.

Once my boilerplate is ready, I use column controls to clone the column (in our case making three additional copies).

Four features in columns in Visual Composer

Now that I have four columns with features ready, all I need to do is change the icons and update the copy.

Global and local CSS

As a web creator, you like to adjust parts of your content with CSS even when using Visual Composer. There is nothing wrong with that.
The question is whether to use local or global CSS.

Visual Composer offers both options - apply CSS to a certain page or to the whole site.

Whenever I write custom CSS, I insert it locally (page-specific CSS).

Add custom CSS to Visual Composer

Then, I ask myself a question if I will need this CSS on another page. If the answer is yes, I move it to the global CSS.

Of course, there can be cases when CSS is needed on the majority but not all pages. In such a case, you need to decide. For me, 70% is enough coverage to go after the global CSS.

As a workaround, you can use global templates to add custom CSS.

Last, but not least, just like naming the elements makes sense, don't forget to comment and separate your CSS code. You will thank yourself later.

Oh, almost forgot, you can apply the same principles to the custom JavaScript as well.

Right-click controls

Introduced recently, right-click controls are a handy way to quickly access element options.

Due to the fact that you need to use right-click to find out about the controls, some of you may have missed it.

Right click controls in Visual Composer

There is not much to say about it apart from “Give it a try”. I found myself saving lots of time with it.

Template export and import

Web creators love boilerplates. The good news is that Visual Composer template export allows you to have them.

There are certain layouts, elements, and maybe even media you like to use across different projects. The question is how to move those presets across your sites easily.

Visual Composer offers a template export option that allows you to move templates across different sites together with all the content elements and media files.

Yes, once you import a template to your newly created WordPress site, Visual Composer will automatically download all the elements used in the template and upload the media to your Media Library.

On my projects, I don't like to download my most used elements over and over again. Instead, I have a template that contains those elements. Once I upload the template to the site, all the elements get downloaded automatically.

Page to page copy

I think this is one of the most popular life hacks in my arsenal and I love it so much.

Did you know that you can copy Visual Composer elements from page to page (within the scope of one site)?

When working with Visual Composer, I usually have at least two browser tabs opened to quickly copy/paste the elements from already created pages to the new one.

No need to recreate the element or use global templates. A simple copy/paste will do the work.

Element presets

You can create global templates or copy elements from page to page.

Yet, there is another way (probably even better) to make sure you don't have to adjust the basic things for your elements over and over again.

Element presets allow you to save any element of Visual Composer as a preset with preconfigured styles.

Customized elements in Visual Composer

All of the element presets will appear right in your “Add Content” window and can be used just like any other element.

An additional benefit for web creators is an option to name your presets though giving your customers an idea of what elements to use when managing content on their own.

As I design sites for my friends, I often use element presets to create already branded buttons, images, and text blocks they can use out of the box.

Plus, I don't need to style the same elements over and over again.

Row resizer

Before release 44.0, you were able to adjust row sizes and width within your page or post layout, only within the row layout options.

Now there is an option to stretch and shrink rows via the brand new row resize controls.

Simply hover over the edge of a row you wish to adjust, and click on the vertical dotted control. Now, drag and drop the borders right and left to change the width of your rows to see faster results.

Resize row width feature

While this option allows you to change the margins of any row easily, it keeps the columns intact, adjusting them proportionally to the new row sizes.

And, you can still check and correct the values in the row layout options, same as before.

This feature truly is a cherry on top of what makes the Visual Composer editor true to WYSIWYG.

Append and prepend columns

Before the release 44.0, you were able to add extra columns to a row by selecting from the pre-set layouts or adding an extra row by typing in a new value in custom row layout options.

Now, when you hover over the edge of the first or last column of a row, you will see an additional plus icon. To add a new column simply click hover over the outline of a row, and click the plus icon.

Add extra columns to row sides feature

This is such a simple yet handy feature that allows you to create layouts in Visual Composer even quicker.

Outro

I have shared 10 life hacks of mine that I use when working with Visual Composer.

I hope you find them useful and applicable to your workflow. Maybe it will save your time and you will be able to create more projects or spend more time with your family.

If you are looking for ways to learn more about certain features - visit our Help Center.

Also, I encourage you to share your tips and tricks in the comments below and in our official community on Facebook.

See you online.

The post 10 life hacks for faster and more efficient web design with Visual Composer appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/life-hacks-for-faster-and-efficient-web-design/feed/ 0
Read This Before Using Font Awesome In WordPress https://visualcomposer.com/blog/font-awesome-in-wordpress/ https://visualcomposer.com/blog/font-awesome-in-wordpress/#respond Thu, 03 Feb 2022 09:08:41 +0000 https://visualcomposer.com/?p=34207 Users can better understand the meaning of your content with icons. Here's how you add them to increase user engagement on any website! This tutorial explains 3 methods for adding Font Awesome font icons into WordPress sites.

The post Read This Before Using Font Awesome In WordPress appeared first on Visual Composer Website Builder.

]]>

Want to use Font Awesome icons on your WordPress website? Icons are a great way to bring attention to the text, by adding an illustrative representation for the content they are assigned to.

Coupled with descriptive text, icons help your website visitors navigate your content better, in order to find exactly what they are looking for. And if you're looking for one of the best icon collections to match your website design, then there's no better choice than Font Awesome.

Here is all you need to know to implement Font Awesome icons in WordPress, so keep reading!

Get Free Builder and add Font Awesome to WordPress easily

What Is Font Awesome

This is the most famous font and icon toolkit based on CSS. It is used on over 32% of sites globally (more than 23.6 million sites to this day), making Font Awesome the web's most popular icon font set and toolkit.

Instead of traditional image icons, they are icon fonts. This means that you can adjust them (styling, size, colors, flip, mirror, and more) without losing quality because they are vectors. It's also flexible in terms of adding animations on top of other cool manipulations to your icon font designs just by using plain CSS.

So, the big question is: Is Font Awesome free?

The short answer is yes!

There are two different types of plans you can choose from - Free (free forever) and Standard ($99 per year). The free version has a variation of many different icons - enough to satisfy your icon needs for any website. While the main difference is that the paid plan includes the latest version of Font Awesome, plus access to use all of the icons available, including Pro icons.

The free Font Awesome icons are completely free to use really almost anywhere and anyhow you want - commercial, open-source projects, or personal use. You can get started with a free icon tool kit and use the free icons, which come in a wide variety to choose from. Otherwise, if you want the latest version of fontawesome, you can upgrade to premium at any time for top-level icons with more styling and branding options.

Font Awesome Icons in the official icon library

But all around - Font Awesome is the most comprehensive font family ever created. It includes over 1,600+ free icons as well 7,800+ pro ones for just about everything you can think of - from interface design to social media branding, and many other types of icons from 70+ categories.

Why You May Need Font Awesome In WordPress

It is an excellent way to add symbols and pictograms into your website content, rather than using bullets, letters, or numbers. Icon fonts are a great alternative to using images for your WordPress website icons.

Unlike image-based icons (which can slow down page speed), Font Awesome icons can be used with standard CSS resizing techniques that make them much faster than images. This is perfect, considering that speed is an important factor in design, for SEO optimization.

While there are many ways to add style and flair to your designs, icon fonts provide an easy solution. It can be used for representing commonly used commands. For example, you can use them for emphasizing your shopping carts, download buttons, contacts, comments sections, quotes, and navigation menus.

It is an excellent way to add symbols and pictograms when you're building a website. It's also important to use the right tools for your needs. The default font that comes with each WordPress installation is great, but it doesn't include Font Awesome and you get a limited set of icons. If you want more options to accelerate the design and accessibility of your WordPress website, then Font Awesome should be at top of your list!

How To Add Font Awesome To WordPress

Font Awesome offers different ways for you to add icons to your WordPress site: via plugins, or through customizing WordPress without using a plugin. But there is an even better, and more time-efficient way to add it to your WordPress site - and we will go through them all!

The Official Font Awesome Plugin For WordPress

If you are just starting with adding iconography to your pages, posts, or templates then this is the perfect method for you. The plugin is faster and you don't need to revise the edited code over time. You won't have to edit any of your WordPress site's theme files and will be able to use font icons everywhere on it!

First off, you will need to install and enable the Font Awesome plugin on your WordPress site directly from your admin dashboard. Although there are other installation methods that are pretty similar, this way is more definitely the fastest and most convenient way!

To Add Icons to WordPress Pages, Posts, and Templates

Now that you have finished the setup process, there are a few methods you can use to add icons to your WordPress content. The easiest way is by using the Classic Editor.

  • Go to add a new page or post, from your WordPress admin panel, and click the 'Add Font Awesome' button and select any of the icons you wish to input into your content

Add Font Awesome Icons in WordPress Classic Editor

Font Awesome icon display window in Classic Editor

In case, you're not using the Classic Editor go explore the free Font Awesome icon library, where you will surely find icons for just about any style, occasion, or necessity from there.

Once you've found the ones suitable for your website design, just copy and paste one of the following HTML codes into your WordPress content. For this example, we are using the 'WordPress Simple' icon.

  • Add icons by using tags like, for example, <i class="fab fa-wordpress-simple"></i>
  • Or by shortcode that can be used like this: [icon name="wordpress-simple"]

Plugins For Using Font Awesome On WordPress Without Using HTML Or Shortcodes

By far the easiest option for adding icons is through drag-and-drop plugins with a What You See Is What You Get interface. The biggest benefit of using such plugins is that the need of adding extra code is close to zero. This means that you will get your desired results quicker, while also not having to “sacrifice” your site's performance to do so, so it's a Win-Win solution!

  • Visual Composer Website Builder - All free Font Awesome icons are available for the free version of Visual Composer and you can find them alongside multiple other icon elements available. Plus you don't need to have the official Font Awesome plugin installed - it's already included! In addition, you can also change the icon color, size, add background shape, and more options, easily from within the editor. This is actually one of the many integrations and compatibility elements that Visual Composer offers with each installation.
Add Font Awesome and other Icons with Visual Composer Editor
Change Font Awesome Icon styling with Visual Composer Editor

And here are a couple of additional Font Awesome plugins for WordPress, with additional benefits for users. None of which require having the official plugin pre-installed:

  • Better Font Awesome - Automatically integrates the latest available version of Font Awesome into your WordPress site, alongside CSS, shortcodes, and TinyMCE icon shortcode generator. One of the best features of this plugin is backward compatibility, which means that you can switch Font Awesome versions without having to modify your shortcodes.

Better Font Awesome Plugin for adding Font Awesome to WordPress

  • WP Font Awesome - This plugin allows you to easily embed Font Awesome icons to your website using HTML or built-in shortcode handlers. That helps to adjust icon size and color more easily. Plus, this plugin supports using older versions of icons for more icon style and design variations. While also letting you adjust the icon color and size with no struggle.

WP Font Awesome Plugin for adding Font Awesome to WordPress

How To Add Font Awesome On WordPress Without Plugins

To add icons manually, you can go to the Font Awesome icon library and select from available fonts you would like to add to your site one by one. Or enter your email address to get the embed code to add directly to your theme.

Another way is you can download the font package directly from the Font Awesome website. It requires you to host it yourself.

As we mention before, icon fonts are just regular old fonts. You can add in the same way you would add any custom typefaces to your WordPress site.

Add Font Awesome Icons With Theme Editor

For the sake of this tutorial, we will be showing you how to add icons to your WordPress site the easiest way first. By downloading the Font Awesome kit and adding it from your WordPress dashboard.

  1. Go to Font Awesome website and click 'Start'
  2. Enter your email address and confirm the action via emailFree Font Awesome Icon Kit download on the official website
  3. Copy the kit code, which should look something like this:
    <script src="https://kit.fontawesome.com/2c5888f112.js" 
    crossorigin="anonymous"></script>
  4. Go to your WordPress dashboard and select 'Theme Editor' from 'Appearance' in menu
  5. Locate your theme's header.php file and paste the code right before the </head> tag and click 'Update File'
  6. Go to the Font Awesome icon library and select any available icon you want to useAdding Anchor Icon from the official Font Awesome icon library
  7. Click on the HTML code to automatically copy it and paste it into your WordPress content by using the Text EditorCopy Font Awesome Anchor Icon HTML Code

Add Font Awesome Icons With File Manager

Another way to add icons to your WordPress site, is through the File Manager. Yet another solution to adding the free icon sets without a plugin.

  1. Log in to your hosting dashboard
  2. Open the File Manager
  3. Go to your site WordPress files, usually located in 'public_html' in cPanel or under the 'app' folder in Localhost
  4. Open 'wp-content' and find 'themes' folder
  5. Find and open the theme file you are currently using, for example, 'visual-composer-starter'
  6. Open and edit the 'functions.php' file by copying and pasting the code right below this step anywhere in the file:
add_action( 'wp_enqueue_scripts', 'tthq_add_custom_fa_css');
function tthq_add_custom_fa_css() {
    wp_enqueue_style( 'custom-fa', 
'https://use.fontawesome.com/releases/v5.0.6/css/all.css' );
}

You're all set! Add icons to your WordPress site, the same way as in the previous step. Copy your desired icons HTML code from the official website and paste it into the WordPress Text Editor.

How To Fix Font Awesome Issues

Since it is the most widely used font icon kit in WordPress. It's only common sense that issues may arise. With older versions of Font Awesome integrated into themes and plugins conflict with a newer version installed. That's why it's important to remove other versions of Font Awesome before installing an upgraded version.

That's why you should always run The Conflict Detection Scanner to prevent conflicting versions from affecting your icons.

To Enable Conflict Detection

  • With a Kit - Go to your kit’s settings page, enable the Conflict Detection feature, and save the changes
  • Without a Kit - Copy the embed code below and paste it into your page template right before the closing </body> tag:
<script
  type="text/javascript"
src="https://use.fontawesome.com/releases/v5.15.4/js/conflict-detection.js">
</script>

Enabling Conflict Detection can take up to 10 minutes and can negatively affect your site's performance in the meantime. So, remember to disable it once you're finished!

To Inspect The Conflict Detection Results

  1. Open up a desktop web browser and load a page on your website that you’d like to inspect.
  2. Then open the console.
  3. After you open the web console, it will probably already have some output. Either way, just reloading should be enough to see what's going on with your site and see the full report.

If there are no errors then congratulations! You can successfully use the Font Awesome icons without any problems — if not follow the official guide for resolving conflicts.

List Of Font Icon Alternatives For WordPress

Font Awesome, as the name insists, is truly awesome. And that surely is the reason for its wide usage across the web. But you might be thinking, is Font Awesome the only font icon kit compatible with WordPress?

Surely there are many just as great font icon alternatives to enrich the content on your WordPress website.

  • Iconify - A modern replacement for icon fonts, that offers over 100,000 vector icons.
  • Feather - A collection of open source icons designed with the aim to be both simple and accessible.
  • Dripicons - A completely free vector line-icon font with 200 free icons available in PSD, AI, EPS, PDF, SVG, and Sketch formats.
  • Material Icons - Google’s adaptable design system with five sets of icons, available in wide a range of formats and sizes.
  • Bootstrap Icons - A free, high-quality, open-source icon library with over 1,500 icons, available to use in SVG or web fonts formats.

Wrap Up

This tutorial helped you to learn all the necessary information to start using Font Awesome on your WordPress site.

Icons are a great way to make your content more attractive as well as easier to interact with. The most inclusive icons sets in the WordPress ecosystem is definitely the one by Font Awesome. Instead of implementing the kit directly with code, you will find it easier by using a dedicated plugin.

We highly recommend you to try Visual Composer Website Builder. It is the easy solution to adding and customizing Font Awesome icons. And, also a wide variety of other of the most popular icon sets in WordPress. Best of all, you don't actually need to install the official icon plugins, because Visual Composer has them integrated upfront. Start adding icons to your site immediately and adjust them through simple drag-and-drop functions.

You don't need any coding experience to create more engaging and visually stunning websites when you use Visual Composer. Surely, over 90,000 web creators can't be wrong. It's the quickest and most efficient way to build sites that their clients value and appreciate.

If you enjoyed this article, follow our next tutorials and learn how to level up your WordPress skills!

The post Read This Before Using Font Awesome In WordPress appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/font-awesome-in-wordpress/feed/ 0
How to Create a WordPress Website Quickly and Efficiently: The Tools I Used https://visualcomposer.com/blog/how-to-create-a-wordpress-website-quickly-and-efficiently/ https://visualcomposer.com/blog/how-to-create-a-wordpress-website-quickly-and-efficiently/#comments Thu, 04 Nov 2021 13:22:38 +0000 https://visualcomposer.com/?p=33136 The trick to creating WordPress websites quickly is to use the right tools. I'll use Visual Composer, Bertha, Unsplash, and Insights.

The post How to Create a WordPress Website Quickly and Efficiently: The Tools I Used appeared first on Visual Composer Website Builder.

]]>

The internet is a vast place with endless possibilities. In recent years, the rise of websites has been incredible. Today, there are more than 2 billion active websites online and that number will continue to grow. With so many options available for building your own website, it can be hard to know which one to choose. But what if I told you that you could build your WordPress site faster than before? Well, it's possible and I'm going to show you how!

The trick is choosing the right tools that allow optimizing the time you need to create a website. And what are the main components of a website design? Layout, graphic assets, content, and SEO. Luckily, I've got a tool for every one of these components wrapped in a cozy Visual Composer blanket. All these tools can be used together in the new Visual Composer front-end editor, so you'll have everything at your fingertips at all times.

I'll show you how to create a full page quickly from start to finish using these tools:

  • Visual Composer - a website builder for the layout
  • Unsplash integration - a free stock image library for images
  • Bertha AI assistant - for AI-generated content writing
  • Visual Composer Insights - a content analysis tool for SEO

Choose a layout with Visual Composer

The first step in this whole process is to get your hands on Visual Composer. In this scenario, it will serve as the base of everything else. You can create your website from scratch using the plethora of features that Visual Composer has, but today we're here for speed. So the easiest and fastest way to start is to use one of the 10 templates available for the free version or one of the 200+ templates available for the premium version.

Visual Composer Templates

Once you've chosen the right template for you, the next step is to simply change the content to fit what you want to display on your page. And not only that, you can change any single aspect of the template design - change the order of sections, change images and text, change fonts, sizes of sections, add more sections, and anything else that you see fit. So let's move on to just that.

Generate content with Bertha AI

AI is a very trendy topic at the moment and for a good reason - it just makes our lives easier.

As I mentioned earlier, Bertha is an AI-based writing assistant for WordPress that can generate high-quality content for you in seconds! Simply choose a topic from the list of available topics and let this artificial intelligence write about it. Bertha also has a free and premium version with the difference being the word count that the tool generates.

Bertha AI sub-heading template

The great thing about Bertha and Visual Composer is that you can use the writing assistant in the editor anywhere there's text. If we take a simple Text Block element as an example, when you open the edit window of that element, you'll see the Bertha icon. When you click on it, a sidebar with the possible type of content (templates) that it can generate will appear. This varies from Call to Action Button and Section Title, to full-on about us page and even a mission statement so you don’t have to think about that either!

All you have to do is introduce Bertha to what you'll be writing about and the AI assistant will generate content.

Change images with Unsplash

The next step in this journey is changing the template default images to images that fit your design ideas. Photoshoots take time and money so I'm offering an easier way to customize the template.

This is where Unsplash can help. You can find the whole Unsplash image library in the Visual Composer Hub. Once you've found an image, you can just click on it to download and it will be automatically added to your WordPress media library. No need to name new folders and save anything locally, the images are ready to use almost instantly.

Unsplash

Unsplash is a great source for finding royalty-free photos that fit any niche imaginable: from business websites to food blogs or travel magazines - there's an image for everyone here! So simply browse through the library, search for some keywords that are appropriate for you.

When you've got your images, you can't always rely on what the photographer had in mind with the coloring of it. So there are actually a couple of ways you can spice up these stock photos to fit the style of your page.

First are the Instagram-like filters for Single Image elements. Apply a filter that you like most and the images will have a coherent look.

Instagram-like filters

The second is the Gradient Overlay for backgrounds. If you set an image as a background for any row or column, you can add an overlay and it will change the look completely.

Gradient overlay

Note: This is the only feature available only for the Premium version of Visual Composer. Although you can still get free images from the Unsplash website, Visual Composer just makes it quicker and easier.

SEO with Insights

The final tool we're going to look at is Visual Composer Insights. It's a built-in content analysis tool that analyzes the content on your page and gives suggestions that can improve SEO and the performance of your site. And same as with all other tools that I talked about, you can find it in the Visual Composer editor. Just click on the bell icon in the navbar and you'll see all it has to offer.

Insights

Note: If there are any problems that Insights detects, there's going to be a red dot on the bell icon, so you know immediately.

With Insights, you'll see critical problems in red, warnings in yellow, and successes in green. And the scenarios that Insights check differ from checking if the text length is optimal, if the ALT attribute is missing for images, if the H1 title exists, to even checking the contrast on your page.

Insights will also show you exactly where on your page the problem is detected so you don't have to look for it yourself.

So if you're still questioning why this is so important, I'm going to simply say - Google. If you want your page to be easily discoverable, it has to follow the best practices that Google's algorithm takes into account when figuring out where in the search results to put your site.

And once all the problems are gone and all you see is the green little Insights circle, you can pat yourself on the shoulder and be done with the page!

Conclusion

We've gone on a full journey of creating a page using Visual Composer, Bertha AI, Unsplash, and Insights. A great bundle of tools that allow creating sites faster than before. I hope you'll try these out and add them to your routine as I have.

What do you do to make websites quicker? Let us know in the comments.

The post How to Create a WordPress Website Quickly and Efficiently: The Tools I Used appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/how-to-create-a-wordpress-website-quickly-and-efficiently/feed/ 1
Launch a Visual Composer Website on Cloudways in 1-Click https://visualcomposer.com/blog/visual-composer-on-cloudways/ https://visualcomposer.com/blog/visual-composer-on-cloudways/#comments Fri, 29 Oct 2021 08:06:15 +0000 https://visualcomposer.com/?p=33093 In this review, we’ll describe the features that converted us to Cloudways, their customizable hosting plans, and what sets them apart from the competition. We’ll also show you how to set up your Visual Composer website on the platform.

The post Launch a Visual Composer Website on Cloudways in 1-Click appeared first on Visual Composer Website Builder.

]]>

When it comes to cloud hosting, there’s no dearth of options available in the market - all of which are quick to swear customizable plans, maximum uptime, user-friendliness, and a score of other features they may or may not deliver. With a field growing as fast as web hosting, it takes a little extra oomph to stand out among the competition.

We checked out Cloudways, now a major player in the industry, to see how it lives up to its name. (Spoiler alert: we’re impressed enough to recommend it to all our Visual Composer users, whether you’re an agency or business owner, designer or developer, marketer or freelancer).

Let’s jump right in.

Cloudways Overview

Here’s the basic rundown off the bat: Cloudways offers managed hosting solutions with a spotlight shining bright on ease of use, choice, and performance. Activities like launching a server or application are incredibly simple to execute through 1-click operations, even for those of you who don’t have a degree in computer programming. Users get to choose between cloud providers, style of workflows, and extremely customizable hosting plans. And once you get your website running on Cloudways, the risk of your visitors seeing a 404 page all but vanishes.

In other words, the whole idea behind Cloudways is to leave the headache of server management to it, so you free up time to devote to your work instead.

What Cloudways Have Going For Them

Cloudways combines an excellent mix of features to optimize just about any site’s performance - agency, business, developer, or marketer. While it misses out on domain registration and email accounts, you’re likely to find it makes up for those in other aspects.

Ease of Use

From the get-go, it becomes quite obvious that Cloudways is explicitly designed to be easy to use. Signing up for either a 3-trial or a plan is a fast and simple process, as is creating a dedicated server. An average of ten minutes is all it takes to select the resources you need plus the server location (for best results, choose the one closest to your physical location). Installing an application is a matter of a few clicks on the user panel.

Cloudways hosting one click installation

Cloudways’ 1-click installation for WordPress websites made in Visual Composer is sure to be a major draw - it eases the whole process even for developers. As for the user panel, it has a sleek design that’s easy to navigate, and which lets you monitor your server and applications, manage security settings, scale according to your needs, and more. And then there’s also access to SSH and FTP if you need to execute more complicated tasks on the server.

Master credentials in Cloudways settings

Customer Service and Technical Support

Cloudways offers round-the-clock customer support through its chat option that links you directly with a customer service representative. It took no longer than 5 seconds to reach someone ready to take a question from us. We asked them about the company’s hosting plans, its payment structure, and then some slightly more technical questions about the hosting stack and security.

However, speaking to a person is a more involved process - you first have to fill out a form to request a call.

Security

According to Cloudways, it’s fully encrypted end-to-end and releases regular updates to the firmware and operating system. They also offer free SSL certificates - a must for all our e-commerce and online store operators - and all accounts come with a host of security features including firewalls, bot protection, two-factor authentication, and more.

Advanced Features

As mentioned above a few times, Cloudways uses its 1-Click operation to great effect. We especially liked how easy it was to scale server resources with just a few clicks. This is bound to be a great help whenever you experience an uptick in traffic and need to adjust your resources. Even if you’re only scaling for a week or so, like for Black Friday, their pay-as-you-go system means you’ll only be paying for the resources you consume.

Advanced features in Cloudways settings

We’re also big fans of Cloudways’ server monitoring, which makes it simple for even non-tech savvy users to monitor a number of variables like Idle CPU and incoming traffic, all in easy-to-read graph form. You can surveil RAM, CPU, bandwidth, disk storage, database, and caching services using the relevant monitoring section of the server. What’s more, Cloudways has server monitoring alerts enabled across all servers and accounts, so you remain aware of non-contact with the server before your site visitors do.

Server monitoring in Cloudways settings

Oh, and you can set up automatic backups as often as you like, or manually back up your server with - you guessed it - one click.

Website backup in Cloudways settings

Performance and Speed

Here’s where Cloudways really excels.

If you use their services, the WordPress site you make with Visual Composer will be hosted on probably the fastest WordPress hosting stack out there. Cloudways claims their uptime is 99.99%, and their loading speeds average out to 400 to 600 milliseconds. And that’s about how it worked for us.

Take a look at Visual Composer running on GTMetrix, Pingdom, and PageSpeed Insight here. We chose a Vultr server and tested a VC website on those tools.

Resources that we used

Cloudways Server Configuration
NameSpecification
Cloudways ServerVultr – High Frequency
Datacenter locationSeattle
RAM2GB
SSD Disk64GB
Bandwidth Transfer2TB
Processor1 Core
Operating SystemDebian 9
NGINX1.19
Varnish6.0.7
Apache2.4.25
DatabaseMariaDB 10.1
PHP7.3

GTMetrix Performance Analysis

Cloudways performance on GTMetrix

Performance: 100%
Structure: 96%
LCP: 569ms
TBT: 0ms
CLS: 0

Pingdom Performance Analysis

Cloudways performance on Pingdom

Performance Grade: 87
Page Size: 968.4 KB
Load Time: 295 ms
Requests: 33

PageSpeed Insight Performance Analysis

Cloudways performance on PageSpeed

Overall Grade: 99
FCP: 0.4s
Speed Index: 1.9s
LCP: 0.9s
TTI: 0.4s
TBT: 0ms
CLS: 0

Note: We used Cloudways managed WordPress hosting with dedicated servers and built-in cache plugins.

Part of the reason behind their performance is Cloudways’ partnership with five of the top cloud providers in the industry: Digital Cloud, Vultr, Linode, Google Cloud, and AWS. Plus, you can scale your server as your website grows and receives more traffic - all you have to do is allocate more RAM with 1-click. Those of you who spring for the Cloudways CDN will see further reduced latency as well. Then there’s the optimized stack consisting of Apache, NGINX, MySQL/MariaDB, all of which combine to produce a supersonic hosting environment.

You can read more about how Cloudways drastically improves uptime through one of their clients’ success stories here.

Setting Up Your Visual Composer Site On Cloudways

Setting up on Cloudways is quite an intuitive process - launching your website is just a question of a few clicks. After selecting your cloud provider, you get to configure your server. Cloudways helps in this regard by suggesting a server size that would be able to handle your hosting needs based on your anticipated page view numbers. Or you can straight up specify your specifications in terms of bandwidth, RAM, processors, and storage.

We’ll show you the process of setting up your Visual Composer site on Cloudways, and we’ll also take you through the manual installation if that’s what you prefer.

System Requirement for Visual Composer

Server and WordPress Requirements

  • Recommended PHP 7.2 or higher
  • MySQL version 5.6 or higher (you can also run WordPress on MariaDB 10.0 or higher)
  • HTTPS support (this has become mandatory in terms of good SEO)

Browser Requirements

  • Safari
  • Edge
  • Chrome
  • Firefox
  • iOS Safari

Devices Requirements

  • Mobile
  • Tablet
  • Laptop
  • Desktop

Note: Visit the Visual Composer system requirement page for more details.

Launch Visual Composer on Cloudways in 1-Click

Go to the Cloudways partnership page on Visual Composer and click on the Get Started button.

Visual Composer Cloudways bundle landing page

You’ll be redirected toward the Cloudways x Visual Composer page.

Launch Visual Composer on Cloudways landing page

Click Launch Visual Composer Free, fill the signup form and click on the Start Free button.

Create an account on Cloudways

If you already have an account on Cloudways, then you can directly log in.

Log in for Cloudways

After successfully logging in to the Cloudways platform, click on the Add Server button. In the Application and Server Details section, you’ll see an option to select the WordPress application with Visual Composer. Enter the managed app and server names and select the project. This will enable your servers. You can then select the server according to your required size, specification, and location.

You can always scale your server size whenever required. At the bottom, you can see the hourly and monthly rates of the server. Launch the server according to your preferences.

After the server installation, click on the www option to access the application. The application management section will show you all the details related to your application. Go to the admin panel to access your WordPress Visual Composer website with the given URL, username, and password.

Server setup in Cloudways settings

Access details in Cloudways settings

After logging into the WordPress website, you’ll see Visual Composer is already installed on your site.

Access Visual Composer in WordPress admin panel

Launch Visual Composer Manually on WordPress

While there’s no need to install Visual Composer manually given the 1-click process, the manual installation process isn’t too hard either.

  1. Login to your WordPress website and go to WordPress Dashboard
  2. Navigate to the Plugin option
  3. Click on an Add New Plugin button
  4. Search the plugin on the right-side search bar
  5. Install the Visual Composer plugin
  6. Activate it after installation

Install Visual Composer from WordPress plugin repository

Visual Composer activation in WordPress

Once you’re done with that, you can edit your WordPress site pages with Visual Composer. All WordPress sites are equipped with a pre-installed and pre-configured Breeze cache plugin to boost speed and performance. The server is optimized through Varnish.

Why Doesn’t Cloudways Use cPanel?

That Cloudways doesn’t use cPanel might come as a disappointment to some users, but to be honest, we found its control panel to be a cut above. Yes, cPanel is a popular tool for both first-time and professional users. But it’s a clunky tool - a visual mess that’s hard to navigate. Multiple aspects of its functionality are outdated, and the Cloudways control panel easily eclipses those.

For instance, cPanel does not offer in-built server monitoring tools. Instead, cPanel users have to purchase tools like MycPAdmin to secure their servers or download free services such as Munin. Cloudways, on the other hand, offers ready server monitoring. Since this is a fully managed hosting provider service, you don’t have to worry about the hassles of server operation at all.

We’ve also run into our share of speed, functionality, and security issues with cPanel. Its limited usage has often caused hosting lags, particularly if you start to go over their limit. In fact, it’s almost too easy to get kicked off the service if your usage is too high. And the end-user is responsible for installing a firewall, configuring SSL, and actively looking out for malware plugins that target cPanel security. All of these are non-issues for Cloudways whose dedicated resources allow for much faster hosting, and have integrated security at all levels of the platform.

Then there are the automatic backup limitations. While cPanel’s Dedicated Hosting and VPS plans do allow for automatic backups, the same does not hold true for all versions of the hosting service. And users with Reseller or Shared accounts cannot use their cPanel interface to automatically restore a full backup; they instead have to submit tickets to cPanel’s Support department. This is very much in contrast to Cloudways’ more modern control panel – with this, you’re just a few clicks away from setting up automatic backups.

Plus, cPanel is sadly bereft of WP-CLI, which makes it so much easier for WordPress users to accomplish tasks like taking database backups and upgrades and managing numerous WordPress plugins, making it quite the nifty service. Utilizing WP-CLI on cPanel involves a difficult multi-stage installation process first. And it’s entirely possible that WP-CLI does not function with your WordPress install if a theme or plugin is conflicting with the load process. Cloudways, on the other hand, has WP-CLI pre-installed, thus negating the problem of conflicts with themes or other plugins on your site. Cloudways even has additional resources to help you get started, so you can manage WordPress plugins easily using WP-CLI.

For the TL;DR version, Cloudways easily scores above cPanel in terms of visual layout, ease of use, and advanced features.

Customize Your Cloud Hosting Plan

Perhaps what we liked best about Cloudways was the flexibility and choice it offers in terms of cloud hosting servers. They offer you a choice between five of the very best providers: DigitalOcean, Linode, Vultr, Amazon Web Services, or Google Cloud Platform. And it’s quite easy to move from one cloud provider to another, so if you realize down the line that Vultr’s the one for you, you can move to it from any of the others. That said, performance on each cloud doesn’t differ much, thanks to the overlaying Cloudways infrastructure.

Cloudways also offers pay-as-you-go rates, as mentioned earlier. What this means is that there are no restrictions on the number of websites you want to host, or installations, or traffic. You can scale as you like according to your requirements, and you’ll only pay for what you’ve consumed.

Cloudways hosting pricing plans

Cloudways vs the Competition

Cloudways faces some pretty stiff competition in the hosting industry. Managed hosting providers like Kinsta, Siteground and WPEngine offer some excellent services as well and have their fair share of loyal fans. Of course, depending on your requirements and preferences, you might find one of those providers better. But we found Cloudways offers more value and better services for your Visual Composer website.

Hosting poll on Visual Composer Facebook Community

In fact, Cloudways consistently outperforms all three of the providers we mentioned in terms of ease of use, quality of support, and ease of setup, according to G2.com. It offers more choices of hosting providers, much more affordable rates across the board, and better scalability.

We found there are considerable performance gaps between Cloudways and the rest. Kinsta offers less control over your site and servers. Siteground has a reputation for not being able to handle larger websites. On the starter plan, Cloudways offers 1TB of bandwidth, and WPEngine only 50GB. Of course, all these hosting providers have their own competitive edges. But on the whole, we’d recommend Cloudways first to our Visual Composer users.

Verdict

Count us converts. We’re won over by the performance of WordPress and Visual Composer sites on Cloudways, and by how it hands easy to control for web creators to save time and work more efficiently. Their customer service is excellent, and their speed and uptime are unrivaled. Their scaling mantra lets you grow your website as you need, and the server management is a breeze, as is the setup process. If you’re in the market for a hosting provider, you can’t go wrong with this.

The post Launch a Visual Composer Website on Cloudways in 1-Click appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/visual-composer-on-cloudways/feed/ 1
10 Ways to Make Your WordPress Website Spooky for Halloween https://visualcomposer.com/blog/halloween-tutorial-for-wordpress/ https://visualcomposer.com/blog/halloween-tutorial-for-wordpress/#respond Tue, 12 Oct 2021 12:53:30 +0000 https://visualcomposer.com/?p=33024 Halloween is a great occasion to "dress up" your website with scary designs to increase traffic and sales from Halloween-themed campaigns. This tutorial by Visual Composer lists 10 ways to make your website spooky for Halloween.

The post 10 Ways to Make Your WordPress Website Spooky for Halloween appeared first on Visual Composer Website Builder.

]]>

Halloween 2021 is creeping right around the corner. Have you put your WordPress website in a “costume” yet?

People always appreciate when companies get creative with their websites for holidays. Just look at Google for example, and how well they “dress up” for each occasion. Doing so is a good way to drive traffic to your site and higher conversion rates with clever campaigns.

If you don't have anything planned, we got your back! ​​We have already listed all the Visual Composer features, elements, and templates to make your website Halloween-ready once before. But, with these following easy WordPress Halloween website tips, tricks and ideas - your web presence will be the most festive (and bone-chilling) of them all. 👻

Halloween Programming Tutorial for a Button

"Ghost in the Machine" was created by Thinkful Programming Guides. It is an online tech skill learning platform for launching your career faster.

Fortunately, they have also thought about web creators and their busy schedules. So you don't have to worry about creating your own custom elements for spicing up your website this Halloween. Instead, make use of ready-made ones and save yourself some time!

By adding this simple yet creepy addition to your website, your visitors will surely feel haunted for Halloween! Take a look at the step-by-step tutorial on how to make a button. When clicked on - it emits a scary sound and a ghost pops up. Try it out, but be warned - it gets loud!

Scary Button

This scary sound effect is just a few lines of JavaScript and a sprinkle of CSS magic away...

Horror Stories for Web Developers

There are few things more terrifying than the moment you realize your website is a disaster. You sit at the desk, staring down into an abyss of incomprehensible code: tens of thousands of CSS files and JS libraries sprawling across 10k+ rows in JPGs - not only does this site have no coherence but also there seems to be some kind of force encouraging its developers towards ever greater amateurishness...

But wait! It just got worse… Keep reading

Dancing skeletons animation for Visual Composer Halloween tutorial

“Scary to the Core” is a series of horror stories for developers created by PSD2HTML, to make your bones shiver! This will be a great addition to “lure” visitors to your website. Leave the best part of the story on your site - no human can resist not knowing how a story ends...

If horror stories are your thing, here's another good collection of web developer horror stories by OFF THE LIP.

Spooky Animated Text Maker

Fonts can make the whole mood of your site shift. And, it takes so little effort to change them (and it's even easier with Font Manager for Visual Composer Website Builder)!

Create your own spooky animated text with this cool page by Pookatoo. Choose from a variety of fonts, by entering a word or sentence you want into the input box. Then comes the fun part. Choose which animation effect appeals best and use it to spice up your website or social media posts!

Some ideas for a phrase: “Boo! Have a scary good time!”, “Leave your email to get candy!” or use the good old “Choose what you want for this Halloween: Tricks or treats?”.

Animated text animation by Pookatoo

Halloween is a great opportunity to bring out some spooky campaigns. Halloween can also be a perfect occasion for website owners to reap the benefits of holding memorable competitions with festive designs. So make sure you are ready!

Welcome to Zombo.com

This just might be one of the scariest sites on our spooky sites list…

That is because you enter total audio hypnosis with Zombo.com's scary but charming voice.

Hypnotised animation for Halloween

And, if you're thinking of making your own must-see website list this Halloween, be sure to mention this. Zombo.com - where the limit is unknown.

Give Skeleton a CSS3 Laser Effect

This fun element is created by CSS Deck. It can be used as a fun element within your site, to prolong the time spent on your site. Which Google will appreciate, and might even help to boost your content higher on search results.

Lazer skeleton animation by CSS Deck for Halloween tutorial

Only 163 lines of code give you a charming laser bone. Visitors will be intrigued to play around with the interactive content. This laser can be activated by a click of a mouse or by hovering over an element. Plus, you can use all sorts of other parallax effects to heighten the mood and experience for your visitors.

Get Lost with Zoomquilt

Are you interested in keeping your visitors entertained and engaged this holiday season? Send them into a never-ending loop of fun imageries, perfectly fitting with the spooky theme of Halloween.

Looped animation by Zoomquilt for Halloween

The Zoomquilt is an endlessly zooming image that weaves together different fantasy paintings into one seemingly endless shot which takes on the appearance of both stills and live-action with some really cool special effects! Use the up and down arrow keys to navigate, and find out - does the loop ever end!?

Code Snippets For All Things Scary And Fun

If you are looking to use some amazing works of art by fellow designers and developers on your website, CodePen.io is the place for you!

CodePen.io is a place to show off your work, and where developers go when they want to see what other people have built. It's also an excellent way for designers and front-end coders to find inspiration from all of these creative users! Just so you know, all code works done on this platform goes by the name of “pens”.

Ghost animation from CodePen.io

All of the amazing animations, games and other coding wonders are just out of this world. Best of all, they are all completely free and available for anyone to use, just copy the HTML, CSS, or JS snippet onto your website!

A fun way to spice up your site for Halloween is by messing with the UX - make your site content upside down or completely dark, that only lights up when you hover the cursor over it, and so on. This is the only time of the year (with the exception of April 1st) when you can put your evil genius ideas into action. For example, integrate this cool “monster picker”, where there is only a 1 in 81 chance to get any valid combination.

Use these beautiful lines of code to bring your website back to life, and keep your visitors coming back for more.

Scary Pranks with Hacking Simulator

Hacking is serious business, but this site called geek_typer isn't. Now you also can become a hacker, just like in the movies!

Hacking Simulator by Geek_typer

With more than 30 different themes - from NASA and Matrix to Anonymous and many more - you can do some serious pranking and surprise your friends this Halloween! By the way, this is also a cool idea for a website design, especially for the spooky holiday season of October.

Make a Glitch Image Effect in CSS

Do you love this Halloweeny glitch effect by Corbie? Now you can make your own glitching images with some HTML and CSS, all you need is 4 images with different RGB color sliders for each.

Glitching effect animation by Corbie

Also, here is another resource that shares via GitHub how to create haunted glitch images.

Developer Humor Explained

Lastly, let's lighten up the mood with some humor since you are probably creeped out from all the spooky stuff in this article.

It is no surprise that programmers have developed a unique sense of humor. But since not all of us are developers, but other kinds of web creators, like designers, copywriters, or business owners, iDTech.com has these jokes explained for everyone (sorry devs, you're secrets out!).

A good programmer is someone who always looks both ways before crossing a one-way street
Debugging: Removing the needles from the haystack
There are two ways to write error-free programs; only the third one works

After all that scary stuff, share something funny with your visitors, like these jokes for example. Otherwise, they will be too scared to return to your website!

Final Thoughts

As this article shows, website customization is a quick and easy way to give your WordPress site a spooky look for Halloween. In this blog post, we went over how you can transform your WordPress website into something that could scare the socs off even for the toughest of your visitors!

Use my tips, or get inspired and make your own Halloween decorations, and have fun! Remember, there aren't many occasions where we can go all out and play around with our website designs! Your website visitors will definitely appreciate you putting in the effort and bringing out your best, and spookiest ideas to life on your website!

And last but not least, I wish you a Happy Halloween! 🎃

The post 10 Ways to Make Your WordPress Website Spooky for Halloween appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/halloween-tutorial-for-wordpress/feed/ 0
How to Manage WordPress Widgets https://visualcomposer.com/blog/how-to-manage-wordpress-widgets/ https://visualcomposer.com/blog/how-to-manage-wordpress-widgets/#comments Fri, 17 Sep 2021 07:55:42 +0000 https://visualcomposer.com/?p=32730 Default and custom WordPress widgets can be managed via the widget editor and Visual Composer Website Builder.

The post How to Manage WordPress Widgets appeared first on Visual Composer Website Builder.

]]>

Are you looking to figure out how WordPress widgets work? Most WordPress users are not aware that widgets are the hidden gems of WordPress.

WordPress does a lot of stuff for you, and managing widgets is one of them! But, if you want to take control over your website design it's important to know how they work.

In this blog, we will cover what WordPress widgets are, where they live on your site, and why they are so awesome!

The Purpose of WordPress Widgets

Widgets are tools with different functionalities to help you manage and display content on your site for easy access on the user side. The areas (most typically the sidebar, menu area, or footer) where you can add widgets on your site are defined by your selected WordPress theme.

You can install different third-party widgets via the Plugins section in your WordPress Admin Dashboard or from the WordPress Plugin Directory. You can also check out this guide to free WordPress widgets to see which ones would fit your site best.

There are so many widgets that all serve different purposes, but we can break them down into two categories:

  • Default WordPress widgets, such as archives, calendars, categories, latest comments and posts, social icons and feeds, search bar, video player, and more.
  • Additional widgets that come bundled with themes and plugins, such as contact forms, galleries, weather, location, testimonials, reviews, polls, live chats and so much more.

Some popular widgets that come in handy are:

Note: All of the plugins mentioned above also are integrated into the Visual Composer Website Builder. Which is also compatible with all of the top WordPress plugins and themes.

Adding Widgets to Widget Areas

After installing WordPress widgets you will have them all listed on your WordPress site and ready to use.

This tutorial explains how to navigate your widgets in the new block-based widget editor for WordPress 5.8, as well as in versions before that. Both editors are similar and also offer to manage widgets in the live preview, for easier operating.

In WordPress 5.8

To add widgets to your designated-widget-areas follow these steps:

  1. Navigate to Appearance and select Widgets in your WordPress Admin Dashboard;
  2. Select an area where to display widgets (depending on the theme in use - these areas may vary);Block based widget editor in WordPress version 5.8
  3. Click on the + icon either in your selected area or next to Widgets (top left corner of widget editor);
  4. Drag widgets from widget list and drop them in the selected area;
  5. Click Update to save changes.

Note: You can edit, rearrange and remove widgets by simply clicking on them, and selecting from a list of available editing options.

In versions pre WordPress 5.8

To add widgets to your designated-widget-areas follow these steps:

  1. Navigate to Appearance and select Widgets in your WordPress Admin Dashboard;
  2. Select area where to display widgets (the right side of the screen);
    Area in WordPress website to add widgets
  3. Drag widgets from the left side to the widgets area;
    List of available WordPress widgets
  4. Save changes.

Note: If you prefer to use the previous widget editor format you can downgrade to an older version manually or by using plugins. While it is possible, we do not recommend using outdated versions, as it subjects your site to vulnerabilities.

Adding WordPress Widgets to a Page

Adding widgets to the sidebar, menu, or footer (for most themes) is a native process for WordPress. But what if you need to add a custom widget to your page content areas (or anywhere else) instead? With the WordPress Widget content element, it is simple:

With Visual Composer, you can add WordPress default and custom widgets in any place of your layout more intuitively.

Also, Visual Composer offers over 500 content elements, designer-made templates, addons, and integrations to create a stunning website that your clients can manage themselves!

With Visual Composer, there is no coding required (for non-tech-savvy users). Yet, it is possible to add custom code, as well as create custom elements via API (Developer-friendly). And, best of all - it helps create SEO-friendly and high-performing websites while saving precious time.

Ending Thoughts

WordPress widgets are a great way to add more functionality to your WordPress site for your visitors to enjoy! 

Widgets can be managed easily from within the WordPress Admin Dashboard, both in the latest versions of WordPress (5.8) and in versions before that.

And even better, you can manage your widgets, layouts, and design of your website more easily with Visual Composer. Which has helped build over 90 000 blogs, portfolios, business sites, and online stores worldwide!

The post How to Manage WordPress Widgets appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/how-to-manage-wordpress-widgets/feed/ 1
How to Customize a WordPress Theme (3 ways) https://visualcomposer.com/blog/how-to-customize-a-wordpress-theme/ https://visualcomposer.com/blog/how-to-customize-a-wordpress-theme/#comments Tue, 14 Sep 2021 08:33:00 +0000 https://visualcomposer.com/?p=32700 This article explains how to customize a WordPress theme using the Theme Customiser, Visual Composer, and Theme Editor.

The post How to Customize a WordPress Theme (3 ways) appeared first on Visual Composer Website Builder.

]]>

One of the first things you need to do when building a website is to choose a theme.

A theme defines the styling of your entire website. The difference between a theme and a template is that a template controls the layout of a single page, and a theme consists of several different templates.

While choosing a theme with a cool design might be a priority, you should always consider choosing functionality and performance over style. But of course, some themes offer both! 😎

This tutorial will walk you through the step-by-step process of customizing your theme with:

  • Theme Customizer
  • Visual Composer Website Builder
  • Theme Editor (via coding)

So, let's dive right in! 🙂

Get Visual Composer Theme Builder banner

How to Choose a WordPress Theme

Before we get started, you need an appropriate theme that suits your brand and makes your website perform efficiently. The reason you should be wary of what theme you choose is that there are tens of thousands of themes for WordPress out there, and not all of them are optimized.

When selecting your theme, you should have a list of features, a layout preference, and a purpose in mind - are you creating a blog, portfolio, or an online store perhaps?

Although selecting a multi-feature theme might be tempting, it's not worth risking your website performance. Luckily, WordPress allows you to find the perfect starter theme (free versions only) by filtering out the ones which match your selected features:

  1. Go to your WordPress Admin Dashboard;
  2. Navigate to Appearance and select Themes from the dropdown menu;
  3. You will be redirected to your theme library, on the top of the page click Add New;
  4. From the list of tabs, select Feature Filter and apply the features you need.

When choosing your theme, look for these factors:

  • Responsiveness to all devices is a key core web vital.
  • SEO-friendliness helps to rank higher in search engines and increase traffic to your website.
  • Minimalistic design, that means a site is lightweight and will load faster.
  • Accessibility is a big factor in making your website accessible and navigable for all users.

We would recommend choosing these WordPress themes:

  • Visual Composer Starter Theme is a simple yet beautiful theme, perfect for portfolios or online businesses, that is SEO friendly and responsive.
  • Astra is one of the fastest loading multipurpose themes that work great with Yoast and WooCommerce integrations.
  • Kadence WP - a good theme choice for creating not only a beautiful and fast-loading but also an accessible website.

As Pablo Picasso once said: “Good artists copy, great artists steal”. So if you have a website whose design & layout you adore, you can detect the WordPress theme and plugins in use.

Note: In case you want to purchase a premium theme we recommend going to Theme Forest for quality themes.

Customize a WordPress Theme with Theme Customizer

To customize a WordPress theme you can use the theme options available in Theme Customizer. It is a default way on how to make visual changes to your theme by using options from default and a custom list.

Note: Custom options are the options that have been added to your theme via theme author.

To access Theme Customizer:

  1. Access your WordPress Admin Dashboard;
  2. Navigate to Appearance and select Customize from the dropdown menu;
    Access WordPress theme customizer via WordPress admin dashboard
  3. You will be redirected to Theme Customizer where you can make changes;
    Customize your theme via WordPress Theme Customizer
  4. Click Save & Publish to confirm changes.

Note: The customization options (for example, making changes to the background, fonts & style, headers, footers, sidebars, etc.) vary depending on the theme.

Customize a WordPress Theme with Visual Composer

Customizing your WordPress theme with a website builder is the most effective way to do it! Because, not only what you see is what you get, but also it offers a wider variety of customization options for your whole website (including the theme).

Visual Composer is one of the most advanced website builders, as it offers automatic responsiveness to all devices, a clean code resulting in faster loading, and overall greater performance for your website! Nevertheless, the front-end editor is compatible with all of the most popular WordPress themes and plugins, such as Yoast and WooCommerce.

The drag-and-drop interface is intuitive and lets you build your site without any coding or technical knowledge. Also, it’s a great solution, if you want to build websites for your clients that they can manage themselves.

With Visual Composer, you can overwrite any theme by changing the layout and background of your page (if you wish to change the theme’s default settings) as well as apply pre-made templates for faster results. All you have to do is add content to it, and ta-da, your page is ready!

Check out this quick video on how you can get started with Visual Composer:

Keep in mind that the color combinations you choose for your theme have an effect on how your brand is perceived, and raise certain emotions in visitors, so check out this guide to colors and color palettes, beforehand.

Note: Visual Composer Website Builder also offers Theme Integration, so if you are a theme author, check it out!

Discover the Theme Builder and Font Manager Power-Combo and Create Custom Designs With Zero Code

Customize a WordPress Theme with Theme Editor

If you wish to customize a WordPress theme by code, you can use the Theme Editor. To implement changes without affecting the original (parent themes) files, we recommend you use a child theme.

To access the Theme Editor:

  1. Go to your WordPress Admin Dashboard;
  2. Navigate to Appearance and select Theme Editor from the dropdown menu;
  3. From here you can edit your theme's style.css (themes visual appearance) and functions.php (themes features) files;
  4. If you want to add custom CSS you can edit and live preview CSS changes in the built-in CSS Editor.Customizing your WordPress theme via Theme Editor

Note: If you make changes in the original theme file, you run a high risk of losing them after updates (crucial to maintain security) which is yet another reason to use a child theme to implement any changes to your theme’s files.

Conclusions

Now you have all the knowledge to customize your theme in 3 easy ways - with Theme Customizer, Visual Composer Website Builder, and through Theme Editor (by editing the theme’s code directly or by creating a child theme).

And always remember, that less is more. Simple and minimalistic themes are not only trendy, but also sustainable, and perform better because they are lightweight. After all, you are creating a website for visitors to enjoy, not only visually, but functionally!

If you are interested in learning more about Visual Composer and WordPress, you can:

  • Follow our other tutorials
  • Subscribe to our newsletter to be the first to know about the latest product updates
  • Become a part of our community to share your knowledge and learn about WordPress together with our team of experts & other community members! 🙂

Best of all, you can download a free website builder, with more than 50 content elements and templates today! We are sure that you will love it just as much as 90 000 other fellow composers 🤠  ⬇

The post How to Customize a WordPress Theme (3 ways) appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/how-to-customize-a-wordpress-theme/feed/ 2
How to Create and Install WordPress Multisite https://visualcomposer.com/blog/create-wordpress-multisite/ https://visualcomposer.com/blog/create-wordpress-multisite/#comments Mon, 13 Sep 2021 13:10:15 +0000 https://visualcomposer.com/?p=32689 Are you looking for a way to expand your business? If so, then multisite might be the perfect solution. It's an easy-to-use tool that can help with unlimited site management on one WordPress installation!

The post How to Create and Install WordPress Multisite appeared first on Visual Composer Website Builder.

]]>

WordPress is a great platform for managing multiple sites but can be tough to keep up with all your needs. That's why we recommend using the multisite feature! With it, you can create networks of websites that share one dashboard and take care of everything together - making it easier than ever before not to have any problems when managing dozens or even hundreds of different blogs/websites from one place alone.

Take a look at the multisite world!

What is a WordPress Multisite Network?

With a WordPress Multisite network, you can have multiple sites on one installation that all use the same login. You can allow other people to create their own blogs for your domain and customize each website's settings individually.

Who Needs a WordPress Multisite Network?

Just because you manage multiple WordPress websites does not mean that a multisite network is the best option for your business.

There are third-party tools that make it easier to manage multiple WordPress sites from one dashboard. For example, InfiniteWP can help users maintain many different websites without switching back and forth between them all the time.

So who would need a multisite network?

It is recommended to use WordPress Multisite option if you qualify for one of the following cases:

  • A network of websites or blogs for the company
  • A network of websites managed by an agency or developer
  • A SaaS (software as a service) that requires a site network for distribution

A specific example would be a magazine website with different sections managed by different teams that could implement WordPress Multisite to create their individual sites. A business might use multisite for sub-sites of its locations and branches as well, while government websites can manage multiple departments via the multisite feature.

Schools and colleges also utilize this technology to allow students access to creating blogs on school servers easily. All these scenarios highlight examples that would benefit from using WordPress Multisite (WPMS).

What You Need to Get Started with WordPress Multisite

If you already own a WordPress website, then you probably already have everything you need to get started with a multisite. To be absolutely sure, here are the things you need:

  • Hosting: The first thing you should do before beginning to build a multisite network ensures that the server hosting your website can handle it. Shared web hosts might not be best for this type of site because they're usually resource-heavy and will take up memory on any individual domain. So, it's highly recommended starting out by using WordPress hosting providers who are experienced in supporting networks such as Cloudways, Kinsta, WP Engine, or A2 Hosting.
  • Expertise: ​​To add a new post, edit the files or make any other changes, you'll need to be familiar with WordPress's code.
  • Access: You’ll need to edit some WordPress files, so access is required. You can either use the FTP or cPanel methods to upload your changes onto our server from your home computer without any issue whatsoever!

One more thing to consider when activating multisite is whether you want a subdomain or subdirectory for your website, and this will mostly depend on the type of installation.

Choose Your Domain Structure

First, let's find out what a domain name is. A Domain Name System (DNS) is the naming system for assigning name addresses to web servers, and web pages, on the internet. For example google.com or visualcomposer.com.

A subdomain is a domain that is part of the larger domain. For example news.google.com or my.visualcomposer.com.

A subdirectory is any folder that exists beneath a domain. For example google.com/maps/ or visualcomposer.com/features/.

How to install WordPress Multisite

To set up WordPress Multisite you will need to follow these steps:

  1. Install WordPress on your web server. Read a detailed tutorial on how to install WordPress.
  2. Open a wp-config.php file and allocate the very last line:
    /* That’s all, stop editing! Happy blogging. */
  3. Just above this line, add the following code:
    define( ‘WP_ALLOW_MULTISITE’, true );
  4. Don’t forget to save your wp-config.php file
  5. Open the WordPress admin panel to install a Multisite network. Go to Tools – Network Setup and select either to use subdomains or directories
  6. Select a title and e-mail address for your network (or leave them as default)
  7. Click the Install button
  8. Modify wp-config.php and .htaccess files (WordPress will display the exact lines of code that needs to be adjusted)

WordPress Multisite Installation

Ending Note

WordPress Multisite is a powerful tool that can help you manage multiple websites with ease. Being in charge of multiple WordPress sites may seem like too much work, but using this tool will make your life easier by streamlining many management tasks from one dashboard.

The post How to Create and Install WordPress Multisite appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/create-wordpress-multisite/feed/ 1
How To Create and Add a Menu in WordPress https://visualcomposer.com/blog/create-a-menu-in-wordpress/ https://visualcomposer.com/blog/create-a-menu-in-wordpress/#comments Thu, 09 Sep 2021 10:27:40 +0000 https://visualcomposer.com/?p=32665 Learn how to create a menu in WordPress and how to manage your menu locations easily via WordPress admin dashboard or Theme Customizer.

The post How To Create and Add a Menu in WordPress appeared first on Visual Composer Website Builder.

]]>

As you are at the start of your journey into WordPress or looking for ways to better your site, creating a well-organized menu should be one of the primary things on your to-do list.

If you are only still thinking about starting your journey, then you can head on over to our tutorials on how to install WordPress, customize your theme, and create a child theme (for making changes in your main theme, without affecting its files) if necessary.

This article will lead you through the process of creating, styling, and managing your menus, as well as explain how to easily add a menu to your page with Visual Composer.

So, let's get started!

Get over 50 free Visual Composer content elements banner

The Purpose of a Menu

A menu is like a map of your website, so it is important that it is easy for the user to understand, navigate, and most importantly find what they are looking for.

A well-designed menu also betters the user experience, and, as you might have already guessed, translates into conversions later on. Visitors are more likely to stay on a site and browse more content if they are able to reach their intended destination.

In fact, statistics show that bad navigation is the third leading cause of a bad user experience, right after slow loading, and non-responsiveness. As a matter of fact, even the greatest design can't make up for a poorly functioning site.

88% of online consumers are a lot less likely to return after a bad experience

Creating a Menu and Adding Content

Before we add a menu in WordPress, you need to create one. To create a menu:

  1. Go to your WordPress Admin Dashboard
  2. Navigate to Appearance and select Menus from the drop-down
  3. Click Create a new menu
  4. Give your menu a name and click Create MenuCreate and set up a name for your WordPress menu

Now that you have a menu, it is time to add sections and fill it with content:

  1. Select the type of content you wish to display on your menu on the left side (you can choose from pages, posts, custom post types, custom links, and categories)
  2. Click Add to Menu
  3. Save Menu
    Adding content to your WordPress menu

In case you need to remove a section from your menu:

  1. Navigate to the added items under Menu structure
  2. Select items separately by clicking on the dropdown and pressing Remove
  3. If you wish to remove multiple or all items, click Bulk Select, mark them and press Remove Selected ItemsRemoving content from your WordPress menu

After you've selected the content, you can arrange it and add sub-sections:

  1. To change the layout of your menu, simply drag-and-drop the sections in your preferred order
  2. To add a subsection drag-and-drop a section under your preferred location
  3. After you have finished making changes to your menu, don't forget to click Save MenuManaging and adding sub-sections in your WordPress menu

Note: You can also add sub-sections to sub-sections, creating a mega menu with a drop-down.

Managing the Menu Location

Now that you have your menu ready, you can manage the menu locations easily via WordPress Admin Dashboard or Theme Customizer.

To set a location of the menu on your WordPress site:

  1. Select Appearance and Menus from the drop-down in your WordPress dashboard
  2. In the menu editor switch to the Manage Locations tab
  3. You will see all places where you can place the menu in your theme
  4. Select menus for specific locations from the drop-down menu
  5. Save Changes
    Manage location of a menu in WordPress website

Note: You can also access Advanced Menu Properties (to add link targets, title attributes, CSS classes, link relationships (XFN), and descriptions) hiding in the Screen Options tab at the top right corner of the menu editor.

Adding a Menu with Visual Composer

Visual Composer is a website builder for WordPress, that offers tons of great features when it comes to building a full website in the fastest way possible. And, if you loved the drag-and-drop functionality of WordPress, you will most definitely love our intuitive editor.

Using Visual Composer will save you time when it comes to not only creating and managing but also styling your website menus. Create stunning layouts with over 500 content elements, designer-made templates, and addons, such as theme builder.

Select from a variety of ready-to-go menu elements (basic and sandwich menus, as well as sidebar menus for a more unique design).Menu elements in the Visual Composer Hub

For an even better user experience, you can make your menu sticky, meaning that it will always be visible for the visitor, and easier to access.

Finally, let's get into how to add and manage menus in Visual Composer:

Final Thoughts

Now you know how to create a regular and a drop-down menu, manage the location, and customize a menu for your WordPress website, pretty easy right?

Not only that, but also you know that a menu guides your visitors through the site, ensuring a greater user experience, boosting conversions, and reducing bounce rates. For additional help, you can always add a search bar, in case your visitors still can't find what they are looking for 🥸 🔎

What are you waiting for? Download Visual Composer to make your website building experience easier & faster! ⬇

The post How To Create and Add a Menu in WordPress appeared first on Visual Composer Website Builder.

]]>
https://visualcomposer.com/blog/create-a-menu-in-wordpress/feed/ 1