Skip to main content

CMS Tutorials

This section provides step-by-step tutorials for using the ABP React CMS system. Follow these guides to learn how to create, manage, and customize your website content.

Getting Started with CMS​

Prerequisites​

Before starting with the CMS tutorials, ensure you have:

  • ABP React application running
  • Admin access with CMS permissions
  • Basic understanding of web content management
  • Familiarity with the admin interface

Required Permissions​

Make sure your user account has the following permissions:

// Minimum CMS permissions needed
const requiredPermissions = [
  'CmsKit.Pages.Create',
  'CmsKit.Pages.Update',
  'CmsKit.Comments.Update',
  'CmsKit.Menus.Create'
]

Tutorial 1: Creating Your First Page​

Step 1: Access the CMS​

  1. Log in to your admin account
  2. Navigate to Admin → CMS → Pages
  3. Click Create New Page

Step 2: Basic Page Information​

Fill in the basic page details:

  • Title: "Welcome to Our Website"
  • Slug: "welcome" (auto-generated from title)
  • Meta Description: "Welcome page for our company website"
  • Published: Check to make the page live

Step 3: Using the Visual Editor​

  1. Add a Hero Section:

    • Drag the Hero component from the left sidebar
    • Drop it onto the canvas
    • Configure the properties:
      • Title: "Welcome to Our Company"
      • Subtitle: "Building amazing digital experiences"
      • Background Image: Upload or select an image
      • Height: "Large"
      • Show Button: Enabled
      • Button Text: "Learn More"

  2. Add Content Section:

    • Drag a TextBlock component below the hero
    • Configure the content:
      • Content: "We are passionate about creating innovative solutions..."
      • Align: "Center"
      • Size: "Large"
      • Color: "Primary"

  3. Add Feature Cards:

    • Drag a GridBlock component
    • Set columns to 3
    • Add three CardBlock components inside the grid
    • Configure each card with different features

Step 4: Save and Preview​

  1. Click Save to store your changes
  2. Use the Preview button to see how the page looks
  3. Make adjustments as needed
  4. Click Save again when satisfied

Step 5: Publish the Page​

  1. Ensure the Published checkbox is checked
  2. Click Save to make the page live
  3. Visit the page URL to see the final result

Tutorial 2: Building a Landing Page​

Step 1: Page Setup​

Create a new page with:

  • Title: "Product Landing Page"
  • Slug: "product-landing"
  • Meta Description: "Discover our amazing product features"

Step 2: Page Structure​

Build the page using this component hierarchy:

Hero Section
├── Main headline
├── Subtitle
└── Call-to-action button

Features Section
├── Grid layout (3 columns)
├── Feature cards
└── Icons and descriptions

Benefits Section
├── Two-column layout
├── Text content
└── Supporting image

Testimonials
├── Customer quotes
├── Author information
└── Star ratings

Call-to-Action
├── Final message
└── Contact button

Step 3: Component Configuration​

Hero Section​

{
  type: 'Hero',
  props: {
    title: 'Transform Your Business',
    subtitle: 'With our innovative solution',
    backgroundImage: '/images/hero-bg.jpg',
    overlay: true,
    height: 'full',
    showButton: true,
    buttonText: 'Get Started Today',
    buttonLink: '/contact'
  }
}

Features Grid​

{
  type: 'GridBlock',
  props: {
    columns: 3,
    gap: 'large',
    padding: 'loose'
  }
}

Feature Cards​

{
  type: 'CardBlock',
  props: {
    title: 'Easy Integration',
    content: 'Seamlessly integrate with your existing systems',
    image: '/images/integration.jpg',
    layout: 'vertical',
    shadow: 'medium'
  }
}

Step 4: Responsive Design​

  1. Test on Different Screen Sizes:

    • Use browser dev tools to simulate mobile devices
    • Ensure content is readable on all screen sizes
    • Adjust component properties for mobile optimization

  2. Mobile-First Considerations:

    • Stack grid items vertically on small screens
    • Use appropriate text sizes for mobile
    • Ensure touch targets are large enough

Tutorial 3: Creating a Blog Post​

Step 1: Blog Structure​

Create a blog post with:

  • Title: "Getting Started with ABP React"
  • Slug: "getting-started-abp-react"
  • Category: "Development"

Step 2: Content Layout​

Structure the blog post with:

Header
├── Title
├── Author info
└── Publication date

Introduction
├── Hook paragraph
└── What readers will learn

Main Content
├── Section headings
├── Code examples
├── Screenshots
└── Step-by-step instructions

Conclusion
├── Summary
└── Next steps

Related Posts
└── Suggested reading

Step 3: Content Components​

Introduction Section​

{
  type: 'TextBlock',
  props: {
    content: 'ABP React is a powerful framework that combines the best of modern web development with enterprise-grade features. In this guide, we\'ll walk through setting up your first project.',
    size: 'large',
    color: 'muted',
    align: 'left'
  }
}

