design Archives - Visual Composer Website Builder

10 life hacks for faster and more efficient web design with Visual Composer

Raitis Sevelis — Tue, 15 Mar 2022 19:18:40 +0000

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:

Custom row names
Global templates
Column cloning
Global and local CSS
Right-click controls
Template export and import
Page to page copy
Element presets
Row resizer
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.

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

Read This Before Using Font Awesome In WordPress

Nikola Puciriusa — Thu, 03 Feb 2022 09:08:41 +0000

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!

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.

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

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,
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 Icons Easily

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.

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.

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.

Go to Font Awesome website and click 'Start'
Enter your email address and confirm the action via email
Copy the kit code, which should look something like this:
Go to your WordPress dashboard and select 'Theme Editor' from 'Appearance' in menu
Locate your theme's header.php file and paste the code right before the tag and click 'Update File'
Go to the Font Awesome icon library and select any available icon you want to use
Click on the HTML code to automatically copy it and paste it into your WordPress content by using the Text Editor

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.

Log in to your hosting dashboard
Open the File Manager
Go to your site WordPress files, usually located in 'public_html' in cPanel or under the 'app' folder in Localhost
Open 'wp-content' and find 'themes' folder
Find and open the theme file you are currently using, for example, 'visual-composer-starter'
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 tag:

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

Open up a desktop web browser and load a page on your website that you’d like to inspect.
Then open the console.
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.

Visual Composer Layout Builder: Design Fully Custom Layouts In One Place

Nikola Puciriusa — Mon, 13 Dec 2021 13:04:38 +0000

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!

New And Advanced Website Building Experience

With the Theme Builder and Font Manager power-combo, you won't need to integrate other design tools or add custom code. Visual Composer Premium lets you create your website design (from layouts to fonts, and other styling elements) as you please while saving time and money.

Go above and beyond by creating and adjusting page layouts, headers, footers, and sidebars. The Theme Builder addon is available in the Visual Composer Hub.

This Premium feature lets you create unique layout templates for singular pages and posts or archives, by defining the layout type upfront. Once set and done you can apply and replace the theme defined templates globally or for specific pages, such as:

404 Page
Search Page
Author Page
Posts & Pages
Post & Shop Archives (WooCommerce)
Product Page (WooCommerce)
Landing Page (WooCommerce)
Docs (Custom Post Type) and more

This means, that you can create completely custom layouts, without having to depend on the regular theme-defined templates and styling. No more endless searching for themes or adding custom code to fit the design of your site, like you used to do.

The Theme Builder solves this problem and lets you change, not only headers, footers, and sidebars on their own, but the complete layout — all in one. No matter what theme you are using. So you can now choose a basic theme, and customize the templates as you wish.

Added flexibility: Theme Builder lets you define the content area width for Visual Composer layouts in your account settings. As well as manipulate the width, stacking, and other design options for the rows within your layouts. Therefore, you can have your own look and feel for any website or blog. All that through simple drag-and-drop functions.

Build Once, Reuse Everywhere

Imagine that you don't have to create separate layout templates for headers, footers, sidebars, and assign them one by one. Now imagine how much time and effort you would save if you could do all that from one place. Well, stop imagining, because we have made it a reality!

From the moment you start to create a new layout template, you work from within the frontend editor that you're already familiar with. Then, once you're set, you move on to add dynamic content elements, that change dynamically based on any changes an author makes, in the placeholders for your defined content areas, like:

Page Title
Categories
Tags
Date
Excerpt
Name (Author)
Bio (Author)
Photo (Author)
Featured Image

This is how you can start using the new Layout Builder:

Navigate to the Visual Composer settings from your WordPress Admin Dashboard, and select 'Theme Builder'
Click 'Layouts' from the Theme Builder dropdown menu
Click 'Add Layout' and select a 'Singular Layout' or “Archive Layout'
Create the design of your new layout template by adding content elements
Save and click "Assign Layout to..." in the frontend editor settings
You will be redirected to the Theme Builder Settings
Replace the theme default templates with your created templates
Save changes

In every layout template, it is mandatory to have a content area element added for Singular Layouts and a Post Grid element (with WP Query) for Archive Layouts. This ensures you will have a place for content to be displayed on pages, posts, and archives. This is why the content area and the post grid element come pre-added to the layout, as you create each new template.

Bonus: In the latest Visual Composer release, we have also combined the Archive Builder and Post Template Builder integrated them into one — the Layout Builder.

No More Limitations

The Layout Builder is here to make your life easier. So you don't have to worry about creating a site with having to rely on theme-defined layouts ever again!

More than 70% of our long-term Premium users have requested the option to create custom page and post templates. Now, with the Layout Builder, you can not only design completely unique layouts for customer websites but also reduce the costs, by not having to purchase premium themes. Because you are the creator of your own layouts.

Not only, are you the creator of your own layouts, but now you also have the power to create a full website from header to footer, and everything in between! With the ultimate website building experience that Visual Composer offers, this workflow improvement gives you the flexibility and mobility to design literally anything with just one tool.

Finally, the best thing about this new feature is that it has the potential to improve your website performance tremendously. Since you no longer have to get multi-feature themes, that can oftentimes slow down your website due to having over-saturated code. Much rather, get a minimalistic theme (perfect with the Starter Theme) and completely overwrite it with custom layouts, styling, and more. Letting you lead the show, while all assets (JS, CSS, fonts) are taken care of by Visual Composer.

Now you're all set! Create custom designs. Define fonts. Add content. Start building the websites you've always dreamed of with Visual Composer Layout Builder today!

Get Visual Composer Theme Builder

The post Visual Composer Layout Builder: Design Fully Custom Layouts In One Place appeared first on Visual Composer Website Builder.

Web Design Trends of 2022

Raitis Sevelis — Fri, 05 Nov 2021 11:43:49 +0000

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.

The post Web Design Trends of 2022 appeared first on Visual Composer Website Builder.

Visual Composer Showcase No. 22

Nikola Puciriusa — Mon, 23 Aug 2021 14:11:54 +0000

For our 22nd showcase, we have prepared a super special line-up, honoring these unique, and one-of-a-kind websites that are #madeinVC, for a fact.

We expect you to take from this the information and tools you need, to create a showstopper website for yourself or clients. Because we know that you will most definitely feel inspired!

For that being said, we have listed the Visual Composer content elements, templates, and addons used to create these stunners, under each website

Cad Soft

