Documentation
HomeForumHelp
  • About Cwicly
  • Beginner's Guide
    • Install Cwicly
    • Getting Started
      • Overview
      • Settings
    • Edit and Manage your Site
    • The WordPress Dashboard
    • The Dashboard Menu
    • Site Editor
    • Create your Front Page
      • Front Page
      • Header
        • Header Template Part
        • Structure
      • Footer
        • Footer Template Part
        • Structure
  • ⚡Cwicly
    • Block ID
    • Breakpoints
    • Class
      • Global/Block Classes
    • Cloud Design Library
      • Create an Account
      • Overview of the Cloud Dashboard
      • Editor: Cloud Library
        • Access from the Editor
        • Add a Library
        • Switch between Libraries
        • Default Library
        • Download Library
        • Remove Library
        • Categories
          • All
          • Popular
          • Button
          • Composition
          • Decorative
          • Interactive
          • Layout
          • Media
          • Menu
          • Social
      • Design Blocks: Cloud Library
        • Search for a Design Block
        • Refresh
        • Add Design Block
        • Save Design to Library
        • Remove Design Block
      • Library Globals
        • Library: Global Styles
          • Library: Add Styles
          • Installation: Add Styles
          • Library: Style Settings
        • Library: Global Classes
          • Library: Add Classes
          • Installation: Add Classes
          • Library: Class Settings
        • Library: Global Stylesheets
          • Library: Add Stylesheet
          • Installation: Add Stylesheet
          • Library: Stylesheet Settings
        • Library: External Classes
          • Library: Add External Classes
          • Installation: Add External Classes
          • Library: External Classes Settings
      • Community Library
        • Save to Community Library
        • Download from Community Library
        • Remove from Community Library
        • Set Community as default
    • Colour Picker
      • Gradient Builder
    • Components
      • Components Library
      • Components Folders
      • Settings
      • Component Properties Modal
      • Properties (Add)
        • Text Property
        • Rich Text Property
        • List Property
        • Link Property
        • Image Property
        • Gallery Property
        • Video Property
        • Icon Property
        • Colour Property
        • Toggle Property
        • Number Property
        • Class Property
        • ID Property
        • Options Property
        • Conditions Property
        • Visibility Property
        • CSS Text Property
    • Copy/Paste
      • Block Styles
      • Classes & IDs
      • Dynamic Preview
      • Global Styles
      • Global Classes & Stylesheets
      • Blocks
    • CSS Grid
    • Dynamic Inserter
    • Font Manager
    • Navigator
    • Quick Inserter
    • Scaling
    • Smart Inserter
    • Span
    • Tag
  • ⛵Tailwind
    • Getting Started
      • About
      • Activate
      • Copy/Paste
      • Enable editing mode
      • Apply a Class
      • Pseudo state Management
      • Automatically Sync
        • Breakpoints
        • Colours
      • Shells
      • Custom Tailwind Configuration
      • Import Tailwind Plugins
  • 🖌️Themer
    • Themer
      • Templates
      • Parts
      • Fragments
    • Role Editor
      • User Role
      • Gutenberg Editor
      • Global Block Behaviour
      • Block Toolbar
      • Miscellaneous
      • Components
      • Code Block
      • Blocks
      • Post Types
      • Force iFrame
      • Client Canvas View
      • Help
      • User
  • 🌐Global Styles
    • Global Styles
      • Global Colours
        • Folders
        • Colour tab
        • Palette tab
        • Modifiers tab
          • Opacity
          • Lighten
          • Darken
          • Saturate
          • Desaturate
          • Spin
      • Dark Mode
      • Global Gradients
      • Global Typography
      • Global Block Typography
      • Theme Elements
      • Global Settings
        • Defaults
        • Backend
      • Remove Gutenberg Global Styles
    • Global Classes & Stylesheets
      • Global Classes
      • Global Stylesheets
      • External Classes
  • 🎨Design
    • Background
      • Background Colors
      • Background Source
      • Sizing & Positioning
      • Styling
    • Typography
      • Typography
      • Rem conversion
      • Global Typography
      • Text Align
      • Font Family
      • Font Size
      • Font Weight
      • Spacing
      • Line Height
      • Style
      • Decoration
      • Transform
      • White Space
      • Overflow Wrap
      • Word Break
      • Word Spacing
      • Axes
      • Text Colour
      • Link Colour
    • Fluid Values
    • Layout
      • Display
      • Visual
      • Position
    • Sizing
      • Height
      • Width
    • Margin & Padding
    • Borders
      • Border
      • Shadows
      • Outline
    • Effects
      • General
      • Transitions
      • Animations
      • Filters
      • Text Shadow
      • Tilter
      • Separators
    • Transforms
    • Pseudo Classes/Elements
    • Relative Styling
  • 🎓Advanced
    • Custom CSS
    • Quick Code
    • Scrolling
      • Animate On Scroll
      • Scroll Direction
    • Attributes
    • Tooltip
      • Source
      • Theme
        • Custom Theme
  • 👆Interactions
    • Visibility Conditions
      • Blocks
      • Themer
    • Link
      • Link Source
      • Link Action
    • Interactions
      • Trigger
      • Actions
    • Hover Animation
    • Dynamic Slider
      • Settings Tab
  • 🖥️Editor
    • Inserter Panel
    • Quick Insert
    • Block Inspector
    • Primary Tab
    • Design Tab
    • Advanced Tab
    • Responsive Selector
  • 🔧Blocks
    • Accordions
    • Accordion
      • Basics
      • Settings
      • Colours
      • Layout
      • Typography
      • Margin and Padding
    • Button
      • Add
      • Icon
    • Code
      • Enable/Disable
      • Add
      • Languages
      • Settings
    • Columns
      • Basics
      • Add
      • Settings
      • Grid Editor
        • Auto Grid
        • Auto Template
    • Column
    • Container
    • Div
    • Filter
      • Basics
      • Filter Editor
      • Create a Filter
      • Style a Filter (example)
    • Fragment
    • Gallery
      • Filter
      • Source
      • Settings
      • Text
      • Image Style
    • Heading
    • Hook
    • Icon
    • Image
      • Source
      • Size
      • Settings
      • Hover Animation
    • Input
      • Input Settings
    • List
      • List Types
      • Settings
      • Icon
    • Maps
      • Settings
      • Size
      • Style
      • Overlay Layout
      • Colours
    • Menu
      • Settings
      • Main Menu
      • Sub Menu
      • Items
    • Modal
      • Modal Style
      • Settings
      • Trigger
      • Animation
    • Nav
      • Nav Block Settings and Styles
      • Nav Items Block
      • Nav Dropdown Block
      • Nav Link
      • Custom Dropdown Block
      • Nav Menu
    • Post Content
    • Paragraph
    • Popover
    • Query
      • Query Settings
      • Query Editor
        • Posts
        • Terms
        • Users
        • Comments
    • Query Template
      • Layout
      • Grid editor
    • Repeater
      • Nested Repeater
    • Section
    • Slider
      • Settings
      • Navigation
      • Dots
    • Slide
    • Styler
    • SVG Block
    • Tab List
      • Tab
    • Tab Contents
      • Tab Content
    • Taxonomy Terms
    • Video
      • Source
      • Settings
      • Div Overlay
  • ⚙️Settings
    • Settings
    • License
    • Icon Collections
    • Font Sets
    • Google Maps API
    • Advanced Settings
    • Regeneration
    • WooCommerce
  • 🛒WooCommerce
    • Archive Page
    • Attributes
      • Colour Type
      • Image Type
    • Cart
    • Product Variations
    • Create a Product Type
      • Simple
      • Variable
        • Create Attributes
      • Grouped
      • External
    • Build a Single Product Page
    • Dynamic Content
    • Link
  • 🗃️Miscellaneous
    • Blocks Specifics
    • Icon Selector
    • Trailing Slash
    • Units
      • Default Units
    • Code Snippets
    • Shortcuts
    • Actions
    • Filters
    • Browser Console
  • 🔗Resources
    • Changelog
    • Roadmap
    • Forum
Powered by GitBook
On this page
  • Site Editor Navigation
  • Quick Inserter
  • Cwicly Cloud Design Library
  • Components
  • Navigator
  • Cwicly Blocks
  • Top Bar
  • Block inserter
  • Tools
  • Undo
  • Redo
  • Document Overview
  • Name Field (Post or Page)
  • Editor template Field (Template)
  • Responsive Selector
  • Pseudo classes and elements (hover)
  • Canvas Scaling
  • Dynamic Preview
  • Switch to Dark Mode
  • Gutenberg Preview
  • View Post/Page
  • Update
  • Settings
  • Cwicly Global Styles
  • Gutenberg Global Styles
  • Options

Was this helpful?

  1. Beginner's Guide

Site Editor

Last updated 1 year ago

Was this helpful?

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.

Components

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

Navigator

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.

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.

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.

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.

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.

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.

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.

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.

Cloud Design Library
Components
Navigator
Quick Inserter
Responsive Selector
Pseudo Classes/Elements
Scaling
Dynamic Preview
Dark Mode