Qubely - Advanced Gutenberg Blocks

Qubely is a full-fledged Gutenberg toolkit with plenty of predefined sections and modern layout packs to create beautiful pages and posts on the Gutenberg editor. It offers a whole new experience that minimizes all limitations of the Gutenberg editor and opens unlimited possibilities to create any simple to complex content on a WordPress website. This user-friendly tool has been developed with all necessary customization features to achieve any possible layout.

Qubely core features at a glance

• Predefined sections
• Modern layout packs
• Highly customizable row columns
• Row video background & blend mode
• Drag column resizing
• Shape divider/builder
• Device specific responsive controls
• Unlimited Google web fonts & system fonts
• Classic & gradient color and background
• Built-in animation
• Box-shadow
• Font Awesome 5 Icons and line icons
• Custom CSS

Advanced Gutenberg blocks inside Qubely

• Row
• Button
• Testimonial
• Heading
• Counter
• Tabs
• Accordion/Toggle
• Advanced Text
• Video Popup
• Google Map
• Progress Bar
• Icon
• Divider
• Social Icons
• Button Group
• Info Box
• Advanced List
• Contact Form
• Icon List
• Pricing
• Block Wrapper
• Team
• Image
• Timeline
• Post Grid
• More advanced Gutenberg blocks coming

Connect

• Documentation
• Download on WordPress.org
• Join our Facebook Community

Installation

Minimum Requirements

• PHP version 5.6.0 or greater (PHP 7.1 or greater is recommended)
• MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)
• Running WordPress 5.0+ else installing the Gutenberg plugin

Automatic installation

Download Qubely from the WordPress plugin directory.

Manual installation

To install Qubely manually, you need to download the plugin and upload it to your webserver via any FTP application.

The WordPress codex contains instructions on how to do this here.

Development

• Navigate to reactjs folder cd assets/reactjs
• npm install (node version 14.15.0 required)
• npm start
• gulp watch (for CSS hotloading)

To Build

Javascript

• Navigate to reactjs folder cd assets/reactjs
• run npm run build && gulp sass

To Bundle

• Under root folder, install dependencies npm install
• run gulp, new file qubely.zip should appear

Post Grid

Showcase detailed with Qubely Gallery

Countdown

Create under construction banners, announce release and more

Media Card

Add an image or video with an offset

Pie Progress

Animated circular progress bar

Testimonial Carousel

Design and showcase customer reviews, remarks as testimonials

Image Carousel

Add an image or video with an offset

Team Carousel

Design and showcase team members

Post Carousel

Showcase blog posts in carousel

Price List

Showcase detailed Price List

Vertical Tabs

Showcase features in Beautiful pre-designed tabs