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
  • Active
  • Reverse
  • Transition
  • Reset
  • Glare
  • Max Tilt Rotation
  • Perspective
  • Start Y
  • Start X
  • Scale
  • Speed

Was this helpful?

  1. Design
  2. Effects

Tilter

The Tilter effect uses the mouse coordinates to create a 3D perspective hover effect.

Active

The Active property activates the Tilter effect.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Active property

  7. Toggle the property to activate/deactivate

Reverse

The Reverse property reverses the Tilter effect.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Reverse property

  7. Toggle the property to activate/deactivate

Transition

The Transition property sets a transition on enter/exit.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Transition property

  7. Toggle the property to activate/deactivate

Reset

The Reset property resets the tilt effect on enter/exit.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Open the Tilter tab

  6. Find the Reset property

  7. Toggle the property to activate/deactivate

Glare

The Glare property adds a glare effect to the element depending on the mouse position.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Glare property

  7. Toggle the property to activate/deactivate

Max Tilt Rotation

The Max Tilt Rotation property limits the degree of tilt rotation.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Max Tilt rotation property

  7. Enter the desired max tilt rotation value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Max Tilt rotation property

  7. Click dot(s) to reset

Perspective

The Perspective property transforms the perspective, the lower the more extreme the tilt gets.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Perspective property

  7. Enter the desired perspective value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Rotation property

  7. Click dot(s) to reset

Start Y

The Start Y property sets the starting tilt on the Y axis, in degrees.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Start Y property

  7. Enter the desired start y value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Start Y property

  7. Click dot(s) to reset

Start X

The Start X property sets the starting tilt on the X axis, in degrees.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Start X property

  7. Enter the desired start x value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Start X property

  7. Click dot(s) to reset

Scale

The Scale property sets the scale, 2 = 200%, 1.5 = 150%, etc..

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Scale property

  7. Enter the desired scale value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Scale property

  7. Click dot(s) to reset

Speed

The Speed property sets the speed of the enter/exit transition.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Speed property

  7. Enter the desired speed value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Tilter tab

  6. Find the Speed property

  7. Click dot(s) to reset

Last updated 2 years ago

Was this helpful?

🎨