Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • Multiselect
  • How to use multiselect
  • Drag-and-drop
  • How to use drag-and-drop

Was this helpful?

  1. Setka Editor

Drag-and-Drop & Multiselect

PreviousGetting startedNextText editing

Last updated 2 years ago

Was this helpful?

Enhanced editing experience provides intuitive interaction with the post content. You can select multiple items not only with hotkeys but also by dragging the mouse cursor diagonally. Content elements, such as grids, images, or paragraphs, can be moved and placed in the other part of the article with a special drag handle on the left-hand side.

Currently, multiselect is available for all CMS-s. Drag-and-drop experience is available on all CMS-s except for the . We'll release the version with the drag-and-drop experience compatible with the Gutenberg WordPress Editor soon. Stay tuned.

Multiselect

The multiselect feature lets you select multiple elements with the drag of the mouse. Then you will be able to apply some formatting or editing in bulk. E.g.:

  • Select multiple elements to .

  • Move multiple elements around as you test out different layouts.

  • Select multiple elements to create a .

  • Select the headers across multiple columns to for all of them at once.

How to use multiselect

To select multiple items, click the left mouse button, hold it down and start dragging. A transparent blue selection box will appear. Drag this over the areas you want to select — anything touching the rectangle will be selected:

If something is missed after the mouse button is released, use CMD/CTRL+Click to add more elements to the selection.

You can then use any feature to edit all of the selected fields at once, including:

  • Adding bold, italic, or underline styling to the text.

Drag-and-drop

The drag-and-drop feature makes it easier to move elements within an article.

How to use drag-and-drop

Once an element in an article is selected, you will see the white drag handle with dots on the left-hand side. Grab this handle with the mouse to move the element inside the post. It can be either a single element or multiple pieces of content.

As you drag the elements into different grids on the page, a long purple line will denote where you are placing the element or elements. Thus you can make sure you’re dropping in the right spot. There are three options for how you place the element you’re moving in relation to existing elements.

  • If the purple line is at the top of the existing element, the items will go above it, pushing that element down.

  • If the line is in the middle, the items you’re moving will replace that element.

  • If it’s towards the bottom, the items you’re moving will go below that existing element.

Adjusting and .

Changing .

Tweaking .

.

Adding a .

colors
Changing grids
list
component
alignment
indents
text formatting
change the text format
arrange them into a new grid
Gutenberg WordPress Editor
Selecting multiple elements
Drag handle on the paragraph