Linda R, Author at Visual Composer Website Builder

How Web Creators Made 10 Websites in 3 Months Using Visual Composer

Linda R — Wed, 25 May 2022 17:38:02 +0000

Web agencies and web creators who are focused on growing their business and offering smoother customer experiences to their clients, rely on website builder tools and plugins to cut away parts of the web development process that slow down delivery.

In this entry in our case study series, where we focus on showcasing how using Visual Composer benefits web professionals, we are spotlighting Oleg Kozlovski, the founder of the web agency Alotropy, based in North America.

His company has been in the business since 2012, helping develop websites and landing pages for various businesses, and the whole company structure consists of just two people — a project manager, and a designer. Since discovering Visual Composer in 2019, he has been using it ever since and shares with us exactly how it has helped him work more efficiently.

About the Challenges Before Using Visual Composer, and Why They Were So Significant for the Business

Oleg acknowledges that he faced various challenges before finding Visual Composer as the solution. The first challenge was time.

“If you need to create a website in a matter of days, Visual Composer allows you to prototype and create a site and launch it. You can see how the site will look on various devices and easily correct whatever mistakes that may arise.”

The second challenge was the learning curve.

“Once I create a site, I usually pass it on to someone else for administration. A normal PC user is able to do simple tasks in Visual Composer in a matter of minutes. It’s fairly easy to learn and doesn’t require much design/developer knowledge.”

He admitted that inefficient use of time was the biggest factor that had a negative impact on his business and that it needed to be improved. Now, since he has discovered Visual Composer and has been using it on all of his client's sites, he is able to complete more projects in less time.

“And most importantly the [Visual Composer] sites don’t look like the typical WordPress premade sites.”

Oleg Kozlovski web agency's website 'Alantropy' #MadeInVC. Source: Alantropy

About Experimenting With Other Solutions and Why They Didn’t Work as Good

Oleg had initially tried WPBakery page builder. Although he found it to be a bit slow, he was convinced enough to give the next-generation Visual Composer Website Builder a try.

He had also previously tried using Elementor but was hesitant to continue using it, because the builder was too complicated and, in his own words, 'messy'.

One of the biggest advantages of Visual Composer, from his point of view, is that it allows you to write custom CSS and JavaScript. Unlike some other website builders, as he admitted, that, unfortunately, follow a logic that's only known to its own developers.

“Adding a header to a web page with WebGL in Visual Composer is easy, and it works without any problems.”

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

Discover

About Discovering Visual Composer

Oleg discovered Visual Composer the same way many people discover new information these days - through search engines.

He found out about the more time-efficient web development product through online searches, right after the owner of WPBakery created Visual Composer — the React-based, no-shortcode, full website builder. See the difference between Visual Composer and WPBakery.

He admitted that the trend in the web industry that drove the need for using Visual Composer was the need for websites that looked good and were mobile-friendly before anything else.

Highlighting the responsive design feature, that automatically adapts the website to look good on mobile devices, while still allowing custom optimization of the website elements for specific devices to ensure high speed and better usability.

'Ciudad Creativa Digital' UI/UX Web Development Project. Source: Alontropy

As well as what sparked Oleg's interest in Visual Composer exactly, was that the new website builder was created in React JS, which seemed very interesting to him.

With Visual Composer being developed using React JS, it amplifies the reactiveness and receptiveness of the builder. By offering responsive templates, addons, and numerous content elements that help with building mobile-first websites, the exact factor that is so important to him and his business.

Web Agency Owners Favorite Visual Composer Features

The first feature that Oleg highlights that helps him and his clients meet their needs, is the ability to style texts site-wide [referring to the Font Manager Addon].

“It may seem like a very small feature, but it saves you a lot of time when you set the style for an H2 element and you know that it will be the same everywhere on the site unless you edit it.”

The second feature that he finds very helpful is the ability to edit the style of each row and column, depending on the device that you are using. It allows you to change the background or the video, according to what device is being used. Yet another shout out to the design options Visual Composer offers for customizing website elements for specific device types.

The last, but not least important feature, he highlighted, is how well external JavaScript code works inside Visual Composer.

“I have implemented on a couple of sites a header made with Three.JS and it worked quite well, on the first run.”

How Visual Composer Meets the Needs of Web Agency Owner and His Clients

As Oleg in his own words would explain Visual Composer to a friend or a client is: "It’s like creating a website with HTML and CSS, only visually. All the rules still apply, like the 12-row layout, just this time instead of writing the code you create it all visually. And speed-wise, the site is almost just as fast." And that's exactly how he explains it to his clients.

When talking about his clients utilizing the product, he said: "They only have two needs, firstly the site must be done fast, and secondly, the site must be easy to modify so that they don’t need to hire someone to do updates on the site."

"By the way, the other day it was a mini anniversary at our work. 10 websites completed in 3 months."

Lastly, it's important to note that he has a Developers' license (these days, called the Agency License for 1000 websites). The Agency License is $849 a year, which means that making 1000 websites with Visual Composer costs less than $1 per website. Plus, it takes tons of work off of your developer's golden hands, which is priceless, of course.

If you want to try Visual Composer, you can do it for free, or get a one-site license for $49, and access all the Premium features this agency is using for building their clients' sites.

About the Biggest Benefits of Using Visual Composer and Plans for the Future

As the biggest benefit of using Visual Composer, Oleg pointed out that it allowed him to practically skip the prototyping phase and go straight into production, on some projects at least. And, interestingly enough, he came to the same conclusion as Michael Belina, owner of Migman Media.

“Basically, it [Visual Composer] helped me decrease the production on simpler sites by up to 50%.”

By far, Oleg has been most impressed with the ability to create a single style that runs throughout the whole site, Header and Footer editors, and the ability to edit the look of each row and column, depending on what devices are being used, as he highlighted previously.

As for his plans of continuing using Visual Composer for future projects, Oleg said: “I would like to learn React enough to be able to create my own Visual Composer elements. And I would love to find a way to integrate something made with Three.JS into Visual Composer.”

Showcasing how by creating websites for a living, and using the right creative outlet, you get inspired to continuously learn new web design and programming techniques that help you grow as a web creator.

Lastly, Oleg pointed out that it may be a good idea to find a way that users can pass their own layouts to one another, that would engage collaboration between web creators. Or, an alternative to that — creating a place where Visual Composer users could share various layouts, similar to the way self-promotion and social networking platforms like Behance or Dribbble operate.

“Other than that, thanks for everything and keep up the excellent work.”

Ending Thoughts

On our last conversation with Oleg, he revealed: “The other day it was a mini anniversary at our work — 10 websites completed in 3 months. We couldn’t have done it without Visual Composer”.

Oleg's story is inspiring, and it's clear that he has succeeded by using the right tools to get there. You can also achieve success like Oleg by working smarter, not harder (as cliché as that might sound, but the Visual Composer web creators continue to prove right), and customize your websites to your clients' wildest desires, without any hiccups along the way.

The post How Web Creators Made 10 Websites in 3 Months Using Visual Composer appeared first on Visual Composer Website Builder.

How to Create and Install WordPress Multisite

Linda R — Mon, 13 Sep 2021 13:10:15 +0000

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

Take a look at the multisite world!

What is a WordPress Multisite Network?

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

Who Needs a WordPress Multisite Network?

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

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

So who would need a multisite network?

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

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

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

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

What You Need to Get Started with WordPress Multisite

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

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

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

Choose Your Domain Structure

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

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

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

How to install WordPress Multisite

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

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

Ending Note

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

Download a Free Website Builder

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

How to Create a WordPress Child Theme

