Units are the pieces you drag from the left library onto the canvas. Select a unit to edit it in the right panel. That panel uses Content, Style, and Advanced. Pro units appear in the same library when Canvasly Pro is active. Shop units appear only when WooCommerce is active.
Right-click a unit in the library to add or remove it from Favorites. Container cannot be disabled in Units Manager. Other units can be hidden there.
The Grid unit is a layout that holds other units. Its controls include columns, rows, grid template columns, grid template rows, column gap, row gap, auto flow, align, justify, minimum column and row sizes, auto columns and rows, outline, width, and dense auto-flow. The editor draws a placement grid so you can set column, row, and span. Dragging the left, right, top, or bottom edge resizes the unit, and neighboring columns share the width. A size tip shows while you drag. The Features setting “Grid container” is active by default and covers the same kind of layout on a Container.
Usage: add Grid from the layout category, then drop Heading, Image, or Button into the cells. Select a child to set where it sits.
On a unit, the menu offers Edit, Duplicate, Copy, Paste, Copy Style, Paste style, and Reset style. Tabs, Accordion, and Toggle also offer Convert to nested. Container and Grid offer Add New Container and Save as Template. Any unit can be saved as a component. Structure opens the navigator. Delete removes the unit.
On empty canvas, the menu offers Paste, Paste All Content, Add New Container, Copy All Content, Delete All Content, and Structure. Copy and paste are kept in the browser so they work across pages and tabs.
TODO: The plugin source does not name a “pink tab.” The right-hand settings use the labels Content, Style, and Advanced. The left side is the unit library. If a pink tab appears in your copy of the editor, its purpose is not described in these files.
This is the one WordPress block the plugin registers. Its name in the editor is Canvasly Lite Template, in the Canvasly category. It inserts a saved Canvasly template. It still shows in the normal WordPress editor, where the rest of Canvasly does not load.
| Setting | Default | What it does |
|---|---|---|
| Template id | 0 | Which saved template to show. 0 means none is chosen. |
The block can be wide or full width, and it supports an HTML anchor and a CSS class. Usage: in the WordPress block editor, add Canvasly Template, then pick the saved template.
The main box for sections of a page. The readme describes a semantic HTML tag, a link for the whole container, a background overlay, shape dividers, and a self-hosted background video. It cannot be turned off.
Usage: add Container, then drop other units inside it.
A nested layout unit registered with Container and Grid.
Usage: add Inner Section inside a Container when you need another grouped region.
See the Grid section above. Defaults are not a single fixed column count in the short control list; the editor’s grid helper treats three columns when a count is missing.
A title. The readme says it can be linked and can use size presets. Usage: add Heading and type the title in Content.
Body text. The readme mentions a drop cap and columns. Usage: add Text Editor and write in the text control.
A text unit that uses the WordPress visual editor. Usage: add it when you want that editor’s formatting tools.
A link styled as a button. The readme mentions sizes, icon placement, and alignment. Usage: set the label and the link.
A horizontal rule. The readme mentions patterns and optional text or an icon. Usage: drop it between sections.
Empty vertical space. Default height is 40. Usage: set Height.
A single icon from the Canvasly icon library. Usage: pick an icon and, if you want, a link.
A list of items that each have an icon. The readme mentions an inline layout and dividers. Usage: add rows in the list control.
An icon with a title and text. Controls include icon view, shape, title, text, link, layout, alignment, colors, and hover animation. Usage: choose an icon and write the title.
A labeled bar. Controls include label, value, bar style, percentage, inner text, colors, height, and radius. Usage: set the label and the value.
A number that can count up. The readme says the number, prefix, and suffix update on the canvas while you edit. Usage: set the number and optional prefix or suffix.
A notice. The readme says it can be dismissed. Usage: write the message and choose whether visitors can close it.
Stacked panels that open and close. The readme mentions multiple items, icons, and FAQ schema. Usage: add a title and content for each item. Right-click to convert to Nested Accordion.
Similar stacked panels. Usage: add items, or convert to Nested Toggle from the right-click menu.
A row or column of tabs. The readme mentions vertical layout, alignment, and styles. Usage: name each tab and its content. Right-click to convert to Nested Tabs.
Tabs whose panels can hold any unit. Shown when the Nested experiment is active, which it is by default. Usage: add a tab, then drop units into that panel.
An accordion whose panels hold any unit. Usage: add an item, then drop units inside it.
A toggle whose panels hold any unit. Usage: same as Nested Accordion.
Links to social profiles. The readme mentions brand colors, shapes, and a grid. Usage: add each network and its URL.
Stars, including half stars in the readme. Controls include scale, rating, unmarked style, title, align, size, gap, and colors. Usage: set the rating.
A quote with the person’s details. Usage: enter the quote and the name.
A pricing box. Usage: set the plan name, price, features, and button.
Text that moves along a path. Defaults are the words “Canvasly” and a speed of 20. Usage: change Text and Speed. Speed is kept at 5 or higher.
Runs a WordPress shortcode you type. Default text is empty. Usage: paste a shortcode such as [canvasly_lite_template id="42"] into the Shortcode field.
Custom HTML, edited with the code editor when that feature is active. Usage: paste the markup into the HTML field.
Shows code in a preformatted block. Defaults are empty code and language “text”. Usage: paste the code and choose a language.
The readme lists image, size, link, lightbox, caption, alt text, object fit, object position, border, radius, shadow, opacity, spacing, position, and responsive settings. Usage: choose an image from the Media Library and fill in alt text.
An image with a title and text. Controls include image, alt, title, text, link, layout, alignment, width, spacing, radius, opacity, and colors. Usage: choose the image and write the title.
Several images. The readme mentions captions and hover effects. The editor can lay them out as grid, masonry, or justified. Usage: open the gallery control and choose images.
A slideshow of images. The readme mentions slides to show, fade, autoplay, and captions. Usage: choose the images and how many show at once.
YouTube, Vimeo, Dailymotion, VideoPress, or a file you host. The readme mentions overlay, lightbox, and aspect ratio. Usage: paste the video URL.
An audio player. A hosted file or an allowed oEmbed URL can be used. Usage: set the audio URL.
A SoundCloud player. Controls include URL, visual mode, height, autoplay, buying, liking, download, artwork, sharing, comments, play count, user, and player color. Usage: paste the SoundCloud URL.
A form on the page. reCAPTCHA runs only when Form reCAPTCHA is active and both keys are saved. With Pro, submissions can be stored under Canvasly → Submissions. Usage: add fields, set the button label, and choose where the form sends its message.
A text link. Defaults are the words “Read More”, the URL “#”, and the same window. Usage: change Text, URL, and whether the link opens in the same window or a new one.
A rating made of icons. Controls include rating, max, label, icon, empty icon, color, size, and CSS class. Usage: set the score and the maximum.
A title, subtitle, avatar, and a list of links. Usage: add the profile image and one link per line or item, depending on the control.
Lists posts, custom types, or terms. The readme describes a query builder, an item layout that is either inline or a saved template, grid or list, and pagination by numbers, previous and next, or load more. Active by default under Features. Usage: choose what to query, then design one item.
Embeds an allowed URL through WordPress oEmbed, with a cache. Usage: paste a single URL the site is allowed to embed.
A map. Defaults are an empty address, zoom 14, and height 320. With an API key and the Maps feature active, it uses the Embed API. Otherwise it uses the public iframe. Usage: type an address.
Prints a registered WordPress widget area. Usage: choose the sidebar.
Prints one registered WordPress widget. Controls include widget, title, widget options, sidebar, and CSS class. Usage: choose the widget from the list.
Embeds a saved Canvasly template inside the page. Usage: pick the template. The same result is the shortcode [canvasly_lite_template id="42"] and the WordPress block.
Inserts a reusable component. Components are saved from the right-click menu and edited as their own items. Usage: insert a component you already saved.
A card with a front and a back. Usage: set the front and back content, then view the page to see the flip.
The WordPress login form. Defaults are the title “Login”, the button “Log In”, and an empty redirect. Usage: set the title, button label, and where to send the person after login.
These are in the library when Pro is running. Pro widgets use the content category unless noted. Theme units also use content. Payment Form and Payment Button use basic. Taxonomy Filter uses advanced.
A styled quotation. Usage: enter the quote.
A prompt with a button. Usage: write the message and the button link.
A headline that changes. Usage: enter the rotating phrases.
A timer toward a date. Usage: set the end date.
A slide deck. Usage: add slides and their content.
A carousel whose slides can hold other units. Usage: add a slide, then drop units into it.
A carousel of media items. Usage: choose the media.
Links to headings on the page. Usage: place it where the list should appear.
Shows how far the visitor has scrolled or progressed. Usage: place it on a long page.
An image with clickable points. Usage: set the image and add hotspots.
A list of named prices. Usage: add each item, name, and price.
A panel that sits off the page until it is opened. Usage: put the panel content inside it and set how it opens.
Buttons that stay on the screen. Usage: add each button and its link.
A search box. Usage: place it in a header or sidebar area.
An animation file. Usage: choose the Lottie file.
Several videos in one list. Usage: add each video URL.
Code with highlighting. Usage: paste the code and choose the language.
Filters a loop by category or other taxonomy. Usage: place it with a Collection Loop and choose the taxonomy.
A hosted PayPal or Stripe button. The readme says these stay hosted payment buttons. Usage: set the amount and the gateway. Site-wide tax and fees are under Canvasly → Payments.
A form that checks out through the payment settings. Turn on Sales Tax, Bank Fee, or both. Each accepts a percent that is calculated and added to the total. Leave a percent blank to use the rate from Canvasly → Payments. Shipping is a fixed amount added to the total. Gateways offered under Canvasly → Payments appear as pay buttons at the bottom of the form. Each button uses a Payment Button on the same page with this form key.
Use these inside Theme Builder templates so the text comes from the current page, post, or site.
The site logo. Usage: place it in a header template.
The WordPress site title. Usage: place it in a header.
The WordPress tagline. Usage: place it near the site title.
The title of the current page. Usage: place it at the top of a single or page template.
The title of the current post. Usage: place it in a single template.
The excerpt of the current post. Usage: place it under the title.
The body of the current post. Usage: place it where the article should appear.
Meta such as date or author, as the unit’s controls allow. Usage: place it near the title.
The post’s featured image. Usage: place it in a single or archive item.
The author’s name and details. Usage: place it after the post.
The WordPress comment area. Usage: place it under the post content.
The title of the current archive. Usage: place it at the top of an archive template.
The list of posts for the current archive. Usage: place it under the archive title.
A trail of links back to the home page. Usage: place it under the header.
The theme search form. Usage: place it in a header or 404 template.
A list of site content. Usage: place it on a sitemap page.
These load only while WooCommerce is active. Product and product-archive templates use the theme locations. Cart, checkout, and My Account render WooCommerce’s own forms.
A product list. Usage: place it on a shop layout.
Products for the current shop archive. Usage: place it in a product archive template.
The current product’s name. Usage: place it on a product template.
The current product’s image. Usage: place it beside the title.
The current product’s price. Usage: place it under the title.
The current product’s rating. Usage: place it near the price.
Whether the product is in stock. Usage: place it near the add-to-cart button.
SKU and categories from WooCommerce. Usage: place it under the product summary.
The short description. Usage: place it above the full content.
The long product description. Usage: place it in the product body.
WooCommerce’s product tabs. Usage: place them under the summary.
The add-to-cart control from WooCommerce. Usage: place it with the price.
Upsell products. Usage: place them on the product template.
WooCommerce notices such as “added to cart.” Usage: place them near the top of a shop template.
WooCommerce’s cart. Usage: place it on the cart template.
WooCommerce’s checkout. Usage: place it on the checkout template.
WooCommerce’s account area. Usage: place it on the account template.
A summary after purchase. Usage: place it on the thank-you content.