The first rule of Fight Club states that you don't talk about Fight Club. The good news is that WordPress Builder Fight Club is a different breed. It is easy to join, you can talk about it, and there is no Brad Pitt to hold (kick) you back.

At WP Builders Fight Club, all major page builders and website builders compete in a fair game to show their performance and abilities.

What is WP Builders Fight Club?

WP Builders Fight Club is a community-driven project for page builders and website builders to compete in terms of performance, design, and other capabilities.

The idea is simple, you need to create a WordPress page. But not any kind of page - the page needs to follow the Fight Club guidelines and requirements. The requirements include technical specifications and design accuracy.

All pages created with different builders are then stored in a similar environment. This helps to measure the performance and receive unbiased results. The results include reports from GTMetrix and Google PageSpeed Insights.

The goal of the project is simple - have an honest and transparent comparison of all major WordPress builders in one place.

As of today, there are all major page builders and website builders presented, including Elementor, Builderius, Beaver Builder, and Visual Composer.

WP Builders Fight Club and Visual Composer

We decided to join WP Builder Fight Club with Visual Composer. Visual Composer Website Builder is a complete solution that allows you to build WordPress sites without using the styling of any WordPress themes.

Our goal was to complete the challenge to showcase the capabilities of our visual site builder while not compromising on performance.

Our solution consisted of Visual Composer, Advanced Custom Fields, and SVG Support. We also had Twenty Twenty-Three theme installed (per WordPress guidelines) but did not use it. What makes Visual Composer stand out is that we will not load any theme files if you are using Theme Builder to avoid theme footprints on performance.
The page layout was built using Visual Composer Theme Builder where you can design headers and footers. In the layout, we used Advanced Custom Fields for dynamic content and custom CSS for additional styling.

Since Visual Composer is a low-code solution, web developers and agencies can easily tweak the look and feel of their sites using custom CSS and JavaScript. In the Fight Club challenge, we used custom CSS to introduce pixel-perfect image overlap.

For the content part, we used Visual Composer free and premium elements from the Visual Composer Hub (cloud element library). The library consists of hundreds of content elements and integrations which reduces the need for additional plugins and add-ons.

Results

With Visual Composer, we managed to score 98 performance points in GTMetrix and Google PageSpeed Insights. The score on mobile was a bit lower (88 points) which means there is room for improvement.

We also reached 100 points in the structure and high scores for accessibility and SEO. To be fair, we did not work on the SEO score as a part of the Fight Club challenge. Jumping into Visual Composer Insights and data attributes can easily help you to get 100 points in SEO.

If we compare Visual Composer with other major builders on the market, we see that we have scored higher than some well-known players and are among the top solutions among builders when it comes to performance.

If you’re curious, you can learn more details about how exactly the page was replicated, what challenges we faced, and how we overcame them.

Good time management skills are crucial for any profession. It allows you to get things done, do the right thing, and avoid burnout.

There are those who handle it better than others, but I doubt there is a person who has never thought about it. We all want to accomplish more and avoid wasting time on insignificant questions.

Today, I want to share with you tips from one of our long-time teammates.

Rohan Khandeparkar is a Visual Composer support team lead who handles customer requests for both - Visual Composer and WPBakery. It has always been a secret how he manages to address all the tickets and keep the satisfaction rate as high as 94%.

And this is why we invited Rohan to do an internal educational event on his time management practices.

But why keep it to ourselves? As sharing is caring - we want our customers and readers to discover new ways to handle their time in a better way.

Before we begin - time management matters

In case you think that time management is something that everyone is aware of - think twice.

Only 18% of individuals worldwide have a dedicated time management system in place. An average worker spends more than 50% of their time working on low to no-value tasks. On 20% of people feel that their work is under control.

These are some stunning numbers and you can easily find more statistics to prove - time management is a thing.

What does it mean for you and your business? It seems that half of everything you do as a company is a waste of time.

It also means that there is an opportunity out there.

With proper time management in place, a company that is half-size of its competitors can win the market.

