Designing Website using “Page Designer” Editor

Page Designer ePaper is a very important feature of CMS Cloud. With its help, you can change the color of the website according to your mind. To use Page Designer, go to System >> Page Designer. This will bring you something like this:

Page Designer, Page Builder for Epaper CMS Software

As you can see in it, it has many layouts. Header and
Footer layouts appear above and below all pages. But in addition, the rest of the layouts represent different pages.

  • Website Homepage: It represents the homepage of the website which is activated in normal state. That is the default home page. The rest of the homepage can also be changed by going to settings.
  • Static Page: You can change the design of the pages that you create from the page module with this layout.
  • Epaper Archive: We can determine the layout of page showing category wise or date wise editions from this page.
  • Epaper Display: This is a very important layout because through this you determine the color appearance of the page on which the paper is read. There are many widgets which are available only in this layout.
  • Epaper Map: When you click on a news item on the epaper, that news is cut off and opens in a separate model dialog box. With this layout, we can design the same page.

So let’s figure out how to change a layout from a page designer once. So, first of all, we will click in a layout. Here, we click on the website homepage as an example. Now we will see a page like this:

Page Designer, Page Builder for Epaper CMS Software

One important thing: ePaper is built on CMS Cloud Bootstrap अत so you can use classes of boot strap in plenty.

We can add a Row from the Add Row button made in it. There are columns within each row. After creating the row, we can add columns by clicking on Add Column. This produces a grid of boot straps. Each column is accompanied by a money and minus button. By clicking on this button, you can increase and decrease the size of the column. Just as the bootstrap grid is divided into 12 columns, similarly, we can also increase columns to a maximum of 12 units.

Page Designer, Page Builder for Epaper CMS Software

Once you have created the column, then you see the button of Add Widgets in it. Through this we can add widgets etc. On clicking this button, you will see a dialog box like this:

Page Designer, Page Builder for Epaper CMS Software

Once you have created the column, then you see the button of Add Widgets in it. Through this we can add widgets etc. On clicking this button, you will see a dialog box like this:

Page Designer, Page Builder for Epaper CMS Software

Different types of widgets will show different types of options. In the above widget options, you can choose the format, size, etc. of the icons. And after selecting them, clicking on Save will add the widget.

Keep in mind that in the settings of each Row, Column and Widget you will see a field called CSS Classes and Style. With bootstrap classes in it
Also use self-created classes and CSS styles.

Click on the blue button in front of them to open the settings for rows and columns.