Page Builder blocks
Overview of all blocks available in the moschee.io Page Builder.
The Page Builder offers a range of blocks you can mix and match to build your site.
Layout blocks
Hero block
First impressions matter. Perfect for the page header.
Options:
- Background image or color
- Heading and subtitle
- Call-to-action buttons
- Height and alignment
- Overlay effects
Use cases:
- Homepage
- Landing pages
- Special announcements
Columns block
Create multi-column layouts for complex content.
Options:
- 2, 3, or 4 columns
- Different column widths
- Mobile behavior (stack or side-by-side)
- Gutter spacing
Tabs block
Organize content into tabs.
Options:
- Unlimited tabs
- Title per tab
- Different content per tab
Use cases:
- Opening hours by day
- Different services
- FAQ categories
Accordion block
Expandable sections for FAQs or detailed info.
Options:
- Multiple accordion items
- Title and content
- Default open/closed
- Single or multiple open at once
Use cases:
- FAQ page
- Detailed information
- Structuring long text
Text blocks
Text block
Classic text area with rich formatting.
Options:
- Rich-text editor
- Headings (H2–H4)
- Bold, italic, underline
- Bullets and numbered lists
- Links
- Text alignment
Callout block
Highlighted notices or important info.
Options:
- Types (info, warning, success)
- Icon
- Background color
- Title and text
Use cases:
- Important announcements
- Notices
- Prayer time highlights
Media blocks
Image block
Single images with optional captions.
Options:
- Image from media library
- Caption
- Alt text (accessibility)
- Link
- Size and alignment
Text & Image block
Combined block with text and image side by side.
Options:
- Image left or right
- Text/image ratio
- Background color
- Add a button
Use cases:
- About section
- Present services
- Team members
Interactive blocks
Button block
Call-to-action buttons for links and actions.
Options:
- Button text
- Link (internal or external)
- Style (primary, secondary, outline)
- Size
- Alignment
Newsletter block
Signup form for your newsletter.
Options:
- Heading and description
- Email field
- Confirmation text
- Integration with email service
Social links block
Links to your social channels.
Options:
- Supported platforms:
- YouTube
- Twitter/X
- Telegram
- Icon style and size
- Alignment
Dynamic blocks
These blocks show automatically updated content.
News list block
Automatic display of your news posts.
Options:
- Number of posts (1–10)
- Category filter
- Display style (cards, list)
- "View all" link
Behavior:
- Always shows the latest news
- Updates automatically
- No manual upkeep needed
Event calendar block
Overview of upcoming events.
Options:
- Number of events
- Calendar or list view
- Category filter
- Time range
Behavior:
- Shows upcoming events
- Updates automatically
- Past events are hidden
Special blocks
Cards block
Info cards for structured information.
Options:
- Number of cards
- Icon or image
- Title and text
- Button/link
- Hover effects
Use cases:
- Present services
- List features
- Show the team
Testimonials block
Quotes and endorsements.
Options:
- Multiple testimonials
- Name and role
- Profile photo
- Quote text
- Carousel or grid
Block settings
General settings
Every block shares common settings:
- Spacing top/bottom: Vertical spacing to next block
- Background: Color or image
- Visibility: Hide on certain devices
- CSS class: For advanced customization
Responsive behavior
All blocks are optimized for different screens:
- Desktop: Full layout
- Tablet: Adjusted layout
- Mobile: Optimized mobile view
Best practices
Structure
- Start with a Hero block
- Alternate block types
- Use Callouts for important info
Consistency
- Use consistent colors
- Keep spacing uniform
- Use the same button styles
Performance
- Optimize images before upload
- Avoid too many blocks on one page
- Use lazy loading for images