[Component Name - H1 Bold]
[Short description (1 sentence) - What this component does and when to use it. e.g., This guide will show you how to set up a simple full-width title bar component. Use this component when you want to add a stylized title to the top of a page or section.]
[Insert component screenshot - Tip: To make quick screenshot, you can work on the Live Demo section first, then take a screenshot from the demo]
[Tips - Where does the component looks best. e.g., This component looks best when it is on a page set to use a full-width layout, but will work in contained layouts as well.]
[Insert a newline (<p> </p>) above the divider for easy visual separation]
What This Component Is
Brief explanation in plain language. Focus on what problem this component solves for editors. Avoid technical or design jargon.
[Insert a newline (<p> </p>) above the divider for easy visual separation]
When to Use
Use this component when:
• …
• …
Avoid this component if:
• …
• …
[Insert a newline (<p> </p>) above the divider for easy visual separation]
Video: How to Use This Component (optional)
Use the video below for a quick overview of how this component works, then follow the step-by-step guide to see how each field is completed.
[Insert a newline (<p> </p>) above the divider for easy visual separation]
How to Add This Component
- Open the page in edit mode.
[Insert screenshot] - Place your cursor where the component should appear.
[Insert screenshot] - Select Insert Component.
[Insert screenshot] - Choose the component from the list.
[Insert screenshot] - Complete the required fields.
[Insert screenshot] - Save and preview the page.
[Insert screenshot]
[Insert a newline (<p> </p>) above the divider for easy visual separation]
Live Demo
Insert the component here with the dummy data, or find the same component from other page, copy it's code and paste it in the source code, so it display here.
Other Articles Mentioned in This Tutorial
How to use H tags
How to upload Images