It also gives your teammates confidence that they are working on something meaningful.

What would Rohan do?

It all starts with planning. Whatever you do - you need to have the plan to follow.

A good plan will ensure that you know exactly what to do and will help you measure your success.

What Rohan suggests is to think ahead and have your plan for the next week ready by Friday.

It does not mean that you are all set up. As we run the support team meetings on Monday, it is ok to make changes once you have new variables to operate with.

Moreover, you can make adjustments to your plan on a daily basis if you feel that you are missing out on something rather important.

Think about it:

• Start with the planning
• Plan for a week ahead
• Adjust your plan during the week

Can't wait to see what web design trends will dominate the market in 2023?

We have analyzed web design technologies, practices, and patterns that are currently on the rise to give you a shortlist of web design trends.

Without further ado, let's dive into the web design trends of 2023:

• AI images
• Component-based design
• Sketches and notes
• App-like filters
• Circles and cylinders
• Serif typography
• Black typography
• Sustainability

Robots attack images

Today, AI copywriting is all over the place. People either talk about the power of AI or actively use it to produce written content.

The market of AI content creation is growing rapidly as one of the early birds, Jasper, managed to secure another round of investments and reach a value of $1.5B.

The WordPress industry is not that far behind with Bertha.ai and similar promising tools building a solid user base.

Ok, AI copywriting is nothing new anymore, but what about images?

Recently, plenty of AI companies have released early prototypes of AI images (Jasper and Bertha included). The results look astonishing.

While there are visual flaws and plenty of space for improvements, we believe that AI images will explode in 2023.

Designers? Calm down - it won't put you out of work any time soon.

Just like with the AI copywriting, AI images still require an expert to turn a good copy or image into an excellent one.

Should you adopt this trend? We highly recommend you try out some of the AI tools on the market.

For a business, this means speed and optimization. In the world of economical recession, these are magic words.

Cards and components

Another trend driven by the optimization of costs is the use of components.

This means reusability and fast content management.

While it may look like something already there, we see a strong movement toward adopting component-based frameworks, like Tailwind, and features like Global Templates.

Component-based frameworks allow you to quickly set up websites and reduce time-to-market.

Managing components is fast and easy since you can modify multiple instances simultaneously.

Global templates serve the same purpose by having a single point of management.

Sketches and notes

If you were looking for graphic trends, this is where you should start.

As a designer, you want to focus visitors' attention on certain parts of the layout. Plus, giving a useful hint never hurts.

We are used to highlighting things that we find important. Using circles, arrows, and underscores is a common practice for everyone making notes.

The same technique can be applied to web design.

In 2023, expect to see more websites using hand-drawn graphics to emphasize certain parts of their layout and catch visitors' attention.

App-like filters and menus

Sticky menus have become a common practice for a better user experience. Placed on top of the page, usually, they allow visitors to quickly navigate across the site to find information.

Recent studies show that more and more websites are adopting sticky menus but with placement at the bottom of the page, just like mobile apps.

In addition to menus, filters are coming into the web allowing visitors to adjust website preferences.

From simple dark mode and light mode switches to product filters, additional options make usage of the website more personalized and visitors feel special.

Circles and cylinders

A circle is considered to be a perfect geometric figure to represent continuity and eternity.
Designers love circles. In web design, circles and similar elements are often used for the graphical part and branding.

While there has always been a wide use of circles on the web, we see designers using circle-type shapes more in 2023.

Cylinders, half circles, and outlined circles are expected to appear more - as central and background elements.

But my branding does not contain circles.

No worries, you don't have to run for every trend out there.

A new Serif in town

In the last couple of years, sans-serif has been dominating the web with all major sites and apps using Roboto and similar font families.

Things are about to change in 2023.

While we already see more and more serif-type typography used for graphic design, we expect serif fonts to be adopted for textual content more often.

In fact, the latest reports on accessibility suggest that serif fonts are as good for readability as sans serif which opens a door for more wide usage.

