{"id":2060,"date":"2026-10-14T04:36:55","date_gmt":"2026-10-14T04:36:55","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2060"},"modified":"2026-10-15T09:48:04","modified_gmt":"2026-10-15T09:48:04","password":"","slug":"client-logo","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/client-logo\/","title":{"rendered":"Client Logo"},"content":{"rendered":"\n

The Client Logo Block lets you display client, partner, or brand logos in a responsive grid. You can add multiple logos, link each logo to a website, choose a different image for hover effects, and customize the number of columns, logo size, spacing, grayscale effect, background, border, and shadow.<\/p>\n\n\n\n

How to Add a Client Logo Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Client Logo Block in the WordPress Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Client Logo Block<\/h3>\n\n\n\n
    \n
  1. Open the page or post where you want to display client logos.<\/li>\n\n\n\n
  2. Click the + (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n
  3. Search for Client Logo<\/strong> in the block inserter.<\/li>\n\n\n\n
  4. Select the Client Logo<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n
  5. The Client Logo block will be added to your page with logo placeholders.<\/li>\n\n\n\n
  6. Select the block to configure its settings using the sidebar.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Client Logo Block<\/h3>\n\n\n\n

    Select the Client Logo Block to access its configuration options in the sidebar. The available options are organized into four tabs:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Add, replace, duplicate, remove, and reorder logos. Configure logo links and the image hover swap effect.<\/li>\n\n\n\n
    • Layout:<\/strong> Set image width, the number of columns for desktop, tablet, and mobile, item width, item height, and spacing.<\/li>\n\n\n\n
    • Style:<\/strong> Customize grayscale effects, border radius, padding, transitions, backgrounds, borders, shadows, opacity, and image scaling.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n

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

      The Settings tab contains the Logo Settings panel for managing logos and their links.<\/p>\n\n\n\n

      1. Logo Settings<\/h3>\n\n\n\n
        \n
      • Logo:<\/strong> Each logo appears as a separate item in the list.\n
          \n
        • Select Logo:<\/strong> Choose a logo image from the WordPress Media Library.<\/li>\n\n\n\n
        • Replace Logo:<\/strong> Replace the selected logo with another image.<\/li>\n\n\n\n
        • Move Up:<\/strong> Move the logo one position upward.<\/li>\n\n\n\n
        • Move Down:<\/strong> Move the logo one position downward.<\/li>\n\n\n\n
        • Duplicate:<\/strong> Create a copy of the logo item.<\/li>\n\n\n\n
        • Remove:<\/strong> Delete the logo item.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Hover Image:<\/strong> When Image Hover Swap Effect is enabled, select a separate image to display on hover.\n
            \n
          • Select Hover Image:<\/strong> Choose the alternate image from the Media Library.<\/li>\n\n\n\n
          • Replace Hover Image:<\/strong> Replace the selected hover image.<\/li>\n\n\n\n
          • Remove:<\/strong> Remove the hover image. When no hover image is selected, the original logo is used.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Link:<\/strong> Enter the URL where visitors will be directed when they click the logo.<\/li>\n\n\n\n
          • Open in New Tab:<\/strong> Open the linked page in a new browser tab. This option appears when a link is entered.<\/li>\n\n\n\n
          • Add Nofollow:<\/strong> Add the nofollow<\/code> attribute to the logo link. This option appears when a link is entered.<\/li>\n\n\n\n
          • Add Logo:<\/strong> Add another logo item to the list.<\/li>\n\n\n\n
          • Image Hover Swap Effect:<\/strong> Enable or disable the effect that slides the original logo away and displays a second image on hover.<\/li>\n<\/ul>\n\n\n\n

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

            The Layout tab contains the Columns panel for controlling the logo grid and item dimensions.<\/p>\n\n\n\n

            1. Columns<\/h3>\n\n\n\n
              \n
            • Image Width (px):<\/strong> Set the width of the logo images. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
            • Columns:<\/strong> Choose the number of columns displayed on desktop:\n
                \n
              • 1 Column<\/li>\n\n\n\n
              • 2 Columns<\/li>\n\n\n\n
              • 3 Columns<\/li>\n\n\n\n
              • 4 Columns<\/li>\n\n\n\n
              • 5 Columns<\/li>\n\n\n\n
              • 6 Columns<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Columns (Tablet):<\/strong> Choose the number of columns displayed on tablet devices, from 1 to 6.<\/li>\n\n\n\n
              • Columns (Mobile):<\/strong> Choose the number of columns displayed on mobile devices, from 1 to 6.<\/li>\n\n\n\n
              • Item Max Width (px):<\/strong> Set the maximum width of each logo item. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
              • Item Height (px):<\/strong> Set the height of each logo item. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
              • Item Space:<\/strong> Adjust the spacing between logo items.<\/li>\n<\/ul>\n\n\n\n
                \"\"<\/figure>\n\n\n\n

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

                The Style tab contains the Item panel for customizing the appearance of individual logo items and their hover effects.<\/p>\n\n\n\n

                1. Item<\/h3>\n\n\n\n
                  \n
                • Image Grayscale:<\/strong> Enable or disable the grayscale effect for logo images.<\/li>\n\n\n\n
                • Grayscale:<\/strong> Choose how the grayscale effect behaves. This option appears when Image Grayscale is enabled.\n
                    \n
                  • Default Grayscale:<\/strong> Display logos in grayscale by default.<\/li>\n\n\n\n
                  • Hover Grayscale:<\/strong> Apply the grayscale effect on hover.<\/li>\n\n\n\n
                  • Hover to Default Image:<\/strong> Display the default colored image on hover.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • Border Radius:<\/strong> Customize the rounding of the logo item’s corners.<\/li>\n\n\n\n
                  • Padding:<\/strong> Set the inner spacing around each logo item. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                  • Transition (seconds):<\/strong> Set the duration of the transition effect.<\/li>\n<\/ul>\n\n\n\n

                    The panel also contains Normal<\/strong> and Hover<\/strong> states for customizing the logo item’s appearance.<\/p>\n\n\n\n

                      \n
                    • Normal:<\/strong>\n
                        \n
                      • Item Background:<\/strong> Set the default background color or gradient.<\/li>\n\n\n\n
                      • Border:<\/strong> Customize the default border.<\/li>\n\n\n\n
                      • Box Shadow:<\/strong> Add a shadow to the logo item.<\/li>\n\n\n\n
                      • Opacity (0\u20131):<\/strong> Adjust the default opacity of the logo image.<\/li>\n\n\n\n
                      • Transform Scale (e.g. 1):<\/strong> Set the default image scale. This option is available when Image Hover Swap Effect is disabled.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                      • Hover:<\/strong>\n
                          \n
                        • Item Hover Background:<\/strong> Set the background color or gradient on hover.<\/li>\n\n\n\n
                        • Border:<\/strong> Customize the border on hover.<\/li>\n\n\n\n
                        • Box Shadow:<\/strong> Set the shadow on hover.<\/li>\n\n\n\n
                        • Opacity (0\u20131):<\/strong> Adjust the image opacity on hover.<\/li>\n\n\n\n
                        • Transform Scale (e.g. 1.1):<\/strong> Set the image scale on hover. This option is available when Image Hover Swap Effect is disabled.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                          \"\"<\/figure>\n\n\n\n

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

                          The Advanced tab contains the Spacing and Background panels for controlling the spacing and background of the entire Client Logo Block.<\/p>\n\n\n\n

                          1. Spacing<\/h3>\n\n\n\n
                            \n
                          • Padding:<\/strong> Set the inner spacing around the entire Client Logo Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n
                          • Margin:<\/strong> Set the outer spacing around the entire Client Logo Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n

                            2. Background<\/h3>\n\n\n\n
                              \n
                            • Background:<\/strong> Set a background color or gradient for the entire Client Logo Block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                              The Client Logo Block lets you display client, partner, or brand logos in a responsive grid. You can add multiple logos, link each logo to a website, choose a different image for hover effects, and customize the number of columns, logo size, spacing, grayscale effect, background, border, and shadow. How to Add a Client Logo […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[17],"doc_tag":[],"class_list":["post-2060","docs","type-docs","status-publish","hentry","doc_category-media-block"],"year_month":"2026-10","word_count":873,"total_views":"5","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":"Media Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/media-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2060","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=2060"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2060\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2060\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2060"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2060"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}