How to use different web page elements while building websites Website Builder

The Gallery Images can have similar palettes and colors and sometimes it is hard to distinguish them on a web page. You can easily add the spacing between the Gallery Images by increasing the Gap in the Property Panel. Select your Gallery then go to the Property Panel to the right and drag the slider of the Gap Propperty.

The Gallery in Nicepage is a transformable Element, which you can easily convert to the Carousel, Slider, Slider With Thumbnails, and Slider With Captions. Select any Gallery in a Block and go to the Property Panel. Click the Layout Property Icons to apply the Layout Change.

The Image Lightbox option allows you to enlarge a Gallery Image to preview it in detail. This option is available for the Grid Layout and enabled by default. However, if you need to disable or reenable this Property, you can select a Gallery on your web page then go to the Property Panel. Click the Imag Style link, then check the Image Lightbox checkbox on the next Panel.

As with any other Text on your web page, you can change the font parameters for the Gallery Texts, both Heading and Text, separately. For that, select a Gallery, then in the Property Panel to the right,-lick the Text Style Link. In the next Panel, modify the Texts' properties and see the preview of your changes in the Editor. Please note that you need to have the Gallery Text, which you need to enter in the special fields.

The Gallery looks more attractive on your web designs if it interacts with your visitors. Therefore, you can add it in the form of the Animation On Hover for your Gallery Images. Select your Gallery, then go to the Property Panel. Click the Image link in the Animation section, and choose the Animation On Hover Effect for your Gallery Images on the next panel.

You can add the Animation On Hover for the Gallery Texts, making your web designs even more interactive and attractive for website visitors. Select the Gallery. If the Gallery Layout has texts, go to the Property Panel. Add Texts and then click the Text Layer link in the Animation section. Click one of the Presets and customize the Animation On Hover Effect if needed.

For the Gallery Layouts like Caption and Slider, you can add the Heading and Text describing the Gallery Image. When your visitors click on the Image Lightbox Mode, you can see these texts in the Image Lightbox Mode. To show Gallery Image Texts, select the Gallery and then change its layout to show texts. Go to the Property Panel, then enter texts into the special fields.

The Gallery Images can have the Radius, making your Galleries look more interesting and diverse. To enable the Radius for Gallery Images, select the Gallery, then Image Style in the Property Panel. Please drag the Radius Slider or enter its value to rouse the corners of the Gallery Images.

You can easily change the number of Columns for the Grid Repeater used in a Block. Click on the blue Plus icon at the right side of the Grid Repeater, then select the number of columns from the drop-down list. You can choose both incrementing and decrementing numbers.

Similar to adding Columns, you can increase and decrease the number of Rows by clicking the blue Plus icon at the bottom of the Grid Repeater. After you see the drop-down list, you can select the number of required rows. You can choose both incrementing and decrementing numbers.

The Property Panel allows you to modify Element Properties. For example, you can change the Columns and Rows in one place for the Grid Repeater. To change the Columns and Rows, go to the Property Panels, and drag the corresponding sliders to change the property values.

Using the Item Gap Property in the Property Panel, you can change the distance between Grid Repeater Elements. Select the Grid Repeater, go to the Property Panel, find the Item Gap property, and drag its slider to change the distance between the Grid Repeater Items.

You can convert multiply selected Elements to a Grid Repeater. It speeds up the development of Blocks like Features, Team, Testimonials, etc. Select multiple Elements, then click on the blue Plus icon on the left border. Next, select the Grid Repeater layout.

Using the Grid Repeater Element, you can apply different colors to its Items and contained Elements. For that, go to the Property Panel and switch All Items to Item in the "Apply Style To" section. Then set the Colors required for your web design idea

Carousel Sliders are very popular in modern web design, and usually, Carousel Items have the same layout and item sets. In Nicepage, you can easily convert any Grid Repeater into a Carousel by clicking the switcher option in the Property Panel.

Similar to the Group Element, you can animate Grid Repeater Items on Group (Item) Hover. At that, you can also Add the Hover Animation Effect to Items, and they will work together. Go to the Property Panel, down to the Animation On section, set both Hover, and Group Hover Animation Effects if needed.

Apply form presets, adding blocks with the most popular forms in a click. You can add a contact, subscription, and other form presets and customize blocks easily after the insertion.

Select from more than 10 form field types while building your Forms, including input, text area, radio button, selection, and all other popular used on the modern forms.