Plus, taking into account the popularity of sans-serif, using serif fonts can help websites to stand out.

Back to the black

When was the last time you had your CSS stylesheet containing p { color: #000 }?

Most web designers avoid using black color for typography. Instead, the majority prefer using dark tones considering them to be more stylish.

Nevertheless, many award-winning sites are starting to bring back the trend of using black color.

Why so?

There are several reasons behind it.

All trends are following a cyclic path and we are at the point when pure black is back in business.

The growing trend of accessibility also has an impact on color schemas. Black color is considered to be better when it comes to contrast ratio and readability. We all know how picky people are when it comes to Google Lighthouse reports about the contrast ratio.

Is it a good idea to go all black? I would say that this is one of the trends that is easy to follow since all you have to do is change a few lines of CSS or adjust the settings of your Font Manager.

Sustainability

How do your website and development processes impact the global environment?

Modern web developers have started to ask this question more often.

We all see how COP conferences are getting more attention year to year. Large corporations are investing in sustainability and a green economy. Hosting companies are looking for a way to optimize resource usage.

It will take some time, but individuals and SME businesses are already looking for ways to improve things on a micro level.

New startups are coming live with ideas that support less resource usage for the development, deployment, and maintenance of websites and applications.

Businesses are talking to their customers to get feedback on how they can improve their products - not only features but sustainability.

Plus, smart resource usage comes with a business-friendly side-effect - reduced costs.

Conclusions

Without a doubt, it is crucial to understand what will dominate the web design market in 2023. Knowing the trends can help your business to move forward and win over your competitors.

You can become faster, smarter, and stronger by applying them to your business. But, as always, I see no reason to apply all trends at once as it will take lots of time and money.

Think about what really matters and makes a difference. What can be done for a quick win and what should be done for long-term goals?

Got anything to add to this story? Join the discussion in our Facebook community.

Did you know that up to 30% of all customers who choose premium WordPress products are motivated by access to premium support rather than features?

That means customer support can become a cornerstone for your success. All you have to do is to become good at it.

While it may sound plain simple, customer support goes far beyond the support portal and managing issues.

At Visual Composer, we have always kept the customer experience as our top priority.

We have been known for good customer service since the beginning, but, during the last year, we made some extra steps to go from good to excellent.

Sounds too generic?

As of today, our customer satisfaction rate is at 94% - a way above the industry average. We have plenty of customer reviews highlighting our customer service. The average ticket response time is under one hour. Our online chat response time is under 30 seconds.

While we are not Zappos, there are things we have discovered that work great for WordPress businesses and a freemium model economy.

In this article, I will share 10 things that have helped us to improve our customer service and can apply to your business.

Know your geography

Where are your customers located?

Do you serve North American market with your headquarters located in Europe? Well, we do.

Imagine that our active support hours would be aligned with our location rather than where our customers are.

I believe our average response time would jump from less than an hour to something close to 8 hours. A disaster if we talk about getting things done on a short notice.

Building your support shifts based on your customer location is a must.
Whatever your next steps for improving your customer service are, setting up a proper shift schedule is the first thing you should do.

Plus, it is really easy to measure. Pay attention to your initial response time and average resolve time - these metrics will help you to understand if and how you should move your support shifts.

Support your free users

A freemium business model goes hand in hand with the WordPress economy.

It is obvious that all WordPress products have free versions available. And, it is obvious that support is usually a part of the premium deal.

Nevertheless, free users deserve your attention.

You may want to use an argument about those 30% of users who go premium because of support. Yes, but what we found out, it has nothing to do with the fact that you help your free users out.

In fact, a good customer service for your free users tends to be a great motivator to consider going premium.

Just like you want to build a closer relationship with people you like - your customers want to build their business relationships with reliable and trustworthy partners.

Plus, if you have a product on WordPress official theme and plugin repository, you may want to keep all your support issues resolved (usually opened by free users) since it has an impact on your theme and plugin rankings.

Manage availability

There are rare cases when your support is available 24/7. It asks for huge investments and may be harmful to your budget sheet.
At the same time, there is nothing worse than opening an online chat and understanding that there is no one to answer your questions.

To avoid such a frustration, we decided to constantly enable/disable tools that we are not able to serve at the moment.

If you see an online chat available on our site - we are there to answer you.

The same principle applies to contact forms and other communication widgets.

And, don't be afraid to remove things - your clients are not that stupid and will find their way around to reach out. At the end of the day, they were smart enough to purchase your product, right?

Think one step ahead and get personal

Is there anything else I can help you with? That's the least you can do.

Always think of the next step your customer is willing to take.

Did you customer asked about how to set up a contact form to capture leads? Give him/her the answer and suggest additional points for optimizing it.

Taking an extra step may help your customers to solve their next issue before they even know it.

On your side, it will help you build a strong relationship for further communication. Once you are friends with your clients, you can always ask for a review or a quick test-drive of your beta version.

Don't be afraid to share your personal email. Let people know that you are easy to reach.

Get your team involved

Customer support is the responsibility of all your team members.

While the support team is at the frontline of customer care, every team member should dedicate time talking (and helping) your clients.

We get our development team to address advanced customer cases. Our marketing team is involved in the communication.

Are you the CEO of the company with lots on your shoulders? Well, I guess, talking to your clients is more important than planning a company-wide retreat in Bali (Michael, if you are reading this - there is nothing wrong about planning a retreat in Bali).

Analyze, review, and learn

Analyzing previous issues and changes is one of the most efficient ways to get better.

A regular team retrospective is a must if you want to make sure that there is a progress in place.

While the support job does not sound like an agile environment, you may still borrow rituals from Scrum or Kanban.

We have learned that weekly plannings work best for setting short-term goals related to our support objectives and help the team to stay synced.

At the same time, a quick retrospective and demo every second week helps us to look back on our progress and review interesting cases.

Offer multichannel support

There are people who prefer Facebook over email and contact form over the support portal.

Of course, your wish is to move them through your customer care pipeline but you can not force them.

It makes no sense to ask your customer to open a support ticket just to copy/paste text form their tweet or comment.

If you believe that the problem can be answered right away and does not involve any sensitive data - just do it. Both, your support team and clients, will spend less time on resolving the issue and avoid bureaucratic loop.

Give ownership

Every team should own resources within their scope of competence.

At Visual Composer, we decided to completely rebuild our help center while putting the support team in the very center of the process.

Who else can know better what your customers are constantly looking for? From design to initial structure and content - all was managed and build by our support team members.

The results are on the plate. The support team takes a full responsibility for the help center and constantly manage (update) content of the help center.

It is their owned media they are proud of and it is their tool that help them while working with our clients.

Support is not a ping pong game

WordPress is an ecosystem so this is rarely the case when your theme or plugin is the only thing installed on your customers' site.

Have you ever experienced the case when support is telling you that another plugin or hosting is causing the issue?

As a customer, I hate myself being ping ponged across different software vendors. I just want my problem to be fixed.

While you can not avoid that completely, it is always a good idea to look a bit deeper. Get in touch with other WordPress businesses, establish relationships, do an additional investigation.

It usually takes few minutes to write an email to our friends and partners from the WordPress space to make things moving forward.

Set objectives and key results (OKRs)

You may have awesome improvements, but without proper metrics in place you will miss the point. Measuring your success (or failure) is equally important.

In the support team, we stick to quarterly OKRs (objectives and key results) to help us track our success.

A good OKR tells you what you should focus on and motivates your team. The trick is to make sure that objectives are coming from the team rather than management.

As we define our objectives, we focus primarily on two things - customers and team.

A customer-oriented objective is all about satisfying the needs of our clients and the community.

The team-oriented objective is focused on making our support team happy. Happy people achieve great results - never underestimate it.

Conclusions

Changing processes comes at a cost and you will make mistakes along the way. We experimented a lot and, trust me, not everything worked out the way we wanted.

But, as Thomas Andrew Parker said, it don't matter if you do ten stupid things, as long as you do one smart one.

I gave you ten things so you'll have to figure another one on your own.

On a serious note, not everything from the list may work for your business but you'll never know unless you try.

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.

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.

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.

There is always someone talking about WordPress page builders and performance.

It's a hot topic that receives tons of attention. Conference speeches, blog posts, and even Facebook comments - everyone has a story to share.

No wonder, page builders are prioritizing performance as one of the focus areas. Some even share their success in a form you're all familiar with.

“Our page builder just became faster.”

But what does it really mean? Does it apply to everything that the page builder does?

I'm not in the position to talk about all page builders, but I can say a thing or two (probably more) about Visual Composer.

Today, I want to explore how performance “operates” in Visual Composer. What critical factors affect it and share some of the improvements we've implemented recently.

But before we begin…

This topic was born as the result of our internal educational session which means you have a chance to really look under the hood of Visual Composer.

Let's go.

Performance and resources

When talking about performance, it is important to understand where does it come from.

There are three main components (resources) that are “working” with performance.

It is Network, CPU, and RAM.

In addition, it can refer to either client or server sides.

What does it mean?

Whenever you work with the page builder, either your computer or server resources are consumed. The availability of those resources and optimizations on the page builder side will determine how fast (or slow) your experience is.

In the next chapter, I will present (and explain) the performance schema of Visual Composer. I will mark every block with the resources that are used within the process as followed:

• sNET - server-side network
• sCPU - server-side CPU
• sRAM - server-side RAM
• cNET - client-side network
• cCPU - client-side CPU
• cRAM - client-side RAM

Understanding the resources in use makes it easier for web creators to analyze whether the server requires optimization and how to boost the performance.

Visual Composer performance schema

There are three main blocks of performance we can distinguish:

• Requests
• User interface
• Server-side processing

As you can see from the schema, server-side processing mainly relies on server resources. Requests are a mix of both, while the user interface is highly impacted by the client-side.

We will look into the details of every block to get a more clear understanding.

Requests

All requests refer to the editor's saving and loading operations. The performance of the operations depends on both - the client and server.

The client needs a good network to perform the operation and the server should be able to process as fast as possible. Here, the main pressure lies on the server CPU.

In other words, shared hosting with a virtual CPU (serving many sites) may get you into trouble.

RAM is used for the PHP processes to store arrays and objects in memory. This means that large content blocks with multiple options enabled will consume a good portion of RAM and will have a significant impact on saving operations.

RAM size of at least 256 is much preferred.

To improve performance for these operations, optimization of data size is needed.

In Visual Composer, we have introduced a binary data format that allows us to send more data in a smaller size. This means that fewer server-side resources are spent on saving and loading.

Not all servers accept binary data. The problem usually occurs with Apache and some clients were not able to save the content because Apache refused to accept binary data.

For that, we have introduced an option to enable alternative base64 encoded saving. The method is slower but can be used by clients who are not able to use binary data.

User interface

All about the user interface is all about the client-side (mostly).

Element actions like, adding, removing, updating, and sorting (drag and drop) are managed by the client's browser.

Therefore, resources on your side are crucial.

Most of the user interface processes are consuming CPU power.

To optimize it, we rely on React and other modern technologies.

It is important to keep the framework up to date and perform regular component updates. In other words, keeping development debt low.

We found that technologies like React hooks can significantly improve the performance of these processes.

There, Visual Composer benefits from things like React hooks.

At the same time, hundreds and hundreds of elements will make operations like drag and drop costly.

Talking about rendering - a good network and CPU is needed. Since you need to load elements, images, CSS, and other assets - your network will experience a good amount of workload.

Loading components refer to how fast the server provides the information and how fast the client receives it. Both client and server network plays a significant role there.

To optimize the process, we are using package bundles in production.

Optimization of these bundles is crucial for Visual Composer.

One of the improvements we have introduced recently is gZip support. gZip allows reducing the size of the bundle up to 5 times which means that things will work 5 times faster.

Of course, your server should be able to operate with gZip which is not always the case and some legacy solutions are needed for some clients.

Server-side processing

Server-side processing refers to how fast your server operates with the data.

The time that is needed for the server to take data from the database and process it.

As you can guess, CPU and RAM play main roles there.

Talking about problems and risks, low memory limits can affect the speed of these operations. To avoid the issues, your server must be well optimized and has a sufficient amount of resources.

Outro

Performance is a tough topic and requires attention at different levels.

From the page builder perspective, this means following the latest technologies and introducing regular improvements.

On the web creator side, it is needed to ensure that your server is ready to work with the technologies offered by the page builder.

With both parties involved, performance issues go off the table.

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.

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.

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

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.

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).

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).

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.

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.

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.

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.

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.

