Towards the #1 Marketing Tool

Sign In

Website Page

To manage the website pages, you can access the sidebar menu Cms Website -> Website Pages

1. Add Page

To add a page, you only need to enter the name of the page and the type of the page you want to add.

Note!

For your information, except for the Other type, you can only add one page per type. Additionally, for the Other page type, it will not automatically appear in the website page menu and needs to be configured in the Doc Links

2. Website Builder Tools

When you first add a website page or enter the page edit action, you will be directed to the Website Builder page.

In this initial version, we have provided page templates and many components to help you customize the appearance you want. Here is a list of what we provide:

A. Page Templates
  • Home Page - Home Page with Hero User Login
  • Home Page 2 - Home Page Version 2 with colorful hero section
  • Pricing - Dynamic Pricing Page template based on subscription pricing data
  • About Us - Template with several examples of other component applications
  • Contact
  • Term Page - Simple template for creating terms and conditions pages and similar content
B. Blocks and Components
  • Blog Content - Placeholder code that dynamically fetches the latest blog posts and components
  • Button - Static component to create buttons with icons and colors
  • Card - Static component to create cards with icons and text
  • Card 2 - Static component to create cards with icons, text, and checklists
  • Client - Static component to display "Our Client / Our Partners" with logos
  • Countdown - Static component to create countdown cards
  • Countdown 2 - Static component to create countdowns with colored backgrounds
  • Csrf - Placeholder code to include CSRF functionality, useful when creating forms
  • Faq - Static component to create FAQ sections with collapsible answers
  • Header - Placeholder code to include the website header template with all its functionalities
  • Header 2 - Placeholder code to include the header-2 template with all its functionalities
  • Hero - Static hero component with image and login form
  • Hero 2 - Static hero component with background color and buttons to registration and login pages
  • History Step - Static component to create a timeline or step-by-step process display
  • Icon - Static component to create icon descriptions or feature descriptions
  • Icon 2 - Static component to create icon descriptions or feature descriptions horizontally
  • Loader - Placeholder code to include website loader component
  • Login Form - Static login form component with embedded CSRF code
  • Dynamic Pricing - Placeholder code to include dynamic pricing components from the database
  • Static Pricing - Static component to create pricing displays not tied to database data
  • Scripts - Placeholder code to include JavaScript template components
  • SubTitle - Static component to create subtitles
  • Tabs - Static component to create tabbed displays with images
  • Testimonials - Static component to create user testimonial displays
  • Text Section - Static component to create text descriptions with sample images
  • Title - Static component to create titles

3. Using the Website Builder

  1. Using Templates

    Select the template you want to use, then drag and drop it into the website editor's body.

  2. Changing or Adding Images
    • Changing Images

      Double-click on the image you want to change. A pop-up will appear allowing you to select or upload a new image to replace the existing one.

    • Adding Images

      In the Basic Section, select the image component and drag and drop it into the body, then adjust the image as needed.

  3. Changing or Adding Text
    • Changing Text

      Double-click on the text you want to change.

    • Adding Text

      Drag and drop the Title / Subtitle component from the Block Section, or choose the Text component from the Basic Section.

  4. Manipulating Classes

    Note!

    Before using this method, you need to know what classes are used in each section to avoid confusion or incorrect usage.

    To manipulate the classes, you need to access the page in the source code view. Select the section or component you want to change, and use the available features to adjust the class.

  5. Adjust HTML Tag Attributes

    Click on the component or layer you wish to modify, then go to the Settings option and update the available attributes.

  6. Arrange Page Layout

    Go to the Layer Manager option, where you will see the various arrangements of the layout or design you have created.

  7. Apply Additional CSS Customization

    Go to the Modify Styles option and enter your CSS code.

  8. Edit via Code Editor

    Click on the Edit Code option, then modify the code in the pop-up code editor. Click save once you have finished adjusting the code.