Welcome to this lesson where we learn how to edit buttons and links on your website.

🔗 Part 1: Understanding Buttons vs Links

Buttons and text links are two of the most powerful tools for navigation and user interaction on your website.

• Buttons are visual call-to-actions like “Learn More” or “Contact Us”.

• Text links are clickable text—usually within paragraphs—that connect different parts of your site.

For example:

• Linking from one blog post to another.

• Creating a call-to-action like “See Our Services”.

🎯 Editing a Button

1. Click the Button on the page.

2. In the left-hand sidebar, find the section labeled “Link.”

3. You can either:

   • Paste a URL directly.

   • Type to search an existing page (e.g., “Practice Areas”).

If the page doesn’t show up:

• Open the page on the front end.

• Right-click and select “Copy Link Address.”

• Then paste the link back into the sidebar.

Alternatively, go to Pages, hover over your target page, click View, right-click, and Copy Link Address.

🎨 Customizing Button Colors

To make your button stand out:

1. Click the button → Go to the Style tab in the sidebar.

2. Under Normal, you can:

   • Change the background color.

   • Adjust the text color.

3. Under Hover, set a different color that appears when someone hovers over the button.

✅ Example: Red background, white text, blue hover state.

🧪 Advanced Styling

You can also:

• Make a button transparent by adjusting Opacity to 0.

• Add a border (e.g., 5px solid black).

• Remove borders or change them as needed.

• Add or remove icons by switching back to the Content tab, scrolling to Icon, and choosing from the Icon Library.

Icons can appear before or after the text—or be removed entirely.

📧 Linking Emails & Phone Numbers

For an email icon or text:

• Use this format in the link section: mailto:youremail@example.com

For phone numbers:

• Use this format: tel:+254712345678 (no spaces or hyphens)

✅ This enables mobile users to call or email you directly with one click.

✍️ Creating Text Links

1. Highlight the text you want to turn into a link.

2. Click the link icon (chain symbol).

3. Paste or search for a URL.

4. Click Apply.

To edit an existing text link:

• Click the linked text.

• Hit the pencil icon to update the URL.

• Click Apply and then Save.

To remove the link:

• Click the linked text.

• Click the unlink icon (broken chain).

🖱️ Tip: You’ll know it’s a link if your cursor turns into a hand when you hover.

✅ Summary

By now, you should be able to:

• Add and edit buttons and text links

• Customize button colors, hover states, and icons

• Create clickable email and phone links

• Link to internal pages or external websites

This enhances user navigation and creates a more engaging, interactive experience on your site.