The most anticipated Visual Composer release of the year (version 45.2), introduces some exciting new features and performance improvements that make it an even more powerful tool for web experts. One of the most significant changes are the element edit window improvements, which offer a more efficient web development experience.

If you're a WordPress developer, web designer, or agency that works with Visual Composer regularly, you'll want to learn about these new developments. In this blog post, we'll look at the features and discuss how they can make your life easier.

Enhanced Element Edit Window: Streamlined Editing and Easy Navigation

Enjoy a smoother web development process with the enhanced element edit window in Visual Composer 45.2. This update revolutionizes the way content managers, designers, and developers work by providing separate tabs for content, design, and advanced settings.

Content managers can now focus solely on managing content, while designers can effortlessly fine-tune the design elements, and developers have their advanced options neatly organized in one place.

With a simple click, you can easily navigate to the parent elements of any content element within the element edit window. This is a great feature if you're working with complex website layouts, as it allows you to quickly find the element you need to edit.

Managing Tab Access Based on User Roles

Additionally, in Visual Composer 45.3, website admins can also adjust the permissions to specific tabs in the Role Manager for each user role: General, Layout, Content, and Advanced.  

This separation of responsibilities ensures a streamlined workflow among team members, reduces human errors, and simplifies the interface for all users working on your site.

Advanced Settings for All Individual Rows, Columns, and Elements

Along with the element edit window update in Visual Composer 45.2, the advanced settings give you more control and precision over the styling and functionality of every separate element on your website.

This level of customization ensures that the website is tailored to your personal or your client's specific needs and preferences.

In the new advanced tab, you will find the option to add HTML attributes, custom attributes, and custom CSS to each row, column, and element.

Custom Attributes

Custom attributes in Visual Composer 45.2 can be used to store additional information or condition for any element on a page.

For instance, you can create a dynamic product grid where each item's data attributes contain information such as product name (data-name), price (data-price), or availability (data-availability), which can be automatically pulled from a database.

Additionally, the use of attributes can make your website more accessible, which is essential for screen readers and more importantly for people with disabilities. For example, role attributes describe a role of an element on a webpage (e.g. role=”button”) and aria-* attributes describe non-text elements (e.g. aria-label=”laptop image with hands”).

How to add custom attributes to rows, columns, and elements

1. In the editor, hover over the row, column, or element you wish to adjust, and click on the edit button
2. In the element edit window, navigate to the advanced tab
3. Click and expand 'Custom Attributes'
4. Add an extra data attribute

Note: You can add as many data attributes to an individual row, column, or element as necessary - just hit the space in between each attribute (e.g. aria-label=”...” aria-label=”...”).

Custom CSS

With the latest update, you can now add custom CSS to all individual elements more easily, and directly within the advanced settings of every single element, in addition to adding custom CSS both locally and globally in the general page options, the same way as before.

The [element-id] placeholder is a dynamic reference to the element you are adding custom CSS to. And, you can copy and paste it in the same window, if you want to add several CSS rules.

How to add custom CSS to rows, columns, and elements

1. In the editor, hover over the row, column, or element you wish to adjust, and click on the edit button
2. In the element edit window, navigate to the 'Advanced' tab
3. Click and expand 'Custom CSS'
4. Add custom CSS using the [element-id] placeholder

Introducing The New <div> Container Element (Premium)

The new container element provides enhanced flexibility to expand Visual Composer through custom code. This element is specifically designed for developers and is available with all Visual Composer Premium Plans.

The <div> container doesn't contain any additional attributes of the Visual Composer elements, allowing you to seamlessly expand it using custom CSS and JS.

Moreover, you can incorporate any desired element within the <div> container, and nest multiple <div> elements within each other to meet your specific needs.

Release Wrap-Up

With the release of Visual Composer 45.2, you can say goodbye to the headaches of complex website structure navigation and hello to an element edit window that streamlines the process.

With the integration of custom CSS, and data attributes for individual elements, as well as the <div> container element, content management, and design modifications become even easier. So, update now or grab your Premium Visual Composer license today!

Collaboration is key to a successful web development project, but it can also be one of the biggest downfalls, as it accounts for 52% of the main challenges that web development companies face.

That's why we're excited to introduce the Atarim integration in our latest release, version 45.1.3 - the ultimate solution for web developers and agencies to make website development and client collaboration a more enjoyable experience.

No more dealing with multiple programs for project management, endless feedback loops, and back-and-forth emails. Create complete sites and collaborate with clients and teams in the same space. Read on to discover how it can transform the way you work.

Why Atarim is a Must-Have Tool

The Atarim integration with Visual Composer brings a range of useful features and benefits to web developers and agencies.

