Saturday, August 31, 2019
Friday, August 30, 2019
Thursday, August 29, 2019
Wednesday, August 28, 2019
Tuesday, August 27, 2019
Monday, August 26, 2019
Sunday, August 25, 2019
Saturday, August 24, 2019
Friday, August 23, 2019
Thursday, August 22, 2019
Wednesday, August 21, 2019
Tuesday, August 20, 2019
Monday, August 19, 2019
How Page Builder Plugins Make it Easy to Create a WordPress Website
Page builder plugins make it easier for both novices and experienced developers to build websites faster. With a page builder, you don't need to know how to code—you can build your site with drag and drop.
There are many free and premium WordPress page builders in the market. In this post, I’ll show you the page builders available on CodeCanyon and some of the best add-ons to page builders.
WordPress PluginsThe Ultimate WordPress Page Builder: WPBakery
WordPressWhat Makes WPBakery (Visual Composer) the Best WordPress Page Builder Today?
WordPressGet Started With WPBakery (Formerly Visual Composer)
Introduction
A website has many moving parts like menus, headers and footers, gallery, contact forms, shopping carts, reviews, and testimonials. To build a site from scratch means you have to code and configure each of these parts. And if for some reason you need to make some changes you'll have to go through the process of coding again. It’s time consuming and very expensive.
That's why WordPress has always been the perfect solution to get one started with creating web pages. It has out-of-the-box features that let you build a basic website easily. To make your site robust, stylish, and professional, however, you will need to customize it.
In terms of design and functionality, the core features you get when you download WordPress only take you so far. WordPress’s own page builder—Gutenberg—is very basic. And with limited customization options, you’re restricted in what you can create. Here is where a WordPress page builder plugins comes in. Page builders put the whole process of building and customizing your WordPress website in your hands.
What is a WordPress Page Builder?
A WordPress page builder is simply a drag-and-drop design and development toolbox that allows users to build stylish and professional websites quickly and affordably without any coding knowledge.
Using drag-and-drop widgets, you can pick and arrange elements on your website exactly the way you want them to look. You can resize, reposition, and change colors—in short customize it to reflect your style. And you don’t need to write any custom CSS.
It is perfect for the individual website owner who prefers the affordable DIY (do it yourself) route. And for developers, a page builder significantly cuts down on development and production time.
What's more, some page builders have their own ecosystem of supporting plugins. You can extend their capabilities by downloading and installing add-ons built especially for them.
Why Use a WordPress Page Builder?
- You don’t need coding knowledge. You can drag-and-drop elements and rearrange them. You can type directly into them.
- You save a lot of time and money.
- You have tons of flexibility when it comes to styling elements on your website.
- What you are building on the screen looks exactly how visitors view it (what you see is what you get).
- You can make design changes to a site that has already launched without taking it down.
Turnkey Solutions
For a developer, cutting down on developing and production time is important. Page builders allow developers to save their own designs as templates to reuse later for different clients. This however depends on whether you get a free or pro version. For many page builders you can only save your templates when you buy a pro version.
WordPress Page Builders Contain the Following
The interface: The type of interface and it’s different features depends on the page builder. Some have both visual front-end and back-end editors. For some you add pages using blocks.
Styling options: What you get in terms of styling options all depends on the page builder you buy. Some you insert and style new elements via popups. Others have inline editing while others don’t. Others have a sidebar area. Others have tabs with different styling choices. Some even allow you to use the WordPress editor. Others have previews too.
Widgets and templates: This again depends on the page builder but many come with a wealth of widgets and templates with a variety of layout options.
Things to Consider When Choosing a WordPress Page Builder
Budget: Think about what you can afford. Do you have to pay a one time payment or monthly charge? Do you have to pay for extended license? Are there features you can only get by paying extra?
Responsive and mobile-friendly: This is a no-brainer because over 70% of online transactions happen via mobile devices.
Updates and maintenance: Regular updates are important to patch up vulnerabilities and to keep up with changes that WordPress implements.
Integration with other platforms: Your life will be a lot easier if your website integrates smoothly with platforms like WooCommerce, Yoast SEO, MailChimp. and others.
Lock-in: What happens if you ever deactivate the page builder plugin or if its developer quits supporting it? How will it affect your website? Avoid lock-in by choosing a page builder that leaves your content with clean HTML.
Loading speed: You want your website to load quickly for users, otherwise they might not stay to view your content. Make sure the page builder you choose creates pages that load quickly. Again, choose a page builder that leaves your content with clean HTML.
WordPress Page Builders on Code Canyon
The following are premium page builder plugins you will find on CodeCanyon. Of these, WPBakery (formerly known as Visual Composer) is by far the most popular and comprehensive. We'll talk about WPBakery in more depth below.
You will also find add-ons for WPBakery page builder and for Elementor. Elementor is a free page builder.
- WPBakery Page Builder for WordPress
- Intense Site Builder
- Cornerstone
- Essential Addons for Cornerstone & Pro
-
WordPressWhat Makes WPBakery (Visual Composer) the Best WordPress Page Builder Today?
-
WordPress PluginsThe Ultimate WordPress Page Builder: WPBakery
WPBakery Page Builder for WordPress
WPBakery Page Builder (formerly known as Visual Composer) is the most popular premium drag-and-drop page builder plugin on CodeCanyon. With over 380,000 copies sold, it has been used to build over 2 million websites.
WPBakery page builder comes with excellent core features, modules, templates and layout styles.
It can integrate with many platforms including Yoast SEO, WooCommerce, WordPress multisite, translators, and more. It is also compatible with thousands of plugins.
Finally you can extend the functionality of WPBakery page builder even further using third party add-ons. On CodeCanyon you will find hundreds of third party add-ons for WPBakery. The possibilities are limitless!
Add-ons for the WPBakery Page Builder
All-in-One or Multipurpose Add-ons
These add-ons are packs of templates, widgets, and components that could be useful for any website. Pick one with the features and style that you like, and you'll find it useful over and over.
- Ultimate Add-ons for WP Bakery Page Builder
- Massive Add-ons for WP Page Builder
- Super Bundle
- All-in-One Add-ons for WP Bakery Page Builder
- Unlimited Add-ons for WP Bakery Page Builder
- Composium
- Templatera
- Major Expand
- Modern Addons
Gallery, Slider, and Video Add-ons
These add-ons contain widgets and components specifically useful for creating galleries, video players, sliders, and slideshows.
- Carousel Anything
- Video & Parallax Backgrounds
- Background Sliders
- Image Overlay and Flipbox
- Ultimate Layout—Responsive Grid and Video
Form Add-ons for Visual Composer
These add-ons help you build attractive and powerful forms.
Other Add-ons
There not easy to classify, but each of these add-ons has something unique to offer to your site.
- FullPage
- One Page Navigator
- Easy Tables
- Smart Section—Theme Builder
- Elegant Tabs
- Clipboard
- Magazinify
- Epic News Elements
- Icon Box
WordPress20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019
Add-ons for Elementor Page Builder
Elementor is another leading page builder for WordPress. It's one of the most popular WordPress page builder plugins on the market, with over 2 million active installs. Even better, it's completely free and open source, making it easy for developers to extend the functionality and capabilities of Elementor.
Here are some of the bestselling Elementor add-ons on CodeCanyon.
All-in-one Add-ons
These all-in-one development add-ons come with widgets, templates, and much more.
WooCommerce Integration Add-ons
WooCommerce integration is a killer feature for a theme or plugin, and these add-ons make it a snap.
Slider, Gallery, and Media Add-ons
The right media or gallery plugin can really bring your images and your website to life. Check out these gallery, slider and media plugins to see what could be added to your own site.
- Real3D Flipbook Elementor Addon
- Photomentor
- Post Grid Builder
- Projectify
- Epic News Elements
- Emage—Image Hover Effect
- Boosted Elements
- Social Stream Grid with Carousel
Conclusion
This article is an overview of WordPress page builder plugins and add-ons available on CodeCanyon.
The following articles and tutorials should help in your quest to find the most suitable plugins and add-ons for your needs.
WordPressCreate a Responsive Landing Page With WPBakery (Visual Composer)-
WordPressGet Started With WPBakery (Formerly Visual Composer)
WordPressNew WPBakery Course for WordPress Theme Developers!-
WordPress20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019
-
WordPressWhat Makes WPBakery (Visual Composer) the Best WordPress Page Builder Today?
-
WordPress PluginsThe Ultimate WordPress Page Builder: WPBakery
WordPressVisual Composer Website Builder vs. Elementor; From a Developer’s Perspective
WordPressHow to Create Awesome Popups in WordPress with Elementor Pro
Sunday, August 18, 2019
Saturday, August 17, 2019
Friday, August 16, 2019
Thursday, August 15, 2019
Wednesday, August 14, 2019
How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)
Have you ever seen one of those fixed (or “sticky’) header bars which disappear when you begin scrolling down the page, then reappear whenever you start to scroll back up? In this exercise we’ll learn how to build our own using a bit of JavaScript.
Why?
Sticky components (such as headers) are extremely popular in the world of web design; they keep certain essential UI elements permanently in view, and easily accessible should users need them. However, under certain circumstances (if the headers hold lots of content, or the viewport size and orientation limit the amount of available screen space) sticky headers can be obtrusive.
“When implemented wrong, sticky navigation elements can serve as a distraction from the actual content.” – Aaron Andre Chichioco
A sticky header which disappears from view when not needed (ie: when the user is scrolling to see more content) is an excellent compromise.
We can achieve this kind of effect by using an external library like Headroom.js, but we’re going to learn the mechanics of what’s underneath by building something ourselves. As a bonus, we’ll also make the header menu fully functional, ready for you to add your own customization.
What We’re Building
Here’s what we're going to create (scroll to test the behavior):
Let’s get started!
1. Begin With the Page Markup
To start off our sticky header we’ll open the markup with a header which contains a nav. Within it, we’ll put the menu toggle button and the menu itself. Just for enriching the page with some dummy content, we’ll also define three full-screen sections. We’ll add a few background images to them taken from a previous tutorial.
Here’s the page markup:
<header class="page-header">
<nav>
<div class="trigger-menu-wrapper">
<button class="trigger-menu">
<svg width="20" height="20" viewBox="0 0 24 24">
<path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
</svg>
<span>MENU</span>
</button>
</div>
<ul class="menu">...</ul>
</nav>
</header>
<main class="page-main">
<section>...</section>
<section>...</section>
<section>...</section>
</main>
2. Add the Sticky Header CSS
Let’s add some CSS rules to improve the way our header looks and (to a degree) behaves.
For the sake of simplicity, I won’t walk through the initial reset styles, but feel free to look at them by clicking at the CSS tab of the demo project.
The header styles are pretty straightforward, but two things are important:
- Firstly, both the toggle menu wrapper and the menu will be fixed positioned elements.
- Secondly, the menu will initially be hidden.
The styles related to the header are as follows:
/*CUSTOM VARIABLES HERE*/
.trigger-menu-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
padding: 10px;
z-index: 2;
background: var(--lightpurple);
transition: transform 0.4s;
}
.page-header .trigger-menu {
display: flex;
align-items: center;
font-size: 1.5rem;
color: var(--white);
}
.page-header .trigger-menu svg {
fill: var(--white);
margin-right: 5px;
transition: transform 0.3s;
}
.page-header .menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
text-align: center;
padding: 15vh 0 5vh;
overflow: auto;
z-index: 1;
}
.page-header .menu a {
font-size: 3rem;
}
.page-header .sub-menu a {
font-size: 1.5rem;
}
The sections will behave as full-screen elements with a background image and a dark overlay on top of it. These will give us something to scroll past so we can see the hide/reveal behavior of our header:
.page-main section {
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.page-main section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
}
3. Add the JavaScript
As a next step, let’s add some behavior to the menu.
Toggle Menu
Each time we click on the toggle button, the menu’s visibility will change. If it’s hidden, it’ll appear. But if it’s visible, it’ll disappear.
We’re handling this in quite a rudimentary way, but it gives you the potential to tailor things to your liking. Here’s the required JavaScript code:
const body = document.body;
const triggerMenu = document.querySelector(".page-header .trigger-menu");
triggerMenu.addEventListener("click", () => {
body.classList.toggle("menu-open");
});
And the related styles:
.page-header .trigger-menu svg {
transition: transform 0.3s;
}
.menu-open {
overflow: hidden;
}
.menu-open .page-header .menu {
display: block;
}
.menu-open .page-header svg {
transform: rotate(45deg);
}
As you may have noticed, there isn’t any animation during the changes of the menu’s state. That happens because I used the non-animatable display property. If you want to add some kind of animation, replace this property with something animatable like opacity or visibility.
Toggle Header
Let’s now turn our attention to something more interesting.
Each time we scroll down, the toggle button (and the header in general) should disappear with a slide-out animation. If we then scroll up, it should appear with a slide-in animation.
To implement this functionality, we’ll use two helper classes: scroll-up and the scroll-down. More specifically:
- As we scroll down, the
bodywill be given thescroll-downclass. - As we scroll up, it’ll be given the
scroll-upclass. - If we scroll to the top of the page, it will lose its
scroll-upclass.
To detect the scrolling direction, we’ll store the last scroll position in a variable (lastScroll). Initially the value of this variable will be 0. Then as we scroll, we’ll check if the new position is greater than or less than the old one. Based on the result of that condition, we’ll apply the corresponding class to the body.
Here’s the JavaScript code to handle that:
const body = document.body;
const nav = document.querySelector(".page-header nav");
const menu = document.querySelector(".page-header .menu");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll == 0) {
body.classList.remove(scrollUp);
return;
}
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
// down
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
// up
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
And the associated styles:
/*CUSTOM VARIABLES HERE*/
.trigger-menu-wrapper {
transition: transform 0.4s;
}
.scroll-down .trigger-menu-wrapper {
transform: translate3d(0, -100%, 0);
}
.scroll-up .trigger-menu-wrapper {
transform: none;
}
.scroll-up:not(.menu-open) .trigger-menu-wrapper {
background: var(--lightpurple);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
Conclusion
That’s it, folks! During this exercise we learned how to toggle a sticky header’s visibility depending on the scrolling direction.
I hope you found this tutorial useful and that you’ll take advantage of it in your upcoming projects. As always, thanks a lot for reading!
More Sticky Tutorials
Stick around! There’s plenty more to learn about sticky behavior in web design:
PatternsHow to Create a Fixed Header Which Animates on Page Scroll
WordPressHow to Make a Sticky Menu in WordPress
CSSSticky Positioning with Nothing but CSS
UI DesignHow to Create a “Sticky” Floating Video on Page Scroll
