New product! Canvas: All-in-One Layout Kit for Divi

Canvas, our first Layout Kit for Divi, is dedicated to all Divi users who love the ease of working with Divi child themes but want more freedom to use the pre-styled elements across various projects. The first product in our new line of All-in-One Layout Kits, Canvas has it all: beautiful design, a variety of Divi sections, and flexibility to be used just the way you want.

What is Canvas: All-in-One Layout Kit for Divi?

It’s a hand-picked set of pre-styled Divi sections from 12 categories. The kit is versatile and includes headers, footers, blog and gallery sections, CTAs, testimonials, and more. All sections are in one, coherent style, all are 100% responsive, and despite being styled using custom code, they can be stored in your Divi Cloud and used in as many projects as you wish.

Basically, Canvas is a fast, easy way to add a ready-made section to a website. There are three ways of working with Canvas depending on what you prefer.

To see what sections are available, head to the demo page. For now, I would like to draw your attention to one very special section, which is the mobile menu. All header sections are equipped with the mobile menu overlay which can be easily customized inside your Divi Builder, so you can add anything you want to your mobile menu.

How to work with Canvas?

There are three modes of working with Canvas, described in detail in the Canvas documentation. For a brief characteristic, keep reading here.

Child theme

The first, easiest way is to install Canvas as a child theme. This way, all of the custom code will be automatically included in the child theme files. The obvious disadvantage is that you will only be able to use it in one project and can’t have another child theme simultaneously. Still, if you want to build a website using Divi and Canvas, it is perfectly doable, and this option will be the most suitable.

Plugin

You can import all Canvas sections to a website’s Divi library using a plugin (included with Canvas files). This way, you can use another child theme or no child theme at all. You will need to copy Canvas custom code to your Divi Theme Options or child theme files. Best option for using Canvas in one project.

Flexible

You can also use Canvas sections across many projects and store them in your Divi Cloud. First, you need to import the JSON files straight into your Divi Builder. Each section comes with a Code module where all the custom code is included, so there is no need to copy and paste it anywhere, though you can if, for example, a few sections use the same custom code and you want to avoid having multiple Code modules with the same content.

More sections with every update

Canvas already has over 150 premium sections, each available in a light or dark version, each 100% pixel-perfect. With time, we will add more sections to really ramp up the variety and make it even easier to pick the perfect section for any website. Updates will be free to Canvas owners, and it’s very likely that the purchase price will increase as the library grows bigger, so we definitely recommend getting Canvas earlier rather than later. You can purchase Canvas here.

Will there be more Layout Kits for Divi?

For now, it is very likely more kits will be added in the future. They will differ in style to provide you with an even bigger variety of options, but like Canvas, these future kits will only contain hand-picked premium sections to create a smooth, coherent style. 

What do you think about Canvas? Do you believe it’s likely to speed up your workflow while retaining the high quality of your designs? Tell us your thoughts in the comments!

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

3 Comments

  1. René

    Hello, first of all thank you for this new cool tool! I was missing something like this to organize my workflow even better.

    But I have a problem with the fullscreen menu. Everything correctly integrated it works great. On the page I’m building right now I’m using anchors. As soon as I click on the link, whether mobile or desktop view, the menu overlays the page. I have to press the cross in the upper right corner to close the menu. Is there a line of code that closes the menu automatically even after clicking on the anchor link?

    Maybe someone of you has the same problem and already solved it? Thanks and best regards

    René

    Reply
    • Ania Romańska

      Hi René,

      Please try adding this bit of JS to fix this:

      <script>
      jQuery(document).ready(function ($) {
      	$('.canvas-fullscreen-menu a[href*="#"]:not([href$="#"]').click(function(){
              $('.dl-hamburger, .canvas-fullscreen-menu').toggleClass('is-opened');
          });
      }); </script>

      It can be added inside the Integration tab in Divi Theme Options, or inside the Code module (in the overlay section, for example).

      Hopefully, this helps!

      Reply
      • René Krings

        Hello Ania, thank you very much for your answer. That solves my problems. Now it works as it should 🙂

        Thanks again and keep up the good work! Have a nice Christmas holidays.

        best regards

        René

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.