Cad Soft introduces innovations in dentistry, with software for CAD/ CAM (as in Computer-Aided Design & Manufacturing), guided surgeries, and orthodontics. These AI systems use optical cameras that take 3D images, create digital casts faster, and improve the workflow for dentists & results for patients.

Their website has a lot of next-level designs and animations as well, representing them being up-to-date when it comes to introducing new technologies.

To create this fun page, they have applied the background carousel in their hero section, which livens up the whole site. As for their content, the company uses CSS animations such as Fade In, and Slider to make their displayed products stand out even more.

In addition, the first thing you see upon entry is a stunning popup which is beneficial for conversions, created with the popup editor addon.

Golden Hour Media

This is one of the greater examples of telling a story that inspires visitors who may stumble upon this page. Golden Hour Media is a group of creatives based in the U.S. state of South Carolina. They offer photography and videography services for events, like weddings, brand work, and real estate.

The website complements the aesthetic of the brand they are representing perfectly.

The design options used to create this art piece are - a video background for the opening view and content sliders that elevate the page. For which, if you wish to recreate, the editor offers multiple content elements. Like, the Slider Revolution integration, which helps create beautiful and dynamic sliders.

Plus, stickiness applied to the header section is a great common practice. It ensures that users always have the menu in their reach.

Atlas of the Future

Atlas of the Future is a nonprofit organization founded in Barcelona for a great cause - spreading the word about climate change and finding solutions to create a sustainable future. Each year they invite social pioneers from all over the world, to present their ideas at Fixing the Future.

One of the greater features of the editor is the theme builder with which you can manage the layouts of your pages. Atlas, as per example, has used the header, footer, and sidebar editor to create, save and re-use templates on multiple pages of their website.

Other than that, some fun features that the organization has incorporated throughout their page, are icons. Starting at the top of the page with social media icons that are vital for exposure. And, also continuing further down the page. This is a simple yet great way to draw attention to text by using descriptive symbols.

Mirca Design

This website by the company named Mirca Design is one you will want to scroll through fully! Experience all of the extraordinary parallax effects firsthand.

Specializing in industrial design management, Mirca is a company that creates new products and services for its clients. Based on trend analysis, research, and expertise in the field. They grant to increase the value of the new products with fantastic design strategies.

Although we emphasize that the editor doesn't require coding, if you wish to have some more complex elements, you can use custom CSS, HTML, and JavaScript to create wonders, as this website has.

Another great advantage of the editor is the responsive design. The automatic website adjustments to all devices are magic and this site is an excellent example. Just in case you are wondering, you can also customize responsiveness settings.

Werner Viln

Portfolios are gaining popularity by the day, and in case you didn't know, you can create your own completely for free. This one in particular, by Wener Viln, is breathtaking.

Wener Viln is a digital content creator, senior art director, designer, and illustrator. With more than 15 years of experience in the print & digital content creation industry.

This website itself is super simple, but the content and layout are what make it so beautiful. Best of all, with the editor, you can choose from more than 200 designer-made templates to modify. In this example, the artist has used the post grid element to showcase his best work all in one place.

Another cool thing used on this page is the logo slider element from the Visual Composer Hub. Which lists all the brands the artist has worked with. This is a good feature both design-wise and as a social proof element. In this case, exhibiting achievements and recognition for the artist.

Hey V.A

Hey V.A is a virtual assistant created by Maddie Irving, located in Sydney, Australia. Offering a vast range of long & short-term services to suit the needs of business owners or entrepreneurs. Providing quality and affordable administrative support.

Be sure to check out her blog with advice on how to stay motivated and productive, as well!

Since this is the last website on our list, we would like to accent some elements we haven't yet mentioned. Like, compatibility with WooCommerce, for example, which Maddie uses. As well as the compatibility with Contact Form 7, to make it easier for her clients to reach her at any given time.

As for the next thing, peep the awesome loading screen when you click through Maddie's pages. Making sure you introduce loading screens and icons is a must. That will ensure users don't confuse the site loading for it being broken. Even if it's only a few seconds, it's still crucial. That and other factors that influence website performance can either make your website rank or tank.

And yes, you are probably wondering, how did she create the typing text loop in the hero section? Unfortunately, or fortunately (you decide) you can create that and other custom elements using Visual Composer API.

Ending Thoughts

Creating websites is a form of art that requires a skill-set not many have, but all can learn!

With Visual Composer, you can create websites for yourself or your clients, that they can manage themselves! Fast, easy, and intuitive.

And on that high note, don't forget to tune into our next showcase series!

Get Started

The post Visual Composer Showcase No. 22 appeared first on Visual Composer Website Builder.

Inspiring Graphic Design Portfolios from Talented Designers

Linda R — Thu, 19 Aug 2021 06:26:05 +0000

In this article created by our team at Visual Composer, we’re going to talk about graphic design portfolios, one of the types of websites that require the most work in order to be effective.

There are thousands of inspiring graphic design websites out there, which means you’ll need to be exceptionally creative to stand out from the rest. And not only that, but you will also have to ensure that your portfolio is polished, professional, and resides on a reliable website.

Your website can make or break your whole career, so there’s no question about it: you’ll need to put in the legwork into creating an outstanding online showcase.

Luckily, you can take inspiration from the most exquisite graphic design portfolios we’ve found and put your own together based on some of the best ideas out there. After all, good artists copy; great artists steal, right?

Plus, learn how to build a graphic designer portfolio in WordPress!

But first, little about portfolios, shall we?

Why Portfolio Is A Must For Creators?

Portfolios are a great way of showcasing your skills and work, which will help with getting more clients. But they can be time-consuming to make if you don't know-how. This article will cover what exactly makes up a graphic designer's portfolio as well as some tips for building one in WordPress. You'll also find links to creators (designers, developers, artists, etc.) who have already made theirs so we could all learn from them.

Before jumping into the list of graphic design portfolios, let’s go over what makes a great portfolio. Whether you are an expert in graphics or just want to show off your talent then you must put yourself in the shoes of visitors and potential clients when creating your work.

A design portfolio is much more than a simple gallery of previous work. It's your opportunity to show off your diverse skills, personality, and versatility to (hopefully) land that next big gig.

On such a hopeful note, let's dig into the graphic design portfolio world where we will talk about the following:

Tips on how to create a really good graphic design portfolio (with examples)
Graphic design portfolios: A list of brilliant examples
How to create a portfolio for yourself or clients

Tips on How to Create a Good Graphic Design Portfolio

Choose the right platform
Showcase your best work
Display and categorize your work in one place
Tell a story
Write case studies
Incorporate social proof elements
Add contact info

Let's explain each of the above things in more detail.

Choose the Right Platform

To make your design portfolio stand out, you'll need a platform that's versatile and expandable. One of the most popular CMS platforms on the market is WordPress - it has all levels of user-friendliness to give you an easy way to create whatever website fits your needs. It offers a myriad of themes, plugins, and options to create exactly the portfolio you want.

A great addition to WordPress is Visual Composer - a drag-and-drop page builder that lets you put together a website that fits your needs and makes the process hundreds of times easier. It offers a great number of content elements, page templates (graphic designer portfolio templates included), as well as powerful design options.

Showcase Your Best Work

Showcase the best work, not all the work - this is the basic formula. Be selective about what to show and why - people have limited attention spans. When you're writing your portfolio, be sure to share some of the challenges that might not seem as exciting but are still important. Give an example of how you solved a similar problem in another way before coming up with the final solution.

Sample: Patrick is a developer and programmer who shows off his work in the best possible light. A unique, unexpected design and dynamic elements are sure to show off Patrick’s style as well as his skill.

Display & Categorize Your Work In One Place

When creating a portfolio, content is often used in categories, tags, and the page structure is displayed in the menu. For your portfolio to have harmony and for the potential client to have an idea of your top skills, the recommendation is to highlight only the essence on one page. A good helper here is Post Grid Filters, which allows you to choose what to display from the entire content of your portfolio.

Sample: Malika Favre displays her best work in the colorful grid layout. She also has her own shop and Instagram account, the content of which can also be displayed together with the Work. If the portfolio owner would also like to show the menu item Shop in this grid layout, then this would be possible with the help of post grid filters.

Tell a Story

A portfolio of graphic design work should be more than just a list of your skills. You want to tell the story behind each project you’ve completed, and create some intrigue for prospective clients by showing them what they can expect from working with you in future projects. Visuals are key here: make sure that up to 80% of your page includes images or sketches rather than text alone - but don't forget about listing qualifications as well.

Sample: This website is for a creative digital studio. The name of the agency sets the tone and theme for this site, as it features images from space that are beautiful. There are also illustrations throughout to set up an otherworldly vibe from start to finish - even down to naming each page as they come out of some galactic mission manual.

Write Case Studies

The best way to impress employers or clients is by showcasing your work in the form of case studies. What makes a case study great? It not only has a fantastic final execution but answers questions such as:

What’s the problem you want to solve?
Who are the users?
What’s your role in the project?
What’s your design process?
What are the design options and how decisions are made?
What are the constraints and limitations?
How to validate your design?
What will be your next step?

Sample: Case studies are the heart and soul of Product/UX Designer Moritz. Explore every side of Moritz's process as he works to create a site that is both user-friendly, aesthetically pleasing, and professional.

Incorporate Social Proof Elements

The third-party references you provide are what will help convince a recruiter to select your application for an interview. Include any information that previous employers or clients may have said about specific qualifications, personality traits, and work ethic in the past. If you've earned awards or obtained certifications make sure those copies of these documents also get included.

Sample: Awards are a part of what makes Fleava so successful. The agency proudly displays its awards in an elegant section dedicated to them, which showcases the kind and professional tone that can help any business grow.

Add Contact Info

Don’t make it an obstacle course for potential clients or employers to find your contact information. The preferred way to reach you (probably email) should be easy to find. You could include a telephone number if you're comfortable giving that out; however, nowadays an email address alone or a contact form is sufficient.

Sample: With an eye for detail and a heart that always beats design, Duo Studio is committed to bringing your business into the future with its wide range of web solutions. They offer several options for contacting them, making contact information one of the key elements of the portfolio.

Graphic Design Portfolios: A List of Brilliant Examples

Xavier Cussó

Xavier is based in Barcelona and he decided to follow a freelancing career after being a senior art director at a renowned company in the industry.

His portfolio was created by Burundanga Studio and it uses a lively color scheme, bold typography, and heavy animation. The portfolio is visual-oriented and it stands out through color and contrast.

Lotta Nieminen

Lotta Nieminen is a graphic designer based in Helsinki. Her graphic design portfolio emphasizes Lotta’s experience in the field, including her past studies at the University of Art and Design and Rhode Island School of Design.

In the present, Lotta founded her own studio based in New York. Since then, she had to promote her work herself, putting together this portfolio. She received nominations for several awards and was mentioned in famous magazines like Forbes, so it’s pretty clear that her work is high-quality.

Robby Leonardi

Robby Leonardi has one of those very transparent graphic design portfolios, where clients can see absolutely everything about his past work. The portfolio has a bright theme, with lots of illustrations and a dynamic color palette.

Robby didn’t have to include any written story here because his expertise results from the work he’s been showcasing on the site. Robby also used gamification as a strategy for his website, including an interactive resumé that people can enjoy while finding out more about him.

Timothy Goodman

Timothy Goodman came up with a very simple idea for his design portfolio. He adopted a minimalist approach, only including a few visual details like the dark-colored band that greets visitors when they first access the portfolio, and a hand-written typeface to contrast with it.

The layout used for this website is a modular grid system, thus presenting his prints in a very aesthetically pleasing manner.

Daniel Spatzek

Spatzek managed to create one of the most creative graphic design portfolios in the industry. Once you visit this site, you’ll be instantly mesmerized by the simple approach Daniel adopted and how effective it is in showcasing his work.

The portfolio features motion graphics and a plain color scheme, along with scrolling effects and modern typefaces.

Merijin Hoss

The portfolios presented up until now fall into the “flashy” category, meaning that they tend to stir the interest of the user very quickly through one-of-a-kind elements and emphasizing the quality of the showcased work.

Merijin Hoss’ portfolio adopted a traditional design approach to showcase his far-from-traditional work —psychedelic art. Pairing the two styles couldn’t lead to anything other than a stunning result that sticks with people long after they’ve visited the site.

Julie Bonnemoy

Julie is a freelance designer meaning that her portfolio makes a difference day after day in terms of how many clients she gets and - ultimately, how much money she makes at the end of the month.

She opted for an unusual design style that is strikingly impressive compared to other design portfolio approaches. She used a water ripple effect on mouse hover for an interesting user experience.

Ben Mingo

Ben Mingo is a Californian designer that uses his online portfolio to showcase his work in a nonconformist manner, which involves replacing the classic mouse wheel scrolling action with something that requires the visitors’ interactivity.

People need to use their mouses to drag across the website in order to reach other parts of it. It’s a unique approach that encourages visitors to explore the entire website and spend more time on it.

The portfolio features quite a lot of animations and transitions, and it can load slowly at times but the wait is certainly worth it.