Linda R — Tue, 07 Sep 2021 16:37:44 +0000

Here you will learn how to create a WordPress child theme. You will have prepared codes for the style.css file and functions.php, all you have to do is copy / paste them. Additionally, you can download a ready-made child theme example for the Visual Composer Starter theme.

Ready to jump in? Let's go!

One of the greatest benefits to using WordPress is that you can take advantage of a large number of ready-made themes, all of which are customizable by users with ease. However, this customizability comes at the cost of maintenance in case your customization project isn't compatible when an update happens on your chosen theme.

So, if you're a WordPress user, it's best to create child themes on each of your sites. This is the only way that you can avoid losing all of your hard work if an update overwrites customizations made in the original theme files.

What Is A Child Theme

A WordPress child theme is a separate style sheet that changes the look of your parent's themes styling and adds extra functionality to a WordPress website.

Firstly, it allows developers and designers to modify the design of a website with minimum disruption. If you want one part of your site in red but most other parts blue, then creating a separate child theme for each section would be far less disruptive than modifying every page on the site (which could break things).

Secondly - and more importantly from a technical standpoint - child themes existence means that it is possible to update an entire WordPress installation without ever touching any core files or data stored within them.

Benefits Of A Child Theme

There are many benefits to creating a child theme for your WordPress site. A parent theme is pre-built and already functional, so you can make some great modifications without wrecking the original functionality of it or requiring extensive development on your end.

Some of these include:

Making sure that customizations will be portable and replicable;
Keeping customization separate from functions in the main files (this allows updates to affect only those parts);
Allowing parents themes to receive bug fixes by overwriting CSS/themes rather than reworking all changes;
Saving time as you're not recreating something which has been tested beforehand - this also means learning new skills rather than relying on old ones if they no longer apply correctly.

How to Create A WordPress Child Theme

In this tutorial, I will be using the Visual Composer Starter theme. Here you can download a free child theme example for the Starter theme - child theme zip file.

For those who want to go through the process, let's keep on going further and make a new directory in the theme folder. Use either the cPanel or upload your file via FTP. The themes directory can be found in wp-content/themes.

Create a Child Theme Folder

To create a child theme folder, first, open your file manager and navigate to the wp-content/themes directory. Once you are there, create a new folder. Name the child theme whatever you want, but something clear and easy would be great. I recommend using themename-child.

Create a stylesheet: style.css

In your child theme folder create style.css file and add a stylesheet header to the file (if you're using a Stater theme, simply copy/paste).

/* 
Theme Name: Visual Composer Starter Child Theme 
URI: https://visualcomposer.com 
Description: Visual Composer Starter child theme 
Author: The Visual Composer Team Author 
URI: https://visualcomposer.com 
Template: visual-composer-starter 
Version: 1.0.0 License: GNU General Public License v2 or later License 
URI: http://www.gnu.org/licenses/gpl-2.0.html 
Tags: light, blog, starter, responsive-layout, accessibility-ready, sandwich-menu 
Text Domain: visual-composer-starter-child
*/

Now you should create functions.php and add the following code:

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ ); 

