Collection of website elements for
Xara Web Designer and Xara Designer Pro X
X Builder Structure
If you don’t need the whole X Builder you can buy only part of it.
Below is the whole structure of the product and links to individual subproducts.
How to use X Builder in Xara Web Designer
X Builder Installation
- Unzip the xbuilder.zip file.
- Move the X Builder folder to the preferred location.
- Open “Local Designs gallery” and click the “Disc designs…” button.
- Navigate to X Builder folder and click the “Add” button.
Drag & Drop blocks
When you want to start a new project, use the “Start Pages” category. Start Pages are the first pages of the project. They usually include a header with a logo and top navigation.
Go to Local Designs gallery ⇒ X Builder ⇒ Start Pages and drag & drop a preferred page.
In the same way, you can drag & drop other web blocks.
Move the blocks.
Arrange the blocks.
- Extend the Start page height.
- Click on the page block which you want to move.
- Press Ctrl-A to select all objects.
- Grab and move all objects up (tip. When moving, press the Ctrl key to move it straight).
Repeat this in the Mobile variant.
With the Auto-fit feature, you can easily change the width of the Main variant or create a new one. All objects will automatically adjust to the page width.
Create more variants at the end of the designing process. You’ll have less editing.
Auto-fit is a feature of Xara Web Designer/Designer Pro 15 and above.
How to change your own design?
This short video will show you how to work with the X Builder on the example of XT92 template.
X Builder in action …
By looking through the lessons below, you will have a better idea of how X Builder works.
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.
Why Our Templates?
Limited Time Offer
This offer won’t be here forever. Today You will pay only $69 instead of $79.
You can always change your mind later. You have 30 days to decide.
Q. How to install X Builder files in Xara Web Designer?
If you want to install, you can do it in Local Designs Gallery:
- Select Local Design Gallery
- Click “Disc designs…”
- Navigate where you’ve unziped XBuilder.
- Click Add button
You can also use X Builder from windows explorer. Use “drag & drop”. Windows has great search engine. You can save searches and this gives you better flexibility.
Q. How to download an update?
- Log-in and go to https://xaratemplates.com/my-account/downloads
- Download the file again. It’s always the most recent version.
Q. Can I use the Blocks in an existing website and will they fit the page size?, or is it only for Building new one?
They have 2 variants (width). 480px, 960px. They fit to projects that are design in 2 variants also. If the project has one variant, then only one will be imported.
If the project has different width then blocks, it need to be modify.
Q. Are blocks compatible with Xara Web Designer Premium 12 (365) / 15 / 16 / 17 ?
Yes. All blocks were created in Xara Web Designer Premium 16. You can also use them in XWD 12, 16, and 17 without any problem.
They will also work in XWD 11, but you will get the warning message that they were created in a newer version of the program. Besides that warning, all blocks are working normally.
Q. Why block is imported as a new page?
Blocks are imported as new page and this is as it should be. You can’t create block in 2 or 3 variants that is imported to the program otherway then new page.
You can use it for personal and commercial projects for you or your client an unlimited number of times.
You can’t use it for creating templates for free or paid download.
- All Page-Headers were fixed
- Web-Pages/1st were fixed
- The numbers from 01-07 have been removed from the main directory names.
- 0000_demo files were added. These files contain all files from a directory. You can easily preview all blocks or web elements. For example, I often use demo files as a kind of “palette” from which I can easily choose an icon or a button.
- 0000_Help files for categories were added
- Wowslider start-pages fix: badly scaled wowslider window when page width was changed in the main variant.
- New category Web-Elements/Basic
- A new help file: 01-Start-Pages/0000_Help – basic operations on start-pages.
- All footers were updated + 25 new.
- Start pages with wowslider were updated to Xara Web Designer 17
Start pages with wowslider were updated:
- Wowslider automatically fits to the placeholder now. You can easily resize it, move and copy.
- A simple panel was added where you can edit animation type and timing.
+ 21 new pages in the “05-Web-Pages / 1st” category.
+ Web Elements was added: 970+ (You can test what’s inside by installing X Builder Free.)
- H1 Headings: 17
- Icons: 19
- Infographics Diagram: 17
- Photo Placeholders: 450
- Lists: 25
- Text Panels: 144
- Top Navigation Creator: 144
- Footer: 16
- Blog: 6
- Contact: 5
- Maps: 2
- Vartical Menu: 1
+ Many fixes
- Fixed problem with “Start-Pages” in Xara Web Designer 16 / Xara Designer 16
- Change the way images are exported in “Start-Pages”. Adding an export.tmp page. Significant increase in image resolution.
- Numbering block categories according to how the website is created.
- There won’t be X Builder Pro. I Decided to update normal X Builder to all its features (except all web templates). The updates will come in future months. The first one is Top Navigation from the new category “Web Elements”.
Page Headers: 15
Adding a new category of blocks: “Page-Headers”. Useful for creating new subpages.
Top Navigation: 95
Adding a new category “Top-Navigation”. (logo + navigation bar). Now you can easily replace the navigation in any “Start-Pages” block. (Delete the old logo and navigation bar from the start block and drag the a new one from the “Top-Navigation” category).
- Added Auto-fit to page feature to all blocks.
- All block have only 2 variants now. Because of “Auto-fit” feature you can easily change width of the Main variant or create a new one.
- Divided into categories – XBuilder can be now easily install and use from Local Design Gallery
- Hundreds of fixes
- Updated to 888 blocks
- Updated to 817 blocks
- Updated to 743 blocks
- Initial release: 533 blocks