You can easily change the position of the form inputs and other elements by dragging and dropping them into the predefined positions in the Form Builder. You can also transform the form fields horizontally and vertically, as well as put them in a row while positioning in the Editor.

You can add the Accept Terms Checkbox, a special checkbox for the Accept Terms option on a Form. You can insert this checkbox together with wording, which you can modify.

Use Google's advanced risk analysis and adaptive challenges engine to keep your websites away from abusive activities, allowing regular users to fill your forms without limitations.

Build contact forms with the best free website creator. It is easy-to-use with no coding to create forms for collecting feedback, leads, or data for mailing lists or registrations and sign-ups on your website. You can create custom contact forms in minutes with drag and drop, customize them visually, and instantly preview them in all responsive modes for mobile devices.

Nicepage uses the standard HTML Form element to collect the data from the fields. The Form is always linked to a special script that receives the input data and tells the server what to do with the data entered in the fields: send an email, add the data to the database, etc. To implement sending emails from the server, Nicepage provides the following SUBMIT options: Google Sheets, URL, Send Email with PHP Script, Contact Form 7 (WordPress), Joomla Form (Joomla), MailChimp, and Email only for the Online.

You can easily change the Layout of the Contact Form from placing form inputs and fields from vertical to horizontal and vice versa. Select the Contact Form, go to the Property Panel, and find the Layout section. Click the Layout icons to place inputs in a row or one under another on a web page.

Together with the dragging and dropping fields in the Contact Form Builder, you can use the Context Toolbar arrows to move fields. Select A Form in the Editor, select a Field, then click on the Up or Down Arrows to move the Form Field accordingly.

You can easily change the Spacing both to the Form Inputs and Fields and Between Fields. Select a From in a Web Block then go to the Property Panel. Scroll down to locate the Spacing Section. Drag the Sliders or use the input fields at them to change the Spacing Values.

In the General Form Settings, you can specify the Name, After Submit page action, and the messages. Select a Form, then go to the Property Panel To the right. Clock in the Settings link. Edit the Name, After Submit, Success, and Failure Messages on the Settings Panel.

The Form Inputs can have various Styling, and now it is popular to have inputs only with the Bottom Border marking the Input Field. You can stylize the Font, Fill, Border, and more for the Contact Form Element added to a Web Page. Select a Form then in the Property Panel click on the Input Style link. Change the look of the Form Inputs previewing your changes in the Editor.

Since you can enable Labels to be shown together with the Form Inputs, you can easily modify them in the Property Panel. Select your Form, go to the Property Panel, change the Layout the show the Labels. Click the Label Style link to go to the Label Style Panel. Modify the Labels.

The Button is usually one of the main elements in web design. That is why it is also very important on your website's Contact Forms. To modify the Button, its Position, and Alignment, select a Contact Form, then in the Property Panel, click the Button Style link. Modify the Fill, Border for all Button States, Alignment, and more on the Button Style Panel.

You can use the Email Submit for the Contact Form Element added in the Nicepage Applications for Windows or Mac OS. You can quickly get a working HTML website or fully-functional prototype to present to your visitors or potential customers using this feature. Select the Contact Form Element in the Editor, click on the Submit link, and choose the Email in the list. Please enter the Email under the list. This option works only for websites published to the Nicepage Hosting.

In marketing, Leads refer to contacts with potential customers, that potentially lead to your sales. Now you can gather user data from Contact Forms and review your site Leads to improve your marketing results.

Add Calculation Formulas to the Contact Form Element, which allows you to use formulas to get Costs, Spaces, Squares, etc., and send quotes from website pages to your customers.

You can make Contact Form Fields dependent, allowing you to hide or show Fields while selecting Items with Values in other ones. For example, you can show the Dropdown for the selected option in the Radios.

You can build Multi-Step Contact Forms to create questionnaires, complicated Order Forms, etc., and communicate with users and potential buyers more informatively, interactively, and, therefore, productively.

Building a Contact Form with the Rating Field allows you to identify the level of satisfaction from your customers or visitor, giving feedback on your overall marketing performance.

Illustrate the selection choices in your Contact Forms by adding the Image Gallery Checks. You can specify the selection type by choosing either Checkboxes for multiple options or Radio Buttons for a single one.

Scroll several images in one click. Add interaction with your visitors to a website. You can allow customers to study your portfolio gallery in a modern way.

Use Repeated Carousel containing various elements like images, icons, texts, buttons, etc., to rotate on your site web pages. There are also Carousels for Posts and Products.

