Introduction to Website Page Designer Tool

Introduction to Website Page Designer Tool

The Oryx Cloud Website Builder comes with its in-built Website Page Designer Tool. This is a very easy-to-use formatting tool, that lets you edit and customize your website page. You can drag and drop the blocks, update them with new content, image, links, etc in each of the blocks.

Website Page Designer Tool

The Website Page Designer Tool lets you:
  1. Add Content Blocks
  2. Formatting Content Blocks
  3. Customize Images
  4. Additional Formatting Options
  5. Operate additional actions from the Left Panel
    1. Edit and update SEO options for the page.
    2. Edit the HTML code for the page.
    3. Edit images from the Image Manager.

Adding Content Blocks

To add content blocks to your website, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to modify the SEO Options
  3. Click Actions drop-down and click on Edit
  4. Click  Toggle on the left panel
    OR
    Click  Snippet on the right panel

    This displays the pre-built in content blocks 
  5. Drag and drop the content boxes, wherever you need to add a new block
    Dragging Content Block


    Dropping Content Block

    You have successfully dragged and dropped the content block.

Formatting Content Block 

The Formatting Toolbar of Website Page Designer provides the basic formatting options like Bold, Italics, images, texts, symbols, etc.


To format the content block on your website, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page, where you want to format the content block
  3. Click Actions drop-down and click on Edit
  4. Click your mouse on the content or text to be formatted.
    The Formatting Toolbar pane shows up on your left.


  5. Edit and format the required sections using the Formatting Toolbar.
  6. Click   Save Changes on the left side panel.
    You have successfully formatted the page.

Customizing Images

To modify your website images, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to edit and customize images
  3. Click Actions drop-down and click on Edit
    The editing page is displayed.
  4. Click the image to be modified or updated and click Choose Image.


  5. Select and upload the image to be replaced with
    Wait for the image to be uploaded.

    The latest image will be uploaded.
  6. To edit the link for the updated image. do the following:
    1. On the image click 
    2. Enter the details for the Image Data window 

    3. Click OK once the field parameters are added.
  7. To modify the aspect ratio, do the following:
    1. On the image click 
    2. Select the required aspect ratio and click Apply

  8. Click on  Save Changes on the left side panel.

Additional Formatting Options

To use the additional format for your website page, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to modify additional formatting options
  3. Click Actions drop-down and click on Edit
    The editing page is displayed.
  4. Click Add  to use the additional formatting options
    This lets you add the placeholders for paragraphs, images, etc. 

  5. Click  More to get additional options( like moving a block up, down, duplicating, etc.)

  6. Click  to move a block, image, etc


Editing SEO Options

To edit the SEO Options for a website page, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to modify the SEO Options
  3. Click Actions drop-down and click on Edit
    Page Edit

  4. Click on Page Options & SEO Editor on the left side panel


  5. Enter the details for the SEO Parameters and click Done
     
    The Page Options & SEO Editor window is closed.
  6. Click on  Save Changes on the left side panel.

Editing HTML Code

To edit the HTML code for a website page, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to modify the HTML code
  3. Click Actions drop-down and click on Edit 
  4. Click  on the left side panel

    The HTML code of the page is displayed for editing the code
  5. Edit the code to be modified and click OK 

    The HTML code editor window is closed.
  6. Click on  Save Changes on the left side panel.

Editing Images from Image Manager

To edit the Images from Image Manager for a website page, do the following:
  1. In Oryx Cloud Store Manager > Website Builder, click Pages.
    The Custom Pages window is displayed
  2. Select a page to modify the Image
  3. Click Actions drop-down and click on Edit 
  4. Click  on the left side panel

    The Image Manager window is displayed.
  5. Click on Choose File to choose the image and click Upload.


  6. Click on  Save Changes on the left side panel.

    • Related Articles

    • Introduction to OryxCloud Website Builder

      Overview It is a super-fast website builder and takes less than 30 minutes to build your website. It helps you to customize your domain and customize the URL for SEO, thereby building website pages and menus for your website. It also helps you manage ...

    • Introduction to Oryx Cloud

      OryxCloud is an Integrated Sales and Marketing platform to help medium and small service businesses build a website, generate and manage leads, book appointments, sell and receive orders online at an affordable price. Did you know that OryxCloud ...

    • Website Themes: How to change your website template

      Orxy Cloud Website Builder provides a range of pre-built layout pages which are the built-in themes. These are professional page designs and prearranged placeholder blocks. It lets you add content to the blocks, or delete them and the page gives a ...

    • Customizing Website Header and Footer

      Oryx Cloud Website Builder Pages is where the navigation and title or logo of your website is displayed. The header and footer is same throughout all the pages of your website. The header is positioned at the top of your site's website and the footer ...

    • Website Pages: Adding and Deleting Pages to Your Website

      This section guides you through adding pages and deleting pages to your navigation. You can use different types of pre-defined templates as well as build your own templates from scratch. Adding a Page to your Website To add a page to your website, do ...