It's another year around and we are thrilled to look back at what has happened to Visual Composer in 2021.

This year, we released new features for web creators, built a stronger community, launched partnership programs, and more.

In 2010, there were around 210 million websites online. Today, the number has grown to 1.8 billion.

Today, it is not enough to build a website or understand technologies. You need to adapt to the ever-changing environment, experiment to stand out.

To help you out, we have collected the most important web design trends to dominate in 2022.

Accessibility matters

Accessibility is surely not a new kid on the block. In many countries, it is already a requirement to build websites with accessibility in mind. The web should be accessible to everyone.

Of course, building websites with integrated features for accessibility requires additional effort and raises costs. This is why businesses sometimes require a trigger to boost it.

Google Lighthouse project is such a trigger. With the booming popularity of Core Web Vitals, everyone aims to get a higher score when it comes to performance, SEO, best practices, and accessibility.

With high scores, websites work faster and rank higher. What kind of business wouldn't want that?

In 2022, we can expect more and more businesses paying attention to accessibility. Incorporating analysis tools for accessibility, like Google Lighthouse and Visual Composer Insights, to comply with WCAG standards will become a norm of modern web development.

Focus on actions

Next Best Action is a part of the customer-centric approach where businesses think of what is the next action their customer should take.

On the web, this means giving customers a clear message on what they should do next. It is not about hero messages anymore. It is about pushing customers to the next stage of your sales funnel.

