The Click to Share Block
Create a clickable quote for sharing to the social networks
Last updated
Create a clickable quote for sharing to the social networks
Last updated
Finding the Block
Use a / command and look for Click to Share.
Alternatively, use the "+" Block Inserter icon and search for Click to Share.
In the main block interface, you will find an editable section for the Quote or text you would like to share. There is also a CTA which you can edit/modify.
You can modify the text directly on the block that you would like to share.
There are several formatting options including:
Bold
Italics
Highlight (change text color)
Strikethrough
Subscript
Superscript
You can further customize the share text in the sidebar options in the Block Editor.
There are numerous sidebar options to customize how the Click to Share block will show up on the frontend.
The block has three "preview" modes:
Desktop
Tablet
Mobile
Clicking on each icon will show what the block will look like with that particular screen size.
Within the Share Settings, you can disable the CTA, modify the text for the CTA, show/hide the sharing icon, and even adjust the sharing icon size.
You can adjust the background settings of the block.
You can choose between a solid background, a gradient, or a background image.
With the Solid background option, you can choose a background and hover background color.
The Gradient background type, you can sync the gradients (edit both gradients at once), and even have a random gradient generated for you.
The Image option for the background allows you to upload an image and it will be applied to the background of the block.
In addition, you can set a background color which will work with the opacity settings.
Finally, you can adjust the background settings such as setting positioning, changing the background size, etc.
You can adjust the colors of just about every element in the Click to Share block.
Simply click on the color to change it.
The typography settings can be adjusted for each text section. You can also adjust the typography for each mobile responsive breakpoint (desktop, tablet, mobile).
Click on the Typography settings to adjust the various typography options.
Lastly, you can adjust the spacing, max-width, and borders of the block.
Each spacing setting can also be configured per mobile responsive breakpoint (desktop, tablet, mobile).