function enqueue_parent_styles() { 
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

Note: If you want to create a custom cover image for your theme - create image 1200×900 pixels, name it screenshot.png and upload it to your child theme folder.

If you would like to learn more about CSS, here is a nice post on how to modify WordPress CSS styles - with a video tutorial!

Now it's time to install and activate the child theme.

Install + Activate The Child Theme

To install the child theme, you can either upload it via FTP or create a zip file of that folder and then click on Appearance - Themes - Add New in order to import to WordPress. After the installation, the last step is to activate the child theme.

Style.css Values

It is important to add proper values to your child theme style.css to work properly.

Theme Name: The name of the theme that will appear in your WordPress;
Theme URI: A URL to the theme demonstration which is required if you wish to push your theme to the WordPress theme repository;
Description: Theme description that will appear in your WordPress by clicking on the Theme Details option;
Author: The author of the theme – you;
Author URI: Author website address;
Template: The most important part – is the place where you need to specify the name of the parent theme folder. This is case-sensitive and needs to be 100% correct in order to function as a child theme;
Version: A version of your child theme that is suggested to start with 1.0;
License: Specify the license of your child theme. Make sure that your license is the same as your parent theme license;
License URI: Link to the license explanation, again you should follow your parent theme licensing;
Tags: Tags that are relevant to your child’s theme;
Text domain: Used to make your theme translatable and should fit the ‘slug’ of your theme.

And remember, if the lines of code seem complicated to you, here you can download a free child theme example for the Starter theme.

Download Visual Composer Starter Theme

The post How to Create a WordPress Child Theme 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.

Design an Entire WordPress Website Creating Unique Page Layouts With The Header, Footer, and Sidebar Editor

Linda R — Wed, 10 Mar 2021 12:38:36 +0000

There's a powerful feature that stands out here in Visual Composer - the header, footer, sidebar editor. This is an important step in the website-creating process and gives you an opportunity to fully design your website using tools that make Visual Composer a real theme builder.

We all know that WordPress themes can be finite in their options and layouts, and off and on there is a need for a change in the header or footer requiring decent coding skills. Get to know this game-changing feature for WordPress sites letting you create your website from top to bottom!

Header, Footer, Sidebar Editor

If until now, theme users were stuck with a certain theme’s header or footer design, now Visual Composer Website Builder solves this problem for all time with the new Header, Footer, and Sidebar Editor!

In this section, you will find the following:

What is the Header, Footer, and Sidebar Editor in Visual Composer;
How to create and edit custom or pre-built headers, footers, and sidebars;
Features and addons to combine with your headers, footers, and sidebars.

You can create new headers, footers, and sidebars with just a snap using well-known Visual Composer content elements and templates.

The Header, Footer, and Sidebar Editor is similar to the regular content editor, but its properties (width and height) are measured for headers, footers, and sidebars. The editor also offers Design Options to apply in the Navigation bar settings panel.

In addition to the header and footer editor, the sidebar editor is a real treasure for WooCommerce stores – it allows you to add products and categories thus drawing attention to their attributes (size, color, etc.). Also, a sidebar is a great place for your social media widgets, advertisement, and other CTA attributes.

How to create and add headers, footers, and sidebars

Hover over Visual Composer in your WordPress admin panel and select what you want to create - Header, Footer, or Sidebar;
Add new template;
Name your new template;
Use content elements and templates to create your headers, footers, and sidebars;
Save your template;
Add the template by opening a page with Visual Composer
Locate the page settings (in the Navigation bar) and select the template you want to apply from the drop-down.

Note: Make sure you choose a page layout with a header, footer, or sidebar.

Add Header, Footer, and Sidebar Template From the Visual Composer Hub

With the Visual Composer header, footer, and sidebar editor you can create an unlimited number of templates with a unique design or download ready-to-use templates from the Visual Composer Hub – a cloud library with unlimited access for Premium users.

So, for a quick start, go with a pre-built header, footer, and sidebar template to be used as a basis for your own styling, or select the layout of your choice. In addition to choosing Header, Footer, and Sidebar, you can also disable any of these blocks.

Custom Design

Now you finally have a free hand to determine your own custom designs. This means that you can create a menu in the header or footer, add a logo or any other element of your choice. Like every element in Visual Composer, you can adjust the design of your headers, footers, and sidebars with powerful Design Options.

Create Custom Header and Footer in Visual Composer

With the Global Header and Footer option, you can create custom headers and footers to replace the theme default ones. In Visual Composer, you can overwrite headers and footers straight from the Frontend editor.

Change the header and footer and specify the particular type of content, any page or post type where they should be placed. For instance, you can apply a custom header and footer to the whole site (set as a default) or to the multiple WordPress pages (including WooCommerce).

Sticky Header

You can also apply stickiness to rows placed in the Header, Footer, and Sidebar Editor and make the navigation process more comfortable for users. Besides, it is a great feature for marketing and leading your customers straight to your sales section.

Dynamic Content

The Header, Footer, and Sidebar editor can be combined with a Dynamic Content feature! It is content that adapts to the interaction, preferences, and interests of the user. Dynamic Content is a Premium feature that allows you to use dynamic WordPress content and custom fields instead of static one. Сreate a header or footer template with dynamic content placeholders and use it all over your site.

Global Templates

Any header, footer, or sidebar can be placed as a Global Template. The addon lets you place the templates you have created as a separate element on any page. Plus, whenever you change the design of the template selected as a Global Template, the updates will automatically be shown across all pages where it was used.

Page Layouts

When you install a certain WordPress theme, it has a defined page layout where the header, footer, and sidebar usually is set by default. But what if you need a different page layout for one specific page? That’s when Visual Composer page layouts come to be a very handy tool, giving you the option to select one of the predefined layouts or proceed with the default one.

This is a sweet treat for all of you guys – with just a click, Visual Composer lets you take over the design defined by the theme, so you are no longer depending on its layouts!

Layout Builder

In fact, there's also a feature that allows you to do all of this in one place - the Layout Builder. Simply create a layout with a header, footer, sidebar, or anything else your heart desires or designer has imagined and assign that to pages, posts, custom post types, or even archive pages. You can find the Layout Builder in your Visual Composer Dashboard, under Theme Builder.

By being able to design your custom layouts, you become your own website theme builder! And once that goes on, you don’t need to spend your money on premium WordPress themes because now you can get a lightweight theme for free and have the ultimate freedom of how your site is going to look.

So Far So Good!

Visual Composer offers everything you need to create a full website with simple yet effective tools, so now is the perfect time for upgrading to Premium and starting to benefit from the Header, Footer, and Sidebar editor.

As always, we would love to hear from you – comment, question and leave your feedback below.

Happy creating!

Get Started with Visual Composer Premium

The post Design an Entire WordPress Website Creating Unique Page Layouts With The Header, Footer, and Sidebar Editor appeared first on Visual Composer Website Builder.

Visual Composer Year In Review 2020

Linda R — Wed, 30 Dec 2020 13:38:34 +0000

What a year! Although it did not allow us to have offline events, we missed out on face-to-face projects and finally moved to work from home, it was productive and plentiful for us.

Let's look back at what has been done and who knows, you may notice something that you have missed. We have delivered plenty of improvements, new features, elements, templates, and integrations. Let’s highlight those!

Launched Visual Composer Insights

In the middle of the year, working 100% remote and seeing the situation in the world, we decided to supplement the Visual Composer editor with a free tool that would be useful for all users. What could be more useful as a transparent SEO assistant?!

Visual Composer Insights is a free analysis tool that ensures you create quality content. It analyzes all basic content types right in the editor and gives you suggestions on how to achieve higher performance and better SEO ranking of your page.

Integrated With GIPHY

Since September, when you open the Visual Composer Hub, there is a GIPHY integration, right next to the Unsplash. With the GIPHY you can choose from 10+ billion GIFs and add them to your site straight from the editor.

We can safely say that from now on including GIFs on your WordPress site is super easy. Once you are a Premium user, you will have access to the GIPHY finder. Simply search for a GIF directly in the Visual Composer editor, save it in the Media Library, and have GIFs to entertain and engage your audience.

Developed Visual Composer Popup Builder

Sometimes popups can be awkward, but their overall performance has proven to be with a plus sign. Until mid-summer, we spent large sums subscribing to a special popup making tool. And it is believed that our users did the same. This prompted us to develop our own Popup Builder and pass it on to our Premium users.

Visual Composer Popup Builder for WordPress allows you to create an unlimited number of popups using all the features, elements, and design options available within the Visual Composer Hub. Once ready, you can control popups’ appearance and set their behavior.

Launched My Visual Composer

At the beginning of the year, we moved to a more secure, transparent, and user-friendly license management system. The main purpose of the My Visual Composer account is to ease our users’ license and subscription management process at all times.

You not only have a more intuitive interface that makes your subscription management faster but also an option to change your data, upgrade licenses, renew expired licenses even after some time has passed, and review other things.

Significantly Improved Visual Composer UX

By constantly developing and providing you with new features, elements, and templates, we also worked on UX improvements and UI updates throughout the year. We launched a Visual Composer dashboard inside the WordPress admin and made our User Interface more attractive.

Visual Composer UX improvements are huge for beginners. It offers a tutorial template, an initial help guide, and helper icons. It is much easier to start with such a help package in your pocket.

Fun Things We Did Together

In the summer of 2020, we had a little respite from the pandemic, there was a feeling that everything was getting back on track. This allowed us as a team to meet and even organize entertaining events.

One of our coolest traditions are sports games, they are fun, tough, and boosting. This summer we will remember with 130 km of cycling , enjoying the sun, nature, great BBQ and good company, of course. As a team, we got used to spending more time together, so this meeting was like water to a thirsty soul.

Other Things We Did In 2020

New elements were added to the Visual Composer Hub (ex. Mono Social Icons, GIF Animation);
Added new Template sets of pre-made pages, blocks, headers, and footers to the Visual Composer Hub;
Element lock and Element presets were added to give you more control over your content;
Archive Page Editor was added to the Theme Builder.

Our Year In Numbers

Everything happens just a little differently this year. From hard work and successful results to fun moments and pleasant events. This is what we managed to achieve:

Released 9 major updates;
In total, more than 500 elements and templates are added to the Visual Composer Hub;
Spent 250,000 hours online creating, developing, chatting, playing games, celebrating birthdays, eating home-made food, and having online coffee meetings;
Became owners to 3 new pets. In total, the Visual Composer team members own 15 pets: cats, dogs, and ants;
Continuing the tradition of bananas and coffee consumption: 140 kg & 40 kg;
Snapped 100+ food photos of what Visual Composer employees eat at lunch;
Helped a number of people by donating to charity through the #wpgivesahand movement!

#wpgivesahand

Thinking of those who need help the most, we, along with other WordPress representatives, started a new movement: WordPress Gives a Hand or #wpgivesahand.

The first campaign of this movement took place last Christmas, where we donated 10% of every product sold from December 21 to 27. Together we have helped organizations such as SOS Children's Villages, UNICEF, Budi Human, and others. They were us, our partners, and you who purchased one of the plugins involved in this campaign.

Thank you all!

Hopefully, it is a fresh start for those in need and all of us really.

We are grateful for our thriving community and look forward to more and better in 2021.

The post Visual Composer Year In Review 2020 appeared first on Visual Composer Website Builder.

“WordPress Gives a Hand” Charity Movement

Linda R — Fri, 11 Dec 2020 14:00:45 +0000

In 2021 #WPGivesAHand has its own website WPGivesAHand.com - Join the movement.

The WordPress community has always stood out for sharing, giving, and supporting. As part of this community, Visual Composer together with friends has started a new movement: #wpgivesahand, which involves donating to charity. The first approach: Christmas!

Even if 2020 has been a big challenge for all of us, there are people who need our attention the most. So instead of offering another sale, this Christmas Visual Composer will donate to charity. And not just us. By purchasing Visual Composer or WordPress products below, you too will become part of this movement that has really helped someone.

Christmas Charity #wpgivesahand 2020

Christmas charity is the first donation campaign launched by the “WordPress Gives a Hand” movement. This year Visual Composer and other WordPress businesses will donate up to 20% of all sales to chosen charitable projects and organizations.

Specifically Visual Composer this holiday season will donate 10% of a single sale made from December 21 to 27, 2020 to the SOS Children's Villages. It is a nonprofit organization fighting for children's rights, working with abandoned children in need, protecting adoptive families and those in crisis.

"As Ray Goforth once said: "There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed." I believe that the WordPress community is full of people who will try and are not afraid to succeed. That is the reason I decided to join WordPress a long time ago, and this is the reason why we can make a difference in this world together."

Michael Makijenko

CEO at Visual Composer

How great is the feeling that you not only got a new product you love, but you helped someone else in return? Purchasing from a company that also gives back is kind of the essence of the holiday spirit. Take a look below at our friends who also give, they have something to tell you.

Members of the “WordPress Gives a Hand” Movement

#wpgivesahand is a WordPress-wide movement that other businesses have joined to help those in need. If you're making a purchase with any of these companies, a percentage of every sale will go to a charity that's close to their heart.

Visual Composer

Visual Composer is a drag and drop website builder that helps you with building beautiful WordPress websites.

"At Visual Composer, we care and give a hand to those who are in need regularly. 2020 turned out to be very different. We took it as an invitation to try harder and do even more." - Michael Makijenko, CEO at Visual Composer.

The donation will go to SOS Children's Villages.

TranslatePress

TranslatePress is a WordPress translation plugin that helps you grow your multilingual traffic and reach more people.

“Joining forces to do good should be a no-brainer. Children are the pillars of our society so we're more than happy to support any organization trying to offer them the care, safety, and education that each child should be entitled to.” - Adrian Spiac, co-founder of Cozmoslabs.

The donation will go to SOS Children Villages.

NinjaTeam

NinjaTeam is a team of WordPress plugin developers and designers who create products that help save time and budget.

“We all come to the world with nothing, sharing is the flower of humanity.” - Kelly.

The donation will go to UNICEF.

wpDataTables

wpDataTables is a powerful WordPress table plugin that makes your work with tables, charts, and data management easy.

“We think that this is a great movement that can help those in need at this challenging time, and we are happy to share our profit with those who need it the most.” - company representative.

The donation will go to Budi Human.

YayCommerce

YayCommerce creates powerful addons for WooCommerce, helps your businesses turn WordPress and WooCommerce into Revenue.

“We think that we all have a responsibility to make the world a better place by supporting people in need. Together, we grow!” - company representative.

The donation will go to Sapporo Ichigokai, Room to Read.

Amelia

Amelia appointments and events WordPress booking plugin that makes sure your customers can book appointments or events and pay online even while you sleep.

“Our team members help that organization individually by donating money, so this is an excellent opportunity to collectively contribute a significant amount of money to help parents pay for their children's treatment.” - company representative.

The donation will go to Budi Human.

The post “WordPress Gives a Hand” Charity Movement appeared first on Visual Composer Website Builder.

Audrey Fotografia Case Study: Web Development Checklist in Action

Linda R — Fri, 02 Oct 2020 17:38:57 +0000

The website design and development process is explained through a case study of Audrey Fotografia. A photography site made using smart WordPress solutions that will come in handy also for your website.

Before we unravel the process of what it takes to create a website, let's get to know Adrienn — an event photographer of Audrey Fotografia.

I am Adrienn

The most beautiful moments of life captured in photography will be your special memories. Let me I’ve them to you! Here in Hungary or Europe, I am willing to travel to capture beautiful photos. Wedding photography, maternity, family, and other event photos.

And then, once you are familiar, I will provide you with a web design and development checklist. Plus, you will see its points outlined in action. Feel free to save the list for later and use it to guide your website creation. For yourself or for the client, the essence of the process does not change.

Back to Adrienn!

Story of Adrienn

Adrienn is from Hungary, but as a professional photographer, she is not limited to her home. She is ready to travel to other countries to capture beautiful happenings. Weddings, family portraits, bigger and smaller events are what Adrienn films and photographs.

Having been successful in photography, Adrienn wanted a website to display her photos and videos. Besides, she wanted a site to tell her audience more about herself and that would offer a way to communicate.

Audrey Fotografia Mission

Adrienn was in the same situation as many others dreaming of their website. A place to store creative materials that attract clients. A site that is easy to find in search engines and presents as a photographer's portfolio.

Someone might think that nowadays it is not difficult to show who you are and what you do. Yes, social networks work great, but they are momentary. Have a Facebook page, an Instagram account and you're there, somewhere.

The online environment is changing non-stop. And with it, somewhere, in some way, your story has taken place. Gone. Social networks find it difficult to convey the value that a website provides.

Adrienn saw many reasons why having a website would give her great value. Ease of access, for example. 93% of people’s decisions start with a search engine. A website and a good SEO are key to finding your business.

Having a website guarantees you lasting value. It's a great opportunity to reach new markets and expand the business. Imagine, 93% of your potential customers are out there knocking on your door. You can let them in through the beautiful website.

So, the mission has started, what's the challenge?

Challenge

Adrienn realized that creating a website is a challenge. Will I need to know the coding? What WordPress plugin should I choose to make a multilanguage website? How does SEO optimization work? How will my website look on a mobile device? When to launch my website online?

All of these questions need clear answers. So, this made her look for easy-to-use solutions. And one of them was a drag and drop website builder.

We were happy when Adrienn chose Visual Composer. We knew it would be an exciting visual story. Adrienn has been around creating photo and video memories for others for over a decade. She has a great reputation and countless recommendations. These things deserve to be told to a wider audience. And the website has that power.

Now that you know more about Adrienn and her challenges, I can deliver on my promises.

Web Design and Development Checklist in Action

Further on, you will find out the creation of Adrienn's website. It's a great opportunity to look behind the scene of a WordPress website that turned from an idea into a reality. From inspiration to wireframes, from mockups to functionality.

Website design and development is divided into seven steps:

Gathering information
Planning
Design
Development
SEO research and content writing
Testing, review, and delivery
Maintenance

Each of these steps includes its own guidelines. For example, to gather information, it's necessary to understand the vision of the website owner (your own or client's). To plan, it's essential to understand what experts do you need in the project. These guidelines for each step are what will take you to the next stage of website development.

