IMPORTANT!
   We recommend editing the Responsive Modes, from the Large Screens to Phones, from left to right.

TIP 1: Use More Blocks

   IMPORTANT!
   DO NOT put all texts and images into the Block!

A web page is a set of horizontal rows of content called Blocks or Sections. Your pages can have ten (10)ord more Blocks. You can learn about how to use Blocks).

blocks.jpg

TIP 2: Use Grids

If needed, place texts into Grids. Watch demos on how to use a Grid.

box.jpg

   IMPORTANT!
   The Grid and Box Elements are mobile-friendly.

Cells move automatically under each other. You can read about building Responsive Sites.

reponsive.jpg

TIP 3: Align Elements And Containers

Alignment makes the design mobile-friendly.

Alignment helps to auto-adjust content.

alignment.jpg

TIP 4: Reset Responsive

   IMPORTANT!
   Edit the Responsive Modes from the Large Screens to Phones, from left to right.

You can reset the Mobile Views to start editing if you make multiple changes in a Block.

  1. Select a Block.
  2. Go to the Property Panel to the right.
  3. Scroll the Block Panel down.
  4. Click on the Reset Responsive button.

reset-responsive.png


### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> <b>IMPORTANT!</b> We recommend editing the Responsive Modes, from the Large Screens to Phones, from left to right. </pre></div> ### ## TIP 1: Use More Blocks ### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> <b>IMPORTANT!</b> DO NOT put all texts and images into the Block! </pre></div> ### A web page is a set of horizontal rows of content called Blocks or Sections. Your pages can have ten (10)ord more Blocks. You can learn about [how to use Blocks)](page:89765). !blocks.jpg! ## TIP 2: Use Grids If needed, place texts into Grids. Watch demos on how to use a [Grid](page:17389). !box.jpg! ### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> <b>IMPORTANT!</b> The Grid and Box Elements are mobile-friendly. </pre></div> ### Cells move automatically under each other. You can read about building [Responsive Sites](page:5249). !reponsive.jpg! ## TIP 3: Align Elements And Containers **Alignment makes the design mobile-friendly.** Alignment helps to auto-adjust content. !alignment.jpg! ## TIP 4: Reset Responsive ### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> <b>IMPORTANT!</b> Edit the Responsive Modes from the Large Screens to Phones, from left to right. </pre></div> ### You can reset the Mobile Views to start editing if you make multiple changes in a Block. 1. Select a Block. 2. Go to the Property Panel to the right. 3. Scroll the Block Panel down. 4. Click on the Reset Responsive button. ### !reset-responsive.png! ## Related Articles - [Responsive Sites](page:5249) - [Blocks)](page:18664) - [Grids](page:17389) - [Groups](page:13180) <br>