WebSite Builder Structure Management

In our new release, we had a mission to make it easier for users to interact with WebSite builders’s flexible site building system. We’ve always had a philosophy of direct manipulation - ie, when you’re editing text, you’re editing the text directly on the page, not in some separate lightbox. When you want to resize or move an image, you just drag it on screen - seeing instantly how it will look, where it will go, how other content will look around it.

As you might imagine, this makes keeping clean, consistent, XHTML1.0 strict compliant page structures pretty complicated. We’ve upped the flexibility available in Andes, while maintaining our commitment to delivering the cleanest code available from a WYSIWYG site builder.  

Rows


Fundamentally, your WebSite Builder site is made up of a series of rows. Most sites only have a handful of rows - a header, maybe a navigation or feature section, a main body of content, and a footer. However, we’ve provided double that, with the ability to show and hide each row as you need. This resolves a common topic from earlier versions of SiteFusion - you had to use Photoshop to add or remove entire rows from your site. Now anyone can do it, right from the browser.



Working with rows adds a bit of complexity to your UI, so we’ve added a Row/Column Editing control to the upper left corner of your editor. Simply click it to enable row editing, and you’ll be able to access the cog icons that control the rows and columns of your WebSite Builder site. You’ll also be able to show and hide rows by clicking the eye icon next to the Row & Column editing button.



This showing and hiding is a great feature for designers and content owners, because it lets you keep multiple versions of a section of your site live at same time. Playing around with different header designs? Just work up your new version on the Header 2 row, then turn off the original Header and turn on Header 2. Want to go back? Just flip them back.



You can also drag and drop entire rows on your site by using the row drag handle, the lower icon on the teal row context menu. It’s never been easier to quickly move content around your WebSite Builder site.

Finally, rows have intelligent controllable heights. Drag the row to whatever height you think you’ll need on your site, and it will always maintain that minimum height. However, if you add more content that would overflow the space, it will automatically expand to encapsulate your content. Remove that content, and it’ll shrink down again to your minimum specified height. Easy.

Columns



Within each row, there are a few ways to create columns. First, we’ve added a simple column settings icon to each row context menu. Using this setting, you can quickly set each row with a common number of columns, as well as what layout you'd like those columns in. Of course, if you want to tweak your column widths to whatever width you need - just pick them up and drag to whatever width you like.

Next, we’ve added a new WebSite Builder feature called Universal Drag & Drop - basically, you can build up your column structure as you add widgets. Just leave some space where you’d like to drop your content, pick up any widget or image from the widgets or media bar, and drop it in the available space.



WebSite Builder will automatically add a column and fit your new widget or image to fill the available space. Move or delete it, and WebSite Builder will automatically remove the added column. It’s never been easier to build up your site. Of course, our traditional column widgets still exist, and you can use them to define sub columns within other area - ie, if you need a small section of your main area to have 2 or 3 columns, you could use a column widget to define that area to be fixed without using an entire row.



You’re able to quickly get in place some basic guides if you’re looking for a quick site, but can also dig into the nitty gritty and get the exact layout if so desired. Your WebSite Builder site should never look like it was cut out of a one-size-fits-all template, and now it’s even easier to make sure of that.

Answer options

Your feedback was successfully added.

Answer tracking

Track

Watch the content of this article for changes.