Your Gallery Carousel may require to fit its images in different ways. You can use the original width of the Gallery Images and have the Fixed Width. To set the Width for the Gallery Carousel Images, select a Gallery, and then go to the Property Panel. If your Gallery does not have the Carousel layout, switch to the Carousel. Then scroll down the Panel to the Width section, and change the Gallery Image Width to fit your web design perfectly.

Blogs are an integral part of many modern websites, and many users use the Carousel layout to out Blog Posts. It creates interaction and has a more attractive presentation. You can add the Posts in the Posts Panel of the Quick Access and then add the Post Carousel Element to any Block. You can test the Carousel by clicking the Arrows and Indicators in the Editor and Previews.

Ecommerce websites use various layouts. You can use the Product Lists to attract visitors' attention, and the interaction in the form of a Product Carousel may be interesting for your website visitors. You can add the product carousel from the Add Menu and add the Product List Element to the blank Carousel element.

You can switch between six layouts for the Language Element while building a website. Select the Language Element in the Header or Footer and change the Language Layout in the Property Panel.

To begin with the Accordion element, you can add one of the designer-mage design blocks. Click on the Add icon in the Quick Acces, then scroll down to the Accordion and FAQ section, click on the Accordion and choose any design you like. It is more convenient, as you have some pre-edited content, unlike the blank Accordion element added by default.

You can easily add and move the Accordion tabs in several ways. Click the plus in the sidebar to add a new tab. You can click on the move up and down option in the mouse Right-click Menu or click the corresponding arrow icons in the Context Toolbar. Also, you can press the hotkey combination of CTRL plus Up Arrow up and Down Arrow.

The Accordion Tabs can contains different set of website elements. You can add any of them to any tab. Open the tab. Click the Add icon in Quick Access to open the Add Panel and choose any element. You can move, align, and delete the added element.

The Accordion is popular in modern web designs. Therefore, you can stylize it to fit your layout. Click the Accordion element in a Block, go to the Property Panel, and click on the links to access the panels to adjust corresponding properties.

You can enable and choose a preset for the Accordion Tab Icon. Also, you can change its size, similarly to all other icons. Select the Accordion element, go to the Property Panel, and click on the Icon link. In the Panel, modify the style, color, size, etc.

Color is one of the most important factors in web design. And it is also crucial for the Accordion Tabs. Choose the element, go to the Property Panel, and click on the Colors link. You can add the Fill, Border, and Radius to Accordion Tabs and Items.

You can also start with the Table element easily. And you can use the designer-made blocks containing the Table element. Click on the Add icon in the Quick Access Bar, go down to the Table section, select the Table, and any Table design in the opened panel.

Similar to any other element having columns and rows, you can change the number of the Table's Columns and Rows by dragging the corresponding sliders in the Property Panel for the selected Table element.

Like all compound elements in Nicepage popular in web design, you can stylize the Table per your layout. Click the Table element in a Block. Go to the Property Panel to the right, and click on the section links to go to the panels to modify the corresponding Table properties.

You can manage Columns and Rows in the selected Table element. Then click on the Table in your Block to select. Click on the Move option in the mouse right-click menu or the Context Panel more options icon to move Columns to the left and right and Rows to the top and bottom.

You can easily add and move the Tabs for the FAQ element like the Accordion. Click on the plus icon in the side panel to add a tab. Click the arrow icons in the Context Toolbar, press the hotkey of CTRL plus Up Arrow up and Down Arrow, or choose the Move Up or Move Down options in the Right-click Menu.

Since the FAQ element is built on the Rich Text in its items, you can edit text like in the Rich Text Element (RTE), which allows editing of the long-read articles. Modify all text and heading elements directly, similar to text editing in MS Word.

Like the Accordion, the FAQ is popular in web designs, and you can edit its styles to adjust for your design requirements. Click the FAQ element in your Block. Go to the right of the Property Panel, and then click on the links to open the corresponding panels with properties.

Since Color is crucial in web design, it is one of the key factors in the styling of the FAQ Tabs. Click the FAQ element to select, then go to the Property Panel. Open the Colors Panel by clicking on the link. You can change the Fill, Border, and Radius of the FAQ Tabs and Items.

Like the Accordion, you can choose and modify the presets for the FAQ Tab Icon. You can adjust the size, like for any other icon. Select the FAQ element, then go to the Property Panel. Click on the Icon, and in the Icon Panel, edit the style, size, color, etc.