How to Insert Links and Buttons in Gutenberg: A Practical How-to Guide for WordPress

Gutenberg Editorhave sb do sthWordPressPage creation is easier. Text links, image links and interactive buttons can be easily added to create a more professional web page. This article will explain these useful tips.

I. Inserting text links

1. Addlink (on a website)basic approach

• Check the text in the paragraph block where the link needs to be added;
• Click the "Links" icon (🔗) in the toolbar;
• Type or paste the target URL and you can choose whether to open it in a new tab or not;
• Enter or click the "Apply" button to finish.

2. Setting advanced options

• After clicking on an added link, click on the "pencil icon" again to edit the link;
• Click on the "More Options" icon (three dots) to add a link to nofollow attribute (for outbound links or advertisements);

• If using Rank Math maybe Yoast SEO Plug-ins such as, you can also add on-site anchors to improve SEO results.

3. Insertion of anchor links (jumping to inside pages)

• Add "HTML Anchor" to the target paragraph with the path:
  • Select the title or any block and click on the "Advanced" option in the right-hand settings bar;
  • Enter an English/number combination anchor name (e.g.:about-us);

• Go back to the text that needs to be jumped and insert the link address as #about-us.;

• After clicking Save, click the link to jump to the specified location in the same page.

Second, add a link to the picture

• After inserting the "Image" block, click on the selected picture;
• Click on the "Links" icon in the toolbar;
• Jump to can be set:
  • Link to an image file;
  • Link to the attachment page;
  • Click to enlarge;

• Check "Open in new tab" to enhance user experience.

III. Adding buttons and setting links

Buttons have a high visual appeal on the page and are often used to guide the user to click, such as "Buy Now", "View More", etc.

1. Insert button block

• Click on the plus sign (+) to select the "Multiple Buttons" block;

• Enter button copy, such as "Learn more";

• After selecting the text, click on the "Link" icon to add a forwarding address;

• Button style, color, and width can be set in the right sidebar;

• Supports setting multiple buttons to be displayed side by side (add multiple sub-buttons via "Button Group").

2. Setting up button jumping behavior

• Support for addingIn-site links, external web site;
• It is recommended that the "Open in new tab" option be enabled for jump links to prevent users from leaving the current page;
• If it is used for promotion or registration, you can set the button color as the main color to enhance the click rate.

IV. Link Management Tips

• Add "descriptive text" to all links to improve accessibility;
• For external links, plugins such as External Links maybe WP External LinksBatch Setting nofollow and icon prompts;
• Regularly check for broken links on your pages using a broken link detection plugin such as Broken Link Checker to maintain the quality of your content;
• Save frequently used button styles as "reusable blocks" to improve editing efficiency.

V. Troubleshooting common problems

Inconsistent link styles?
Some themes do not define link colors or hover states, it is recommended to customize them via the theme customizer or the CSS Enhanced style uniformity.

Buttons displaying wrongly on mobile?
It is recommended to use the "Columns" block to control the layout, or enable a responsive theme to ensure compatibility.

Inserting a link and clicking on it doesn't work?
Check that the wrong protocol is not inserted by mistake (e.g., omission) https://), or the link is blocked by other plugins (e.g., security plugins).

summarize

The Gutenberg editor makes it easy to add all kinds of links and buttons, supports page jumps and styling. MatchingKadence Blocksand other plug-ins that also enable more specialized button effects and interactions.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off