Using the Page Designer

  1. Home
  2. Support
  3. Using the Page Designer
  4. Getting Started with the Page Designer

Getting Started with the Page Designer

All you need to do is to click, type content or add existing sections, rows, modules and elements, just as you’d do in word editing or presentation applications. You can now easily design what you imagined, in a simple to use, frustration free and clutter free environment.

showing how to start editing a page and edit text.

All you need to Know: Components of the Page Designer

There are three components:

  • Sections
  • Rows
  • Modules

The biggest building block are the sections, inside of which you can add any number of rows; hence, columns. The smallest building block is the module, and each row house any number of modules.

how to add a section, then row, divided into random columns and some modules added in each.

Sections

A section is the overall building block, without which there are no rows and modules. The first thing you do when creating a web page is to add sections.

Three types of sections exist:

  • Regular
  • Specialty
  • Full width

Some notable points:

  • Rows and columns are used mainly in the regular section.
  • If you wish to increase the width a module takes on screen to be screen wide, you may select to work with a full width section which incorporates full width modules.
  • If you’d like to divide your content in creative ways, select a specialty section.

Rows

Once you select a section type and add it in accordance with your web design needs, it’s time to add rows. There’s no limit to the number of rows you can place inside a section. When you select a row, column layout option will pop out automatically for you to select.

Afterwards, you can place any number of modules inside a column layout of your choice.

Modules

Now that you have sections and rows in place, it’s time to add modules (components or elements), which, by the by, are built-in.

All you need to do is to select and add an element – it could be an image or a text block – and you’re set.

Be careful, though. Avoid adding too many elements, modules or images, as they might slow down your page load speed.

 

Get in the Action – Time to Create a Page

You should now be equipped with all the basic tools you need to to build and design a web page. Luckily, you don’t have to start from scratch. Your website usually comes with a number of preconfigured pages you can easily modify to your needs.

But first things first. Lets see how to build from scratch to better understand the tools you may use to get started.

Add a Section

  • Add a section before you add anything to the blank page.
  • Click a blue “+” button
  • Alternatively, hover your mouse pointer over a pre-existing section. A blue button would appear under the section.
  • Clicking the button adds a new section.

Add a Row

Within each section, add any number of rows.

Luckily, there are different layouts of columns to support your choice of row number.

  • There’s a “+” button, colored green. Click it to create a new row.
  • Alternatively, hover your mouse pointer over the row you’ve inserted and click the green “+” button. Column layouts would pop up automatically.
  • Select from the list a column layout.

Add a Module

Inside of each row, add a module or modules. There’s no limit to the numbers of modules a row can house.

Fortunately, with the Page Designer, you can choose from more than 40 different types of modules (or elements).

Some of which include:

  • Images
  • Videos
  • Blurbs
  • Text
  • Call to action elements
  • Galleries
  • Online Store product lists
  • Sliders
  • Many more.

To add a module:

  • Click the gray button with a plus (+) sign. You’ll find the button inside each empty column or after a previously added module.
  • Alternatively, you can hover the mouse arrow over each module and click the plus gray button that shows below it. This would also display a list of settings for the given module.
  • Select a module from the list, and it’d be added automatically to the column.
  • Configure the module using the settings panel.

Here’s how to Configure and Customize Sections, Rows and Modules

There are different ways to configure and customize each section, row and module.

Find a gear icon by hovering your mouse arrow over the settings panel of each module. The panel would become active.

You should come across three tabs:

  • Content
  • Design
  • Advanced

If you intend to type or to copy-paste content, select the content tab. Content isn’t just text – it could be anything from videos, images, labels to links.

If you intend to add some design elements to the selected section, row or module, select the design tab. Here, you can edit spacing, typography, button styles, and many more options.

If you want to customize the look of your element further, head over to advanced tab.

Save Page

On the bottom of the screen, you may find some options to display your page in various resolution previews, to save or load items from your website Layout Library and the, most important, Save button.

Make sure to click on the save button to have your design published to the public view of your website, for everyone to see.

Explore, Design & Create Something Beautiful

Building a website isn’t as hard as it used to be. With Avoori, you have the best tools, working together, helping you to create an amazing website for yourself, your business or online store.

Simple.

Was this article helpful to you? Yes No

How can we help?