Let's take a look at each of these seven steps. Both theory and reality.

1. Information Gathering

When starting a project, it is important to know as much information as possible. When it comes to website design, you need to know everything about it. What do you or your client want to see there? What is the purpose of the website? Who is your audience? What are the design requirements and what is the budget?

In practice, these points are summarized in a document called a design brief. The design anatomy can be different, it depends on the project. In the case of the Audrey Fotografia website, the design brief was as follows.

Person Profile

Note that it can also be a company profile when it comes to the company. Your design brief should include a general insight into the client. Knowing the client will give you transparency of what the website should be.

If you make a website for yourself, then highlight the most important thing you want to say. Don't be shy, be proud of your approach.

Talking about herself, Adrienn chose to emphasize her creativity. She positions her personality, who sees the world colorful and adapts to it like a chameleon. This message permeates the entire website. For visitors, this gives the impression of Adrienn as a creative photographer. She is ready to go on adventures with you. And that's exactly what you want from your photographer.

You can read more about Adrienn and her vision.

Project Overview

At this stage, it is important to understand how ambitious the website is. The scope and scale of the project and its deliverables. Are you building a new website or redesigning the existing one? What do you definitely want to include on a website and what would be that you definitely know you don't want to see in it.

At this stage, you should also understand what pages will be needed. Homepage, about me page, what else? We knew about Audrey Fotografia that she would definitely need a gallery to display the photos.

