Serene Site Design

Serene Dimensions:

Site logo: 450x142 (max, but can be shorter) (same in header and footer)
Gallery: 3000x1332
Gallery-Mobile: 1536x1364
Text section layout 2 (Left Photo): 642x642
Text section layout 3 (Right Photo): 642x642
Text section layout 4 (Text above two photos and text boxes): 1020x574
Text section layout 5 (Full Width Photo): 3840x1000

Note: Since this photo spans the full width of the page but the height is clamped, the edges are clipped more or less depending on the current width of the page.

Donation: 260x260
List Section - Grid layout: 660x372
List Section - List layout: 470x394
Events: 16/9 aspect ratio
Optimized for event galleries: 2280x1282
Optimized for event grid: 660x372
Optimized for event list: 626x352
Form: 1000 wide, any height

Key Features:

  • Serene features several unique and consistently-repeated design elements: multicolored geometry, hatched borders, gradients which overlay geometry and photos, and intricate hover effects.
    • Gradients can be disabled over photos via Advanced Mode → Design Settings → “Tweak Design” → “Cover Photos with Fading Colors”: disable by unchecking.
  • Serene’s gallery features a new style of navigation and a loading bar indicating when autoplaying galleries will change slides.
    • Advanced Mode → Gallery Section → Settings → “Gallery Section Settings” → “Autoplay Slideshow”: enable by checking
  • The header/navigation is “sticky” and follows as visitors scroll.
  • There are great big buttons that are fun to click.