Eyeva Sofas Block - Perfect Piece Widget¶

Description¶

The Eyeva Sofas Block Perfect Piece Widget displays featured products or collection highlights, designed for sofa/furniture themes with attractive layouts.

Page Builder Name: Perfect Piece Block | PapaThemes Eyeva Sofas

Version: 1.0.1

Features¶

• ✅ Feature product showcase
• ✅ Rich media support
• ✅ Inline content editing
• ✅ SCSS styling
• ✅ Responsive design
• ✅ Call-to-action buttons

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Perfect Piece Block | PapaThemes Eyeva Sofas widget to the page
3. Widget displays with default content

2. Configuration¶

Block Content¶

Block Structure¶

<div class="eyeva-sofas-perfect-piece">
    <div class="perfect-piece-container">
        <div class="perfect-piece-content">
            <span class="perfect-piece-subheading">
                Featured Collection
            </span>
            <h2 class="perfect-piece-heading">
                Find Your Perfect Piece
            </h2>
            <p class="perfect-piece-desc">
                Discover our curated selection...
            </p>
            <a href="/collection/" class="perfect-piece-cta">
                Shop Now
            </a>
        </div>
        <div class="perfect-piece-image">
            <img src="featured-sofa.jpg" alt="">
        </div>
    </div>
</div>

Layout Options¶

Image Position¶

• Left (image - content)
• Right (content - image)

Content Alignment¶

• Left aligned
• Center aligned
• Right aligned

Styling¶

Widget uses SCSS:

.eyeva-sofas-perfect-piece {
    padding: 80px 0;

    .perfect-piece-container {
        display: flex;
        align-items: center;
        gap: 60px;

        @media (max-width: 800px) {
            flex-direction: column;
        }
    }

    .perfect-piece-content {
        flex: 1;
    }

    .perfect-piece-image {
        flex: 1;

        img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }

    .perfect-piece-heading {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 20px;

        @media (max-width: 550px) {
            font-size: 32px;
        }
    }

    .perfect-piece-cta {
        display: inline-block;
        padding: 15px 40px;
        background: var(--primary-color);
        color: white;
        text-decoration: none;
    }
}

Responsive Behavior¶

Inline Editing¶

1. Enable Edit Mode
2. Click on content area
3. Edit:
4. Heading
5. Subheading
6. Description
7. Button text
8. Save changes

Usage Examples¶

Featured Collection¶

Subheading: New Arrival
Heading: Find Your Perfect Piece
Description: Explore our latest collection of handcrafted sofas, designed for comfort and style.
CTA: Shop Collection
Link: /collections/new-arrivals/
Image: Lifestyle sofa image

Sale Promotion¶

Subheading: Limited Time Offer
Heading: Up to 40% Off
Description: Don't miss our biggest sale of the year. Premium sofas at incredible prices.
CTA: Shop Sale
Link: /sale/
Image: Sale campaign image

Brand Story¶

Subheading: Our Craftsmanship
Heading: Made to Last
Description: Each piece is handcrafted by skilled artisans using the finest materials.
CTA: Learn More
Link: /about-us/
Image: Craftsmanship photo

Image Guidelines¶

Recommended Specs¶

• Resolution: 1200x800 minimum
• Format: JPG, WebP
• Aspect ratio: 3:2 or 16:9
• File size: < 500KB optimized

Content¶

• High-quality product photos
• Lifestyle imagery
• Consistent style with brand

Best Practices¶

Content¶

• Strong headline that grabs attention
• Clear value proposition
• Compelling CTA

Design¶

• High-contrast CTA button
• Whitespace balance
• Quality imagery

UX¶

• Single clear action
• Mobile-friendly touch targets
• Fast loading images

Notes¶

1. Image quality: Use high-quality images
2. Text contrast: Ensure text is readable
3. CTA prominence: Button should stand out
4. Mobile: Test layout on mobile
5. Load time: Optimize images
6. A/B testing: Test different headlines