Thebuttons block allows you to add one or more buttons to your page or post.
Note: The buttons block has been available since LitePress 5.4, and the button block was deprecated at the same time.
To add a buttons block, click on the Block Inserter icon and select the buttons block.
You can also type /buttons and hit the Enter key in a new paragraph block to add one quickly.
Detailed instructions on adding blocks can be found here.
Block Toolbar for entire block
Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.
Thebuttons block has a toolbar for the individual button as well as a toolbar for the entire block.
The main toolbar for the entire block has the standard buttons:
- Transform to
- Moving handles
- Change alignment
- Change items justification
- 更多选项
Transform to
Allows you to transform the buttons block into a column or a group block.
Moving handles
The up and down arrow icons can be used to shift a block up and down in your document.
Detailed instructions on moving a block within the editor can be found here
Change alignment
The wide width and the full width align options are available if your theme supports them.
Change items justification
The items justification setting allows you to justify the items (buttons) to the left, center or right. Alternatively you can insert space between items.
More Options:
Hide Block Settings
TheHide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.
Copy
Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.
Duplicate
Duplicate can be used to duplicate selected block.
Insert Before
Insert a new block before the selected block(s).
Insert After
Insert a new block after the selected block(s).
Move To
If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.
Edit as HTML
TheEdit as HTML option allows you to modify the HTML code of the embed block.
Add to Reusable blocks
Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.
Group
Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.
Remove Block
With the Remove Block option, you can delete the selected block from your content.
Block Toolbar for individual button
The toolbar for the individual buttons has the following options:
- Change block style
- Moving handles
- 链接
- Text editing options
- 更多选项
Change block style
Clicking on the change block style will let you change the style of the button.
链接
You will be able to add a link to the button. You can choose to set the option to open the link in a new tab.
Text editing options
Bold
You can select the text of the block (button) and use the Bold option or Ctrl+B/Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.
Italic
You can select the text of the block (button) and use the Italic option or Ctrl+I/Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.
More text editing options
Inline Code
Useinline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.
Inline Image
Theinline image feature allows you to add an image into your text. It has one option: enter the desired pixel width for your image.
Keyboard Input
Usekeyboard input feature to format text snippets within your text differently. (The <kbd> element of HTML will be applied.)
Strikethrough
Strikethrough can be used to place a horizontal line through the middle of the selected text.
Example: Buttons Block
Subscript
Subscript can be used to set character slightly below the normal line of type.
Example: Buttons Block
Superscript
Superscript can be used to set character slightly above the normal line of type.
Example: Buttons Block
Text Color
Text Color can be used to set the color of the text.
Example: Buttons, Paragraph, Image
More Options for the Individual button:
Hide More Settings
TheHide More Settings option hides (or shows) the Block (Button) Setting panel in the editor’s sidebar.
Copy
Copy can be used to copy a selected block (button) and then you can paste it into any buttons block.
Duplicate
Duplicate can be used to duplicate selected block (button).
Move To
If you select Move To, you will get a blue line inside your buttons block, you can then use the up and down arrows to move that line left and right to where you want the selected block (button) to be moved into, hitting return on your keyboard at that point moves the block (button) to that position.
Edit as HTML
TheEdit as HTML option allows you to modify the HTML code of the block (button).
Remove Block
With the Remove Block option, you can delete the selected block (button) from your buttons block.
Block Settings for entire block
Advanced
When the entire buttons block is selected – you can add HTML anchor and CSS class(es) to your block.
HTML anchor allows you to make a unique web address for a particular buttons block. Then, you’ll be able to link directly to a buttons block of your page.
TheAdditional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
Block Settings for individual button
When the individual button is selected, you see a different set of options in the settings sidebar.
Button Styles
You can change the style of the individual button.
Typography
You can change the font size of your text. You can choose from a default size or set a custom size.
Color Settings
You can set the text and background colors for the button.
Width Settings
Each button can have its own width inside the buttons block.
Advanced
You can add a Link rel attribute to each button in the block.
You can also add HTML anchor and CSS class(es) to each button in the block.
HTML anchor allows you to make a unique web address for a particular button. Then, you’ll be able to link directly to the button of your page.
TheAdditional CSS class(es) lets you add CSS class(es) to your button, allowing you to write custom CSS and style the button as you see fit.