Code Example​

{
  type: 'ContainerBlock',
  props: {
    content: '```bash\nnpm install @abp/react\n```',
    background: 'muted',
    padding: 'normal',
    borderRadius: 'rounded'
  }
}

Screenshot with Caption​

{
  type: 'ImageBlock',
  props: {
    src: '/images/setup-screenshot.png',
    alt: 'ABP React setup screen',
    caption: 'The initial setup screen after installation',
    width: 'full',
    rounded: true
  }
}

Step 4: SEO Optimization​

  1. Meta Tags:

    • Use descriptive titles
    • Write compelling meta descriptions
    • Include relevant keywords naturally

  2. Content Structure:

    • Use proper heading hierarchy (H1, H2, H3)
    • Include alt text for images
    • Structure content logically

  3. Internal Linking:

    • Link to related pages
    • Use descriptive anchor text
    • Create a logical site structure

Tutorial 4: Managing Comments​

Step 1: Enable Comments​

  1. Navigate to Admin → CMS → Comments
  2. Review comment settings
  3. Ensure comment moderation is configured

Step 2: Comment Moderation​

Review New Comments​

  1. Check the Pending tab for new comments
  2. Read through each comment
  3. Approve appropriate comments
  4. Mark spam or inappropriate content

Comment Actions​

  • Approve: Make comment visible to public
  • Reject: Remove inappropriate comments
  • Edit: Modify comment content if needed
  • Delete: Permanently remove comments

Step 3: Comment Settings​

Configure comment behavior:

// Comment settings configuration
const commentSettings = {
  requireApproval: true,
  allowAnonymous: false,
  maxLength: 1000,
  spamProtection: true,
  autoModeration: true
}

Step 4: User Engagement​

  1. Respond to Comments:

    • Engage with your audience
    • Answer questions promptly
    • Encourage discussion

  2. Moderation Guidelines:

    • Set clear community standards
    • Be consistent with moderation
    • Document your policies

Tutorial 5: Menu Management​

Step 1: Menu Structure​

Plan your navigation hierarchy:

Main Navigation
├── Home
├── About
├── Services
│   ├── Web Development
│   ├── Mobile Apps
│   └── Consulting
├── Portfolio
├── Blog
└── Contact

Step 2: Create Menu Items​

  1. Navigate to Admin → CMS → Menu Items
  2. Click Create New Menu Item

Home Menu Item​

{
  name: 'Home',
  link: '/',
  order: 1,
  isActive: true
}

Services Menu Item​

{
  name: 'Services',
  link: '/services',
  order: 3,
  isActive: true
}

Step 3: Sub-menu Creation​

Create sub-menu items for Services:

// Web Development sub-menu
{
  name: 'Web Development',
  link: '/services/web-development',
  order: 1,
  parentId: 'services-menu-id',
  isActive: true
}

// Mobile Apps sub-menu
{
  name: 'Mobile Apps',
  link: '/services/mobile-apps',
  order: 2,
  parentId: 'services-menu-id',
  isActive: true
}

Step 4: Menu Organization​

  1. Drag and Drop: Reorder menu items visually
  2. Hierarchy Management: Set parent-child relationships
  3. Active States: Control which menus are visible
  4. Mobile Optimization: Ensure mobile navigation works

Tutorial 6: Advanced Page Builder Techniques​

Step 1: Component Nesting​

Learn to nest components for complex layouts:

ContainerBlock
├── Hero Component
├── GridBlock
│   ├── CardBlock
│   ├── CardBlock
│   └── CardBlock
├── TextBlock
└── ButtonBlock

Step 2: Conditional Content​

Use component properties to show/hide content:

{
  type: 'CardBlock',
  props: {
    title: 'Premium Feature',
    content: 'This feature is only available to premium users.',
    showBadge: true,
    badgeText: 'Premium',
    showButton: userIsPremium
  }
}

Step 3: Custom Styling​

Apply custom CSS classes:

{
  type: 'ContainerBlock',
  props: {
    content: 'Custom styled content',
    className: 'custom-theme dark-mode',
    background: 'custom-gradient',
    border: 'custom-border'
  }
}

Step 4: Responsive Behavior​

Configure responsive properties:

{
  type: 'GridBlock',
  props: {
    columns: {
      mobile: 1,
      tablet: 2,
      desktop: 3
    },
    gap: {
      mobile: 'small',
      desktop: 'large'
    }
  }
}

Tutorial 7: Content Templates​

Step 1: Create Reusable Templates​

Save common page layouts as templates:

Landing Page Template​

const landingPageTemplate = {
  name: 'Standard Landing Page',
  components: [
    {
      type: 'Hero',
      props: { /* hero configuration */ }
    },
    {
      type: 'GridBlock',
      props: { /* features grid */ }
    },
    {
      type: 'TestimonialBlock',
      props: { /* testimonial */ }
    }
  ]
}

