Lesson 1. Quick start.
Starting a new project – /Start-Pages.
- Open “Local Designs Gallery”, then select X Builder, /Start-Pages folder.
- Double click on the selected Start Page.
- Drag the bottom edge of the page to change its height.
- Change the header background graphic – drag a new image from the windows explorer.
- Change the text – use the “Text tool (T)”.
- Run a preview page.
In the free version, the first two files are available in each of the subdirectories. There are many more in the full version. I encourage you to check what is available in the full version.
Lesson 5. “About us” page.
“About us” page.
- Add navigation to repeating objects, select navigation, and then select from the menu: “Arrange→Repeating Object→Repeat on all pages“.
- Create a new page.
- Edit the name of the page. Click on the page name in the “Page & Layer gallery” window, then type the name of the page.
- Double click on the menu and link the menu position with the “about us” page.
- Edit the mobile version of the menu in the same way.
- Click on the “About Us” page, select the folder “04-Page-Headers” from the “Local Designs gallery” and then select one of the available headers. The header will appear as a new page.
- Click on the empty space on the new page and then press Ctrl+A to select all elements.
- Move the objects to the very top of the index page while holding down the Ctrl key.
- Switch to the mobile version and do the same. Click on the side of the page, press Ctrl+A, move all objects to the top of the index page.
- Now switch back to the main variant, click on the block page and delete it because it is no longer needed.
Customize the page header.
- Click on it while holding down the Ctrl key, then press the F6 key to use the transparency tool.
- Set the transparency to about 75%. While holding down the Ctrl key, click on the photo of the header and then change its height by dragging the lower handle. I will also change the color of the header to a more suitable one.
- The same changes should be made in the mobile variant.
- Change the title of the page to “About Us”.
- Preview the website to see how it works.
- You can also delete the transparent rectangle. To do this, right-click on the rectangle and choose “website variants -> delete from all variants” from the menu.
Lesson 6. Page “Services”.
- Create a new page. This time it will be a “service” page. Click on the new page in the “Page & Layer gallery” window.
- Change the name of the page to “services”.
- On the following pages I will use the same page header as on the page “About us”, so I will copy it to the newly created page.
- Switch to the page “About us”, select the header, and press Ctrl+C.
- Now return to the “service” page and press Ctrl+Shift+V. The header will be pasted in the same place as it was on the “about-us” page.
- Do the same in the mobile version.
- Adjust the header to your needs.
- To change the background drag a new graphics from windows explorer and drop it in the place of the header.
- Using the text tool change the text of the header.
- Edit the menu. Double-click the menu and check “Site Navigation Bar“. The menu will be automatically updated when a new page is added.
- Check if everything works by running the preview of the website.
After checking, I will change the background to another one. I drag the new image again, and I change the text color to dark, to make it more visible on a bright background.
Lesson 7. Using premade pages.
Premade pages – /Web-Pages.
In the “/Web-Pages” subdirectory there are premade web pages. To preview any of those pages in a new window, double-click on one.
- If you want to add it to your project, drag it to your project window. In this example, I will add the first page. To do this, select the index page as active, then drag a new page from the “1st” directory. The new page named index-a has been created.
- Change the height of the index page by dragging the bottom edge of the page and changing its size, so that new elements will fit in
- Move all elements from the index-a page to the index page:
- Then select the index-a page. Press Ctrl+A to select all objects and
- Move everything up.
- Switch to the mobile variant and repeat the steps.
- Delete the index-a page
- Adjust the position and look of the copied objects.
Remember to edit the project in the “Multiple Page View” mode. This mode displays all pages at once. If it is not enabled, you can activate it by right-clicking on the grey area next to the page sheet and selecting “Multiple Page View” from the menu.
Lesson 8. Using blocks.
Adding content – /Web-blocks
In this lesson, I’ll add new content to the “About us” page.
- Set the “about-us” page as the active page
- Drag and drop new content from /Web-Pages/About-us directory.
- Select all elements on the newly created page and move them up.
- Do the same in the mobile variant.
- Delete the empty page.
- Increase the height of the “about-us” page to make space for additional elements
- In the /Web-Blocks directory, there are building blocks. These are premade parts of the pages designed for quick use.
- In order to add a block, you need to drag it to your project. Then select all objects and move to the appropriate place.
- Remember about the mobile version.
- Delete the empty page as usual.
There are hundreds of blocks in X Builder. You can add and modify them according to your needs.
Some objects in a block or entire blocks may have different types of animation or may not have any animation at all.
- To change animations of an object, right-click on it and select “Web animation…” from the context menu.
- In this example, I add a fade-in animation to the selected photo.
- After each change, run preview to check which objects require additional editing.
Most icons you can change by right-clicking on them and selecting “Replace with symbol…” from the menu.
Preparing a project with premade pages and blocks become simple and intuitive after preparing the first few pages.
Lesson 9. Gallery - using Web-Elements.
Gallery – /Web-Elements.
In this lesson – the “Gallery” page.
- Create a new page
- rename it to “gallery”.
- Double click on the menu and link the page with the menu position or check “Site Navigation Bar”.
- Copy the page header from another page.
- Change the header’s background and text.
- Add one of the blocks from the /Web-Blocks/Gallery directory.
- To create a photo gallery use /Web-Elements/Photo-Placeholders directory. In Photo-Placeholders there are hundreds of objects divided according to shape, orientation, corner rounding, frame, and shadow. Only the first 2 elements are available in the free version.
- Drag and drop a selected photo. Turn on the “Guides” layer of the page, select the photo and drag it with the right mouse button to duplicate. (it is possible to duplicate multiple objects at the same time).
- Make a copy for mobile variant by right-clicking on the selected objects and choosing “Website variants, Share with all variants“.
- After copying the photos you need to adjust their position and size in the mobile version. The “Guides” layer will be useful, so make it visible.
- Add photos to placeholders – drag them from windows explorer.
- Set up pop-up photos after clicking, select all the images, right-click, and select “Web properties” from the menu.
- In the Image tab and check the Pop-up photo. Enter the width of a pop-up image. By clicking the options button you can set additional parameters.
You can also set basic parameters such as corner rounding or frame width. After selecting all the photos, edit the corners by choosing the “Rectangle tool (M)” and the thickness of the frame by choosing the width from the toolbar.
Lesson 10. Contact page - adding a contact form.
Create a new page as before. Copy the header. This time, however, I’ll create a little different header. Select the Fill tool (G) and then click on the background of the header while holding down the Ctrl key. Change the fill to “Flat fill“. An additional element of this header will be a businesswoman photo. Add it to the project by drag and drop from the windows explorer window. Adjust the size. Adjust the background color of the header to the background color of the photo. Select the black rectangle of the header background by clicking on it with the Ctrl key. Open the Color Editor window. Using the color picker move over the photo trying to set the right color. Now using the transparency tool to set the transparency for the photo. Drag the mouse from the left to the right edge. Now double click on the horizontal line to set additional transparency points. Set the points just before the woman figure. Set the transparency for the outer points to 100% and for the inner points to 0%.
Now more content on the page. Select it from the Web-page/Contact directory. As before, drag it into the project, delete the menu, then select the newly created page and select all the elements by pressing Ctrl+A, move them. Do the same in the mobile version.
To change the map, click on the map object and then click the “change” button. In the new window, enter the appropriate address, select the “Share” icon, “Embed map” tab, click on the “Copy HTML” button, click on the “Insert” button. Changes are not replicated to the mobile variant, so you must remember to do the same in the mobile version.
Now a contact form. It is located in the Web-Blocks/Form directory. Drag it to the project. The form contains three pages. The first one is an HTML form, the second one is a page to which the user is redirected after successfully sending a message, the third one sees when an error occurs. Move the form to the contact page.
Note. This contact form works only on a server that supports PHP. PHP is required to send messages, so the whole form will work after copying the exported page to the hosting server.
Because I set the “Site Navigation bar” in the menu, menu items were created for form-success and form-error pages. You need to remove them.
Add navigation for new pages. Select the navigation, then select from the menu “Repeat on All pages” or press the key combination: Ctrl+Shift+Alt+R. Because there was a menu bar on the page, now is hidden under the navigation background. Select it and press Ctrl+F to move it to the top of the layer. Copy the header from the contact page. Select it, press Ctrl+C, go to the next page, and press Ctrl+Shift+V to paste in the same place. In the same way, paste it on the next page. Do the same in the mobile version.
The repeatability of the footer on all pages can be set by selecting “Repeat on All pages” from the menu or by pressing the key combination: Ctrl+Shift+Alt+R.
In the field “Recipient email” enter the email address to which the form should send messages. The address should be from a domain configured on the hosting server. I’ll export the website to HTML and then copy it to my hosting server using FTP client to test it.