Firstly, you can receive feedback and respond to client requests in real-time, by seeing exactly what the client is referring to, without leaving the editor. This feature is especially helpful to eliminate any misunderstandings, since clients may not be familiar with the technical terms.

In addition, the Atarim integration simplifies project management by providing a centralized platform where you can access all your project files, deadlines, and client communications in one place.

The Atarim Dashboard allows you to easily track the progress of your projects and stay on top of your deadlines with the various built-in features including auto-updating Kanban boards, time tracking, and more. This is particularly useful, when it comes to team collaboration, as it helps increase accountability and gain valuable insights into project workloads, to better justify the costs to clients.

Read on to learn how to start using all of the Atarim features in Visual Composer.

Launching Atarim in Visual Composer

To start collaborating with your team and clients from inside on any page or post, make sure you have updated or installed the latest version of Visual Composer. Then, simply follow these steps:

1. Navigate to 'Insights & Notifications' in the navigation bar
2. Open the tab 'Collaborate' and click on 'Start Collaborating For Free'
3. Install and activate the Atarim plugin
4. Create a free account by filling in your details, assigning a WordPress account, and adding contributors
5. You will be automatically redirected to the editor, where you can start using Atarim.

Both free and premium Visual Composer users have access to the Atarim integration, which allows them to easily collaborate with clients and team members.

Developers can share the link with clients and invite contributors to add comments, assign tasks, and set priority and status levels. Clients can even attach files, take screenshots directly within the preview page and attach comments on specific device types, all of which you can manage from within the editor.

In addition, you are also able to see details about the issuer's browser, and screen resolution, as well as share a link to the specific task and add private messages that only team members can see, which are all extremely handy features. Overall, with the Atarim integration, you can ensure that everyone involved in the project has access to the same information, making it easier to manage projects and deliver results on time.

If you are a solo developer, the free version of Atarim offers a handful of useful features for you to work individually with clients. But if you're looking to work with a team, the premium version is the way to go.

Start Collaborating Efficiently

We couldn't be more excited that Atarim's very first integration with a WordPress website builder is with Visual Composer. It is a game-changer for web developers and agencies, as it solves the common challenges of unclear communication and project management, by providing a streamlined and visual way for clients and teams to collaborate.

By following the simple steps to start using Atarim, you can transform the way you work and unlock your team's full potential. If you're interested in learning more about our partnership, be sure to check out Atarim's announcement.

Try the powerful free version of Atarim in both Visual Composer Free and Premium, and see the difference it can make in your web development projects.

Business owners and marketers look toward web creators and web agencies that they work with to deliver functional, fast, and beautiful websites. The way we at Visual Composer see it, this depends on the ease of use, intuitiveness, and continuous improvements of the chosen web development and design tools that you as a web developer use.

With that in mind, we're happy to announce two exciting new features in the latest Visual Composer release, among other improvements. First is a set of workflow enhancements for building page layouts and adding content in one place. Meanwhile, another small yet impactful feature allows adding images to placeholders directly from your desktop.

These updates greatly benefit the user experience and simplify the website creation process, making it faster and smarter than before. Let's explore them up close!

Trim Away Steps in Layout Creation with Blank Page Wizard

Before, once you decided to create a new page, you might have sometimes found yourself staring at a blank page, unsure where to start. Or even switching from the front end of the editor back to the WordPress dashboard, just to make adjustments in your layouts. But not anymore.

That's why we created the Blank Page Wizard. This feature ensures that you move forward with website development effortlessly by introducing a streamlined way to get started. By allowing you to pre-select the layout and content whenever you create a new page, post, or any other type of content, you can start working on the page faster, all in one place.

How The Blank Page Wizard Improves Your Workflow with Visual Composer

This feature will guide your workflow when creating a new page or post with Visual Composer. The Blank Page Wizard works like a setup page before you actually begin working with the Visual Composer editor.

Upon arrival, you can start by choosing your layout from these options:

• Theme Default layout
• Blank page layout
• Custom layout template (create a new one or choose from your pre-made layouts, available in Visual Composer Premium)

From there, you can choose to already add content to the content area of your page or post, and select from:

• No content, and create or add content later on
• My templates, and select from your saved list of templates and template blocks
• Visual Composer templates, with a selection of over 200 pre-made templates available in the Visual Composer Hub

Note: You can now view the most popular full template previews that are available in Visual Composer Hub before adding them to your WordPress website. This saves space by downloading only what you need.

Lastly, adjust the post settings for your newly created page or post, from within the Blank Page Wizard, the same as you would modify WordPress.

For pages, you can make changes in the settings for:

• General, for adding a permalink and a parent page
• Featured image, for setting the featured image
• Discussion, for allowing comments, trackbacks, and pingbacks on the selected page
• Author, for selecting the creator of the page