We are talking about replacing fluffy messages with call-to-action buttons and removing disturbance around them.

It is time to experiment with your buttons, shape, color, size, animation - whatever comes to your mind to make it unique.

What's the outcome? Better user experience and higher conversion rates.

Red alert

Often considered as aggressive or oversaturated, red makes things stand out.

In the past, people avoided using red in web design. Ask any expert and you will receive the same answer.

But, just like red lipstick, red buttons or titles can be a powerful instrument for grabbing visitors' attention.

If we look into the latest nominees at Awwwards, top web designers start to adopt the red color more and more. With different tones and variations, there is plenty of room for experimenting.

While it is really easy to oversaturate your website with red, there is a case when red can become your advantage.

Back to the future

Design trends tend to repeat. The small cycle takes around seven years. The large is something around thirty years.

Want to know what's coming next? Look back into 1991 and what was trendy back then.

Vibrant colors, disordered typography, standalone elements, and various shapes. These things are coming back into the web.

To keep up, look into how you can colorize your online presence. Become more fun in design and communication.

Less jQuery, more ReactJS

The web is becoming fast. This means there is no room for legacy technologies.

jQuery library has served us well for a long time. Don't get me wrong, we've managed to create awesome things with it. But, it is about time to move forward.

ReactJS is booming right now. Early adopters, like Visual Composer, have been using it for a while already. WordPress moved into ReactJS as well.