RoAndCo

RoAndCo was founded by Roanne Adams who is based in New York City. The team behind this project strives to offer high-quality designs to a wide range of clients, but especially for those working in the beauty, fashion, tech, and lifestyle industries.

The portfolio adheres to the company’s principles, presenting the past work in a magazine-like manner. Visitors can enjoy their work by leafing through split-screen images, watching an animated presentation or a full-screen video.

Rob Draper

Rob Draper’s site is not much different from other minimalist graphic design portfolios. The one aspect that’s worth mentioning and which is often appreciated by visitors would be the vertical menu that contains all the project titles.

The rest of the layout is airy and simple to navigate through, and visitors can enjoy an animated GIF that showcases selections of work.

Yasly

Yasly is Danny Jones’ design portfolio, a specialist in 3D interaction and visual design. His portfolio looks effortless, in a good way.

Everything is nicely organized, all the uploaded work is of the topmost quality, and the overall design suits the high profile of all the collaborators that Jones had through the years.

The portfolio has a luxury feel to it, even though it’s not packed with animations and loud colors.

Amber Xu

Amber Xu is a very good motion graphic designer based in China and her website is definitely worth listing in the top graphic design portfolios for inspiration.

Why? She’s brilliant at what she does and there’s no need to add fancy details in the portfolio because her work sparks it up in an instant. Check out how she has blended her work in the simplest website template possible.

Belen Roldan

Belen Roldan Franco is a designer based in Berlin. He was born in Spain and became passionate about visual communications early in life. He has an eye for structure, color, and impressive typography and you can tell that from his design portfolio.

Belen’s site stresses his preference for structure, maintaining a clean design, and neatly categorized past projects.

Jennet Liaw

To get a sense of Jennet Liaw’s style of work, you simply need to access her digital portfolio. Everything is there in all its glory, and she made sure that visitors will quickly get a grip on how she works.

Peter Komierowski

Peter is specialized in brand identity creation. He is also an illustrator and deals with interface design. His work experience is impressive and some of his most important clients include YouTube and The Huffington Post.

This portfolio website only contains a few logo designs, but they are enough to impress visitors. The great amount of negative space helps put these logos in the best light possible.

Veerle Pieters

Veerle Pieters initially started her career in the printing industry but slowly became attracted to website design, which became her passion and main occupation.

Veerle is now showcasing pieces of work in multimedia development, most of her collaborations being company-oriented. At the moment Veerle collaborates with Duoh in Belgium.

Oddone

The Oddone portfolio was created by Roger Oddone, a designer based in San Francisco who specializes in brand identities.

Because Oddone knows his way around creating and maintaining an online image, there’s no wonder why his site stands out from the rest of the graphic design portfolios listed in this article.

His work is stunning, and his experience with brands like Google, Uber, Wired, and Mashable explains it all.

Fake Honey Pictures

Fake Honey Pictures is a popular film and photography production team that works with fine art and commercial projects. Their portfolio focuses on video projects, thus the website is filled with multimedia elements.

The website follows a grid layout and interacting with the portfolio is very easy, as all elements can be viewed within the site, without leaving it.

Denys Nevozhai

Denys is a world traveler that decided to tell this story through photos. This is why he chose to use an interactive timeline that makes up his entire online portfolio.

Timelines are often used in graphic design portfolios to showcase pieces of work because they are easy to navigate and convey a sense of progress and achievement.

Denise Chandler

Denise Chandler owns a portfolio that should teach you a thing or two about colors. She made use of bold colors to design the whole website, as well as muted colors to complement the rest of the scheme.

The homepage is the main component that sets this portfolio apart from the others.

Alex Coven

Alex Coven, 26-year-old graphic designer, and web developer creates innovative solutions that inspire, and foster memorable relationships between brands and their clients. With a focus on branding and UI / Web, he strives to create usable and polished products through passionate and deliberate design.

Rafael Kfouri

Rafael Kfouri is a graphic designer based in Brazil. There is great variety in his beautifully presented portfolio and has clearly enjoyed working with some brilliant clients.

Heather Shaw

For almost twenty years, he has been helping clients of all shapes and sizes create beautiful and usable things. Having started his career in print design, he learned how to design for the web and to code websites early on through professional experience and freelance work. He had the opportunity to learn and collaborate with the best, at top design firms like Happy Cog, Mule Design Studio, and Tangible UX, where usability and accessibility are the top priority.

Stefanie Bruckler

Stefanie holds a Senior Designer position at NR2154 in New York City. Formerly she was a Designer at High Tide. Prior to moving to the States, she worked with various agencies as well as freelance and graduated from FH Joanneum in Graz, Austria, where she studied Communication and Information Design.

She specializes in both print and interactive design with a particular interest in branding, editorial design, typography, and packaging.

Tobias Van Schneider