Adrienn is also filming, so there was a need to make room for her videos. An important element is a communication, how will site visitors be able to contact her? A contact form is an answer which in the case of Audrey Fotografia has a special page.

Target Audience

When designing your website, it is important to understand your target audience. Who is your persona? The answer usually can be characterized by demographic data. Knowing the age, gender, and location can tell you a lot. Also psychographics such as media consumption habits, values, and related interests.

If you already have a website with a Google tag in your code, you can use Google Analytics to help you analyze your visitors.

The client should know the target audience best. If there is no research done, you can help with it. Identifying the audience plays a big role to make a suitable website design. In Adrienn's case, having been in the photography business for years, she knows her audience personas to the smallest detail.

This is a piece of a design brief from Adrienn: “As for the age, my target is a really wide range, it's between 20 - 50 years (just engaged, planning a wedding, or already has a family with kids). On the other hand, between 20 - 50, there may be some people who lead small companies, where they need some professional photoshoots of food, accommodations, business portraits, etc.”

Design Requirements

Design requirements are both technical and creative. At this stage, it is important to find out what the customer likes. Or what do you like if you are a website owner? Here you can find inspiration from other websites. This is the case of Audrey Fotografia, where other websites served as design inspiration.

Next, you need to consider all the visual materials that go on the website. If they are videos, what are the formats? If they are professional photos, what are the file formats, and how to submit them? Are there any specific color schemes in the vision for the website? This will help determine the color palette of the site.

Adrienn participates in the creation of beautiful videos. These videos are stored in Vimeo — a video hosting and sharing platform. It would be a bit foolish to put large video files on a website. So the solution is simple. The videos that you can see on the Audrey Fotografia site come via the Visual Composer element for Vimeo. This keeps the website light and does not affect its performance.

Budget

Understanding the cost of a website is an important factor. There may be cases where the desired result is too expensive. In that case, you have to look for an alternative. A good way to save is to make your own website. Nowadays there are handy tools that make this process many times easier.

These would then be the main factors in gathering information. A process that may seem time-consuming at first, but when done, so useful. Let's go further and look at the planning.

2. Planning

When planning a website, it is important to identify everyone involved. In agencies, this is a division into departments, which can be a marketing team, designers, and developers. There are projects that don't need that much involved.

The same person can do both, design and development. If you make a website yourself, then you can write and insert the content. On the WordPress platform, a DIY website is possible due to the offer of many plugins.

The Audrey Fotografia project involved both the designer and the developer, as well as Adrienn herself. She took care of the copywriting. Adrienn herself also translated texts from English into Hungarian and added them to the website using the TranslatePress multilanguage plugin.

Continuing with plugins, it is important to understand at the planning stage what tools and services will you need. WordPress offers a myriad of plugins that provide functionality for your website. Plugins serve as helpers in the page production process itself. For example, with a drag and drop builder, you can build your site without knowing a single line of code.

Returning to planning, when you know all the parties involved, it is necessary to plan the work. Who and when works at a design, who at copywriting. Who participates in the development process, and who installs the necessary plugins.

When that's done, it's time for the most beautiful moment of website creation — web design.

3. Design

Taking into account all the information gathered in the previous stages, it is time to start working on the website design. At this stage, the designer (or you with design thinking) starts working on sketching. As part of this process, you create so-called wireframes.

As you can see in the example above, the design wireframe sketch of the Audry Fotografia website provides spaces that will be filled with a colorful design. And not only. Empty spaces provide their own order. A place for a logo and a menu. Space for the gallery, page titles, and other attributes.

The design of the Audrey Fotografia website was made by a designer from the Visual Composer team. The designer loves to use the digital design toolkit Sketch in his work. Both making wireframes, prototypes, and actual web page designs.

" I have been using Sketch for 3 years. It’s a remarkable product design tool. The Sketch is a vector-based design editor and when it came out first in 2010 it completely changed the interface design industry. The journey is remarkable, it’s easy to use, it is vector-based improves my workflow."

Rohan Rahian

Designer, Visual Composer

Once there is a wireframe ready and you have the approval, follow the next step. The website visualization. Known in the design environment as a mockup that looks more like a finished product or prototype.

The Audrey Fotografia website design mockup was created based on all the information and assets obtained. Image galleries, videos, descriptions, and other features such as additional language.

In terms of content. As far as final copywriting is not yet available at this stage, then in practice, the mockups contain text placeholders. In other words: Filler text or Lorem Ipsum shares some characteristics of a real written text but is random.

So, we have reached a transition from the designer's contribution to the site's developers. Once the final website design has been received, the developers can start working on the development of the page. This often means that each attribute is assigned a function. With the help of code (CSS, HTML, JavaScript) or a WordPress plugin.

4. Site Development

The development process begins with understanding if the front-end and/or the back-end developers are needed. Next, developers need to evaluate every detail of the website design and decide how to give it functionality.

The first is the staging setup. This is where a website develops before it is launched online. The staging environment is no different from the usual dashboard in WordPress. This is followed by theme installation — activation and setup.

When you have a WordPress theme and environment to build a website, it's time to get plugins. WordPress offers a rich library of plugins for all needs and purposes. As one of the first that should be installed is the security and anti-spam plugin. This will make sure to protect your website from rogues. The Audrey Fotografia page is protected by the Akismet Anti-Spam plugin.

Next in line is Yoast. This is definitely the must SEO plugin to guide you through the best practices in writing SEO-optimized content. Yoast is also a good friend to the Google search engine. Notes were taken!

Continuing on as the next in line I would like to put a website builder. WordPress is simple with plugins. But too many plugins mean a slow website. Therefore, the choice is in favor of a page builder, which allows you to create websites of various categories in a convenient drag and drop manner.

What's more, a website builder like Visual Composer offers 350+ elements, templates, and 3rd party integrations, so you can create a site without extra plugins. Like a contact form, for example. Visual Composer offers a simple contact form element inside the editor (Visual Composer Hub), so you won't have to get an extra plugin for that.

In addition to the above, the Audrey Fotografia website also uses a plugin that allows you to broadcast the page in several languages. The TranslatePress multilanguage plugin is easy to use and stands out with its simple but powerful interface.

Remember, this is a list of plugins used to make the www.audrey-fotografia.hu website. Your project may need something else, some additional plugins.

Akismet Anti-Spam
Visual Composer Website Builder
Bluehost
Complianz | GDPR/CCPA Cookie
Consent
TranslatePress - Multilingual
Yoast SEO

During development, it is important to adapt these plugins to your needs. Put settings to suit the purpose, essence, and focus of the website.

Looking at the Audrey Fotografia website, we see the following features and effects. Video background, for example. It is made using the Visual Composer element: Video Background. It is set to start playing automatically once a visitor lands on the homepage.

Such a visual solution attracts glances and creates dynamism. It must be said that such a solution is not the best on a mobile device, so there you will see a background image instead of the video. Why not the best? Because it affects the mobile user experience.

Other things you see on the site are also made with Visual Composer. Page layout, header, footer, and post grid that displays photos. All this is possible without knowledge of the code. But with a little input from you, finding out the features offered by the plugin.

At the end of the development phase, I would like to highlight an important point that should be made by everyone who owns a website. Adding a Google Tag (and Facebook pixel) to the site. It is crucial for marketing activities. Adding the piece of code can be a little scary but it isn't. Sure, you can do that in the WordPress back-end but why choose the scary path.

