X Builder – XaraTemplates.com
TEMPLATES FOR ® XARA WEB DESIGNER

X Builder


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.

  1. Extend the Start page height.
  2. Click on the page block which you want to move.
  3. Press Ctrl-A to select all objects.
  4. 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.

  1. Unzip the xbuilder.zip file.
  2. Move the X Builder folder to the preferred location.
  3. Open “Local Designs gallery” and click the “Disc designs…” button.
  4. Navigate to X Builder folder and click the “Add” button.

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.

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

Lesson 2. Changing the page navigation.

Changing the page navigation – /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 –  /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.

Lesson 3. Adding a page footer.

Adding a page footer – /Footer.

The page footers are in the /Footer directory.

  • Select one and drag it 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.

Lesson 4. Adjusting the page footer.

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 /
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

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.

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.

Lesson 6. Page “Services”.

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.

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.

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. 

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.

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.

 

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. 

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. 

Lesson 11. Buttons.

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. 

Why Our Blocks?

Modern Design

Create beautiful websites quickly and easily with our templates. Our top quality designs it’s everything you need.

Named Colors

The easiest way to re-color your website. Simply click on any of the named colors and select the Edit option.

Content Animation

Web animations are a great way to add eye-catching visual content to your webpages

Responsive Web Design

2 or 3 variants (sizes) : Wide (1200px), Desktop (980px), Mobile (480px)

960 grid system

Templates were designed with a 960 grid system. Elements like content or even whole pages from one template will fit into another template.

Multiple layouts

Most of the templates have several layouts like home, about us, services, projects, blog, portfolio, contact …

Licensed photos – All included

Most of the photos attached to the projects are under the public domain license (cc0) and come from the pixabay.com. Some have been purchased at fotolia.com with an extended license that allows them to be used in the templates.

Contact form

Simple. Effective.
You do not need external service providers. (only hosting with PHP support.)

 

Unlimited Domains

Unlike other suppliers, when you buy a template, you can use it for personal and commercial projects for you or your client an unlimited number of times.

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.

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.

 Start Pages Demo

Click on the images below to see a full-size demo.


2022

Initial release

Top Navigation Demo

Click on the images below to see a full-size demo.


65 elements

21 elements

9 elements

Web Pages Demo

Click on the images below to see a full-size demo.


1st

About

Blog

Contact

FAQ

Services

Web Blocks Demo

Click on the images below to see a full-size demo.


Basics

Box

Clients

Counter

Full-Width

Gallery

Grid

Infographics-Diagram

Intro

List

Contact

Price-Table

Slider

Step-by-Step

Social

Split

Table

Overlap

Team

Technology

Testimonials

Text

Video

Web Elements Demo

Click on the images below to see a full-size demo.


Page Backgrounds

Photo MouseOver

Basic

Blogs

Contact

Footer

H1 Headings

Infographics

Lists

Text-Panels

Top Navigation Creator

MouseOver Icons

Buttons

Icons

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:

  1. Select Local Design Gallery
  2. Click “Disc designs…”
  3. Navigate where you’ve unziped XBuilder.
  4. 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?

  1. Log-in and go to https://xaratemplates.com/my-account/downloads
  2. 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

+1199 Web-Blocks

  • Web-Blocks/Basics +1199 blocks – demo  (new)

+782 Web Elements

  • Basic +240 new elements – demo
  • Pages-Backgrounds +230demo  (new)
  • Text-Panels +312demo

2021.3

1281 New Blocks

New Creator

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


Buttons: 824

Demos:

You can buy buttons as a separate product – Buttons for Xara Web Designer.


Mouseover Icons: 201

Demos:

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