📖 Everly User Guide

Complete documentation for your wedding website template

📋 Table of Contents

1. Getting Started

Requirements

Installation

1
Download the template ZIP file from your purchase
2
Extract the ZIP file to your desired folder
3
Open index.html in your browser to preview
💡 Tip: Use VS Code with the "Live Server" extension for live preview while editing.

2. Customization Guide

Changing Couple Names

Search for "Emma" and "James" in all HTML files and replace with your names. Key locations:

Changing Wedding Date

Update the date in these locations:

<!-- In index.html hero section -->
<p class="wedding-date" data-date="2026-06-15">JUNE 15, 2026</p>
⚠️ Important: The data-date attribute controls the countdown timer. Use format: YYYY-MM-DD

3. Pages Overview

File Description
index.html Home page with hero, about preview, gallery, and more
about.html Your love story and timeline
wedding-details.html Events, venues, hotels, travel info, FAQ
gallery.html Photo gallery with lightbox
blog.html Wedding journey blog posts
blog-single.html Individual blog post template
contact.html Contact information and form
rsvp.html RSVP form for guests

4. Changing Colors

Edit css/styles.css and modify the CSS variables at the top:

:root {
    --color-pink: #FFC0CB;      /* Primary accent */
    --color-gold: #FFD700;      /* Secondary accent */
    --color-green: #A7C957;     /* Success/highlight */
    --color-dark: #222222;      /* Text color */
    --color-white: #ffffff;     /* Background */
    --color-light: #f8f9fa;     /* Light sections */
    --color-pink-light: #FFE4E1;/* Light pink */
    --color-gold-light: #FFF8DC;/* Light gold */
}
💡 Tip: Use Coolors.co to find beautiful color combinations.

5. Replacing Images

Recommended Image Sizes

Location Recommended Size
Hero background 1920 x 1080 px or larger
Gallery images 1200 x 800 px
Blog thumbnails 800 x 600 px
Couple photos 600 x 800 px (portrait)
Wedding party 400 x 400 px (square)

Image Optimization

For faster loading, optimize images before uploading:

6. Countdown Timer

The countdown timer automatically calculates days remaining until your wedding.

How to Set Your Date

In index.html, find this line and change the date:

<p class="wedding-date" data-date="2026-06-15">JUNE 15, 2026</p>

The data-date attribute must be in YYYY-MM-DD format.

7. Forms Setup

The template includes HTML forms for Contact and RSVP. To make them functional, you need a backend service.

Option 1: Formspree (Free)

1
Sign up at formspree.io
2
Get your form endpoint URL
3
Update the form action in your HTML: 
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

Option 2: Netlify Forms

If hosting on Netlify, add netlify attribute to your form:

<form name="rsvp" netlify>

8. Deployment

Free Hosting Options

Service Features
Netlify Free SSL, form handling, custom domain
Vercel Fast deployment, free SSL, custom domain
GitHub Pages Free hosting for static sites

Deploy to Netlify

1
Go to netlify.com and sign up
2
Drag and drop your template folder to deploy
3
Set up your custom domain (optional)

9. Frequently Asked Questions

How do I add more gallery images?

In gallery.html, copy one of the existing gallery item blocks and paste it, then update the image source.

Can I remove sections I don't need?

Yes! Simply delete the entire <section>...</section> block for any section you want to remove.

How do I change fonts?

Edit the Google Fonts link in the <head> section and update the font-family in css/styles.css.

The countdown shows wrong date?

Make sure the data-date attribute is in YYYY-MM-DD format and the date is in the future.