Modular Websites & Web Blocks

Modular Websites and Web Blocks

Whether you need a simple landing page or a full featured e-commerce website, we guarantee that Modular Websites will offer the quickest and easiest way to create that showstopper website that you’ve always imagined.

A Modular Website page is very simple; it’s just a vertical stack of ready-designed Web Blocks, one above another, with navigation controls at the top. Websites can be built very rapidly by just adding as many different Web Blocks as required to build up a web page. Add your content and you’re done. What’s more a mobile-friendly variant of the website is created automatically.

To get started with your Modular Website, you can choose one of the pre-built website templates from Elements and add/remove Web Blocks to customize it. Or you can begin with a Start Page which has just the navigation, and then drag and drop Web Blocks from the Designs Gallery one by one to build up your website.

All the capabilities for building websites without Web Blocks (‘Freeform Websites’) are available for more advanced users, but you will find that using Web Blocks is the simplest, quickest way to build your new dream site - from Xara or anyone else!

Check out our intro movies in the Web Blocks Playlist on YouTube.

Getting Started: Choose a Template Website or Start Page

Ready-made website templates can be found in Elements or Designs Gallery, under Modular Websites > Website templates.

Or if you want to start with just the navigation and build up your website yourself, choose a Blank (website) from Modular Websites > Website Templates. There is also a blank Modular Website template, with just navigation, under File > New.

Adding Web Blocks

You’ll find a wide selection of different Web Block designs in the Designs Gallery under Modular Websites > Web Blocks > Layouts. Double-click on an item in the Design Gallery to add it to your website document. Each new block is added to the bottom, below all your existing Web Blocks. Or use drag & drop to insert at any position. You can then add your own content by editing text using the Text Tool, replacing images, etc.

Working with Web Blocks

Whenever you click on an object that is part of a Web Block, you’ll see a green Web Block bar appear to the left of the page, as shown below:

Objects can be selected inside the Web Block with one click, then you can edit objects using the usual tools on the main Toolbar on the left; Text Tool for text, Photo Tool for photos, etc.

To select the Web Block itself, click on the Web Block bar. A green outline around the whole Block shows that it is selected, and the Web Block bar is brighter.

Deleting a Web Block

To delete an entire Web Block that you don’t want, simply select it by clicking the green bar and Delete. When a Web Block is deleted, any Blocks below it are automatically moved up to close the gap.

Changing the order of Web Blocks

Use the arrow buttons on the Web Block bar to move Web Blocks up or down. Or you can click-drag on the center of the bar and drag the block up or down. As you drag, a horizontal line appears between Web Blocks, to indicate the drop position.

Adjusting the height of a Web Block

Many of the Web Blocks can have their height adjusted by click-dragging on the bottom edge of the Block, as shown below:

Note the Web Block needs to be selected first (click on the green bar). Then move the mouse pointer over the bottom edge and you should see the mouse pointer change as shown above.

Copying Web Blocks

To copy a Web Block, select it by clicking on its Web Block bar and then use Copy (Ctrl+C) as you would for any other object. When pasting, the Web Block will appear immediately below the selected Block, or at the bottom of the website if there is no selection. You can copy and paste Blocks from one Modular Website document to another.

Widget Blocks

Some Web Blocks include dynamic content that can considerably enhance the value of your website, such as video players, maps and forms. After you’ve inserted one of these Web Blocks, click on the widget inside it and you’ll see an Edit option appear on a context menu. Click Edit and a window appears allowing you to setup your widget. See the section below on Widget Editing for more information.

Widget Editing

Now when you insert or edit a Widget you’ll see this new Widget window appear.

For widgets that are provided by an external service, such as a Google Map, configuration of the widget in the external service is now done using your regular browser, instead of inside a web window inside Designer+. This means that signing into the external service will generally be easier, because your browser probably has features helping you sign-in, such as saved passwords or a password manager. Also you can work in a full size browser window, rather than in a smaller web window inside the application.

Press the Edit in browser button to open the external service in your default browser. Once you’ve setup your widget, copy the widget code from the external service and then come back to Designer+ to paste that code into the widget window.

Most widgets have an online help page available, which will advise you on how best to use the external service with Designer+, how to find the code in that service and other helpful tips. Press the How to get HTML code link to open this help.
There are some lesser used widget options in the Utilities > Web Properties dialog that are not available in this new window. Press the Advanced button to jump directly to this dialog, if you need to use these options.