You can add these codes via the Visual Composer front-end editor. All it takes to insert the code snippet via Visual Composer Dashboard — CSS & JavaScript editor. As handy as it is, Visual Composer has Insights that will tell you what you can improve on your page. Forgot to add an ALT tag to the photo? It will be captured and notified to you. The same is with the Google Analytics tag.

5. SEO Research and Content Writing

We all know that content is a king. The judge of good content is Google. Keyword research is the key to success. It will help determine what content will be best for your website to meet SEO standards. Good SEO also means that your website can be easily found. So think about what keywords you want to be found for.

In the case of Audrey Fotografia, the following tools were used to help with both SEO optimization and content writing.

SEMrush — a popular SEO tool that specializes in keyword research, competitor analysis, and Google Ad campaign optimization.
Google Keyword Planner — lets you discover new keyword ideas for your content and campaigns.
AnswerThePublic — a keyword tool that visualizes search questions and suggested autocomplete searches in an image called a search cloud.
Grammarly — a writing assistant that goes deeper than grammar to offer you comprehensive writing feedback.

As Audrey Fotografia's website is bilingual and the audience is divided into several more, keyword research was a challenge. But anything is possible. Content in both English and Hungarian is aligned to the best SEO standards. All with the tools mentioned above.

6. Testing, Review, and Delivery

This is the final stage (before the maintenance), which is still under development, but with everyone involved. Activating the SSL certification, testing the contact form functionality. Checking the responsiveness and how the website looks in multiple web browsers.

Once again, take a look at Yoast snippets, page titles and re-read the final version of the text. Evaluate performance, speed, and overall functionality. Make sure all links are working and there are no errors found. Errors can happen and therefore it is important to have a 404 error page that you plan in the planning stage.

7. Maintenance

Maintenance is not really part of the web design and development checklist, but it should be mentioned. It is an important part of a website. After web design, development, and content, a website is online. What now?

What happens if you change your address? What if you want to add new photos to the gallery? You need to maintain it. Monitor your website to be an evergreen platform.

Again, I want to emphasize Visual Composer, because it makes it very easy to edit site content. Add photos, update texts, whatever needs to be changed.

Summary

The website design and development process are extensive, but following the instructions, it goes smoothly. The key is to plan and process the available information wisely.

Now Adrienn owns a beautiful website that works as a representative portfolio. The website can be easily found by niche keywords on Google and other search engines. And more clients mean more beautiful photography, which leads to a successful career.

I hope you were inspired to create a beautiful website. For yourself or your customers — design it wisely.

Start Your Project with Visual Composer

The post Audrey Fotografia Case Study: Web Development Checklist in Action appeared first on Visual Composer Website Builder.

How To Migrate Your WordPress Site

Linda R — Mon, 07 Sep 2020 07:46:30 +0000

Have you just created a website or are you in the process of creating one? Then there is a possibility that at some point you may need to either move the content from this site to another or shift the entire site from one location (domain or hosting server) to another.

In this article, I will guide you through simple ways of how to move your WordPress site content to another, and provide a list of helpful plugins and approaches you can use to migrate your entire site with a safe and easy move.

A small deviation, this article is intended for more beginners than for WordPress experts, which means that here I will look at simple methods rather than go through the jungle of phpMyAdmin (MySQL). Let's begin with the core question!

Why Move Content?

This could be because you have built a site locally on your computer and you want to migrate it to the web, or it could be because you have an existing self-hosted website and you want to pull some or all of its content into your new site or you have another existing site that you want to move content from or move content to. It can also be because you are annoyed by the slow hosting provider and want to move your entire site to another hosting server. For each individual situation, there can be different reasons why and how to move your website.

However, the scenarios lead to these options:

WordPress Export/Import tool - this option lets you move the content of your website but is limited to posts, pages, authors, tags, and categories. To move the whole site (theme, plugins, and settings) to another location, you will have to choose the next option below.
Entire WordPress site migration - the approach that duplicates the entire site in a new location copying all or part of your site's database, including plugins, theme, and site settings.

Although the migration of a website is not as complicated as it might sound, errors may occur during this process. To prevent that, make sure you've taken all the necessary security measures to secure your website's safe migration.

Backup Your Website

Before you start - I’d highly recommend you make a backup of your entire site. It is a crucial action for your website to be safe in case of a virus, major error, or any other third-party unwelcomed interaction.

You can back up your site using WordPress backup plugins such as All-in-One WP Migration, Updraft Plus, Duplicator, BackUpBuddy, and many others available on the Internet. Use Google search to find the best suited to your needs.

If you are not sure where to start, read this in-depth post on how to backup and never lose your WordPress that teaches you the basics and must-do actions in order to keep your site well protected from any data loss.

Once that's done, you are safe to go further into the process of moving one site to another. Let the further information move you towards the process of moving your site to another location with an easy and transparent flow!

Move Content From One WordPress Site To Another

One of the easiest ways to move your web content to another site is with a default WordPress Export/Import tool that’s designed to move posts, pages, comments, custom fields, terms, navigation menus, and custom posts. This approach is useful when you want to export all of your site's content at once. Emphasis on the content.

The downside of this approach is that WordPress doesn’t export/import your site plugins, themes, and settings. To move those you need to do a full database export through MySQL or install a migration WordPress plugin.

So, once again, the further step-by-step tutorial is for exporting and importing only content from one to another site. To move an entire site, you will need to do a migration which is explained later in this article.

Now, let's export and import your site content! From Site A to Site B.

Step 1: Export From Site A

To do so, you will have to log in to your WordPress admin panel of Site A, locate the Tools option on the left side menu, and choose Export.

As this is for exporting an entire content, simply keep the All Content option selected and click Download Export File.

An automatic download will start and create an XML file straight on your desktop. You will need it later, so keep it reachable. Now it's time to import content from Site A to Site B.

Step 2: Import To Site B

To do so, login into your WordPress admin panel of Site B (the one you want to import the content in), locate the Tools and this time choose Import.

You will see multiple installers you can use to import your site. WordPress is not limited, you can also move your site from a completely different blogging platform, such as Blogger (+ Blogroll), TypePad, and Tumblr. However, this guide is about WordPress, so let's continue with the next step.

Step 3: Install The Importer

From all the systems choose WordPress and hit the Install Now button. The WP Installer plugin will be automatically downloaded and activated for you to use straight from the Tool's section.

You are ready to import!
Again, go to Import under the Tools and click on Run Installer that will take you to the Import WordPress section.

In the Import WordPress window below, Choose File and upload the previously saved XML file.

Step 4: Assign The Content

In the next step, you will have to assign content to existing users on the new site. This ensures all the content is attributed to an author account that exists on the new site.

Another important option is to Download and import file attachments - make sure to tick this in order to move your site images or files to the new site. If not ticked, your media files will not be imported and you will have to either repeat the previous steps or move the files manually.

Once selected the needed content, click on the Submit button, and congrats - you have exported and imported your WordPress site content!

Pros And Cons Of Using WordPress Export/Import Tool

Like mentioned before, there is a downside to this approach and it's that WordPress doesn’t export plugins, themes, and settings of your site. WordPress Export/Import is just a simple content migration tool for sites without a lot of media files, plugins, and other important settings set for your site.

It is an easy and quick way to move content, but if you want to do a full site migration, such as moving your website you have developed on the local server to another web server for public access - then this approach is not the way to move your site.

Especially a complex site with lots of settings and plugins. For that, you need a full site migration and to do that you will need to do a full database export through MySQL or use automatization WordPress plugins.

How To Migrate Your Entire WordPress Site

There are multiple reasons why you would need to move your site from one place to another. Each reason has its own destination:

