外国店铺落地页生成器

中文操作，生成英文落地页。最后生成时间：2026/5/26 16:02:53

编辑区

全局样式

品牌主色字体风格按钮样式

hero显示

标题正文按钮文案区块图片

introduction显示

标题正文

services显示

标题正文列表项（一行一个）

advantages显示

标题正文列表项（一行一个）

gallery显示

标题正文区块图片

testimonials显示

标题正文列表项（一行一个）

faq显示

标题正文列表项（一行一个）

businessHours显示

标题正文

contact显示

标题正文列表项（一行一个）

contactForm显示

标题正文按钮文案

Welcome to Your Store

Fill in your store details on the left and click "Generate" to create a custom landing page.

About Your Store

Tell your story here — who you are, what you care about, and why customers trust you.

Services & Products

Your services and products will be listed here once you provide the details.

Add your services in the left panel

Why Choose Us

Your competitive advantages and selling points will appear here.

Add your selling points in the left panel

Gallery

Showcase your storefront, products, and team with photos.

What Customers Say

Customer reviews and testimonials will build trust with new visitors.

Customer feedback will appear here

Frequently Asked Questions

Common questions and answers help customers learn about your business.

FAQ items will appear here

Business Hours

Add your business hours in the left panel.

Contact Us

Add your phone, email, and address in the left panel.

Send an Inquiry

Visitors can use this form to reach out to your business.

复制 HTML 备用方案

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Business Name | Local Business</title>
  <meta name="description" content="Discover Your Business Name, a trusted local business offering quality services.">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: Arial, sans-serif; color: #111827; background: #ffffff; }
    .landing-page { width: 100%; overflow: hidden; }
    .landing-section { padding: 72px 8%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 40px; align-items: center; }
    .landing-section:nth-child(even) { background: #f9fafb; }
    .landing-section-hero { min-height: 72vh; background: linear-gradient(135deg, #2563eb, #060f23); color: white; }
    .landing-section h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; }
    .landing-section p { font-size: 1.08rem; line-height: 1.7; }
    .landing-section ul { padding-left: 20px; line-height: 1.8; }
    .landing-button, .static-contact-form button { display: inline-block; margin-top: 16px; padding: 13px 22px; border-radius: 10px; background: #2563eb; color: white; text-decoration: none; border: 0; cursor: pointer; }
    .section-image img { width: 100%; border-radius: 24px; display: block; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); }
    .static-contact-form { display: grid; gap: 12px; max-width: 440px; }
    .static-contact-form input, .static-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 10px; }
    .static-contact-form textarea { min-height: 120px; }
    @media (max-width: 760px) { .landing-section { grid-template-columns: 1fr; padding: 48px 22px; } .landing-section-hero { min-height: auto; } }
  </style>
</head>
<body>
  <main class="landing-page">
    <section id="section-hero" class="landing-section landing-section-hero">
    <div class="section-copy">
      <h2>Welcome to Your Store</h2>
      <p>Fill in your store details on the left and click &quot;Generate&quot; to create a custom landing page.</p>
      
      <a class="landing-button" href="#contact">Get Started</a>
      
    </div>
    <div class="section-image"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;1200&quot; height=&quot;800&quot; viewBox=&quot;0 0 1200 800&quot;%3E%3Crect width=&quot;1200&quot; height=&quot;800&quot; fill=&quot;%23e5e7eb&quot;/%3E%3Ctext x=&quot;600&quot; y=&quot;400&quot; text-anchor=&quot;middle&quot; dominant-baseline=&quot;middle&quot; fill=&quot;%236b7280&quot; font-family=&quot;Arial&quot; font-size=&quot;42&quot;%3EStore Image%3C/text%3E%3C/svg%3E" alt="Welcome to Your Store"></div>
  </section>
<section id="section-introduction" class="landing-section landing-section-introduction">
    <div class="section-copy">
      <h2>About Your Store</h2>
      <p>Tell your story here — who you are, what you care about, and why customers trust you.</p>
      
      
      
    </div>
    
  </section>
<section id="section-services" class="landing-section landing-section-services">
    <div class="section-copy">
      <h2>Services &amp; Products</h2>
      <p>Your services and products will be listed here once you provide the details.</p>
      <ul><li>Add your services in the left panel</li></ul>
      
      
    </div>
    
  </section>
<section id="section-advantages" class="landing-section landing-section-advantages">
    <div class="section-copy">
      <h2>Why Choose Us</h2>
      <p>Your competitive advantages and selling points will appear here.</p>
      <ul><li>Add your selling points in the left panel</li></ul>
      
      
    </div>
    
  </section>
<section id="section-gallery" class="landing-section landing-section-gallery">
    <div class="section-copy">
      <h2>Gallery</h2>
      <p>Showcase your storefront, products, and team with photos.</p>
      
      
      
    </div>
    <div class="section-image"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;1200&quot; height=&quot;800&quot; viewBox=&quot;0 0 1200 800&quot;%3E%3Crect width=&quot;1200&quot; height=&quot;800&quot; fill=&quot;%23e5e7eb&quot;/%3E%3Ctext x=&quot;600&quot; y=&quot;400&quot; text-anchor=&quot;middle&quot; dominant-baseline=&quot;middle&quot; fill=&quot;%236b7280&quot; font-family=&quot;Arial&quot; font-size=&quot;42&quot;%3EStore Image%3C/text%3E%3C/svg%3E" alt="Gallery"></div>
  </section>
<section id="section-testimonials" class="landing-section landing-section-testimonials">
    <div class="section-copy">
      <h2>What Customers Say</h2>
      <p>Customer reviews and testimonials will build trust with new visitors.</p>
      <ul><li>Customer feedback will appear here</li></ul>
      
      
    </div>
    
  </section>
<section id="section-faq" class="landing-section landing-section-faq">
    <div class="section-copy">
      <h2>Frequently Asked Questions</h2>
      <p>Common questions and answers help customers learn about your business.</p>
      <ul><li>FAQ items will appear here</li></ul>
      
      
    </div>
    
  </section>
<section id="section-business-hours" class="landing-section landing-section-businessHours">
    <div class="section-copy">
      <h2>Business Hours</h2>
      <p>Add your business hours in the left panel.</p>
      
      
      
    </div>
    
  </section>
<section id="section-contact" class="landing-section landing-section-contact">
    <div class="section-copy">
      <h2>Contact Us</h2>
      <p>Add your phone, email, and address in the left panel.</p>
      
      
      
    </div>
    
  </section>
<section id="section-contact-form" class="landing-section landing-section-contactForm">
    <div class="section-copy">
      <h2>Send an Inquiry</h2>
      <p>Visitors can use this form to reach out to your business.</p>
      
      <a class="landing-button" href="#contact">Send Message</a>
      <form class="static-contact-form" onsubmit="event.preventDefault(); alert('Please contact this business by phone or email.');">
    <input aria-label="Name" placeholder="Your name">
    <input aria-label="Email" placeholder="Your email">
    <textarea aria-label="Message" placeholder="Your message"></textarea>
    <button type="submit">Contact by Phone or Email</button>
  </form>
    </div>
    
  </section>
  </main>
</body>
</html>

实时预览

Welcome to Your Store

About Your Store

Services & Products

Why Choose Us

Gallery

What Customers Say

Frequently Asked Questions

Business Hours

Contact Us

Send an Inquiry