Website section examples and layouts
Find the right starting point for your next page. Explore native Pineapple layouts, try your colors, and make every section your own.
Mele hero section
Hero · Native
Malia hero section
Hero · Native
Malia about image right snippet
About · Native
Malia offer image right
Classes · Native
Malia CallToAction center column
Call to action · Native
Malia about headline
Hero · Native
Malia offer image left
Classes · Native
Malia about image right
About · Native
Malia portfolio headline
Hero · Native
Malia CallToAction center column simple
Call to action · Native
Malia contact headline
Hero · Native
Malia contact image right
About · Native
Mele testimonial client
Testimonials · Native
Mele about journey quote
About · Native
Mele about story
About · Native
Mele image row poses
Images · Native
Mele hero contact
Hero · Native
Mele faq need help
FAQ · Native
Mele team 6 members
Team · Native
Mele team blog instructor
Team · Native
Yoga about left image
About · Native
Yoga about right image
About · Native
Yoga about center divider icon
About · Native
Yoga about image
About · Native
Yoga cta right full image
Call to action · Native
Yoga cta left image
Call to action · Native
Yoga cta center column
Call to action · Native
Yoga cta shift images
Call to action · Native
Generic services 3card button
Services · Native
Generic services 6cards
Services · Native
Generic services 3card icon
Services · Native
Generic social icons center
Social · Native
Generic social icons left
Social · Native
Generic social icons right
Social · Native
Generic social icons row
Social · Native
Generic social buttons
Social · Native
Generic social simple one
Social · Native
Generic social simple center
Social · Native
Generic social simple row
Social · Native
Generic social text row
Social · Native
Generic footer column
Footer · Native
Generic footer location
Footer · Native
Generic footer simple
Footer · Native
Generic logos column
Logos · Native
Generic logos left column
Logos · Native
Generic logos simple
Logos · Native
Generic features image
Features · Native
Generic privacy centerd
Privacy policy · Native
Generic privacy left
Privacy policy · Native
Generic privacy two column
Privacy policy · Native
Generic pricing background image
Pricing · Native
Generic pricing three column
Pricing · Native
Generic pricing image three
Pricing · Native
Generic pricing two column
Pricing · Native
Generic pricing side price
Pricing · Native
Generic pricing side one
Pricing · Native
Generic pricing three rows
Pricing · Native
Generic pricing side column
Pricing · Native
Generic team 4rounded
Team · Native
Mele features cards
Features · Native
Mele features 3columns
Features · Native
Mele features 4columns
Features · Native
Mele services single
Services · Native
Mele services 3columns square
Services · Native
Kale logos simple
Logos · Native
Kale home features list 4columns
Features · Native
Kale features headline
Headlines · Native
Kale home image left
More layouts · Native
Kale features image right
More layouts · Native
Kale home image left2
More layouts · Native
Kale about headline
Headlines · Native
Kale about team 3members
Team · Native
Kale about image spacer
Images · Native
Kale about values
About · Native
Kale home problem
Headlines · Native
Kale home central headline
Headlines · Native
Kale footer
Footer · Native
Kale testimonials
Testimonials · Native
Kale hero image central
More layouts · Native
Kale features image left
More layouts · Native
Kale home image right
More layouts · Native
Kale features list 6cards
Features · Native
Kale about video
Video · Native
Kale about img left
About · Native
Kale about img right
About · Native
Kale features image left primary
More layouts · Native
Kale features image left list 4items
More layouts · Native
Kale about story 2columns
About · Native
Kale cta bg image
Call to action · Native
Kale faq 2columns simple
FAQ · Native
Kale faq 1column dividers
FAQ · Native
Kale portfolio cards headline
Services · Native
Kale portfolio cards text
Services · Native
Kale testimonials plaing
Testimonials · Native
Kale about team 3members cards
Team · Native
Kale pricing 4 code
Pricing · Native
Kale pricing 3 code column
Pricing · Native
Generic features image right
Features · Native
Generic features image left primary
Features · Native
Zain portfolio cards headline dark
Services · Native
Zain portfolio cards text dark
Services · Native
Zain hero image central
More layouts · Native
Zain features image right
More layouts · Native
Zain features image left
More layouts · Native
Pika hero image left
More layouts · Native
Cecily home problem
Headlines · Native
Cecily headline offer
Headlines · Native
Cecily headline offer right
Headlines · Native
Cecily headline offer left
Headlines · Native
Generic feature image 4table
Features · Native
Elinor footer
Footer · Native
Pricing molo massage table
Pricing · Native
Beauty services list 3
Services · Native
Hero image right generic
Hero · Native
Kale faq 1columns accordion
FAQ · Native
Cms blog recent 3
CMS content · Native
Cms featured products 3
CMS content · Native
Cms directories
CMS content · Native
Cms portfolio
CMS content · Native
Card image full section
Features · Native
Logo marquee template
Logos · Native
Logo marquee template paused
Logos · Native
Pricing productize template
Pricing · Native
Pricing template simple
Pricing · Native
Section simple benefits template
Features · Native
Services list template table
Features · Native
Testimonials template black white
Testimonials · Native
Testimonials template black gradient
Testimonials · Native
Faq template left
FAQ · Native
Simple footer social template
Footer · Native
Pricing single card template
Pricing · Native
Features badges template
Features · Native
Condense checks template
Features · Native
Complex footer social template
Footer · Native
Newsletter footer social template
Footer · Native
Plain testimonial 3 cards
Testimonials · Native
Plain testimonial 1 card
Testimonials · Native
Border testimonial 3 card
Testimonials · Native
Compact testimonial 2 card
Testimonials · Native
Image testimonial column
Testimonials · Native
Border testimonial 3 card simple
Testimonials · Native
Simple team 3 card
Team · Native
Simple left team 3 card
Team · Native
Text logo partners
Logos · Native
Text logo small partners
Logos · Native
Text logo moving small partners
Logos · Native
Text 2 buttons cta
Call to action · Native
Hero image button
Hero · Native
Hero full image button
Hero · Native
Hero full image form
Hero · Native
Hero shift image
Hero · Native
Hero background image medium
Hero · Native
Text 2 buttons image cta
Call to action · Native
Text 2 buttons card cta
Call to action · Native
Text 2 buttons card full image cta
Call to action · Native
Text 2 buttons bacground image cta
Call to action · Native
Text newsletter background image cta
Call to action · Native
Text buttons cta
Call to action · Native
Text buttons card cta
Call to action · Native
Text text buttons cta
Call to action · Native
Icon text left buttons cta
Call to action · Native
Icon text center buttons cta
Call to action · Native
Text email image newsletter
Forms · Native
Text right text email newsletter
Forms · Native
Text text email newsletter
Forms · Native
Text email right newsletter
Forms · Native
Text email right newsletter
Forms · Native
Text contact main newsletter
Forms · Native
Text column image contact
Forms · Native
Text icons items contact
Forms · Native
Text icons cards contact
Forms · Native
List items buttons features
Features · Native
List items buttons bgimage features
Features · Native
Features resons text button 3cards
Features · Native
Features resons text left 4cards
Features · Native
Features 2 resons columns bg image
Features · Native
Features 2 resons stats columns bg image
Features · Native
Features logos bg image
Features · Native
Features 2 icon rows text
Features · Native
Features 4 columns bg image
Features · Native
Features 4 columns bg image 3312
Features · Native
Features 4 columns stats text
Features · Native
Text medium logo partners
Logos · Native
Features 2 bg image card text
Features · Native
Features 2 bg image card text 3316
Features · Native
Section 3 bullets rows benefits
Features · Native
About bold text story
About · Native
About image big text story
About · Native
3 location cards icons
Locations · Native
Locations with icons left
Locations · Native
3 locations with icons
Locations · Native
4 location cards icons
Locations · Native
3 location cards icons text
Locations · Native
2 image location cards
Locations · Native
3 tab location
Locations · Native
3 list image location
Locations · Native
3 bullet list image location
Locations · Native
Process icons 3x text
Process · Native
Process icons outlined 3x text
Process · Native
Process icons outlined square 3x text
Process · Native
Process icons outlined circle 3x text
Process · Native
Process icons list circle 3x text
Process · Native
Process icons list circle 3x text dark
Process · Native
Process number icons line
Process · Native
Process tab tab steps
Process · Native
Process programs images steps
Process · Native
Section 3 bullets rows benefits image
Features · Native
Emerald finance index 01
Hero · Native
Emerald finance index 02
Features · Native
Emerald finance index 03
Pricing · Native
Emerald finance index 04
Call to action · Native
Emerald finance platform 01
Hero · Native
Emerald finance platform 02
Features · Native
Emerald finance platform 03
Features · Native
Emerald finance platform 04
Features · Native
Emerald finance platform 05
Call to action · Native
Emerald finance pricing 01
Hero · Native
Emerald finance pricing 02
Pricing · Native
Emerald finance pricing 03
FAQ · Native
Emerald finance pricing 04
Call to action · Native
Emerald finance about 01
Hero · Native
Emerald finance about 02
About · Native
Emerald finance about 03
About · Native
Emerald finance about 04
Call to action · Native
Emerald finance contact 01
Hero · Native
Emerald finance contact 02
Forms · Native
Emerald finance contact 03
FAQ · Native
Emerald finance footer
Footer · Native
Mint workspace index 01
Hero · Native
Mint workspace index 02
Features · Native
Mint workspace index 03
Pricing · Native
Mint workspace index 04
Call to action · Native
Mint workspace platform 01
Hero · Native
Mint workspace platform 02
Features · Native
Mint workspace platform 03
Features · Native
Mint workspace platform 04
Features · Native
Mint workspace platform 05
Call to action · Native
Mint workspace pricing 01
Hero · Native
Mint workspace pricing 02
Pricing · Native
Mint workspace pricing 03
FAQ · Native
Mint workspace pricing 04
Call to action · Native
Mint workspace about 01
Hero · Native
Mint workspace about 02
About · Native
Mint workspace about 03
About · Native
Mint workspace about 04
Call to action · Native
Mint workspace contact 01
Hero · Native
Mint workspace contact 02
Forms · Native
Mint workspace contact 03
FAQ · Native
Mint workspace footer
Footer · Native
Midnight ledger index 01
Hero · Native
Midnight ledger index 02
Features · Native
Midnight ledger index 03
Process · Native
Midnight ledger index 04
Call to action · Native
Midnight ledger platform 01
Hero · Native
Midnight ledger platform 02
Features · Native
Midnight ledger platform 03
Features · Native
Midnight ledger platform 04
Features · Native
Midnight ledger platform 05
Call to action · Native
Midnight ledger pricing 01
Hero · Native
Midnight ledger pricing 02
Pricing · Native
Midnight ledger pricing 03
FAQ · Native
Midnight ledger pricing 04
Call to action · Native
Midnight ledger about 01
Hero · Native
Midnight ledger about 02
About · Native
Midnight ledger about 03
About · Native
Midnight ledger about 04
Call to action · Native
Midnight ledger contact 01
Hero · Native
Midnight ledger contact 02
Forms · Native
Midnight ledger contact 03
FAQ · Native
Midnight ledger footer
Footer · Native
Sunlit works shared footer
Footer · Native
Sunlit works index hero
Headlines · Native
Sunlit works index plans
Pricing · Native
Sunlit works index tour
Call to action · Native
Sunlit works workspaces intro
Headlines · Native
Sunlit works workspaces shared desks
Services · Native
Sunlit works workspaces private spaces
Services · Native
Sunlit works workspaces included
Features · Native
Sunlit works workspaces tour
Call to action · Native
Sunlit works memberships intro
Headlines · Native
Sunlit works memberships plans
Pricing · Native
Sunlit works memberships included
Features · Native
Sunlit works memberships questions
FAQ · Native
Sunlit works memberships tour
Call to action · Native
Sunlit works visit intro
Headlines · Native
Sunlit works visit enquiry
Forms · Native
Sunlit works visit questions
FAQ · Native
Quiet house shared footer
Footer · Native
Quiet house index hero
Headlines · Native
Quiet house index tour
Call to action · Native
Quiet house index plans
Pricing · Native
Quiet house workspaces intro
Headlines · Native
Quiet house workspaces shared desks
Services · Native
Quiet house workspaces private spaces
Services · Native
Quiet house workspaces included
Features · Native
Quiet house workspaces tour
Call to action · Native
Quiet house memberships intro
Headlines · Native
Quiet house memberships plans
Pricing · Native
Quiet house memberships included
Features · Native
Quiet house memberships questions
FAQ · Native
Quiet house memberships tour
Call to action · Native
Quiet house visit intro
Headlines · Native
Quiet house visit enquiry
Forms · Native
Quiet house visit questions
FAQ · Native
Open day shared footer
Footer · Native
Open day index hero
Headlines · Native
Open day index plans
Pricing · Native
Open day index tour
Call to action · Native
Open day workspaces intro
Headlines · Native
Open day workspaces shared desks
Services · Native
Open day workspaces private spaces
Services · Native
Open day workspaces included
Features · Native
Open day workspaces tour
Call to action · Native
Open day memberships intro
Headlines · Native
Open day memberships plans
Pricing · Native
Open day memberships included
Features · Native
Open day memberships questions
FAQ · Native
Open day memberships tour
Call to action · Native
Open day visit intro
Headlines · Native
Open day visit enquiry
Forms · Native
Open day visit questions
FAQ · Native
Build your page, one useful section at a time
A section is one part of a page: an introduction, your services, a customer story or a next step. Choose a layout for the job you need, instead of replacing your entire website.
From a layout to your own page
- Open a section and compare its phone and desktop previews. Colors and fonts here help you explore a direction.
- Choose Add to Pineapple, sign in and select your website and page. Review the layout in your website’s own colors and fonts before inserting it.
- Replace the sample content, check links and form settings, then save your changes. Reload to check the saved result; publish when you are ready for visitors to see it.
Looking for a complete site? Browse website templates. For editing controls, read the editing guide.