Local to the web - moving a WordPress site from a local or development environment to a live site is a common practice for web developers. Hosted on a local server, this way you make sure that the website is not public in its creation mode and is developed behind a scene. Once the site is done and your client is happy with the outcome, it's time to move the website live.
Web to local - another common approach when developing a running website. For example, it could be that your website is outdated and it needs a whole new design. You wouldn't want to fiddle with the site while it's online accessible for active users, instead, you move the site to the local server and give it a new design behind the stage. When ready, migrate to live!
Web to web - moving an existing WordPress site to a different URL. Suddenly changed your company's name and need to change your site domain? Site migration allows you to move your entire website from one domain to a totally new one.
One host to another host - moving an existing WordPress site from one host to another host. A scenario that involves annoying cases such as when your hosting is running too slow, and you want to move to the faster and better performing one.

Whichever reason is yours, there are two ways of how you can migrate your website to another site:

Manual Migration - involves digging into the local WordPress database and using phpMyAdmin.
WordPress Migration Plugins - this way you can make the migration from local server to live, from one web to another, or from the web back to a local server at a much easier pace. All you need to do is to download a suitable plugin, activate it on your site, and follow the steps it requires in order to move your site to another location.

Migrating a site manually (with the phpMyAdmin method) can be messy and you risk making chaos. The exception is if you really know what you are doing, then you shouldn’t have any problems at all. However, this guide is more for beginners than expert developers and that's why I will save the knotty approaches and stick to the simplicity - the easier the better!

WordPress Migration Plugins

There are plenty of WordPress plugin options that make your site migration a no-brainer. The list below includes free and premium migration plugins, and are one of the top used plugins among WordPress developers as well as beginners:

Duplicator

With over 10 million downloads and a rating of 4.9 stars, Duplicator gives WordPress users the ability to migrate, copy, move, or clone a site from one location to another. This plugin performs a full WordPress migration without struggling with export/import SQL scripts.

You are available to move a live site to the localhost for development, transfer a WordPress site from one host to another and multiple other functions provided by the Duplicator plugin.

BackUpBuddy

A backup tool that lets you move a WordPress site to a new host or domain is very popular among WordPress developers who build custom sites locally and then move the entire site over to a live domain. BackupBuddy allows you to make a complete backup of your WordPress site, download a .zip file of the site and then move the WordPress site to a different host or domain using the ImportBuddy script.

BackupBuddy handles migrating the entire site, including all themes, plugins, content, styles, and widgets. The ImportBuddy tool makes the migration very easy, not quite one click, but fast and straightforward.

WP Clone by WP Academy

WP Clone allows you to move or copy your WordPress site to another domain or hosting server. Suitable for developers as you can also shift the whole site to/from a local server as well as backup your site and create site copies for testing purposes.

WP Migrate DB Pro

WP Migrate DB Pro plugin lets you copy your site database from one WordPress install to another with an easy one-click from your WordPress dashboard. This plugin is great when you are developing a running site on a local server but you need the latest data from the live database.

All-in-One WP Migration

This plugin exports all of your WordPress website attributes, including the database, media files, plugins, and themes. You can migrate your site to another domain, host, or even move to a subdirectory in an easy manner, with no technical skills required.

UpdraftPlus

Updraft Plus is a WordPress backup plugin that also offers a great migration and cloning tool - 'UpdraftPlus Migrator' - a tool that comes with a Premium version. UpdraftPlus Migrator will clone your WordPress site and move it to a new domain in a direct and simple manner.

Export/Import A Part Of Your Site

I left this topic at the very end for a good reason. As we found out, the WordPress Export/Import tool is great for a content move, where for full site migration there are numerous WordPress plugins that can handle the shifting in an easy and quick manner. However, moving a part of your site can be time-consuming. But maybe not! Let's see...

