Best Website Builder 2022. Create Your Own Website Template

Many popular graphic and mockup editors can change values with the Mouse Scroll or Move. You can do the same as the parameters and properties illustrated with icons. Go to the Property Panel, hover the mouse over the icon near the property input field and move the mouse right to increase the value and the left to decrease it.

Resize Blocks by simply clicking and dragging the bar markers on the top or bottom of any Block. While resizing, you can see the distances before and after the Elements placed inside a Block.

The Grid, Grid Repeater, generally all full-width container elements, and the Text element are always 100% wide. You can see the real 100% in the value field of the Property Panel for the selected element. You can also set the Width value in percent. However, the Height can only be 100 percent.

Drag any grouped element to move the entire Group. You can group elements in a web block and then manipulate them as a single unit by selecting and dragging a group with its inners elements.

You can select multiple elements by clicking and dragging a cursor around the area. You can move, align, duplicate all multi-selected elements together, and convert them into a Group or Grid Repeater if needed.

Grouping is a very common operation that allows combining relative elements and minimizing the load of controlling each element separately while moving, aligning, etc. To group multiple Elements, select area elements or select each by clicking and holding the SHIFT key, and then press the CTRL+G combination.

Page Options are very important for website building, as this list contains the essential operations for the page. You can enable the Grid Columns, use the copy and paste, import and export page operations, and access the Settings. You can access the Page Options from the Right-click Menu by clicking on the Options icon to the top right of the Editor.

You can copy and paste images from the clipboard. This feature is supported only in the Nicepage Desktop applications. You can copy images from any graphic editor and paste them into the Nicepage Editor.

To organize and manage Blocks, you can rename them in the Outline. Select the Page Navigator to the left switch to the Outline Tab. Double-click or select the Rename option in the Options. Change the Block Name to make your process of designing a website more manageable and convenient.

You can measure the Distances between elements in a Block while dragging and aligning by the Smart Magnetic Guides. You see the Distances while measuring the spacing between, Texts, Images, Icons, Shapes, etc., and inside Groups and Grids, and other container elements.

Design your web pages and templates by drag and drop. Enjoy your works while building beautiful websites in a playful manner with no coding. Design and customize your design with our revolutionary freehand Editor. It is intuitive, visual, easy-to-use, freehand, drag-and-drop. Using Nicepage is similar to working in Microsoft PowerPoint, Apple Keynote, and professional design systems like Adobe Photoshop and Adobe XD.

You can change the Content Width by selecting the value from the dropdown list for the Block Width. Select a Block, then go to the Property Panel. In the W (Width) property, click the small arrow to open the dropdown list with options. Click the options to change the Content Width from Boxed to Wide.

Switch Block Positions easily in the Page Navigator. You can also use the Arrows in the Block Sidebar and Content Toolbar to move Blocks up and down in the Editor.

Even though you can move and select grouped elements as a single unit, you can edit every one of them — double-click to access a grouped element and edit its properties in the context toolbar or the Property Panel.

Drag markers for images, texts, and other Elements to resize. You can hold the SHIFT key to resize proportionally and the ALT key for fixing the center. You can follow and snap to the red magnetic guides for precision.

You can add Groups, Shapes, and Images and specify Borders for each side separately. It gives you the additional freedom to realize your creative ideas. Select your Shape, for example. Then go to the Property Panel. Find the Border section, and click the Options Icons. Select the sides for which to show the Border.

May images get their proportions changed during the creative process by zooming and fitting them while building a web page. Therefore, you can reset the proportions to the original by clicking the icon on the Context Toolbar. Click on the Image element, Box, or Grid Cell, and click the Reset Proportions icon.

Use the Smart Magnetic Guides to align and perfect the position of elements in the design. You can see the quick guides while moving an element that snaps to other elements and containers. They are very helpful for the alignment, editing, and transforming elements relative to other elements and containers when you design a website.

The Group Operation creates a Group Element, which allows you to assemble several elements and use them as one piece in the Editor. As a Group, you can do several operations and add actions, including adding Background and moving Elements and applying various animation effects to a Group and its Elements.

