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
Tuesday, August 13, 2019
Monday, August 12, 2019
Sunday, August 11, 2019
Saturday, August 10, 2019
Friday, August 9, 2019
Thursday, August 8, 2019
Wednesday, August 7, 2019
Tuesday, August 6, 2019
Monday, August 5, 2019
Sunday, August 4, 2019
Saturday, August 3, 2019
Friday, August 2, 2019
Thursday, August 1, 2019
Wednesday, July 31, 2019
Tuesday, July 30, 2019
Monday, July 29, 2019
Sunday, July 28, 2019
Saturday, July 27, 2019
Friday, July 26, 2019
Thursday, July 25, 2019
Wednesday, July 24, 2019
Tuesday, July 23, 2019
Monday, July 22, 2019
Sunday, July 21, 2019
Saturday, July 20, 2019
Friday, July 19, 2019
Thursday, July 18, 2019
Wednesday, July 17, 2019
Tuesday, July 16, 2019
Monday, July 15, 2019
Sunday, July 14, 2019
Saturday, July 13, 2019
Friday, July 12, 2019
Thursday, July 11, 2019
Wednesday, July 10, 2019
Tuesday, July 9, 2019
Monday, July 8, 2019
Sunday, July 7, 2019
Saturday, July 6, 2019
Friday, July 5, 2019
Thursday, July 4, 2019
Wednesday, July 3, 2019
Tuesday, July 2, 2019
Monday, July 1, 2019
How to Build a JavaScript Popup Modal From Scratch
In this tutorial we’ll learn how to build JavaScript popup modals (popup windows) without using a framework like Bootstrap, or a third party library. We’ll build the whole thing from scratch, giving us complete control over how it works and looks.
Here’s the demo we’ll be creating:
1. Begin With the Page Markup
First we’ll create a modal. To do this, we’ll add the .modal class and a unique ID to a container. Next we’ll specify the dialog by setting a .modal-dialog element as the direct child of the .modal. The dialog will hold the modal content. This can be any kind of content like text, images, lightboxes, user notifications/alerts, etc.
“A pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something” – Adi Purdila
To open a modal, we’ll need any element with the data-open attribute (normally a button). The value of this attribute should be the ID of the desired modal.
By default, a modal will close if we click outside its boundaries or when the Esc key is pressed. But we can also close it if we click on any element with the data-close attribute (normally a button).
Initially the modal will appear/disappear with a fade effect. But we have the ability to adjust the animation effect of the dialog via the data-animation attribute. The value of this attribute which has to be added to the .modal can be any of the following values:
slideInOutDownslideInOutTopslideInOutLeftslideInOutRightzoomInOutrotateInOutDownmixInAnimations
We’ll have a closer look at these values in an upcoming section.
For now, let’s get familiar with the markup needed for representing a single modal:
<button type="button" class="open-modal" data-open="modal1">...</button>
<div class="modal" id="modal1">
<div class="modal-dialog">
<header class="modal-header">
...
<button class="close-modal" aria-label="close modal" data-close>✕</button>
</header>
<section class="modal-content">...</section>
<footer class="modal-footer">...</footer>
</div>
</div>
2. Define Some Basic Styles
With the markup ready, we’ll set up a few CSS variables and reset styles:
:root {
--lightgray: #efefef;
--blue: steelblue;
--white: #fff;
--black: rgba(0, 0, 0, 0.8);
--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
* {
padding: 0;
margin: 0;
}
button {
cursor: pointer;
background: transparent;
border: none;
outline: none;
font-size: inherit;
}
Next, we’ll horizontally and vertically center the page contents. Plus, we’ll give some styles to the button responsible for opening the modal:
/*CUSTOM VARIABLES HERE*/
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font: 16px/1.5 sans-serif;
}
.btn-group {
text-align: center;
}
.open-modal {
font-weight: bold;
background: var(--blue);
color: var(--white);
padding: .75rem 1.75rem;
margin-bottom: 1rem;
border-radius: 5px;
}
At this point we’ll focus our attention on the modal styles.
Each modal will have the following characteristics:
- It’ll be full-screen with a fixed position. That said, it will look like an overlay that covers the entire window’s width and height.
- It’ll have a dark background color.
- It’ll be hidden by default.
- The dialog will be horizontally and vertically centered.
/*CUSTOM VARIABLES HERE*/
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: var(--black);
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
}
The dialog will have a maximum width and a maximum height. Its height will be 80% of the window height. In cases where its height exceeds that value, a vertical scrollbar will appear:
.modal-dialog {
position: relative;
max-width: 800px;
max-height: 80vh;
border-radius: 5px;
background: var(--white);
overflow: auto;
cursor: default;
}
As a last thing, we’ll define a few straightforward styles for the individual content sections:
/*CUSTOM VARIABLES HERE*/
.modal-dialog > * {
padding: 1rem;
}
.modal-header,
.modal-footer {
background: var(--lightgray);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header .modal-close {
font-size: 1.5rem;
}
.modal p + p {
margin-top: 1rem;
}
3. Toggle Modal
A page can have more than one modal. But as already discussed earlier, all modals will initially be hidden.
Open Modal
Similarly, a page can have more than one open triggers (elements with the data-open attribute). Each time a trigger is clicked, the associated modal should become visible with a fade-in animation. Remember the data-open attribute value has to match the ID of a modal.
Here’s the script which reveals a modal:
const openEls = document.querySelectorAll("[data-open]");
const isVisible = "is-visible";
for(const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
And the relevant CSS classes:
.modal {
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
}
.modal.is-visible {
visibility: visible;
opacity: 1;
}
Close Modal
With our implementation only a single modal can appear at a time (this code doesn’t support nested modals). As mentioned in the markup section above, there are three methods available for hiding it with a fade-out effect.
Let’s recap.
Firstly by clicking on the custom [data-close] element which is located inside the modal:
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
Secondly by clicking on everything outside of the modal:
const isVisible = "is-visible";
document.addEventListener("click", e => {
if (e.target == document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
In this case the modal (overlay) behaves as a giant close button. For this reason we gave it cursor: pointer.
Lastly by pressing the Esc key:
const isVisible = "is-visible";
document.addEventListener("keyup", e => {
if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
Now is a good time to look at what we’ve created so far:
The modal looks pretty good! Notice that each time we click on an open trigger, only the corresponding modal loads.
Let’s take it one step further and examine some ideas for animating its dialog.
4. Add Dialog Animations
Like we said earlier, the default behavior of the modal is to fade-in and fade-out. But there’s the option to adjust the animation effect of the popup.
I’ve already created a bunch of animation effects which you can use as an alternative to the fade effect. To do this, just pass the data-animation="yourDesiredAnimation" attribute to the .modal.
For example, if you want the dialog to appear with a slide animation from left to right, you’ll need the slideInOutLeft effect.
Behind the scenes, there are two rules which accomplish this desired animation:
/*CUSTOM VARIABLES HERE*/
[data-animation="slideInOutLeft"] .modal-dialog {
opacity: 0;
transform: translateX(-100%);
transition: all 0.5s var(--bounceEasing);
}
[data-animation="slideInOutLeft"].is-visible .modal-dialog {
opacity: 1;
transform: none;
transition-delay: 0.2s;
}
Check the modal with this type of animation here:
You can check the rest of the animations by looking at the CSS tab of the final demo project. Depending on the complexity of the animations, I’ve used either CSS transitions or animations to build them.
I’ve also made use of the cubic-bezier() function for setting the timing function for all transitions. If you don’t like the bounce effect that produces, feel free to change it to something smoother via the --bounceEasing CSS variable.
Have a look at the final demo with all the animation effects here:
Conclusion
That’s it, folks! During this tutorial we learned how to build custom animated modal dialogs without relying on any front-end framework.
I hope you enjoyed the final result and building it helped refresh your front-end skills.
Bear in mind that we haven’t considered accessibility, so if you want to enhance this demo that certainly could be the next step.
As always, thanks for reading!
More Popup Reading
WordPress Plugins20+ Best Popup & Opt-In WordPress Plugins
UI DesignThe Best Way to Use Pop-Ups (Modals) in Your Web Design-
WordPressHow to Create Awesome Popups in WordPress with Elementor Pro
