{"id":1357,"date":"2024-03-23T06:27:23","date_gmt":"2024-03-23T06:27:23","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1357"},"modified":"2024-04-10T07:28:30","modified_gmt":"2024-04-10T07:28:30","slug":"social-share","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/social-share\/","title":{"rendered":"Social Share"},"content":{"rendered":"\n

The Social Share block allows you to share the site content directly to different social media profiles. Adding Social Share Icons allows users to easily distribute website content across various social media platforms, enhancing visibility and engagement.<\/p>\n\n\n\n

\"Add
Add Social Share Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Social Share block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

It provides the following customization options for the Social Share Block.<\/p>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Orientation – <\/b>It allows the display of the icons horizontally or vertically. However, choosing the horizontal layout for the Social Share Block might make it look wide on responsive devices. So, we have added the Stack-On option, which allows icons to be stacked on responsive devices.<\/li>\n<\/ul>\n\n\n\n
    \"Display
    Display Icon Horizontally<\/figcaption><\/figure>\n\n\n\n

    Design<\/h3>\n\n\n\n
      \n
    • Preset<\/strong> – It changes the design of the Social Share Block. The Social Icons can be displayed either in Rectangular, Rounded, or Circle depending on your requirements.<\/li>\n<\/ul>\n\n\n\n
      \"Using
      Using Rounded Preset Design<\/figcaption><\/figure>\n\n\n\n

      Icon<\/h3>\n\n\n\n

      The setting applies for the social icons and comes with the following options:<\/p>\n\n\n\n

        \n
      • Size<\/strong> – It determines the size of the social icon.<\/li>\n\n\n\n
      • Background Size<\/strong> – It adjusts the background size of social icons.<\/li>\n\n\n\n
      • Border Radius<\/strong> – It sets the\u00a0Curve<\/strong>\u00a0of the border on the corners of the box. You can move the slider to the right area to increase the radius value.<\/li>\n\n\n\n
      • Column Gap <\/strong>– It sets the distance between the Social Share Block and other blocks added around it.<\/li>\n\n\n\n
      • Row Gap<\/strong> – It determines the space between the social Icons block when set vertically.<\/li>\n<\/ul>\n\n\n\n
        \"Icons
        Icons Styling<\/figcaption><\/figure>\n\n\n\n

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

        It provides the following styling options for the Social Share Block. These are listed below:<\/p>\n\n\n\n

        Properties<\/h3>\n\n\n\n
          \n
        • Text Alignment<\/strong> – It sets the alignments for the Social Share Block. You can set the alignments as Left<\/strong>,\u00a0Center,<\/strong> and Right<\/strong>. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
          \"Social
          Social Share Block with Center Alignment<\/figcaption><\/figure>\n\n\n\n

          Color<\/h3>\n\n\n\n

           It changes the color of the Social Icons. You can set the different colors on Normal and Hover Modes.<\/p>\n\n\n\n

          Background<\/h3>\n\n\n\n
            \n
          • Type <\/strong>– It sets the background color of the Social Icons Block. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n
            \"Change
            Change Background Color<\/figcaption><\/figure>\n\n\n\n

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

            The Advanced section consists of four customization options for the Social Share Block.<\/p>\n\n\n\n

            Spacing<\/h3>\n\n\n\n

            Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

              \n
            • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
            • Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like\u00a0px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
              \"Manage
              Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

              Z-Index<\/h3>\n\n\n\n

              It allows you to set the priority of the Social Share block according to the site requirement.<\/p>\n\n\n\n

              Responsive Condition<\/h3>\n\n\n\n

              Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                \n
              • Hide on Desktop<\/strong> \u2013 It hides the Social Share block on the Desktop.<\/li>\n\n\n\n
              • Hide on Tablet<\/strong> \u2013 It hides the Social Share block on the Tablet.<\/li>\n\n\n\n
              • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Social Share Block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                \"Enable\/Disable
                Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                Advanced<\/h3>\n\n\n\n

                Under the option, you can set the CSS ID and Classes for this particular Social Share block. The available options are listed below:<\/p>\n\n\n\n

                  \n
                • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                  \"Add
                  Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                  After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                  Individual Social Icon<\/h2>\n\n\n\n

                  The above setting applies to all the social icons added to your site. However, if you want to make changes to the specific social icon block, the plugin allows you to do so. The settings are listed below:<\/p>\n\n\n\n

                  Note – In the guideline below, I have provided an example of a Facebook Icon. You can follow a similar method for customizing other social icons.<\/em><\/p>\n\n\n\n

                  \"Individual
                  Individual Social Icon Setting<\/figcaption><\/figure>\n\n\n\n

                  If you click on the Facebook Icon, you\u2019ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. Let\u2019s explore one by one below:<\/p>\n\n\n\n

                  General<\/h2>\n\n\n\n

                  Icon <\/strong><\/h3>\n\n\n\n

                  It comes with the following option for customizing the Icons added:<\/p>\n\n\n\n

                    \n
                  • Type<\/strong> \u2013 It determines the types of social media like Facebook, Instagram, Linkedin, and so on.<\/li>\n\n\n\n
                  • Format<\/strong> \u2013 In order to display the social icons, you can either use the Image or the Icons provided by the plugin.<\/li>\n<\/ul>\n\n\n\n
                    \"Individual
                    Individual Social Icon General Settings<\/figcaption><\/figure>\n\n\n\n

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

                    It provides the following styling options for the Individual Social Share Block. These are listed below:<\/p>\n\n\n\n

                    Icon<\/h3>\n\n\n\n
                      \n
                    • Color<\/strong> \u2013 It changes the color of the Social Icons. You can set the different colors on Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n
                      \"Change
                      Change Icon Color<\/figcaption><\/figure>\n\n\n\n

                      Background<\/h3>\n\n\n\n
                        \n
                      • Type – <\/strong>It sets the background color of the individual Social Icons Block. You can change the background’s visual appearance by changing its color or adding an image. Moreover, you can set different background colors in Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change the Background Color of the Facebook Icon<\/figcaption><\/figure>\n\n\n\n

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

                        The Advanced section consists of four customization options for the specific social icon.<\/p>\n\n\n\n

                        Spacing<\/h3>\n\n\n\n

                        Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                          \n
                        • Block Margin <\/strong>– According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the values of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                        • Block Padding <\/strong>– According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                          \"Manage
                          Manage Margin and Padding Space of Individual Icon<\/figcaption><\/figure>\n\n\n\n

                          Z-Index<\/h3>\n\n\n\n

                          It allows you to set the priority of each Social Icon according to the site requirement.<\/p>\n\n\n\n

                          Responsive Condition<\/h3>\n\n\n\n

                          Using the option, you can enable\/disable displaying the individual icon on various screen sizes:<\/p>\n\n\n\n

                            \n
                          • Hide on Desktop<\/strong>\u00a0\u2013 It hides the chosen icon on the Desktop.<\/li>\n\n\n\n
                          • Hide on Tablet<\/strong>\u00a0\u2013 It hides the chosen icon on the Tablet.<\/li>\n\n\n\n
                          • Hide on Mobile<\/strong>\u00a0\u2013 It hides the chosen icon on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                            \"Enable\/Disable
                            Enable\/Disable Block Responsive Condition for Individual Icon<\/figcaption><\/figure>\n\n\n\n

                            Advanced<\/h3>\n\n\n\n

                            Under the option, you can set the CSS ID and Classes for the particular social icon. The available options are listed below:<\/p>\n\n\n\n

                              \n
                            • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style the specific icon. Once you have set the ID, you can write the CSS Code to style the icon using that particular ID.<\/li>\n\n\n\n
                            • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to the specific icon and write custom CSS to style for it.<\/li>\n<\/ul>\n\n\n\n
                              \"Add
                              Add CSS ID and Additional CSS Class for Individual Icon<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                              The Social Share block allows you to share the site content directly to different social media profiles. Adding Social Share Icons allows users to easily distribute website content across various social media platforms, enhancing visibility and engagement. After you have chosen the Social Share block, you’ll get a block editing panel on the right-hand side.[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1357"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1357"}],"version-history":[{"count":38,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1357\/revisions"}],"predecessor-version":[{"id":2744,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1357\/revisions\/2744"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1357"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1357"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}