WordPress built-in Export/Import tool is great only when moving all content at once (choosing only posts or pages, images, and files won't be moved).

So the only option is to move all your site content and then delete the unnecessary data. But why would you choose such a time-consuming method when there is a much easier way to do that?

There is a way how you can export and import a part of your site, a specific content, a block of your page, or design templates of yours.

Fast Layout Migration With Visual Composer

Agencies and WordPress developers will be all excited to know the new option for faster layout migration between the development and production sites using Visual Composer WordPress Website Builder.

If until now you had to move content manually, then now with Visual Composer Website Builder everything can be moved across the different sites using a Template Export/Import Add-on.

For example, if you have created a header or a footer you’d like to use across different sites, you'd just make it in one site and using the export/import method (the same as for any other methods described above) move the templates across the other sites. It's simple and productive!

Regarding the Visual Composer plugin, if you are migrating from one site to another using a WordPress migration plugin, then be sure to restore the Visual Composer default plugin state to re-download all installed bundles and auto-configure path after migration. To do that, simply access your WordPress admin, navigate to Visual Composer Dashboard Settings, and click on Initiate Reset.

The Final Line

As you can see, moving from one WordPress site to another is easy. The important part is to understand the right method to approach and follow the instructions. I started this article by pointing at two site moving practices: content moving with WordPress default Export/Import tool and a second one - entire website migration with the help of one of the various plugins.

However, in a process, I showed you a third process of how you can move a part of your site content, using a well-known website builder.

Pick your method and move your first (or hundredth) WordPress website!

Want To Get More Articles Like This?

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

The post How To Migrate Your WordPress Site appeared first on Visual Composer Website Builder.

Visual Composer Popup Builder For WordPress

Linda R — Fri, 17 Apr 2020 09:00:11 +0000

New Visual Composer update 26.0 introduces new superpowers. Please welcome a smart and intuitive Visual Composer Popup Builder for WordPress. An add-on for creating beautifully designed popups. The ones you can easily customize so that they engage and convert your visitors into subscribers and customers.

Let's pop into it!

Visual Composer Popup Builder is built into a Premium package. It allows you to create an unlimited number of popups using all the features, elements and design options available within the Visual Composer Hub.

Bring Your Site Visitors Attention With A Popup

A website with a popup typically converts more than the same site without a popup. With the Popup Builder at your fingertips, you are able to make engaging popups that really convert.

Here are a few good reasons why you should include popups on your website:

Popups are attention-grabbing
They draw the eyes to what’s most important
Popups are versatile
They keep your website clean
Popups increase leads and conversions

The good news is that you can achieve it all with the Visual Composer built-in Popup Builder for WordPress.

Let me show its full beauty.

How Does Visual Composer Popup Maker Work?

Just like Header, Footer, Sidebar editor, you can download the Popup Builder add-on from the Visual Composer Hub (free of charge with your Premium subscription). Once done, you will see a Popup Builder menu under Visual Composer in your WordPress admin dashboard, from where you can start making your own popups.

Popup production is divided into two parts: The first one is the popup design, followed by its control settings. This will allow you to focus on each of these important things individually.

For designing your popup, you will use the Frontend editor. The same as creating a landing page, you can use rows, columns, and content elements. Then take advantage of the Visual Composer rich Design Options to complete the overall look of your popup.

To control popup appearance on your site, you will use the popup controlling panel for setting up triggers and attributes. These settings will allow you to show a popup to the right audience at the right time.

What should your popup look like? And where would it have the right place on your site? The answers will definitely come, keep learning about our Popup Builder.

Add Elements To Your Popup

Visual Composer Hub stores more than 300 ready-made elements, templates, and extensive design options. All the assets, such as Social Media Icons, Contact Forms, Countdown Timers, Gallery, Slideshows, Buttons, WooCommerce elements and many more are available for instant use in your popup.

Simply download the needed element from the cloud-based library and customize it as you like.

Once you have all the needed elements added, it's time to give your popup a unique design.

Customize Your Popup Design

You can apply Design Options to the Popup Container, and continue to polish your popup design for each element you have used in it.

Change your popup's background color, use a full-screen window or small popup window and determine its position: on top of the page, in the right corner of the page or elsewhere.

Use custom fonts, add borders, apply an overlay background, animate popup's appearance, and customize the close button.

If you want to use an image for your popup background, you can download high-quality stock images straight from the Unsplash, without leaving Visual Composer editor.

Visual Composer has compatibility with many popular plugins and services that can be useful for creating and giving functionality to your popups. You'll have a choice of many integrations: MailChimp, Gravity Forms, Contact Form 7, WPForms, Unsplash, YouTube, Facebook, Instagram, Twitter are just a few from the list.

As you can see, the possibilities are endless to make a really nice popup design. What comes next is to control your popup's appearance on your site, select trigger events, and attributes

Control Your Popup's Appearance

You can trigger a popup template appearance on your WordPress site in two different ways.

Site-Wide Appearance

This triggers popups on all pages of your website and is very useful for notifications, such as GDPR privacy notices.

Page-Specific Appearance

This triggers popups on specific pages that are determined by you. The approach is preferable as you can show the right popup offer on the right page or specific places. For instance, on the checkout page, this can be a coupon code or a free shipping notice. On the product page, this can be a banner with related products.

Note: Triggers for the page-specific appearance can be set from the Visual Composer Frontend editor. For the site-wide appearance, triggers can be set from the WordPress admin panel. For more information, check the popup setup tutorial.

Set Your Popup's Behavior

It's easy to control when your popup appears on your website. You can set the popup to show at a certain time. Or the popup can be triggered by the user’s behavior - once he scrolls down to a specific element, clicks on a particular link, or is about to leave your page.

Here are triggers that you can use:

On-Page Initial Load (GDPR)

This trigger will be a good choice to show a site-wide popup that only appears once to a particular visitor. Use it for the EU cookie notices or for the age verification popup on your winery website (or any other liquor store).

On-Page Load

Show popup in seconds or after two, three, or four minutes. The time delay depends on the goal you want to achieve. For example, if your blog reader has spent two minutes in your article, this is a good indicator to show the “Subscribe to Newsletters” invitation popup.

Exit-Intent

On average, 98% of visitors leave your website without taking action. But you can catch your potential customers by the tail before they leave your site – at the checkout or in other high-converting pages. All you have to do is implement an exit-intent popup on your page and make sure to offer some benefit (discount or free shipping).

Element ID

Sometimes you will want to show a popup next to a specific content element. For example, if you have an online fashion store and a particular clothing line is on sale, at the time when a visitor is next to that exact product line's gallery, you will want to highlight the sale with a popup (an element with a custom Unique Element ID).

On-Click

The on-click trigger connects a popup with a specific link, image, button, or anything that is hyperlinked on a specific page, your choice. This will be useful, for example, to give your users something for free in exchange for their email address.

Create Different Types Of Popups

There are many situations when you could be using a popup. All it takes is to know the specifics of your business and activities, when and how they should be noted with a beautiful popup.

For inspiration, take a look at the most popular types of website popups.

Email Popup Signup Forms

Get more email subscribers. Create your perfect mailing list or newsletter signup popup to collect email addresses in your own personal dashboard. Improve subscription rates up to several times using popups displayed at the right moment.

Sales Popup Banners

Capture more leads and sales. Offer special discount codes or promotions with a custom call to action button to redirect users to your sales page. Announce flash sales or create urgency by embedding a Countdown Timer and featured product images in your popup.

Here are some examples of things you can offer as a reward:

Specific discount with a % off coupon code
Free shipping for the first order
A free taster of your product
Free subscription to your service

Exit Popups

Reduce shopping cart abandonment. How frustrating is it when your visitor leaves the checkout? You've put a lot of work into getting your potential customer to make a purchase, but for some reason, the visitor leaves your site. What to do? Reduce cart abandonment by offering customers a discount popup when they show exit intent.

Notification Popups

Inform initial visitors. Use a notification popup to notify your page visitors of news, announcements, or changes during business hours. You can also use the notification popup to display a GDPR notice or age verification window.

There are other cases in which a popup will add value to help you, such as:

Conduct surveys or polls
Advertise new products or services
Promote or announce new events
Encourage a download or view specific content
Ask visitors a question to gather more information on their habits

Tips for Effective WordPress Popups

One small icon can increase the effectiveness of the popup, so when making it, it is important to pay attention to all the design details there. Some of them are the following:

Add Social Links: Get more followers on your social channels by adding all of your social links to popup;
Make It Visible: Fix your popup to the top or bottom of your site so your customers see the popup on every page;
Custom Triggers: Show popup with time delay, show popup on a click, at a specific element ID or show it when the user is about to exit your page;
Send Welcome Email: Send a customized welcome email that sends automatically when a user signs up through your popup;
Follow Your Brand: Popup design should go hand in hand with the essence of your brand. Choose colors, slogans, pictures and language styles that reflect your brand in the best light;
Make Popup Sequence: Sometimes a page visitor needs to be directed in the right direction. Several popups that make up the sequence can help you reach your goal faster: make the visitor subscribe, buy, and so on.

Popups Work!

Believe it or not, popups work. Properly applied popups can become your key to success in growing your subscriber list and promoting sales, for you and for your clients.

Being in business for decades, we are assured that every website needs conversion and call to action tools. That's why we made you a Popup Builder!

So you can have total freedom to control the design and set the behavior of all of your popups that will high-fly leads and conversions for your online business.

All you have to do is make a popup attractive, engaging and complement it with an appealing content. Visual Composer has everything to create popups that will not disappoint your site visitors.

Summing-Up

The Popup Builder is part of the Visual Composer powerful system that we create and continuously develop to give you a tool to create and maintain your website from one place.

It's a big step forward to replace many paid services. For you, this means fewer 3rd party plugins, lower costs, lighter website, and more effective site development.

Go and enjoy it to the fullest - tune into your marketing activities with beautiful and engaging popups!

Get Visual Composer With An In-Built Popup Builder

The post Visual Composer Popup Builder For WordPress appeared first on Visual Composer Website Builder.

Linda R, Author at Visual Composer Website Builder

How Web Creators Made 10 Websites in 3 Months Using Visual Composer

About the Challenges Before Using Visual Composer, and Why They Were So Significant for the Business

About Experimenting With Other Solutions and Why They Didn’t Work as Good

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

About Discovering Visual Composer

Web Agency Owners Favorite Visual Composer Features

How Visual Composer Meets the Needs of Web Agency Owner and His Clients

About the Biggest Benefits of Using Visual Composer and Plans for the Future

Ending Thoughts

How to Create and Install WordPress Multisite

What is a WordPress Multisite Network?

Who Needs a WordPress Multisite Network?

What You Need to Get Started with WordPress Multisite

Choose Your Domain Structure

How to install WordPress Multisite

Ending Note

How to Create a WordPress Child Theme

What Is A Child Theme

Benefits Of A Child Theme

How to Create A WordPress Child Theme

Create a Child Theme Folder

Create a stylesheet: style.css

Install + Activate The Child Theme

Style.css Values

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

Grant Burke

Alessandro Scarpellini

Jennifer Heintz

MDZ Design

Mingfei Yang

Chip Kidd

Kate Moross

Brook Perryman

Rachel Cheng

Steve Wolf Designs

Josh Miller

Mike Kus

Stacey Uy

Dominic Flask

Jamie Bartlett

Ilana Griffo

Kelly Romanaldi

Ismael Barry

Adam Sandoval

Write Case Studies