X Builder 2022 |
What’s new | FAQ | Buy X Builder |
What’s new
Filters
_Filters subdirectory has been added to make it easier to find blocks that have certain features. It groups items by certain characteristics. E.g..
- 4_Columns – elements arranged in 4 columns
- Buttons – the item contains a button
- FullWidth_Photo – under the text, as a background, a full width photo has been used
- Social – the element contains social media icons
etc.
Local design gallery in Xara, where you install X Builder, has no search capability. If you have tens or hundreds of files in a directory, it is sometimes difficult to find something, e.g. all “layouts” that have 3 columns or blocks with buttons. For example, there are 235 files in the “Web_Blocks/List” directory. If you would like to see only those files which contain button, you can find them in subdirectory “Web_Blocks/List/_Filters/Button”.
Page Backgrounds
Web-Elements/Page-Backgrounds includes:
- Gradient – 32 color gradients.
- Mix – 12 backgrounds. Photo elements combined with color or gradient.
- Photo – 60 background images
- Photo rotator – 10 backgrounds. Photo rotator is an animation of changing photos in the background. By editing a simple code you can change number of photos, animation speed and photos. (Help text is available inside.)
- Video – 100 cool short videos. Just drag and drop into your project, just like the other backgrounds.
Over 2200+ new files
Buy X Builder
Other versions of X Builder
X Builder Free – contains 2 items from each subdirectory of the full version. It has exactly the same directory order as the full product. This gives you an overview of the structure of the full version of X Builder. 159 files.
X Builder Lite – a simpler version of X Builder. It contains the most important elements to quickly start creating websites. 1919 files.
Safe And Secure
PayPal Buyer Protection
Thanks to the PayPal buyer protection, you can recover the total value of the purchase if the purchased item does not reach you or will differ significantly from the description. More info …
Money-Back Guarantee
If you’re not satisfied, for any reason, within 30 days we will refund your money, no questions asked. For more information, read our Refund Policy.
ps.
You can order templates just for testing and if you don’t like it – request a refund.
FAQ
How to download updates.
You can download X Builder 2022 from your account: https://xaratemplates.com/my-account/downloads/
Download the zip file again. It’s always the most recent version.
I bought X Builder x time ago, can I download the update?
The update is free to all X Builder owners, regardless of when they bought it. I introduced “lifetime free updates” a few months ago, even for people who previously bought X Builder with the annual update. So future updates will also be free.
New to X Builder?
X Builder is a collection of website elements for
Xara Web Designer and Xara Designer Pro X
Design with Speed. Simply.
- no subscription,
- no online services,
- download and use it forever,
- lifetime free updates.
Buy X Builder
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.
2022 version
The red color highlights what has changed in the new version. 2220 new files have been added. In total, X Builder 2022 contains 5814 files. Check out the information below.
Product | Pcs. | Demo |
---|---|---|
Start Pages | 84 (+8) | ![]() |
Top Navigation | 95 | |
Footers | 79 (+21) | ![]() |
Page Headers | 37 (+22) | ![]() |
Web Pages | 294 (+188) | |
– 1st | 108 (+86) | ![]() |
– About | 63 (+32) | ![]() |
– Blog | 42 (+21) | ![]() |
– Contact | 31 (+24) | ![]() |
– FAQ | 4 (+2) | ![]() |
– Services | 46 (+23) | ![]() |
Product | Pcs. | Demo |
---|---|---|
Web Blocks | 3102 (+1199) | |
– Basics | 1199 | ![]() |
– Box | 22 | ![]() |
– Clients | 9 | ![]() |
– Counter | 55 | ![]() |
– Contact-blocks | 17 | ![]() |
– Full-Width | 187 | ![]() |
– Gallery | 87 | ![]() |
– Grid | 173 | ![]() |
– Infographics-Diagram | 48 | ![]() |
– Intro | 70 | ![]() |
– Lists | 235 | ![]() |
– Overlap | 114 | ![]() |
– Price-Table | 11 | ![]() |
– Slider | 17 | ![]() |
– Step-by-Step | 11 | ![]() |
– Social | 12 | ![]() |
– Split | 295 | ![]() |
– Table | 2 | ![]() |
– Team | 183 | ![]() |
– Technology | 36 | ![]() |
– Testimonials | 59 | ![]() |
– Text | 251 | ![]() |
– Video | 9 | ![]() |
Product | Pcs. | Demo |
---|---|---|
Web Elements | 2069 (+782) | |
– Basic | 294 (+240) | ![]() |
– Blogs | 45 | ![]() |
– Buttons | 107 | ![]() |
– Contacts | 5 | ![]() |
– Footer | 16 | ![]() |
– H1 heading | 17 | ![]() |
– Icons | 53 | ![]() |
– Icons Mouseover | 201 | ![]() |
– Infographics | 17 | ![]() |
– Lists | 25 | ![]() |
– Maps | 1 | |
– Pages-Backgrounds | 230 | ![]() |
– Photo-MouseOver | 3 | ![]() |
– Photo placeholder | 454 | ![]() |
– Text Panels | 456 (+312) | ![]() |
– Top Navigation Creator | 144 | ![]() |
– Vertical Menu | 1 |
How to use X Builder in Xara Web Designer
It’s simple.
1. 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.
2. 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.
3. Use Auto-fit.
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.
tip.
Create more variants at the end of the designing process. You’ll have less editing.
ps.
Auto-fit is a feature of Xara Web Designer/Designer Pro 15 and above.
X Builder in action …
By looking through the lessons below, you will have a better idea of how X Builder works.
- 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.
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.
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.
“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 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.
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 – /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.
Note.
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.
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.
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 – /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.
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 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.
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.
Buy X Builder
Other versions of X Builder
X Builder Free – contains 2 items from each subdirectory of the full version. It has exactly the same directory order as the full product. This gives you an overview of the structure of the full version of X Builder. 159 files.
X Builder Lite – a simpler version of X Builder. It contains the most important elements to quickly start creating websites. 1919 files.
Safe And Secure
PayPal Buyer Protection
Thanks to the PayPal buyer protection, you can recover the total value of the purchase if the purchased item does not reach you or will differ significantly from the description. More info …
Money-Back Guarantee
If you’re not satisfied, for any reason, within 30 days we will refund your money, no questions asked. For more information, read our Refund Policy.
ps.
You can order templates just for testing and if you don’t like it – request a refund.
FAQ
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 /18 ?
Yes. All blocks were created in Xara Web Designer Premium 17/18. You can also use them in XWD 12, and 16 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.
License
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.
Changelog
2022.1
Upgrade files to the latest version of Xara Designer Pro+.
- Start-Pages (wowslider),
- Web-Blocks/Counter
Adding Web-Elements/Contact-Form
2022
“_Filters” subdirectory has been added to make it easier to find blocks that have certain features. It groups items by certain characteristics. E.g..
- 4_Columns – elements arranged in 4 columns
- Buttons – the item contains a button
- FullWidth_Photo – under the text, as a background, a full width photo has been used
- Social – the element contains social media icons
- etc.
Over 2200+ new files have been added:
+8 Start-Pages – demo
+21 Footers – demo
+22 Page Headers – demo
+188 Web Pages
- 1st +86 – demo
- About +32 – demo
- Blog +21 – demo
- Contact +24 – demo
- FAQ +2 – demo
- Services +23 – demo
+1199 Web-Blocks
- Web-Blocks/Basics +1199 blocks – demo (new)
+782 Web Elements
2021.3
1281 New Blocks
- Web-Blocks/Counter +57 blocks – demo
- Web-Blocks/Contact-blocks 17 blocks – demo (new)
- Web-Blocks/Full-Width +59 blocks – demo
- Web-Blocks/Gallery +89 blocks – demo
- Web-Blocks/Grid +128 blocks – demo
- Web-Blocks/Intro +11 blocks – demo
- Web-Blocks/List +156 blocks – demo
- Web-Blocks/Overlap 114 blocks – demo (new)
- Web-Blocks/Slider +12 blocks – demo
- Web-Blocks/Social 12 blocks – demo (new)
- Web-Blocks/Split 295 blocks – demo (new)
- Web-Blocks/Team +113 blocks – demo
- Web-Blocks/Testimonials +55 blocks – demo
- Web-Blocks/Text +158 blocks – demo
- Web-Blocks/Video +5 blocks – demo
New Creator
- Web-Elements/Photo-MouseOver – demo (new)
Others
- Optimize photos (reduce file size), speed up performance by reducing memory usage.
- Web-Blocks/Forms – due to possible security risks, forms have been removed
- 0000_demo.web – due to reported comments about the non-usefulness of these files and unnecessary space consumption, demo files have been removed in most categories.
2020.6
- 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
2020.5
- 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.
2020.4
- All footers were updated + 25 new.
2020.3
- Start pages with wowslider were updated to Xara Web Designer 17
2020.1
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.
2019.7
+ 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
Mouseover Icons: 201
Demos:
- MouseOver buttons
- social media MouseOver buttons
- up arrow buttons (scroll to the top of the page)
You can buy buttons as a separate product – MouseOver Icons for Xara Web Designer.
2019.3
- 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).
(photo here)
Check demos:
2018.11
- 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
2018.5
- Updated to 817 blocks
2018.3
- Updated to 743 blocks
2018.1
- Initial release: 533 blocks