With the market size of WordPress, ReactJS is the thing.

In 2022, we expect to see even more React-based solutions. So, if you haven't looked into ReactJS yet - this is the right time to do so.

Blogging and beyond

Content marketing has always been on top of your marketing activities. It helps you raise awareness, generate traffic, deliver messages, and rank higher for desired keywords.

SEO is a neverending battle. You have to get into a brawl with your competitors and look for opportunities. The question is, how do you manage all of that if you have limited resources.

It may look that you are not able to cover all the topics you want and need.

Well, we have some good news for you.

Ai is a hot thing for a while already. In 2021, we've seen new tools, like Bertha.ai, rising to help businesses handle content marketing with the help of artificial intelligence. You have to spend less time writing content which means you can produce more content.

In 2022, we expect people to dive even deeper into Ai-generated content to strengthen their content marketing efforts.

From a simple proposition to complete blog articles, businesses will take advantage of artificial intelligence when it comes to their online presence.

Large buttons

We talked about putting buttons in the middle of everything. As we do, it is time to think about the size.

Button size matters. If you follow the Next Best Action approach, you want a button to be the thing that you spot easily.

Large buttons are easier to click no matter what device type you are using. They are good for accessibility. The size allows you to play around with shapes and details.

How to convert your existing website?

This shouldn't always be about a complete re-design. You can start small by simply increasing paddings and font size.

