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
  • Translate
  • Skew
  • Rotate
  • Perspective
  • Rotate 3D
  • Scale
  • Origin
  • Block Visibility

Was this helpful?

  1. Design

Transforms

Translate

The Translate property allows you to horizontally and vertically move a block relative to its original position.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Translate property

  6. Find option you want to modify (X, Y, Z)

  7. Enter desired value(s)

  8. Click dot(s) to reset

Translate X Lets you move a block horizontally from its original position.

Translate Y Lets you move a block vertically from its original position.

Translate Z Lets you to move on the Z axis of a block relative to its original position within a 3D context.

Skew

The Skew property allows you to horizontally and vertically skew a block.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Skew property

  6. Find option you want to modify (X, Y, )

  7. Enter desired value(s)

  8. Click dot(s) to reset

Skew X Lets you skew a block horizontally.

Skew Y Lets you skew a block vertically.

Rotate

The Rotate property allows you to specify the rotation to be performed on a block.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Rotate property

  6. Find option you want to modify (Rotate, Rotate X, Y or Z)

  7. Enter desired value(s)

  8. Click dot(s) to reset

Rotate Lets you specify the rotation to be performed on a block.

Rotate X Lets you specify the rotation to be performed in relation to the X axis of the perspective on a block element.

Rotate Y Lets you specify the rotation to be performed in relation to the Y axis of the perspective on a block element.

Rotate Z Lets you specify the rotation to be performed in relation to the Z axis of the perspective on a block element.

Perspective

The Perspective property defines a perspective for a 3D-positioned element.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Perspective property

  6. Find option you want to modify (L, Preserve 3D)

  7. Enter desired value(s)

  8. Click dot(s) to reset

L Defines how far the element is away from the user. A lower value will result in a more intensive 3D effect than a higher value.

Preserve 3D The children of the block are not flattened and maintain their position in 3D space, their original axis is their parent.

Rotate 3D

The Rotate 3D property allows you to define the rotation to be performed in relation to an axis defined by the point of origin and the new point of perspective specified on a block.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Rotate 3D property

  6. Find option you want to modify (Rotate X, Rotate Y, Rotate Z, Angle)

  7. Enter desired value(s)

  8. Click dot(s) to reset

Rotate 3D X Defines the new coordinate on the X axis perspective.

Rotate 3D Y Defines the new coordinate on the Y axis perspective.

Rotate 3D Z Defines the new coordinate on the Z axis perspective.

Rotate 3D Angle Represents the angle of rotation. A positive angle indicates a clockwise rotation, a negative angle indicates a counterclockwise rotation.

Scale

The Scale property allows you to scale up or downscale a block.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Scale property

  6. Find option you want to modify (Scale X, Scale Y, Scale Z, Angle)

  7. Enter desired value(s)

  8. Click dot(s) to reset

Scale X Scale up or scale down the width of block.

Scale Y Scale up or scale down the height of block.

Scale Z Scale up or scale down a block on the Z-axis in a 3D space.

Origin

The Origin property cannot be used with the Translate or Perspective properties.

The Origin property allows you to specify where the block begins.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on Required Transform property (skew, rotate, rotate 3D, scale)

  6. Find the Origin property

  7. Enter desired value

  8. Click dot to reset

Block Visibility

The Block Visibility property allows you to determine whether your block is visible or hidden.

Modify/Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Transforms tab

  5. Toggle on required Transform property

  6. Find the BV (block visibility) property

  7. Select desired state in dropdown (inherit, visible, hidden)

  8. Click dot to reset

Last updated 2 years ago

Was this helpful?

🎨