The Grid Columns are a useful layout tool for graphic and website editors. They facilitate the positioning and alignment of web design elements on a web page. Grid Columns are visible throughout the page. You can enable them by clicking the CTRL+SHIFT+4 hotkeys or selecting in the right-click mouse menu or Page's and Block's сontext toolbar.

Allow your users to find the required information on your website using the Search Element in the Header. Please note that the Search uses the standard functions of WordPress and Joomla, and to enable it for the HTML website, you will need to write the code.

The menu is the essential navigation element of any website. You can add the menu only to the Header and Footer and create subitems if you have many web pages on your site.

The Footer is a bottom block of any website shared among all web pages containing data common to other pages. The information in footers may include links to pages, posts, or external resources, references, and copyright notices, as well as links to the social accounts, contact and subscribe information, and more.

Insert the Нeadline Element into the Header, which you can use as a Title for your website. You can use the Headline instead of the graphic logo and stylize it as any text in the Editor.

Combine several Header blocks at the top of your pages into one large Header. It allows placing more information than into the classic one-row Header. You can add Menu, Search Field, Shopping Cart, Social Icons, and Contacts into two and more Header blocks. Usually having different colors for the block backgrounds. It is the most popular on eCommerce websites.

Stick the Footer down to the bottom of any web page. You can apply this option to snap the Footer to the screen's bottom if you do not have enough content to push the Footer down.

Use the Header, the top shared Block on website pages. It usually contains a logo, a menu, a call to action, contact information, etc. The Header can overlap the next Block and can be sticky on scrolling.

Insert the Login link to connect to the sign-in page on your website. You can stylize the link if needed.

You can hide and unhide the Header in the Property Panel for a Page by clicking on the gray area beyond the Editor and going to the Property Panel. In addition, you can click on the link to the top right of the Editor near the Options icon to unhide the hidden Header at any time, which is very convenient, quick, and easy to find.

Add your company or personal logo to differentiate your website on the web. The logo is an image that can be in any modern graphic format, including SVG and WEBP.

The Mega Menu is the most popular Layout used in modern menus containing Submenu Items. It allows adding Subitems in Columns, also adding images and other Elements to a Menu. To add a Mega Menu, you can select a Menu in the Header, go to the Property Panel to the right, then switch its Layout to the Mega Menu by clicking the corresponding icon in the Layout section.

Typography sets the styling of all text elements on a whole website. It allows pages and blocks to look in one style, which is essential for a good web design. It helps stylize such elements as Title, Heading, Text, Hyperlink, Button, Quote, and Lists. You can modify the Font, Size, Weight, Color, Indents, and Spacing between text lines and letters. To simplify your work, we have prepared the ready-made Presets.

The Sidebar located to the right or left of the main content area of your website allows your visitors to access various information quickly. Usually, in WordPress Theme or Joomla Templates, you can assign the Sidebar to output widgets or modules, which require WordPress Widget Areas or Joomla Positions that you can add and modify in your website's Administration Panel.

For WordPress and Joomla websites, there are many Login Designs available. To access them, go to the Quick Access Templates Panel. When you open the Login Template, click the blue Plus icon to open the Add Menu. You will see the list of the available designs for the Login Template, which you can start with or use on your web designs.

The Font Schemes are a pair of fonts presented as Font Presets, which you can select for all text on a website. The first font corresponds and is applied to all Headings and Titles of a website, and the second font fits well and is used for all regular texts and paragraphs.

It is recommended to use not more than five main colors throughout the website, making a good web design. It gives your web pages a consistent and professional look. Set five colors for your Color Scheme or select one from ready-made Presets. Nicepage automatically generated more colors with different brightness based on the main scheme. You can also add custom colors as many as you want.

In WordPress and Joomla, Blogs are stylized with the Theme Templates. The Blog Template is used to display briefs of several posts, and the Post Template outputs the content of a single post. You can modify and fine-tune those templates to get a unique look and make the Blog pages consistent with the rest of your web design. Additionally, you can create custom blog templates to assign them to different post categories.

