Summary

  • Overview
  • Video Lesson
  • Edit Grid
  • Edit Grid Cells
  • Responsive Modes

Overview

Nowadays, most websites consist of Blocks. The Grid helps to structure the Content in a Block. The vast benefit of Grids is in automatically simplifying the Mobile Views or the Responsive Modes setting. Your websites must be mobile-friendly.

responsive.jpg

Video Lesson

More video lessons

Edit Grid

You can choose any Grid layout and modify its dimensions. Resize the Grid by clicking and pulling the blue resize markers. You can resize the Grid proportionally following the red diagonal guide.

Copy and Paste

  1. Right-click the Block marker and select the Copy option from the Context Menu.
  2. You can also press the "CTRL + С" hotkeys.
  3. Select the destination Block.
  4. Right-click and select Paste from the Context Menu or
  5. Press the "CTRL + V" keys to paste.
  6. Align the Grid.

Delete Grid and Block

  1. Select the Grid and
  2. Click the "Delete Grid" button in the Property Panel, or
  3. Press the DELETE key.

Edit Grid Cells

  1. Select the bigger cell to the left.
  2. Change the Image Fill to Color Fill in the Property Panel.
  3. Copy this cell by dragging it over another, holding the CTRL or AlT key.

Swap Cells

Select a cell and drag it over another without pressing any keys. Please note the Cell Content is also moved.

Resize Cells

Resize the cell by pulling the bar markers on the cell borders.

Hide Cells on Devices

You can hide the cells for Tablets or Phones. Enable the Hide On property in the Right Panel. Then click the Tablet and Phone icons to hide this cell for those Mobile Views.

Responsive Modes

Change the cell fill to white by selecting the color in the small toolbar above the cell. Change the background image of the first cell. As stated before, grids' massive benefit automatically makes your web Block and pages mobile-friendly.

Preview

Click the Preview. Click the Device Icons in the Quick Preview.

Learn More

## Summary - Overview - Video Lesson - Edit Grid - Edit Grid Cells - Responsive Modes ## Overview Nowadays, most websites consist of Blocks. The Grid helps to structure the Content in a Block. The vast benefit of Grids is in automatically simplifying the Mobile Views or the Responsive Modes setting. Your websites must be mobile-friendly. !responsive.jpg! ## Video Lesson <iframe width="600" height="330" src="https://www.youtube.com/embed/B-r_QVXHJ5U" title="Video Lesson: Grid Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> [More video lessons](page:1318) ## Edit Grid You can choose any Grid layout and modify its dimensions. Resize the Grid by clicking and pulling the blue resize markers. You can resize the Grid proportionally following the red diagonal guide. ### Copy and Paste 1. Right-click the Block marker and select the Copy option from the Context Menu. 2. You can also press the "CTRL + С" hotkeys. 3. Select the destination Block. 4. Right-click and select Paste from the Context Menu or 5. Press the "CTRL + V" keys to paste. 6. Align the Grid. ### Delete Grid and Block 1. Select the Grid and 2. Click the "Delete Grid" button in the Property Panel, or 3. Press the DELETE key. ## Edit Grid Cells 1. Select the bigger cell to the left. 2. Change the Image Fill to Color Fill in the Property Panel. 3. Copy this cell by dragging it over another, holding the CTRL or AlT key. ### Swap Cells Select a cell and drag it over another without pressing any keys. Please note the Cell Content is also moved. ### Resize Cells Resize the cell by pulling the bar markers on the cell borders. ### Hide Cells on Devices You can hide the cells for Tablets or Phones. Enable the Hide On property in the Right Panel. Then click the Tablet and Phone icons to hide this cell for those Mobile Views. ## Responsive Modes Change the cell fill to white by selecting the color in the small toolbar above the cell. Change the background image of the first cell. As stated before, grids' massive benefit automatically makes your web Block and pages mobile-friendly. ## Preview Click the Preview. Click the Device Icons in the Quick Preview. ## Learn More - [Responsive Design with Nicepage](page:5249) - [Menu](page:9801) - [Box](page:13180) - [Block](page:18664) - [Video Tutorials](page:1318) - [YouTube Channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh) ##