The Click to Share Block
Create a clickable quote for sharing to the social networks
The Click to Share Block in the Block Editor
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.
The Main Block Interface
Formatting Options for the Text to Share
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.
Responsive View and Click to Share Text Settings
The block has three "preview" modes:
- 1.Desktop
- 2.Tablet
- 3.Mobile
Clicking on each icon will show what the block will look like with that particular screen size.
The Share Settings for the Click to Share Block
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.
Solid Background Type for the Click to Share Block
With the Solid background option, you can choose a background and hover background color.
Gradient Options for the Click to Share Block
The Gradient background type, you can sync the gradients (edit both gradients at once), and even have a random gradient generated for you.
Background Image Type for the Click to Share Block
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.
Color Options for the Click to Share Block
Simply click on the color to change it.
Built-in Color Picker
Typography Options in the Click to Share Block
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.
Popover Typography Options
Lastly, you can adjust the spacing, max-width, and borders of the block.
Adjust the Spacing for the Click to Share Block
Each spacing setting can also be configured per mobile responsive breakpoint (desktop, tablet, mobile).