Step 2: Template Management​

  1. Save Templates: Store frequently used layouts
  2. Template Categories: Organize by page type
  3. Version Control: Track template changes
  4. Sharing: Share templates across teams

Step 3: Template Customization​

  1. Load Template: Start with a base template
  2. Customize Content: Modify text and images
  3. Adjust Layout: Fine-tune component positioning
  4. Save Variations: Create template variants

Tutorial 8: Performance Optimization​

Step 1: Image Optimization​

  1. Use Appropriate Formats:

    • JPEG for photographs
    • PNG for graphics with transparency
    • WebP for modern browsers
    • SVG for scalable graphics

  2. Optimize File Sizes:

    • Compress images appropriately
    • Use responsive image sizes
    • Implement lazy loading

Step 2: Component Optimization​

  1. Lazy Load Components:

    • Load heavy components on demand
    • Use intersection observer for visibility
    • Implement progressive loading

  2. Bundle Optimization:

    • Tree shake unused components
    • Code split by route
    • Minimize bundle size

Step 3: Caching Strategies​

  1. Browser Caching:

    • Set appropriate cache headers
    • Use versioned asset URLs
    • Implement service workers

  2. CDN Integration:

    • Serve static assets from CDN
    • Use edge caching
    • Optimize delivery paths

Tutorial 9: Multi-tenant CMS​

Step 1: Tenant Setup​

  1. Create Tenants:

    • Navigate to Admin → Tenants
    • Create new tenant accounts
    • Configure tenant-specific settings

  2. Enable CMS Features:

    • Set tenant feature flags
    • Configure permissions
    • Set up content isolation

Step 2: Tenant-specific Content​

  1. Content Management:

    • Each tenant has separate content
    • Configure tenant-specific themes
    • Set up tenant branding

  2. Feature Management:

    • Enable/disable features per tenant
    • Configure tenant limits
    • Set up tenant quotas

Step 3: Content Sharing​

  1. Global Content:

    • Share content across tenants
    • Configure content inheritance
    • Set up content syndication

  2. Tenant Isolation:

    • Ensure content privacy
    • Configure access controls
    • Set up data boundaries

Tutorial 10: CMS API Integration​

Step 1: API Endpoints​

Understand available CMS APIs:

// Page management
const pageApi = {
  create: '/api/cms/pages',
  update: '/api/cms/pages/{id}',
  delete: '/api/cms/pages/{id}',
  list: '/api/cms/pages'
}

// Comment management
const commentApi = {
  create: '/api/cms/comments',
  moderate: '/api/cms/comments/{id}/moderate',
  list: '/api/cms/comments'
}

Step 2: Custom Integrations​

  1. External CMS Integration:

    • Connect to external content sources
    • Sync content between systems
    • Implement content workflows

  2. Custom Content Types:

    • Extend CMS with custom fields
    • Create specialized components
    • Implement custom validation

Step 3: Webhook Integration​

  1. Content Events:

    • Page published events
    • Comment moderation events
    • Content update notifications

  2. External Services:

    • Email notifications
    • Social media posting
    • Analytics tracking

Best Practices Summary​

Content Creation​

  • Plan your content structure before building
  • Use consistent naming conventions
  • Optimize for both desktop and mobile
  • Include proper alt text and descriptions

Performance​

  • Optimize images and media files
  • Use appropriate component complexity
  • Implement lazy loading where appropriate
  • Monitor page load times

SEO​

  • Use descriptive page titles and URLs
  • Structure content with proper headings
  • Include relevant meta descriptions
  • Optimize for search engines

Accessibility​

  • Ensure proper contrast ratios
  • Use semantic HTML structure
  • Include ARIA labels where needed
  • Test with screen readers

Maintenance​

  • Regularly review and update content
  • Monitor comment moderation
  • Backup important content
  • Keep components updated

Troubleshooting Common Issues​

Page Builder Problems​

  • Editor not loading: Check browser console for errors
  • Components not rendering: Verify component configuration
  • Content not saving: Check form validation and permissions

Performance Issues​

  • Slow page loading: Optimize images and reduce component complexity
  • Editor lag: Close unnecessary browser tabs and clear cache
  • Memory issues: Restart the browser and clear local storage

Permission Errors​

  • Access denied: Verify user permissions and role assignments
  • Feature not available: Check tenant feature configuration
  • Content restrictions: Review content access policies

Next Steps​

After completing these tutorials, you should be able to:

  1. Create and manage website pages using the visual editor
  2. Build complex layouts with nested components
  3. Manage comments and user engagement
  4. Create and organize navigation menus
  5. Optimize content for performance and SEO
  6. Work with multi-tenant environments
  7. Integrate CMS with external systems

Continue exploring the CMS features and experiment with different component combinations to create unique and engaging content for your website.