{"id":2041,"date":"2026-10-14T04:32:19","date_gmt":"2026-10-14T04:32:19","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2041"},"modified":"2026-10-15T04:28:23","modified_gmt":"2026-10-15T04:28:23","password":"","slug":"features-list","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/features-list\/","title":{"rendered":"Features List"},"content":{"rendered":"\n

The ShapeBlock Features List Block lets you display a vertical list of features, services, benefits, or steps. Each item can include an icon, number, or image, along with a title and description. You can also customize the layout, styling, spacing, and optional connector lines.<\/p>\n\n\n\n

How to Add a Features List Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Features List Block in the Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Features List Block<\/h3>\n\n\n\n
    \n
  1. Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n
  2. Click the +<\/strong> button to open the block inserter.<\/li>\n\n\n\n
  3. Search for Features List<\/strong> under ShapeBlock.<\/li>\n\n\n\n
  4. Insert the Features List Block into your page.<\/li>\n\n\n\n
  5. Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n
  6. Edit the feature items and customize their appearance using the available settings.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Features List Block<\/h3>\n\n\n\n

    Select the Features List Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add and manage feature items, choose an icon, number, or image, configure title tags, and enable connector lines.<\/li>\n\n\n\n
    • Layout:<\/strong> Adjust icon direction, vertical alignment, item spacing, middle spacing, and margins.<\/li>\n\n\n\n
    • Style:<\/strong> Customize the list background, borders, icons, titles, descriptions, and connector appearance.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure the block’s outer padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      The Settings tab contains the List Settings<\/strong> and Connector<\/strong> panels. Use these panels to manage feature items and configure connector options.<\/p>\n\n\n\n

      1. List Settings<\/h3>\n\n\n\n

      Use this panel to add, edit, organize, and customize the content of your feature items.<\/p>\n\n\n\n

        \n
      • Feature Items:<\/strong> Each item has its own expandable settings. Click an item to open its options.\n
          \n
        • Type:<\/strong> Choose the content displayed beside the feature title and description.\n
            \n
          • Icon:<\/strong> Display an icon.<\/li>\n\n\n\n
          • Number:<\/strong> Display a number or step label.<\/li>\n\n\n\n
          • Image:<\/strong> Display an image selected from the Media Library.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Icon:<\/strong> Choose an icon when the Type is set to Icon.<\/li>\n\n\n\n
          • Number:<\/strong> Enter the number or label when the Type is set to Number.<\/li>\n\n\n\n
          • Select Image:<\/strong> Choose an image when the Type is set to Image. Use Replace<\/strong> to change an existing image.<\/li>\n\n\n\n
          • Title:<\/strong> Enter the feature item’s heading.<\/li>\n\n\n\n
          • Description:<\/strong> Enter the text that explains the feature.<\/li>\n\n\n\n
          • Move Up \/ Move Down:<\/strong> Change the item’s position in the list.<\/li>\n\n\n\n
          • Duplicate:<\/strong> Create a copy of the selected item.<\/li>\n\n\n\n
          • Remove:<\/strong> Delete the selected item.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Add Item:<\/strong> Add a new feature item to the list.<\/li>\n\n\n\n
          • Icon Show Hide:<\/strong> Enable this option to display an icon, number, or image for each item. Disable it to hide these visual elements.<\/li>\n\n\n\n
          • Title HTML Tag:<\/strong> Choose the HTML tag used for feature titles, such as H1, H2, H3, H4, H5, H6, P, DIV, or SPAN.<\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            2. Connector<\/h3>\n\n\n\n

            Use this panel to configure connector lines between feature items.<\/p>\n\n\n\n

              \n
            • Connector:<\/strong> Enable this option to display connector lines between the feature items. Additional connector settings become available when enabled.<\/li>\n\n\n\n
            • Left Connector:<\/strong> Enable this option to use the left-side connector layout. This option appears when Connector is enabled.<\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Layout Tab<\/h2>\n\n\n\n

              The Layout tab controls the arrangement of feature items, icon alignment, and spacing between items.<\/p>\n\n\n\n

              1. Alignment<\/h3>\n\n\n\n

              This panel appears when the Icon<\/strong> option is enabled in the Settings tab.<\/p>\n\n\n\n

                \n
              • Icon Direction:<\/strong> Choose the position of the icon, number, or image relative to the text.\n
                  \n
                • Left:<\/strong> Display the visual element to the left of the title and description.<\/li>\n\n\n\n
                • Right:<\/strong> Display the visual element to the right of the title and description.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                • Vertical Alignment:<\/strong> Choose how the visual element aligns vertically with the text.\n
                    \n
                  • Top:<\/strong> Align the visual element to the top.<\/li>\n\n\n\n
                  • Middle:<\/strong> Align the visual element to the middle.<\/li>\n\n\n\n
                  • Bottom:<\/strong> Align the visual element to the bottom.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                    2. Spacing<\/h3>\n\n\n\n

                    Use this panel to control the space around and between feature items.<\/p>\n\n\n\n

                      \n
                    • Margin:<\/strong> Set the outer spacing around the feature items. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n
                    • Item Gap (px):<\/strong> Set the spacing between individual feature items.<\/li>\n\n\n\n
                    • Middle Gap (px):<\/strong> Set the spacing between the icon, number, or image and the text content.<\/li>\n<\/ul>\n\n\n\n

                      The responsive spacing controls allow you to configure values separately for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                      \"\"<\/figure>\n\n\n\n

                      Style Tab<\/h2>\n\n\n\n

                      The Style tab contains the Features List<\/strong>, Icon<\/strong>, Title<\/strong>, Description<\/strong>, and Connector Style<\/strong> panels. The Icon panel appears when the Icon option is enabled in the Settings tab. The Connector Style panel appears when Connector is enabled.<\/p>\n\n\n\n

                      1. Features List<\/h3>\n\n\n\n

                      Use this panel to customize the overall appearance of the feature list.<\/p>\n\n\n\n

                        \n
                      • Background:<\/strong> Set the background color or gradient for the feature list.<\/li>\n\n\n\n
                      • Border:<\/strong> Customize the border width, color, and style.<\/li>\n\n\n\n
                      • Border Radius:<\/strong> Adjust the rounding of the feature list’s corners. Configure each corner independently.<\/li>\n\n\n\n
                      • Padding:<\/strong> Set the inner spacing around the feature list. Configure the values separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                        2. Icon<\/h3>\n\n\n\n

                        This panel appears when the Icon<\/strong> option is enabled in the Settings tab. It controls the appearance of the icon, number, or image container.<\/p>\n\n\n\n

                          \n
                        • Icon View:<\/strong> Choose how the visual element is displayed.\n
                            \n
                          • Default:<\/strong> Display the visual element without the additional frame or stacked styling.<\/li>\n\n\n\n
                          • Frame:<\/strong> Display the visual element within a frame.<\/li>\n\n\n\n
                          • Stacked:<\/strong> Display the visual element with a background behind it.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                          • Shape:<\/strong> Choose the shape of the icon container. This option appears when Frame or Stacked is selected.\n
                              \n
                            • Rounded:<\/strong> Use rounded corners.<\/li>\n\n\n\n
                            • Square:<\/strong> Use square corners.<\/li>\n\n\n\n
                            • Circle:<\/strong> Use a circular shape.<\/li>\n\n\n\n
                            • Square Rotate:<\/strong> Use a rotated square shape.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                            • Size (px):<\/strong> Set the size of the icon or visual element. You can configure it separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                            • Box Size (px):<\/strong> Set the size of the container surrounding the visual element. Responsive values are available.<\/li>\n\n\n\n
                            • Alignment:<\/strong> Choose the horizontal alignment of the visual element.\n
                                \n
                              • Left:<\/strong> Align the visual element to the left.<\/li>\n\n\n\n
                              • Center:<\/strong> Align the visual element to the center.<\/li>\n\n\n\n
                              • Right:<\/strong> Align the visual element to the right.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                              • Color:<\/strong> Set the icon color.<\/li>\n\n\n\n
                              • Background:<\/strong> Set a solid background color or gradient for the icon container.<\/li>\n\n\n\n
                              • Box Shadow:<\/strong> Add and customize a shadow around the icon container.<\/li>\n\n\n\n
                              • Border:<\/strong> Customize the icon container’s border width, color, and style.<\/li>\n\n\n\n
                              • Border Radius:<\/strong> Adjust the rounding of the icon container’s corners. Configure each corner independently.<\/li>\n<\/ul>\n\n\n\n

                                3. Title<\/h3>\n\n\n\n

                                Use this panel to customize the appearance of feature titles.<\/p>\n\n\n\n

                                  \n
                                • Color:<\/strong> Set the title text color.<\/li>\n\n\n\n
                                • Typography:<\/strong> Customize the title’s font family, font size, font weight, font style, text transformation, line height, and letter spacing. Responsive typography settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                                • Padding:<\/strong> Set the inner spacing around the title. Configure the values separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                                  4. Description<\/h3>\n\n\n\n

                                  Use this panel to customize the text displayed below each feature title.<\/p>\n\n\n\n

                                    \n
                                  • Color:<\/strong> Set the description text color.<\/li>\n\n\n\n
                                  • Typography:<\/strong> Customize the description’s font family, font size, font weight, font style, text transformation, line height, and letter spacing. Responsive typography settings are available for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n

                                    5. Connector Style<\/h3>\n\n\n\n

                                    This panel appears when Connector<\/strong> is enabled in the Settings tab. Use it to customize the connector lines between feature items.<\/p>\n\n\n\n

                                      \n
                                    • Type:<\/strong> Choose the connector line style.\n
                                        \n
                                      • Solid:<\/strong> Display a solid line.<\/li>\n\n\n\n
                                      • Dotted:<\/strong> Display a dotted line.<\/li>\n\n\n\n
                                      • Dashed:<\/strong> Display a dashed line.<\/li>\n\n\n\n
                                      • Double:<\/strong> Display a double line.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                      • Connector Width (px):<\/strong> Set the thickness of the connector line. Responsive values are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
                                      • Position Horizontal (px):<\/strong> Adjust the horizontal position of the connector line. The available control depends on the selected Icon Direction.<\/li>\n\n\n\n
                                      • Color:<\/strong> Set the connector line color.<\/li>\n<\/ul>\n\n\n\n
                                        \"\"<\/figure>\n\n\n\n

                                        Advanced Tab<\/h2>\n\n\n\n

                                        The Advanced tab provides additional spacing and background controls for the Features List Block. These settings apply to the entire block.<\/p>\n\n\n\n

                                        1. Spacing<\/h3>\n\n\n\n
                                          \n
                                        • Padding:<\/strong> Set the inner spacing around the entire Features List Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n
                                        • Margin:<\/strong> Set the outer spacing around the entire Features List Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n

                                          Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                                          Note:<\/strong> These spacing controls apply to the entire block and are separate from the item spacing and padding options in the Layout and Style tabs.<\/p>\n\n\n\n

                                          2. Background<\/h3>\n\n\n\n
                                            \n
                                          • Background:<\/strong> Customize the background of the entire Features List Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n

                                            Note:<\/strong> This background applies to the entire block area, not just an individual feature item.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                            The ShapeBlock Features List Block lets you display a vertical list of features, services, benefits, or steps. Each item can include an icon, number, or image, along with a title and description. You can also customize the layout, styling, spacing, and optional connector lines. How to Add a Features List Block Follow these steps to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16],"doc_tag":[],"class_list":["post-2041","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-10","word_count":1326,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2041"}],"version-history":[{"count":0,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2041\/revisions"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2041"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2041"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}