If you have an online store in WordPress or Joomla, you can modify the eCommerce templates with Nicepage. Use the Product List Template to show the product catalog with prices and short descriptions. The Product Details displays the information about each Product allowing your users to choose the quantity, variation, and slide through the Product images. By adjusting the layouts and colors of your eCommerce templates, you can keep them in style with other pages. Similar to other templates, you can create custom eCommerce templates for various Product categories.

People may come to your website for a wrong URL or mistype it in the address bar of a browser. For that case, many websites show the special 404 Not Found page instead of the browser error allowing visitors to stay on your website and continue navigation. You can modify that page for your WordPress or Joomla website with the Nicepage Application by editing the 404 Not Found Template.

Suppose you have a site in WordPress or Joomla, and you need your users to add content via a website's Administration. However, the standard login page offered by your content management system is not consistent with the rest of your website design-wise. In that case, you can stylize the layout of the Login Template in the Nicepage Application giving the Login Page a consistent but at the same time unique look for your particular website project.

Export HTML Websites, WordPress Themes, and Joomla Templates from the Nicepage Application for Windows or Mac OS. Share projects with other users and show screenshots to your existing and potential customers.

If several people work on a website, there is a problem that someone with less experience can break design or content. Or you are a design studio, and you want to prevent your customers from modifying the website and want to do the editing only by yourself. To separate editing capabilities, you can use the User Roles, like Design Editor or Content Editor. To add an editor in WordPress, you can register a new user and assign a needed role.

The White Label feature allows you or your company to re-brand websites and themes produced with Nicepage for WordPress and Joomla to appear like yours. It will build your brand credibility, strengthens your customer loyalty, saves you a lot of time and money. Many design studios and digital marketing agencies enjoy having the White Label option. Having your branding on plugins helps build awareness and a stronger sense of trust with your customers.

Add the Cookie Popup compliant to the EU's General Data Protection Regulation requirements. The law regulation on data protection and privacy is required for the European Economic Area. It also addresses the transfer of personal data outside the European Union. You can enable the GDPR Cookie Popup in the Site Settings.

On the Dashboard, it is required to instantly see the published web pages. Therefore, there is an icon, that indicated this. If you publish a website you will see the blue Globe icon to the left of the website's project name.

You can protect your website pages with a password. For this, click on the gray area around the Editor to select the Page. Go to the Property Panel, and scroll down to the Password Protection section. Set your password. Preview. Accessing such a page will open Password Protection.

Use the Social Share tab in the Page Settings to specify how your web page will be presented in the social media. You need to enter the Title, Description, Image, and URL.

Add your website's Favicon in the Site Settings. The modern browsers usually have the Favicon support and display it in the browser's address bar, tabs next to the page's name, and the bookmark list. Usually, the Favicon has the ICO format.

The Custom Domain is a unique name that you have purchased for your website or brand from one of the popular registrants. You can assign this Custom Domain to one site designed instead of the auto-generated subdomain name by the Nicepage Online Builder. You can set the Custom Domain online in the Site Settings and the Export Dialog in the Desktop Applications.

You can see and set the custom domain and subdomain for a website hosted on Nicepage in the Site Settings. For that, click on the Site Settings icon or the link on the Top Bar. In the General Tab, enter the required date corresponding to your website.

Connect your sites to Google Analytics, Google Tag Manager, and Google Optimize Container to gather data and get a deeper understanding of your site audience. You get all analysis tools for free and in one place for any personal or business tasks.

Nicepage Desktop Application for Windows or Mac OS enables you to design checkout pages for WooCommerce in WordPress and VirtueMart in Joomla. To edit the Checkout template, go to the Templates Panel of the Quick Access on the right and select the Checkout Template. Edit the template's design. When exporting your theme for your eCommerce website, you will export the Checkout Template with all the other eCommerce templates.

Show the latest Products on any page of your website, including the home page. You can specify layouts and choose the number of posts to display.

Present the featured Product on your website pages. You can modify the layout and stylize the product block to give it a unique look.

Add the Shopping Cart icon to your website header, which will show the number of added products to the cart and allow you to open the checkout page with a click.

The Shopping Cart Template is a concluding page of any online store. It should include product summary, quantity, price, totals, other essential data, and most importantly, proceed to checkout button.