For posts, you can modify additional settings, such as:

• Categories
• Tags
• Excerpt

The biggest benefit of starting with Blank Page Wizard to create pages and posts — it guides you by reminding you what needs to be done before adding content, polishing the design, and publishing the page from the editor. And, allowing you to do it all in one familiar place.

We all know that changing fonts is important for branding, but it can be challenging and time-consuming. But not anymore! We are happy to announce that you can now easily change fonts on your site with a few clicks of a button.

Font Manager is an addon for Visual Composer premium users. Make sure to update to the latest version to access this feature! It allows you to choose any Google Font and apply it in seconds WITHOUT touching any CSS code.

You can use Font Manager to change default theme fonts globally (on your whole site at once) and choose from all Google Fonts! This means you can make your posts and pages look like anything you want them to be - clean, modern, elegant... the choices are limitless!

This latest version of Font Manager introduces responsive settings, to apply different font styling for different devices. We would be happy to hear your feedback, to help us improve it and make the next version even better!

What Features Font Manager Has To Offer?

The Font Manager feature list is constantly growing. We keep improving functionalities, features, and usability regularly. Greatly thanks to our dedicated Premium Visual Composer web creators who provide helpful insights by submitting feature requests on what they wish to see in the addon.

• Google Fonts. Select from all Google Fonts.
• Editing options. Get every aspect of your fonts to a T - change the size, style, color, height, spacings, margins, capitalization, and other elements for your typography settings globally.
• Responsive mode. Define font styles and other attributes for different devices.
• Smart preview. See how any changes would appear on the page instantly. The improved preview lets you select, view, and edit specific text parts from the preview for easier editing.
• Dark mode. Just like in TinyMCE editor, toggle between dark and light backgrounds for better accessibility.
• Menu and submenu. Control all typography settings for your 1st and 2nd level menus.
• Headings, paragraphs, and blockquotes. Change all fonts from most important to least important text elements and style each one as you wish.
• Captions. Customize the texts that appear under images.
• Bullets. Select bullet color and style from circles, squares, and lines.
• Buttons. Create a button font design that matches the whole feel of your website.
  Link Styling. In addition, you can control link styling for every single text element - choose the color, underline, and hover options for each one.

A sneak peek into future updates are Responsive controls in Font Manager in 3.0. You will be able to define the font size for specific devices.

How to Use Font Manager

You can get the Font Manager addon either by downloading it from the Visual Composer Hub or via the Visual Composer Dashboard - Font Manager section in your WordPress Admin Panel and find the font that best fits your theme.

Once you have navigated to the Font Manager, enable it to start the magic!

You can change the font, styling, and size of your headings, paragraphs, and blockquotes. Plus, you have the ability to switch the styling of your links as well (underlining and hover color options).

The Visual Composer Font Manager works with the Visual Composer layouts that you can choose from in the page settings in the frontend editor and Visual Composer Starter theme.

For additional options, you can also change the letter spacing and line height, margins, and capitalization (UPPERCASE, lowercase, or Capitalize) of your selected text sections and even improve page loading speed by including only required language subsets.

To make it easier to find the perfect design for your texts, the Font Manager provides a preview to see how any changes would look on your website. Once that's done, and you have found the right fit, save the changes.

Note: If you disable the Font Manager toggle button before saving and exit the Font Manager, all changes will be lost.

When to Use Font Manager

Choosing the right font for your or your client’s website might be tricky.

It's important to choose a font that matches your product, brand, or personal style because most likely you will be sticking to one or a selected few font styles (good practice) for a while.

The font you choose also affects the readability of your texts, so don't go too over the top when trying to find a unique font and applying styling to it. To help you stay within the guidelines of accessibility, which directly affect the user experience, check your color palettes with this app.

If you are still trying to figure out your style, look for some inspiration from our amazing websites made with Visual Composer.

And once you have found the perfect font and styled it, don't hesitate to share it with other Visual Composer users via our Facebook community.

Finally, a big request!! 

Once you had a chance to play with the new addon, we - the whole team would be extremely happy if you left your feedback below in the comments.

It will help us a lot in improving the Font Manager version 3.0 -- Thank you!!

The past year has introduced a lot of great features for Visual Composer Website Builder. But today, we are happy to announce that the latest update (41.0) brings in a new feature — the Layout Builder. This feature completes the Theme Builder functionality.

From this point on, you can create your own, completely custom layout templates (including headers, footers, and sidebars), and assign them globally, as well as individually for pages, posts, custom post types and archives. No more depending on theme-defined layouts or design. You have full creative control. And to put the cherry on top, you can manage every aspect of your website easily — from one place!

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.