X Builder Basic Training

Starting new project – 01-Start-Pages.

• Open “Local Designs Gallery”, then select X Builder, 01-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.

Note.
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.

Download X Builder Free

Changing the page navigation – 02-Top-Navigation

• In the “Top-Navigation” directory there are ready to use page navigations. There are three subdirectories depending on which side the logo is. To preview how the navigation works, double click on the project, and then run the page preview.
• To add navigation to your project, drag it to the project page.
• Delete the previous navigation.
• Move it to the top of the page.
• Run the preview to see how it works.
• Top navigation uses “theme colors”. To change the project colors, right-click on the color, and then select “Edit color” from the menu. Set a new color in the color editor window. Remember that you can always change colors later. You can also choose a different color for editing in the color editor window. 
• In the Web-Elements/Top-Navigation-Creator/02-Menu you will find a new horizontal menu. You can drag several at once to see how they work. Leave one and delete the rest. Delete the old menu, and move the new menu to the right place. You can also change the size of the menu to better suit your project. You can change the logo and menu in places.

Top-Navigation-Creator –  07-Web-Elements/Top-Navigation-Creator

• select Background-Bar.
• Add a horizontal menu and adjust its size.
• Optionally, you can add an information bar.
• Adjust the size of the page and add it below or above the navigation bar.
• Add your logo. (I will use the example logos available in the “Fake-Logos” catalog.)
• Check how the navigation works. Run preview.
• Save the created project for later.

More tips on how to customize the menu.

• To change the case, select the “Text Tool (T)”, select all the letters except the first one and press Ctrl+W. If the letters were lowercase, they will become uppercase and vice versa. This must be done for each menu item.
• If you want to change the font type in the menu, also use the “Text Tool (T)”. Select the text of the first menu item and then select the appropriate font from the toolbar. When you move your mouse over the new font, you will immediately see the preview. Now click on the selected font to confirm the change. Finally, as usual, you can preview whether everything is working.

Mobile menu.

• In the mobile version, there is still previous navigation. Select the items you want to copy to the mobile version, press Ctrl+C. Switch to the mobile version and paste objects Ctrl+V.
• Delete the old item, leaving only the menu.
• Set everything in the right place.
• Change the color of the menu button because it is not visible. Change the color to white by simply dragging the new color from the color bar.
• I set the logo and menu in reverse order. I will change them in places to make the mobile variant look similar to the main. I keep the Ctrl key pressed while moving the elements. Thanks to this, objects move along straight lines.

Adding a page footer – 03-Footer.

The page footers are in the 03-Footer directory.

• Select one and drag to your project. The footer will appear as a new page.
• Move it to the first page.
  • Click on the side of the footer elements to make sure that a new page is selected.
  • Then press Ctrl+A to select all the elements on the page.
  • Now, while holding down the Ctrl key, move all objects to the first page.
• Do the same with the mobile variant.
• Delete the “block” page, you will not need it anymore.

Note.
If you don’t see two pages at once in the Xara Web Designer window after importing the footer, then “Multiple Page View” is disabled. Turn it on by pressing Shift+Alt+P or selecting Multiple Page View from the Window menu.

Adjusting the page footer.

Modify the footer just like other elements of the project.

• If there are social icons in the footer then add appropriate links by clicking on the icon and then “change“.
• Texts are changed by using the “Text Tool (T)“.
• If there is an additional menu in the footer, you can edit the links and item names by double-clicking the menu (Navigation Bar Properties).
• If the background of the footer is an image, change it by dragging a new image from the windows explorer.
• Remember to make the same changes in the mobile version as well.

Note.
There are various objects in the 07-Web-Elements subdirectory that you can use to change the footer. For example, you can find additional social icons in the icons-mouseover. Double-click on them to open them and then preview the page. Select and copy the ones that suit you

“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.

04-Page-Headers.

• 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 colour of the header to a more suitable.
• 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.

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. 

Premade pages – 05-Web-Pages.

In the “05-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.

Note.
Remember to edit the project in “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.

Adding content – 06-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 06-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 06-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 empty page as usual.

There are hundreds of blocks in X Builder. You can add and modify them according to your needs. 

Content animation.

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. 

Icons.

Most icons you can change by right-clicking on them and selecting “Replace with symbol…” from the menu. 

Note.
Preparing a project with premade pages and blocks become simple and intuitive after preparing the first few pages.

Gallery – 07-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 header’s background and text.
• Add one of the blocks from the 06-Web-Blocks/Gallery directory.
• To create a photo gallery use 07- 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 photo 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.

Note.
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. 

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 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 of 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 “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 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. 

In the project, different types of buttons were used in different imported blocks. To make the website look better I’ll now choose one button and apply it in all places. The buttons are located in the Web-Elements/Buttons directory.

Drag the selected button to the project. You can enlarge or reduce it. Copy it by pressing Ctrl+C. If you want to embed it in the text, select the Text Tool (T), then insert it by pressing Ctrl+V. In my example, I first remove the old button by selecting it and pressing delete, then paste (Ctrl+V). Two more enter characters to lower its position. The same way change buttons in other places of the project.

The contact form button is a little different because it contains special names. The button should have the name “filename=submit.png” and “htmlclass=hide“. Remove the old button, paste the new one, change the text, give the object the appropriate names as the previous button had. 

Buttons do not have any animation set, so I’ll set it in a moment. It is not possible to set animation for a form “send” button, so I skip it. The button on the side of the index page will be useful for later use.