Tobias van Schneider is a German multi-disciplinary maker of useful, curious, and beautiful things (he just doesn't like the word entrepreneur). Born in Germany and raised in Austria, he now happily lives and works in New York City.

Tobias’ journey is a little different than most. He started his career by dropping out of high school at 15 with grand plans of becoming a software engineer. After realizing he, quite frankly, sucked at it, Tobias began teaching himself design at the age of 16. Fast forward a few years and through a whole lot of ass-busting, Tobias is now a designer, founder, speaker, mentor, and maker.

Grant Burke

Grant combines his creative flair with a strategic approach to create purposeful and unique brand identities. He has over seven years of experience solving complex branding problems and incorporates his second passion of illustration into projects whenever it makes sense. In his spare time, Grant can be found goofing around with his son, wife, and terror (sorry, terrier), Cooper.

Alessandro Scarpellini

Alessandro Scarpellini is a designer and art director with a reductive and modernist visual language, specialized in strategy, branding, and visual communication. He works for a wide range of clients around the world, helping build timeless and meaningful design solutions with real purpose, value, and simplicity. He is also the curator of the branding and graphic design blog Visual Journal.

Jennifer Heintz

Jennifer Heintz is a multidisciplinary designer & illustrator, as well as a founding partner at Self Aware. She is focused on bringing brands to life in print & online and loves telling stories through colorful illustration and immersive interactive experiences. Currently residing in Philly, Jennifer is saving up for a cute lil’ Yorkie.

MDZ Design

MDZ Design aims to help people with product ideas all bring them to market, profitably with quality. It was founded by Stacey Mendez, who has been bringing product ideas to market for the last decade with world-class companies and brands such as Logitech, Terraillon, UGG, Helly Hansen, Vodafone, Vtech as well as ambitious start-ups.

These projects have included humanizing physical products, digital experiences, and packaging, bringing a high return on investment, and strategically advising clients. Her experience of aesthetics, human behaviors, and business gives her a holistic understanding of how to create and bring easy-to-use product ideas to the market for commercial growth.

Mingfei Yang

Mingfei Yang always keens on photography, architecture, and games when he was a teenager. He enjoys the feeling to get himself immerse in the game world. And he believes that fun layout plays a really significant role in world creation. His insight of level design allows him to create fun GAMEPLAY features and well-balanced levels, which can accord with the game design perfectly and maximize the user experience. Achieving the balance will be very difficult, but meanwhile, it's also pretty satisfying and rewarding.

Chip Kidd

Chip Kidd is a contemporary American graphic designer, author, and editor. He is best recognized as a graphic designer for book covers. Chip has designed more book covers than we have time to list, but some memorable authors he’s designed for include Cormac McCarthy, Michael Crichton, Dean Koontz, James Ellroy, and Haruki Murakami.

Kate Moross

Kate Moross is an art director, illustrator, and graphic designer. Kate’s work spans the artistic direction, moving imagery, typography, and illustration. In 2012, Kate founded Studio Moross, a London-based multidisciplinary design company as an expansion upon their own work and a way to collaborate with other creatives.

Brook Perryman

Very talented senior graphic designer with proven experience in developing catalogs, advertisements, branding, packaging, and website content for B2B and B2C.

Rachel Cheng

A curious product designer who lives off of meaningful user-centric design and is constantly creating to grow further.

Steve Wolf Designs

As principal at Steve Wolf Designs, Steve uses his design experience to support brands of all sizes in telling their stories through timeless visuals and strategic thinking. Steve’s philosophy of continuity, resilience, and simplicity result in elegant and sophisticated works aimed to stand the test of time. As a true artisan, when not in front of his computer, Steve can be found a painting in his garage, seeking inspiration in antique shops, or traveling the globe.

Josh Miller

The portfolio of Josh Miller, a Perth-based product, web & brand designer with over 10 years of experience working with small businesses & national brands. On page transition, Josh created a colorful wave-like graphic that keeps up the lively theme of his work.

Mike Kus

Mike is a UK-based designer, specializing in Branding, Graphic/Web Design, Illustration & Photography. He has a worldwide client roster and his work is often featured in design-related publications. Mike is also a regular speaker at design/tech conferences.

Stacey Uy

She is a designer and illustrator based in San Diego, specializing in print and digital design, branding strategy, and illustration. She earned degrees in art history and psychology from UCSD and has more than 6 years of experience in graphic and web design.

Dominic Flask

Dangerdom Studios is the work of Dominic Flask, a designer and illustrator who works hard to make the world a beautiful and more interesting place to live in...one small piece at a time.

He works with brands to build emotional connections through digital products by crafting unique illustration identity systems.

Jamie Bartlett

Jamie Bartlett is a graphic designer and left-handed letterer working out of Denver, CO. She graduated from John Brown University with a degree in Graphic Design. Currently, Jamie teaches Skillshare and designs art prints and handcrafted fonts for her shop. Her work reflects everything she loves in life: a good cup of coffee, nerdy design terms, tandem bikes, road trips, and so much more.

Ilana Griffo

Ilana Griffo is a designer and illustrator in Upstate New York. Lettering, illustration, design work, eating pizza, cheering on bike racers, and taste-testing chocolate. She loves working on playful, visually tasteful, and purposeful design projects.

Kelly Romanaldi

Kelly Romanaldi, freelance illustrator and graphic designer. His clients are companies, publishing houses, businesses, associations, or private individuals who want to take care of their image and present their business in a clear and dynamic way. He produces illustrations, logos, coordinated images, branding, packaging, covers and editorial inserts, catalogs, web design, social content.

Ismael Barry

Ismael Barry is a product designer passionate about serving people by solving for their needs and understanding the gravity of those decisions as they impact our world.

Adam Sandoval

Adam Sandoval, a graphic designer living in Phoenix Arizona. He is primarily focused on branding, logos, and illustration but loves taking on any good design challenge. He loves getting in to collaborate with clients to find a strategic and creative solution for any and all of their design needs.

How to Create a Portfolio for Yourself or Clients

If you're looking for a way to design and create an online portfolio, a combo of WordPress and Visual Composer is your answer. Let me guide you through how to transform your designs into a working portfolio using SEO-friendly and React-based website builder.

Before starting you need to set up and get the following:

Have a domain and hosting plan
Activate WordPress
Download and activate free Visual Composer
For more advanced things, get Visual Composer Premium

Create a New Page For the Portfolio Using Visual Composer

Once you have installed and activated the Visual Composer plugin on your WordPress page, click on Visual Composer in the left menu. There you will see all the available features and settings offered by the plugin. Click "Create A New Page" to start creating your portfolio.

At this point, a front-end editor will open, where everything is available for creating a page. You can start from scratch and build a layout using content elements and blocks or choose one of the page templates where you only need to change the content and graphics.

When you open the Visual Composer Hub, you will have access to a variety of elements, templates, addons, and blocks. You can quickly download the assets you need from the cloud space that keeps more than 500 elements, templates, blocks, and integrations.

To view ready-made page templates tailored directly to the portfolio, go to the Visual Composer Hub - Templates - write in the search box "portfolio". However, if you want to see all the templates, leave the search box blank.

At this point, download the template and place it on your page. The exciting process can begin! Change texts to your own, insert your profile picture (remember SEO-friendly images). Go further and customize row by row, column by column so that this page becomes your unique business card.

Ending Thoughts

We’ve listed here a great bunch of graphic design portfolios that we consider inspirational and well-built. They respect the current trends in web design, are intended to attract as many viewers as possible, maintain their attention with fresh content, and convert them into fans, followers, or clients.

You know to stand out from the rest you have got to invest some time into your design portfolio. The reward is worth it, and remember, if a prospective employer sees that extra effort, they will be more likely to hire you!

It would be awesome to see some of your portfolios or any other website you have created or are in the middle of building it. Feel free to comment below or join the Visual Composer & WordPress Community and get feedback on your website from experts!

If you enjoyed reading this article about Graphic design portfolios, you should read these as well:

Download Free Portfolio Builder

The post Inspiring Graphic Design Portfolios from Talented Designers appeared first on Visual Composer Website Builder.

Introducing Page Design Options

Raitis Sevelis — Thu, 05 Aug 2021 11:56:17 +0000

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.

Get Started Now

The post Introducing Page Design Options appeared first on Visual Composer Website Builder.

Top 8 Best Facebook Groups for Mastering WordPress

Nikola Puciriusa — Wed, 04 Aug 2021 14:01:19 +0000

Being an open-source project driven by the community, it is obvious that WordPress has a powerful community itself.

Either you are new to WordPress or an advanced user - you can (if you haven't already) become a part of the largest communities in the world! Learn how to master website development and share the knowledge you have learned along your own personal journey.

So, in this article, we have gathered 8 best Facebook groups for WordPress you should be a part of:

Freelancers Tools
Visual Composer - Official Community
WPBeginner - WordPress Help for Non-Techies
WordPress Community By Darrel Wilson
WordPress Basics & Beyond
WordPress for Business
WPLearningLab
Dynamic WordPress

Let's jump in!

Freelancers Tools

The very first group on our list, you don't want to miss out on this one!

Because this group provides assistance for freelancers and small to medium companies to solve their problems and reduce their business costs.

And, of course, as the name suggests, regularly updated their list of recommended tools for WordPress. In categories such as WordPress system management, security, speed, SEO, social, and various other tools & services you could potentially need.

The well-known Ivica Delic (one of the top opinion leaders in WordPress) is a very active member of the community, offering his expertise and sharing knowledge with the group daily.

Since in this group, you are expected to participate in topics in which you can offer insight, we would recommend this group to intermediate to expert WordPress users. But of course, anyone is welcome to join and learn.

Freelancers Tools Facebook Group

Rules: No self-promotion, ask related questions - don't stray away from the general topics of the group and be respectful to all group members.
Status: Private
Experience Level: All

Visual Composer - Official Community

Our personal favorite (for obvious reasons).

This group is for anyone willing to ask questions, share ideas, and find advice. Not only on building WordPress websites but also using Visual Composer Website Builder.

The daily posts offer insights to Visual Composer. And, also tips on optimizing and your WordPress website for better e-commerce results.

And, one of the biggest benefits of the group is #WebTipWednesdays - where you can share your website and get an expert opinion of how to better your site even more.

So, we would suggest this group for beginners and non-techies as well as for experienced website developers, that are interested in improving their skill-set.

Visual Composer Facebook Community for WordPress cover image

Rules: Ask and answer questions. Share awesome stuff, encourage and inspire!
Status: Public
Experience Level: All

WPBeginner - WordPress Help for Non-Techies

One of the largest and fastest-growing WordPress groups for non-techies and beginners on Facebook.

This Facebook Group is hosted by WPBeginner.com, one of the largest free WordPress resources for beginners.

WPBeginner provides cutting-edge helpful WordPress tutorials that are easy to understand for small businesses, bloggers, and non-techy WordPress website owners.

In this community, you will find quality tips, tricks, hacks, and other WordPress.org resources. Plus you can connect with other website owners!

So, join the challenges and other exclusive opportunities to watch Facebook Live Videos with WPBeginner founder and WordPress Expert, Syed Balkhi, to improve your WordPress website.

Also, the biggest benefits of this group are the support, tutorials, plugin suggestions, shared knowledge, tips on growing traffic, and giveaways with prizes.

WordPress For Non-Techies Facebook Group

Rules: No self-promotion, affiliate links, or DM to hire posts or messages permitted in this group.
Status: Private
Experience Level: Beginner

WordPress Community By Darrel Wilson

Darell Wilson is a WordPress guru that is dedicated to helping thousands of people launch their online business and learn WordPress completely for free (no catch here).

Darell started his journey in 2016 by posting video tutorials to his youtube channel. Now he has an official website and a fan club, where he shares tutorials and reviews about the best web design & e-commerce solutions.

Most of all, his followers are his biggest supporters & advocates, proving the quality of his content & the legitimacy of his methods (and a perfect 5-star rating on his official Facebook page).

This community lets people talk about all things WordPress-related, share insights and get special offers from various companies. Don't miss out on this opportunity - join the Darrel Wilson family!

WordPress Community By Darrel Wilson

Rules: This group is not for support services or soliciting services, no spam or self-promotion. Violations of the rules will result in a ban without a warning.
Status: Private
Experience Level: Intermediate

WordPress Basics & Beyond

The idea behind this group is to build a welcoming and inspiring community for new and intermediate WordPress users by offering them a welcoming community environment to learn from experienced WordPress users.

This Facebook group is hosted by BasicWP.com - a great source providing articles with tips, tutorials, news, resources, and more for WordPress.

Also, if you are interested in receiving weekly newsletters, you can go to TheWPWeekly.com - a project by Davinder Singh Kainth: “Being in the WordPress ecosystem from the very start, I wanted to do this for a long time. So, here it begins – Welcome aboard WordPress professionals!”

Note that it may take some time to get your request to join to be approved.

WordPress Basics & Beyond Facebook Group

Rules: Anyone is welcome to join, start discussions, and offer suggestions.
Status: Private
Experience Level: New to Intermediate

WordPress for Business

The group has one of the most welcoming communities out there.

WordPress for Business is meant for people who run their business with or on WordPress.

So, in this group, you will find WordPress experts and entrepreneurs, tips & tricks for business growth, valuable WordPress materials, and partnership opportunities.

This group has a diversity of members from business owners, theme & plugin owners, bloggers, developers, designers to marketing experts, and anyone else who is related to WordPress in any sense or form.

We would recommend this group if you are interested in sharing your knowledge and learning from the WordPress experts, like our own Raitis Sevelis, who are interested in making WordPress a better place for everyone.

WordPress for Business Facebook Group

Rules: No spamming, affiliate links, or "hire me" posts. Be polite, share your knowledge, and give your contribution to the group.
Status: Private
Experience Level: Intermediate to Expert

WPLearningLab

If you like hanging out with cool, geeky people who like WordPress then this is the place for you!

Because, this group is meant for anyone that uses WordPress, from complete beginners to advanced professionals. As long as you're positive, willing to learn, or willing to help then you're welcome.

An important resource for this group is the WPLearningLab YouTube channel. Offering tutorials and courses to quickly learn the skills needed to create/run a WordPress business's websites or getting more clients.

So, we would recommend this group for any who is interested in learning more about WordPress, attractions clients, and growing your business in general.

And, the biggest benefit of this group, is, of course, Bjorn - the 10 out of 10 stars (in not more) leader, influencer, and expert of WordPress - sharing his knowledge with the group.

WPLearningLab Facebook Group

Rules: No irrelevant links or spam. Keep your posts positive and free of foul, rude, or obnoxious language.
Status: Private
Experience Level: All

Dynamic WordPress

A fairly new but great WordPress group with potential.

This group is for people that are interested in themes, page builders, and working with dynamic data, including Custom Post Types, custom fields, and other topics related to WordPress tools.

In this group, as in many others, you are expected to introduce yourself and tell about your background and interests in a polite way.

So, we would recommend this one for users who want to share their WordPress findings in a judgment-free zone - no matter their experience level.

Dynamic WordPress Facebook Group

Rules: Be polite and respectful of everyone’s privacy, no self-promotion without permission.
Status: Private
Experience Level: All

Final Thoughts

Now you have learned about the top Facebook group for mastering WordPress.

And, don't forget that every group comes with a set of rules, that are meant to be followed. If you want to advertise something, get in touch with group admins to get permission. Or find groups, that offer a separate place for promotional content. Otherwise, you will get banned and will be less likely to get your hands on the free ad helpful information these groups offer.

So, most importantly, always try to participate in the groups. That is the only way that we can build the WordPress community and grow our websites!

Want To Get More Articles Like This?

Be the first to know more news, updates & web design tips from Visual Composer.

The post Top 8 Best Facebook Groups for Mastering WordPress appeared first on Visual Composer Website Builder.

Top 10 Websites Built With Visual Composer In The Last Decade

Irma Edite Girupniece — Thu, 22 Apr 2021 06:54:48 +0000

It was 10 years ago when the Visual Composer brand was created, and a few years later we launched Visual Composer Website Builder - the next generation of WordPress page builders.

To celebrate our birthday, we are showcasing some of the best websites built with Visual Composer to date! Check out these creative and innovative examples below!

EverGreen

Evergreen is a family-owned business that distributes nutritious, healthy snacks all across the globe. Visitors can overview these labels organized within a simple Logo Slider element from the Visual Composer Hub.

This website shows how you can create a great first impression with high-quality images and catchy effects like bounce and mouse-follow animation.

It is also important to note, that this website has combined the functionality of multiple WordPress plugins with Visual Composer Integrations. Once opened, the website displays a beautiful slider created with the Slider Revolution plugin and fine-tuned with Visual Composer.

BlueSoft

BlueSoft is a software development company that specializes in working with clients’ business technology challenges. They highlight customers’ logos with small round-shape thumbnails (with Visual Composer you can control media’s shape, size, alignment, and more).

BlueSoft uses interactive animations and fade-in effects to create a sense of involvement and a dynamic feel. While adding the fade-in effect to your site can require a bit of coding knowledge, the powerful Design Options allow you to choose and add one of 40+ animation effects with a single click.

Dune & Sky

Dune & Sky is an authentic portfolio of a web designer taking care of everything. They've done a great job with branding their site and creating a very unique look that you won't forget.

In the website, they use basic elements like separators and buttons as well as attention-grabbing background and clean minimalistic sections. They have really created a balance between simplistic layout and eye-catching design.

You can also create a transparent header (just as Dune & Sky did) with the Visual Composer Header Builder that comes within the Theme Builder addon.

Audrey Fotografia

Audrey Fotografia is a photography website, that displays the work of Adrienn. Her website is a great example of what you can achieve with Visual Composer.

An effective feature is the Video Background that is used at the very top of the page. It engages the visitor and it serves as a quick showreel of what's to come.

Other Visual Composer features that are used on this website and are worth mentioning are the header and footer builder and the grid elements that display multiple galleries.

Tilde Johansson

We are so proud to support various types of brands from individual to organization and personal brands. For example, Tilde Johansson, a famous Swedish athlete, chooses Visual Composer to build her engaging and unique portfolio website.

This website uses high-quality images and interactive mouse-follow animations, and that gives a personal feel.

Also, this layout is an example of how well two outstanding web design trends like disordered grid and micro animations can blend with a simple slider block.

White's Mercantile

White's Mercantile is a well-designed all-in-one shopping solution for everything you have ever wanted to buy.

We adore the interesting hand-drawn style of the website and the effort that was put into creating such a beautiful project. The result is fascinating: the easy-to-remember website that stands out from the crowd showing how much the design of a simple site can impact its altogether look.

Martini Time

No Martini – no party! We are excited to see that brands like Martini rely on Visual Composer to support their online presence.

A simple feature with a big impact is the image background type that you can find in the Design Options. Martini Time is using the “Background zoom” effect, but you can also choose an “Image slideshow” as a background or even a video.

CharlieShotMe

CharlieShotMe is a website for accomplished fashion and portrait photographer Charles Rodulfo.

The full width and height of the background image result in a beautiful layout that is easy to make using the row settings. More about the background – the colors of the images and background are perfectly coherent.

Norra Hamnen 5

This is a website for a restaurant “Norra Hamnen 5”, a restaurant in Sweden that offers a beautiful view as well as local produce.

This website is making good use of the Google Headings element (it has all Google Fonts available) mixed with some more uncommon elements like Multiple Image Collage and Simple Call To Action. All these elements combined make it easy to locate the focus points of the site. Those are also amplified by using CSS animations.

Despite the site being made using a regular grid, it looks a little distorted and that’s a very popular design component at the moment.

An element that is conveniently used in this layout is the Feature Section. It’s not only a very quickly customizable block, it also takes care of responsiveness for you.

EnjoyHQ

EnjoyHQ is a user research platform based on providing extensive data analysis to centralize all research data and discover insights faster.

The combination of basic Visual Composer Website Builder elements and Custom CSS to style them additionally is a powerful way how to build a clean and unique design.

A good practice is to include customer reviews, and there's an element in Visual Composer that does just that, the Star Ranking element, that they've used at the very top of the site.

Many More Years to Come

These have been our favorite websites that show just how far we've come together as a community. And if you're new to Visual Composer, or just looking for something fresh - take a look at these beautiful websites that will boost your inspiration for creating your own awesome site!

Speaking of creating your own site, you can get your hands on a 40% discount on any Visual Composer license! We are launching the biggest sale of the year, so make sure to register and get a reminder when the sale is live!

We are excited to celebrate this milestone with you and thank you for being with us throughout these years!

Get Started Now

The post Top 10 Websites Built With Visual Composer In The Last Decade appeared first on Visual Composer Website Builder.

Visual Composer Showcase: April 2021

Paula Scerbinina — Mon, 29 Mar 2021 06:49:41 +0000

Every month we prepare a list with inspirational examples of websites made with Visual Composer. #madeinvc

But inspiration is not a single emotion we hope to evoke in you. Each showcase intends to reveal tips & tricks on how to use Visual Composer (and WordPress) to rock with your website design

Stay tuned for a portion of helpful hints coming!

Dune & Sky

Dune & Sky is an authentic portfolio of a web designer taking care of everything. Like picking up the color schema and crafting copy to helping you build an email marketing funnel. Each element of the page reflects the uniqueness of this personal brand and the value it provides. This portfolio is also a great example of how a persuasive message can be delivered via website design.

From basic elements like separators and buttons to an attention-grabbing background and clean minimalistic sections. The balance between customization and fundamental key components is what connects the audience with the artist from the very beginning.

Did you know: You can also create a transparent header (just as Dune & Sky did) with a Visual Composer Header Builder that comes within a Theme Builder addon.

Finch

It seems that each element of the company’s website is living its own life. Take these loop animation videos, one-of-a-kind mouse cursor, and custom scroll. Just spend a little time playing around with the design of the homepage to see them in action. You can literary click anywhere to trigger some kind of animation.

Yes, animations are great for improving conversion rates and increasing average time on page.

But if you are using animations, be careful while making any changes: sometimes this can lead to slow page load times and responsiveness issues. Plus, it’s important to keep a code clean (if you are using one to animate content).

Did you know: Among all benefits when creating your site with Premium, you can also access the Global Template addon. This feature allows you to make global changes to your layout without having to manually edit particular sections.

Haus Kärntnerland

Haus Kärntnerland is a small, family-owned bed and breakfast place located in a cozy Alpic village. They have a simple site highlighting the most important information for clients first. Namely, they are using a powerful combo of Visual Composer and Slider Revolution integration to liven up the layout from the very top of the page.

But the slideshow created is not the only thing that gathers attention here. Haus Kärntnerland uses the Basic Button content element to personalize the design by simply customizing borders. It’s a great little twist to add a personal touch to a static page.

Did you know: A GDPR compliant cookie popup, like the one at the very bottom of the Haus Kärntnerland page, can be also created with Visual Composer Popup Builder.

Future Productions

The company is yet another example of a design that speaks louder than words and conveys the message in a better way. Future Productions believe in visualization because this is what they do on a daily basis as a video production company.

To illustrate the purpose of the company, Future Productions are using the YouTube Video Player element embed in their page. Also, they are taking advantage of the column Design Options. They set a video as a background and complement it with different custom hover effects.

Did you know: The best approach for adding a depth illusion to your video background is to combine it with a parallax effect (for Premium users, there are more than 8 parallax effects available).

Tavolo Apolidia

Tavolo Apodidia is a network of civil society organizations engaged in the protection of stateless persons in Italy. They fight for equal fundamental rights for people who are not considered national. They also provide protection, coordinate advocacy activities, and more.

This network wants to be heard - and nothing can help here better than their chosen content elements. Like testimonial block to a large Google Fonts Heading to grab visitors’ attention. Or Post Grid container to display news and embedded Twitter posts to represent the importance of the problem. Every aspect of this design clearly states the following: this is an issue that needs to be solved.

Did you know: Starting from scratch sometimes can take a lot of time, money, and energy, but using pre-made WordPress templates can be a solution. Especially, if they are already designed for a specific industry’s needs in mind.

Cloud Five

We are always passionate about including some food industry sites in our monthly showcase. In April, this is a Cloud Five breakfast cafe website.

This is a classic illustration of a minimalistic (and yummy) layout consisting of high-quality images, a lot of white space, and logically divided sections. But apart from appealing visuals and powerful custom solutions, Cloud Five is also using must-have attributes for every restaurant, cafe, or bar. For example, a sticky header (which is also one of the custom header best practices) to make content more accessible or a Pricing Table content element to display prices in a transparent way.

Did you know: Visual Composer Hub consists of more than 500 content elements, predesigned templates, addons, and integrations for every industry (from beauty to retail business and more).

It's Not a Goodbye, It's a See You Later

We hope some of the websites included in this showcase have created a “wow” effect for you while scrolling. And, what’s most important, have ensured you building your professional website starting from now.

As always, see you in the next showcase - it's not a goodbye, it's a see you later

Get Started Now

The post Visual Composer Showcase: April 2021 appeared first on Visual Composer Website Builder.

design Archives - Visual Composer Website Builder

10 life hacks for faster and more efficient web design with Visual Composer

Custom row names

Global templates

Column cloning

Global and local CSS

Right-click controls

Template export and import

Page to page copy

Element presets

Row resizer

Append and prepend columns

Outro

Read This Before Using Font Awesome In WordPress

What Is Font Awesome

Why You May Need Font Awesome In WordPress

How To Add Font Awesome To WordPress

The Official Font Awesome Plugin For WordPress

To Add Icons to WordPress Pages, Posts, and Templates

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

How To Add Font Awesome On WordPress Without Plugins

Add Font Awesome Icons With Theme Editor

Add Font Awesome Icons With File Manager

How To Fix Font Awesome Issues

To Enable Conflict Detection

To Inspect The Conflict Detection Results

List Of Font Icon Alternatives For WordPress

Wrap Up

Visual Composer Layout Builder: Design Fully Custom Layouts In One Place

New And Advanced Website Building Experience

Build Once, Reuse Everywhere

No More Limitations

Web Design Trends of 2022

Accessibility matters

Focus on actions

Red alert

Back to the future

Less jQuery, more ReactJS

Blogging and beyond

Large buttons

Video killed the radio star

Conclusions

Visual Composer Showcase No. 22

Ending Thoughts

Inspiring Graphic Design Portfolios from Talented Designers

Why Portfolio Is A Must For Creators?

Tips on How to Create a Good Graphic Design Portfolio

Choose the Right Platform

Showcase Your Best Work

Display & Categorize Your Work In One Place

Tell a Story

Write ​​Case Studies

Incorporate Social Proof Elements

Add Contact Info

Graphic Design Portfolios: A List of Brilliant Examples

Xavier Cussó

Lotta Nieminen

Robby Leonardi

Timothy Goodman

Daniel Spatzek

Merijin Hoss

Julie Bonnemoy

Ben Mingo

RoAndCo

Rob Draper

Yasly

Amber Xu

Belen Roldan

Jennet Liaw

Peter Komierowski

Veerle Pieters

Oddone

Fake Honey Pictures

Denys Nevozhai

Denise Chandler

Alex Coven

Rafael Kfouri

Heather Shaw

Stefanie Bruckler

Tobias Van Schneider

Write Case Studies