Featurettes widget editing guide

Detailed Instructions

1. Backup the Component

Before making changes, copy the entire component code and save it in a plain text editor (e.g., Notepad). If any issues arise after modification, simply paste the backup code back to restore the original content.
⚠️ Always back up before editing!

---

2. Editable Content

You can modify:

• Text (headings, subheadings, body content)

• Images (replace with your own)

• Button links (change the URL destinations)

---

3. Step-by-Step Modification Guide

① Locate the Data Section

Find this part at the beginning of the code (contains editable text):

javascript

const featurettesData = [
    {
        heading: "Facebook Page",
        text1: "To optimize time efficiency...",
        image: "image-url.jpg",
        // ...other content...
    },
    // ...more boxes...
]

② Edit Each Content Box

Each { } block contains settings for one box. Modify only:

• heading: – Main title (e.g., "Contact Us")

• subheading: – Subtitle (leave as "" if unused)

• text1: & text2: – Paragraph text

• image: – Replace with your image URL

③ Edit Buttons (Optional)

Find the link settings inside each box:

javascript

link: {
    text: "Button Text",
    url: "https://..."
}

• Change text: for the button label

• Change url: for the destination link

④ Image Replacement Tips

• Upload images to Blogger first to get a stable URL.

• Ensure URLs start with https:// and end with .jpg or .png.

⑤ Saving Guidelines

• ❌ Do NOT delete commas , or braces { }

• ✅ Only edit content inside quotes ""

• Refresh the webpage to see changes.

---

4. Modification Example

Before:

javascript

heading: "Facebook Page",
text1: "To optimize time efficiency...",
image: "https://...old-image.jpg"

After:

javascript

heading: "Contact Us",
text1: "Chat via Messenger for instant support",
image: "https://...new-image.jpg"

---

5. Troubleshooting

• Image not loading? Check if the URL is correct and uses https://.

• Layout broken? Verify no commas/braces were accidentally deleted.

• Need to restore? Use your backup code.

• Chinese punctuation garbled? Use English punctuation in text fields (e.g., , instead of ，).

⚠️ Only modify text/URLs inside quotes!