Elementor-Ready Hospital Website
Complete Section → Column → Widget breakdown for Shree Aarogya Hospital. Each widget maps directly to an Elementor panel control.
⚙ Global Design Settings — Elementor → Site Settings
Primary
#1A6B8A
Accent
#F4A827
Dark Text
#1A2B3C
Body Text
#555555
Light BG
#F4F7FA
Soft Blue
#EAF4F9
Playfair DisplayH1, H2, H3 headings · Bold
DM Sans / LatoBody text · 16px · Regular
Border RadiusCards → 12px · Buttons → 50px
ContainerMax-width: 1200px · Boxed
01
HERO — Above the Fold
2 Columns · 60/40
Full Height
Sticky Topbar
Section
Topbar Strip
BG: #1A6B8A · Height: 44px
Column
Full Width — Center Aligned
100%
Section
Hero Main Content
2 Col · 60/40
Column
Left — Copy
60%
Column
Right — Hero Image
40%
In Elementor → Section Settings → Layout tab, set Minimum Height to 90vh for a full-screen hero feel. Set Content Position to Middle for vertical centering. Enable Entrance Animation: Fade In Up on both columns with 0.2s delay difference.
02
ABOUT US — Who We Are
2 Columns · 50/50
BG: White
Section
About Content
ColumnLeft — Image + Badge50%
ColumnRight — Text Content50%
03
SERVICES — Our Specialities
3 Columns × 2 Rows
BG: #F4F7FA
SectionServices Header1 Column · Centered
ColumnCenter Aligned100%
SectionService Cards — Row 1 (3 cards)
ColumnCardiology Card33.33%
ColumnMaternity Card33.33%
ColumnOrthopaedics Card33.33%
SectionService Cards — Row 2 (3 cards)
ColumnNeurology Card33.33%
ColumnPaediatrics Card33.33%
ColumnGeneral OPD Card33.33%
For all 6 Icon Box widgets: apply an Elementor Motion Effect → Fade In Up with 100ms delay increments per card (100ms, 200ms, 300ms...) for a cascading reveal on scroll.
04
WHY CHOOSE US — Trust Signals
2 Columns · 50/50
BG: White
SectionWhy Choose Us Content
ColumnLeft — Team Image50%
ColumnRight — Features + Stats50%
05
TESTIMONIALS — Patient Stories
3 Columns
BG: #EAF4F9 Gradient
SectionTestimonials
ColumnHeader — Center100%
ColumnTestimonial 1 — Priya Sharma33.33%
ColumnTestimonial 2 — Rohit Mehra33.33%
ColumnTestimonial 3 — Suresh Nair33.33%
For mobile: Set the 3-column testimonial section to 1 column on mobile. Better option — use Elementor Carousel or Slides widget (Pro) to make testimonials swipeable on touch devices.
06
HOW IT WORKS — Booking Process
5 Columns
BG: White
Step Numbers
SectionProcess Steps
ColumnSection Header100%
ColumnStep 120%
ColumnStep 220%
ColumnStep 320%
ColumnStep 420%
ColumnStep 520%
ColumnCTA Below Steps100%
For the connecting dashed line between steps: Add a Divider widget inside each column EXCEPT the last, style it as 2px dashed #D0E5EE, rotate 0°, and position it absolutely at the top-center of the icon. Alternatively use a single HTML widget with CSS flex + ::after pseudo-element for cleaner control.
07
CALL TO ACTION — Conversion Banner
1 Column · Full Width
BG: Deep Blue
SectionCTA BannerBG: #1A6B8A · Background Image: medical cross pattern @ 5% opacity
ColumnCenter Content100%
08
BLOG — Health Insights
3 Columns
BG: #F4F7FA
SectionBlog Cards
ColumnBlog 1 — Heart Health33.33%
ColumnBlog 2 — Child Vaccination33.33%
ColumnBlog 3 — Burnout33.33%
09
CONTACT — Appointment Form
2 Columns · 45/55
BG: White
Elementor Form
SectionContact
ColumnLeft — Contact Info45%
ColumnRight — Booking Form55%
10
FOOTER — 4 Column + Bottom Bar
4 Columns
BG: #1A2B3C Dark Navy
SectionFooter Main — 4 ColumnsBG: #1A2B3C
ColumnCol 1 — Brand25%
ColumnCol 2 — Quick Links25%
ColumnCol 3 — Services25%
ColumnCol 4 — Contact + Social25%
SectionFooter Bottom BarBG: #111D2B · Border-top: 1px solid #2C4A5F
ColumnCopyright50%
ColumnPolicy Links50%
✦
UX DETAILS — Elementor Settings Reference
Pro + Free Widgets
| Feature | Elementor Setting / Location | Value / Notes |
|---|---|---|
| Sticky Header | Theme Builder → Header Template → Advanced → Motion Effects | Enable Sticky: Top. Show on scroll-up. Shrink height on scroll via Custom CSS. |
| WhatsApp Float Button | Elementor → Global Widget OR floating-button plugin | Fixed bottom-right · #25D366 BG · White icon · 56px circle · z-index 9999 |
| Back to Top | Elementor Settings → Experiments → Floating Buttons OR Custom JS | Show after 400px scroll · Smooth scroll · Arrow icon · #1A6B8A BG |
| Scroll Animations | Each widget → Advanced → Motion Effects → Entrance Animation | Fade In Up · Duration 800ms · Delay increment 100ms per card |
| Mobile Responsive | Responsive Mode toolbar (bottom of Elementor editor) | Check all sections at Mobile 375px. Set 3-col → 1-col on mobile for Services, Testimonials, Blog. |
| Form Notifications | Form Widget → Actions After Submit → Email | Send to appointments@hospital.in + user confirmation email. Success message in green. |
| Custom CSS (Global) | Elementor → Site Settings → Custom CSS | Add hover transitions, pill badge styles, floating badge positioning, step connector lines. |
| Counter Animation | Counter Widget → Number → Starting Number / Duration | Start: 0 · Duration: 2000ms · Prefix/Suffix as needed · Trigger on scroll into view |
| Image Optimization | Before upload to Media Library | Convert all images to WebP · Max 120KB per image · Add descriptive Alt Text |
| Appointment CTA (Nav) | Header Template → Nav Menu → Custom Button | BG #F4A827 · White text · "Book Appointment" · Rounded · Links to #contact section |
📋 WIDGET LEGEND — Elementor Widget Panel Names
| Widget Used | Elementor Panel Name | Free or Pro |
|---|---|---|
| Heading (H1–H5) | Heading | Free |
| Text / Paragraph | Text Editor | Free |
| Button | Button | Free |
| Image | Image | Free |
| Icon Box (with title) | Icon Box | Free |
| Icon List (checklist) | Icon List | Free |
| Social Icons | Social Icons | Free |
| Spacer | Spacer | Free |
| Divider | Divider | Free |
| Google Maps | Google Maps | Free |
| Footer nav links | Nav Menu | Free |
| Number counter | Counter | PRO |
| Booking form | Form | PRO |
| Sticky header | Theme Builder → Header | PRO |
| Blog cards | Posts (dynamic) or manual Icon Box | PRO or Free manual |
| Testimonial slider | Slides or Carousel | PRO |