Moto4 has simplified the website creation and editing process. Depending on the desired content type for your website page, you can choose the needed block type.
There are 4 block types:
So, in editor, to add a Block, you need to click the corresponding button. On an empty page this button looks like this:
If the page has some content already, you might choose where to add the new block by clicking the Add Block in the desired place:
You can learn more about Block types in this article. Let's dive deeper into each type to see their differences and better understand what it is made for.
Regular
Regular blocks don't have any icon in the top right corner while adding them - be it a Blank Block:
... or a pre-designed Block:
Regular Blocks include a standard set of elements that you can manage (add, edit, duplicate, remove) inside Block Sections (Top, Middle, Bottom).
The structure of the Regular Blocks is defined by columns per each section. You can divide each section into several columns (up to 6) by clicking the Add Column button to the left/right of the existing column:
By default, each Block's section (Top, Middle, Bottom) has one column.
Managing columns can be done by clicking the "More actions" button - you can copy a column to another section, paste it to this section from another section, or remove:
By dragging column delimiter you can resize the columns:
Even though Regular Blocks has a strictly fixed structure (Top, Middle, Bottom sections divided into columns with elements inside these sections), you can make some elements positioned differently by using the "Absolute Position" button in Element's More actions menu:
Flex
Flex Block is a complete opposite to Regular Block - it allows you to Add elements with absolute positioning, not being pinned to any Block Section (Top/Middle/Botton) as it is in Regular Blocks:
... just drag the element as you wish:
... but don't forget to adjust the position for different devices separately:
So, you build a completely custom Block, without limitations. However, you should pay attention to testing the page on different device types to make content shown properly and visually attractive, with satisfactory UX.
Collection
Collection Block Type is based on the Regular Block Type, so it has Top, Middle and Bottom sections:
What distincts Collection Block is that its Middle Section is best suitable for managing many items at once. Basically, you create one Item in the Middle Section of a Collection Block (add elements, configure them), and the rest of items will have the same set of elements. For example, there's one item in a Collection, and it has three elements inside of it: at Image, a Text, and a Button. Once we click the "Add Item" button, a new Item will be created with the same set of elements:
This is the result of creating a new item - elements set is the same :
Each Collection Item's Content can be different, but the layout (set of elements) is the same. If you delete an element from one item in the collection, it will be automatically deleted from every item as there are the same layouts of items.
Collection Settings are accessible by clicking the corresponding button on hover of a Collection Item :
Collection Settings include the following main tabs:
- Layout is where you can set the Collection to be shown all screen width), configure the number of Collection Items on the screen (Max items in row), Alignment, Gap.
-
Modes is where you choose Collection Appearance type: Default (a list of items), Slider, or Tabs.
Default Mode shows all items at the same time, few items per row.
Slider shows one or few items, the rest are accessible as slides.
Tabs Mode lets you create one or several Collection Items separated into different Tabs:
Each Tab has its own Items, but the set of Items is the same for all the Tabs:
So, if you remove some Element from an Item at one Tab, it will be removed from the other Items at this Tab and even other Tabs!
List
List Block Type is developed for the ease of creating long lists of items. It is based on the Regular Block Type, with the only one difference: the Middle Section of the List Block Type is just a list of Items and adding items is performed in a single click:
You can add Elements to all List Items at once:
Same as in the Collection Block Type, you can manage Items' content separately, but the set of Elements is the same for all of the Items. So, if remove an Element from one Item, it will be removed from all of the List Items at once.
Comments