{"id":1152,"date":"2026-06-23T14:18:03","date_gmt":"2026-06-23T14:18:03","guid":{"rendered":"https:\/\/shanbei26.com\/?p=1152"},"modified":"2026-06-23T14:26:19","modified_gmt":"2026-06-23T14:26:19","slug":"design-area","status":"publish","type":"post","link":"https:\/\/shanbei26.com\/zh\/design-area\/","title":{"rendered":"\u5e03\u5c40\u5de5\u5177\u680f"},"content":{"rendered":"
\n

Layout Toolbar<\/h1>\n<\/header>\n
\n
\n

There are four options on the right toolbar that allow you to customize the picture position, transform, and color. To enable the layout toolbar, click on an image, and it’ll appear on the top of the design editor.<\/p>\n

\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
1. Fill Color<\/div>\n

Shape, image, and text are three objects that you can apply this fill option. The Fill Color helps users fill a solid color to the selected objects.<\/p>\n

\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Follow these steps to work with the tool:<\/p>\n

    \n
  1. \n
    \n
    <\/div>\n<\/div>\n
    \n

    Drag your mouse to select the layer you want to fill color.<\/p>\n<\/div>\n<\/li>\n

  2. \n
    \n
    <\/div>\n<\/div>\n
    \n

    Click on the Fill Color<\/strong> icon on the toolbar.<\/p>\n<\/div>\n<\/li>\n

  3. \n
    \n
    <\/div>\n<\/div>\n
    \n

    Select a color from preset colors or enter a custom value by click on input Click to choose color<\/strong>.<\/p>\n<\/div>\n<\/li>\n

  4. \n
    \n
    <\/div>\n<\/div>\n
    \n

    To save custom color just press the plus (+) button next to add.<\/p>\n<\/div>\n<\/li>\n

  5. \n
    \n
    <\/div>\n<\/div>\n
    \n

    Transparent help you change the opacity of the filled color.<\/p>\n<\/div>\n<\/li>\n

  6. \n
    \n
    <\/div>\n<\/div>\n
    \n

    Stroke width<\/strong> + Stroke<\/strong> color<\/strong> allow you to make the border color for the current layer.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

    <\/div>\n
    2. Arrange Layers<\/div>\n

    The Lumise editor works base on layers. Quickly arrange the selected object position either backward or forward.<\/p>\n

    \n
    \n
    \n
    \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    Follow steps to work with this tool:<\/p>\n

      \n
    1. \n
      \n
      <\/div>\n<\/div>\n
      \n

      Chose the layer you want to change.<\/p>\n<\/div>\n<\/li>\n

    2. \n
      \n
      <\/div>\n<\/div>\n
      \n

      Click on the Arrange Layers<\/strong> icon on the toolbar.<\/p>\n<\/div>\n<\/li>\n

    3. \n
      \n
      <\/div>\n<\/div>\n
      \n

      Select Forward<\/strong> or Back<\/strong> action to change the object order.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

      <\/div>\n
      3. Position<\/div>\n

      Whether you want to put it in the right corner or center. The Layer Position tool allows you to place the selected object in the correct position with one click.<\/p>\n

      Switch the Lock object position<\/strong> to YES<\/strong>, if you want to continue design without affect the current object.<\/p>\n

      \n
      \n
      \n
      \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n

      \n

      Follow steps to work with this tool:<\/p>\n

        \n
      1. \n
        \n
        <\/div>\n<\/div>\n
        \n

        Select the layer you want to move<\/p>\n<\/div>\n<\/li>\n

      2. \n
        \n
        <\/div>\n<\/div>\n
        \n

        Click on the Position<\/strong> icon on the toolbar<\/p>\n<\/div>\n<\/li>\n

      3. \n
        \n
        <\/div>\n<\/div>\n
        \n

        Choose the position you wish to move the layer to.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

        <\/div>\n
        4. Transforms Manual<\/div>\n

        When using the transform tool directly, it is hard to know how many angles rotated or flipped. The Lumise provides a manual way to set transform values for a layer.<\/p>\n

        \n
        \n
        \n
        \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n

        \n

        Follow steps to work with the tool:<\/p>\n

          \n
        1. \n
          \n
          <\/div>\n<\/div>\n
          \n

          Chose the layer you want to change.<\/p>\n<\/div>\n<\/li>\n

        2. \n
          \n
          <\/div>\n<\/div>\n
          \n

          Click on the Transform<\/strong> icon on the toolbar.<\/p>\n<\/div>\n<\/li>\n

        3. \n
          \n
          <\/div>\n<\/div>\n
          \n

          Adjust the values you want to set.<\/p>\n<\/div>\n<\/li>\n<\/ol>\n

          The values you can set for the object as bellow:<\/p>\n

            \n
          • \n
            \n
            Rotate<\/strong>: the edge of an object. start from 0 \u2013 360<\/span><\/div>\n<\/div>\n<\/li>\n
          • \n
            \n
            Skew X<\/strong>: skews layer along the X-axis by the given angle<\/span><\/div>\n<\/div>\n<\/li>\n
          • \n
            \n
            Skew Y<\/strong>: skews layer along the Y-axis by the given angle<\/span><\/div>\n<\/div>\n<\/li>\n
          • \n
            \n
            Flip X<\/strong>: Horizontal flip your layer<\/span><\/div>\n<\/div>\n<\/li>\n
          • \n
            \n
            Flip Y<\/strong>: Vertical flip your layer.<\/span><\/div>\n<\/div>\n<\/li>\n<\/ul>\n

            Of course, you can cancel all applied values by press the Reset All Transform button.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

            Layout Toolbar There are four options on the right toolbar that allow you to customize the picture position, transform, and color. To enable the layout toolbar, click on an image, and it’ll appear on the top of the design editor. 1. Fill Color Shape, image, and text are three objects that you can apply this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[48],"tags":[],"class_list":["post-1152","post","type-post","status-publish","format-standard","hentry","category-design-template"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t