Site Editor

This is where all the controls for building your website can be found, including WordPress Navigation, Cwicly Cloud Design, Library, Block Inserter, Tools, Scaling, Dynamic preview, Cwicly Global Styles, Settings, Options, Cwicly Navigator, Cwicly Quick Inserter.

They are regrouped into a WordPress Navigation icon, a Top Bar and a Quick Inserter.

Site Editor Navigation

You can find the Site EditorNavigation icon at the top left corner of the editor.

The Site Editor Navigation allows you to toggle between:

  • The Dashboard

  • Your Site

  • Templates

  • Template Parts

Quick Inserter

The Cwicly Quick Inserter allows you to swiftly add blocks to your page without having to delve into the Block Inserter.

The Cwicly Quick Inserter needs to be activated to be visible in the editor.

  • To do this, open the Cwicly Role Editor tab in the Dashboard.

  • Find Cwicly Quick Inserter.

  • Toggle the Quick Inserter on to add it to the editor.

The Quick Inserter should now be visible as a Left Sidebar.

Cwicly Cloud Design Library

The Design Library is a cloud based resource with infinite possibilities where you can design, share and exchange your creations.

  • Navigate to the Sidebar.

  • Click Design LIbrary icon to open.

pageCloud Design Library

Components

The Components feature allows you to create independent, reusable pieces from a single place, while allowing you to consider each piece in isolation.

pageComponents

The Navigator Cwicly makes it a pleasure to navigate through even the most complex structures.

Unlock the navigator for greater flexibility.

Show/hide elements for design purposes (eye icon).

  • In the Quick Inserter find the Navigator icon.

  • Click to open.

This is the navigator we strongly recommend when using Cwicly.

pageNavigator

Cwicly Blocks

The Block Inserter groups commonly used blocks.

By default, these are: section, div, columns, heading, paragraph, button, image, icon.

You can personalise the Quick Inserter by adding other blocks you use often by clicking the ‘+’ icon at the bottom of the page.

  • Click the block you require in the Block Inserter to add it to your page.

  • To add new blocks to the Block Inserter, click the "+" icon at the bottom of the page.

  • Input the block name and click to add.

pageQuick Inserter

Top Bar

The Top Bar regroups the Block Inserter toggle,

Block inserter

The Block Inserter allows you to add new blocks to your page.

Exclusive Cwicly blocks are listed first as Cwicly Blocks and show the Cwicly logo.

The usual Gutenberg blocks are available under Text, Media, Design, Widgets, Theme Embeds.

  • In the Top Bar, find the Block Inserter Toggle.

  • Toggle to open the blocks modal.

  • Search for and select the required block.

Tools

Tools is a Gutenberg feature for selecting, navigating and editing blocks.

Undo

Undo is a useful property that allows you to undo the previous action in a single click.

  • In the Tool Bar, click the Undo arrow to undo the previous action.

Redo

Allows you to redo the last action you undid.

  • In the Tool Bar, click the Redo arrow to redo your last action.

Document Overview

This is a Gutenberg List view that allows you navigate through the different blocks on your page.

The Cwicly navigator is more complete and allows greater flexibility and control.

Name Field (Post or Page)

If you are in the Page or Post Editor, the Name Field shows the name of your Page or Post and allows you to input or modify a name.

  • From the Page or Post Editor, locate the Name Field in the Top Bar.

  • Input or modify name as required.

Editor template Field (Template)

If you are in the Template Editor, the Editor Template Field displays your current Template such as Index, Front Page, Cart etc.

  • From the Template Editor, locate the Editor Template Field.

  • The Field displays the current Template.

  • To navigate between templates, select the desired template in the list.

Responsive Selector

The Responsive Selector allows you to select the screen size you want to work with when editing your designs in the Editor.

3 screen sizes are available: Desktop, Tablet & Mobile.

When a specific screen size is selected, all modifications made to responsive properties will affect the selected screen size.

pageResponsive Selector

Pseudo classes and elements (hover)

This allows you to navigate easily between different states of the selected element such as: Hover, Focus, Active, Before, After.

pagePseudo Classes/Elements

Canvas Scaling

The scaling property can be used to change the scale of the editor preview to accommodate more or less screen space.

Exclusively available for desktop view.

  • Find the Canvas Scaling icon in the Top Bar.

  • Set Width and Scale as required. These can be linked or unlinked.

pageScaling

Dynamic Preview

Allows you to display content from a dynamic source and not use the current source currently provided by WordPress.

Useful in cases like editing Templates and Template Parts, that don't provide any context.

pageDynamic Preview

Switch to Dark Mode

A toggle is provided so that you can easily switch between light and dark modes.

  • In the Editor, navigate to the Tool Bar.

  • Click the Light/Dark Mode toggle to switch between Light and Dark modes.

pageDark Mode

Gutenberg Preview

  • A Wordpress functionality that allows you to choose between desktop, tablet and mobile view.

Cwicly Responsive Settings are generally more useful for improved workflow.

View Post/Page

View PostPage/ allows you to view your Post or Page on the Front End.

  • In the Top Bar, click the View Post/Page icon to view your Post or Page on the Front End.

Update

Allows you to save your changes.

  • In the Top Bar, click the Update button to update your page and save your changes.

Settings

Settings allows you to display/hide the Block Inspector right sidebar where you can customise and edit your template and block settings.

  • In the Top Bar, toggle Settings to display/hide the Block Inspector.

Cwicly Global Styles

Cwicly Global Styles displays/hides a right sidebar where you can customise your global styles, global classes and stylesheets

This gives you quick access to global styles.

  • In the Top Bar, toggle the Cwicly Global Styles toggle to display/hide the Cwicly Global Styles panel.

Gutenberg Global Styles

Gutenberg Styles allows a limited global customisation of blocks.

Cwicly Global Styles provides you with a better user experience.

  • Navigate to the Site Editor.

  • Click the Gutenberg Global Styles icon to open the Gutenberg Styles panel.

Options

Options opens a selection of additional tools and settings including Cwicly Global Settings and Show/Hide Cwicly Modal.

  • Click the Options icon in the Top Bar to open the Options side bar.

Last updated