After, run experiments with Google Optimize or similar tools to see how button size increases your clickthrough rate.

Video killed the radio star

Why do we even talk about videos? They are getting popular anyway.

Exactly! If you go around the web, you will see videos being at almost every corner.

Nevertheless, with social media networks, like Instagram and Facebook, pushing more video content through stories and similar features, we expect videos to blow up the web.

Some people still think that producing videos is hard and time-consuming. Think again.

It has never been easier to create video content for your brand or company. It has never been easier to jump into real-time marketing.

Various tools and apps allow you to quickly film the video, add effects, apply filters, and publish it on the web.

If you think about your web in 2022, make sure you have a solid ground for video content, like video elements and social media integrations.

Conclusions

Whatever your business niche is, you should always keep up with the latest trends.

They can help you stay fresh, show your growth, and most importantly - increase your conversions.

You can go with just one idea from the list above or think about how you can monetize on all of them. The most important is that you do not leave your site unattended.

At Visual Composer, we believe that your site-building processes don’t end with the launch. It is just the beginning of the journey. Look into data, analyze your site with Insights, Lighthouse, Hotjar, or any other tool out there and think how you can improve.

And, if you are looking for additional ideas, check out NFT artworks - another booming topic that is supposed to grow enormously in 2022.

Get ready for full-page design options - an easy way to style your pages without coding. Visual Composer 38.0 comes with Design Options controls you can apply not only to a row or section but a whole post or page.

We continue to enhance your design experience with Visual Composer. With familiar design options being a part of every content element, we aim to extend this functionality to the posts and pages you design.

Page design options allow you to control the background color, image, margin, padding, and border of your page. It overwrites the default styles of your theme making page design options a perfect companion for creating landing pages.

How to Use Page Design Options

To access page design options, go to the On-Page Settings from the Visual Composer frontend editor and click on the Design Options tab.

From there, you will see the well-known design options controls which can be adjusted to your needs. All changes will be automatically displayed on your page.

Moreover, we created page design options with responsiveness in mind. This means you can add different styling for different device types. For example, add a background image on a desktop and replace it with the background color or mobile to improve performance.

The page design options are available to all Visual Composer page layouts and the Starter theme. Some other themes may experience compatibility issues due to their styling options and layout structure.

When to Use Page Design Options

From the landing page styling and up to small design tweaks, there are many cases where page design options can be applied.

Most marketers want their landing pages to be a bit different from the main site. With design options, you can easily add a background image or change the color to make it look different.

Your theme does not support background color controls or restrict using images? No worries, Visual Composer can handle that for you.

For a non-technical user, page design options allow adjusting page style without writing a single line of code.

Want to introduce a small and trendy border to make your page look like a card? Page design options allow you to control the border width and color of your page.

We are sure you can think of many more use cases or you can always find inspiration in our showcase.

Are you thrilled about page design options? Let us know in the comments or share your work in the official Visual Composer community on Facebook.

Happy designing!

P.S. Yes, page design options are available in the free version of Visual Composer.