Home / Help center / Pre-Built Layouts

Pre-Built Layouts

20 Feb 2024


Add Layout


It is super easy to build website page using the pre-build layouts of Microweber website builder and CMS.

Just click on the "Add Layout" button, which is blue and appears on the screen when you move your mouse, and the entire library of layout blocks will load. Microweber provides you with more than 350 blocks that you can use to build a webpage without the need for coding. Microweber is a no-coding platform for building websites.

https://microweber.com/userfiles/media/default/layouts-of-microweber-big-template.jpg

As you can see, the layouts of Microweber are separated by categories. This is very useful when you are looking for a specific layout for your webpage. For example, the 'Contact Us' section supports 10 or more ready-to-use layout blocks with a contact form in them. In general, the layouts are a combination of text and modules such as video, image, gallery, form, button, or list.

The main categories Microweber contains in the layouts section are: All Categories, Content, Header, Features, Gallery, Testimonials, Ecommerce, Contact Us, Call to Action, Blog, Team, Grids, Misc., Price List, Titles, Text Block, Video, Menu, and Footers.

Edit Layouts

To edit some of the layouts on your website page, you need to check the settings menu of the layout.
Here is how the menu looks like on the image bellow.

https://microweber.com/userfiles/media/default/layout-settings-menu.jpg

This menu is positioned in the top-right corner of your screen within the layout section.


https://microweber.com/userfiles/media/default/layout-settings-menu-microweber.jpg


The menu contains few buttons on it. The first one is the layout settings button, on the second role you have -
Copy layout icon https://microweber.com/userfiles/media/default/copy-layout.jpg then you have another icon https://microweber.com/userfiles/media/default/set-as-presetlayout.jpgis a function used for defined Pre-set Layouts - which means you can save the design of this layout and re-use it again with the same defined settings on it, like color, frons, backgrounds etc. 
Another options related to this menu is the "Move Up" and "Move Down" https://microweber.com/userfiles/media/default/move-up-and-down_1.jpg the position of the current layout. 
And of-cource another function you have is to delete the layout using the button 
https://microweber.com/userfiles/media/default/delete-layout_1.jpgdelete.

Design Layout

We are certain that you want to make changes and customize the design of your layouts. With Microweber's pre-defined layout blocks, you can modify the background color, add images, or upload a video onto them.

Background Tab: You have three options to set a background.

Uploading an image as a background is easy. Simply open the layout settings and upload your picture. You can upload it from different places: your computer, a URL, or even find a picture in the Unsplash media library.

https://microweber.com/userfiles/media/default/background-layout-design.jpg

When you select the + icon, this window will open.

From here, you can specify where you would like to upload your image.
The first option is 'From My Computer, the second one is 'From URL,' followed by 'From Uploaded' where previously uploaded images can be found, and finally 'From Media Library - Unsplash,' which is a free image library.
https://microweber.com/userfiles/media/default/upload-image-link.jpg

Video Background

To upload a Video Backgroun you just need to select the second tab which is "Video".
From the plus icon you can upload a video from your computer.

https://microweber.com/userfiles/media/default/upload-a-video.jpg 

Color Background

To change the background color of your layout block, navigate to the last "Color" tab and select the color you desire from Microweber's color picker. The color changes should be applied immediately.
https://microweber.com/userfiles/media/default/upload-color.jpg

Settings Tab

From the settings tab you can check which layout is this and what kind of modules are part of it. 
https://microweber.com/userfiles/media/default/settings-layout.jpg

https://microweber.com/userfiles/media/default/layout-contains.jpg

To change the current layout, simply navigate to the "Change Layout" tab at the top, and layouts from the same category will be displayed above. If you wish to add a layout from a different category, scroll down to the end of the list and click on the "More Layouts" button.

https://microweber.com/userfiles/media/default/microweber-h-logo-white_26.png

Share this article: