Footer Links Widget¶

Description¶

The Footer Links Widget beautifies and improves footer link display. Automatically fixes relative links and supports inline editing.

Page Builder Name: Footer Links | PapaThemes Beautify

Version: 1.0.0

Features¶

• ✅ Automatic relative link fixing
• ✅ Inline content editing
• ✅ Organize footer columns
• ✅ Customizable styling

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Footer Links | PapaThemes Beautify widget to footer region
3. Widget displays with default links

2. Configuration¶

Link Groups¶

Each Link¶

Relative Link Fix¶

Widget automatically fixes relative links:

function fixRelativeLinks(widgetElement) {
    const elements = widgetElement.querySelectorAll('[data-editable-content] a');
    const regex = /^(?!\/|\w+:\/\/).*/;

    elements.forEach((el) => {
        const href = el.getAttribute('href');

        if (regex.test(href)) {
            el.setAttribute('href', `/${href}`);
        }
    });
}

Examples¶

Footer Structure¶

<div class="footer-links">
    <div class="footer-column">
        <h4 class="footer-heading">About Us</h4>
        <ul class="footer-list">
            <li><a href="/about">About</a></li>
            <li><a href="/team">Our Team</a></li>
            <li><a href="/careers">Careers</a></li>
        </ul>
    </div>
    <!-- More columns -->
</div>

Inline Editing¶

1. Enable Edit Mode
2. Click on footer link area
3. Edit:
4. Column titles
5. Link text
6. Add/remove links
7. Save changes

Usage Examples¶

Standard Footer¶

Column 1: Shop
- All Products
- New Arrivals
- Sale
- Brands

Column 2: Support
- Contact Us
- FAQs
- Shipping
- Returns

Column 3: Company
- About Us
- Blog
- Careers
- Press

Column 4: Legal
- Privacy Policy
- Terms of Service
- Cookie Policy

Simple Footer¶

Column 1: Quick Links
- Shop All
- About
- Contact
- FAQ

Column 2: Policies
- Privacy
- Terms
- Returns

Styling¶

CSS Structure¶

.footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    padding: 20px;
}

.footer-heading {
    font-weight: bold;
    margin-bottom: 15px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 10px;
}

.footer-list a {
    color: inherit;
    text-decoration: none;
}

Responsive¶

Desktop¶

• Multiple columns side by side
• Full navigation visible

Tablet¶

• 2-3 columns
• May wrap

Mobile¶

• Stacked columns
• Or accordion style

Best Practices¶

Organization¶

• Group related links
• Limit to 5-7 links per column
• Most important links first

Naming¶

• Clear, descriptive text
• Consistent capitalization
• Avoid jargon

Links¶

• Use relative URLs when possible
• Test all links
• Check for broken links

Notes¶

1. Relative links: Widget auto-fixes but use /path/ format
2. Link testing: Test all links after editing
3. Mobile: Test responsive layout
4. SEO: Footer links important for SEO
5. Accessibility: Ensure links have good contrast