Even a simple website with a header, left sidebar, content area and footer can be seen as being made up of 4 main blocks of content. This is also apparent in nearly any CMS theming system which separates the blocks of content into different files.
Stepping up to the challenge
We knew that if we could do this, and give you precise control on what to do with each block of content, it would help you build websites with Joomla so much easier and faster than you are used to. Based on the principal of blocks, we structured Morph's code into sections, which are essentially strategically placed building blocks making up a website. These blocks can then be controlled in Configurator.
So what is so special about Morph if most websites are built using blocks?
Morphs building blocks are contextual. Each block will vary in what it does and what can be done with it, based on where it is positioned and what its possible uses are. Lets look at 4 of the blocks characteristics and 2 of the options available to you to control each block.
Characteristic -> Module positions
Nearly all of the blocks in Morph have a matching module position (others more than one) in Joomla. This gives you the ability to easily publish your Joomla modules to any block.
Characteristic -> Intelligent grids / modules
Morph will do all the work...all you need to do is publish the number of modules you need (1-3) in that block and Morph will work out how much space is needed for each module.
You can even turn on equal heights on some blocks if you need it (depending on your scenario). Publish 3 modules and they will each use one third 33% of the available space in the block.
If you are using 2 modules in any intelligent grid block they will automatically share the space using 50% each by default.
You can also further set the ratio between these 2 modules depending on how you want to use them. Perhaps a 70% / 30% split works better for what you want to do in a particular block.
This currently works with 1 to 3 modules, but more variations are in the works to give you an extremely wide array of options to choose from.
Characteristic -> Collapsible blocks
This makes Morph ideally scalable for small or large websites. Although Morph is made up of dozens of blocks and positions, they only load if something is put inside them. If you want to hide a block, you can either turn it of from a master setting in Configurator or you can unpublish any content to it and it will disappear from the page entirely.
Characteristic -> Complete Overrides
The footer on this website is using a footer block override to add a set of footer links in the column format we wanted. This is because its much easier and faster to code these links (mostly external) by hand than creating and assigning all these menus in Joomla.
Option -> Block level control in Configurator
Using this companion tool to Morph, you can carry out a wide variety of block specific tasks, from simply disabling the block, or setting the dimensions, to completely converting the block into different output types based on how it is to be used.
One important thing to note is that these options are contextual. This means that the options for each block will vary and is specific to that block based on where it is in the overall layout and the context within which it may be used. eg. the block that contains the main navigation module will have different options to the footer block because its positioned and used differently.
Option -> ChromeFX
These options are specific to the sidebar blocks, as it's used to set default sidebar width and position. In Morph each sidebar module position (left/right) is tied to a specific layout scheme.
Outer Layout: This controls the left module positions (sidebar) width and position in relation to the main content and right sidebar.
Inner Layouts: This controls the right module position (sidebar) width and position in relation to the main content only.
The left position can be positioned on the right, or as the name suggests, outside of the inner (right) position.
Certain blocks can have their position in relation to other blocks on the page changed to accommodate for more types of layouts. These changes are limited to certain blocks but are strategically chosen to provide most flexibility.
Lets say your menu block is set to display below the header, you can move it above the header instead, or even above the main branding to the top of the page.
If you are using 2 modules in any intelligent grid block then they will automatically share the space 50% each by default. You can also further set the ratio between these 2 modules depending on how you want to use them. Perhaps a 70% / 30% split works better for what you want to do in a particular block.
To further allow for more varied layouts, specific strategic blocks can have additional markup added and wrapped inside or outside of the block. This to apply a surprisingly wide array of design variations and effects. As themelet developers for Morph, this is one of the tiny features that goes along way in our work to create vastly varied looking layouts.
Turn block into a slider
This is currently still in its infancy and works in only one position at the moment, but will be extended to more. It allows you to turn a block into a "sliding shelf". This means the content will be hidden by default and a button will display instead. When clicked it will slide down with the content inside of it. The text that is displayed on the button you can easily set inside Configurator.
Even though a block will automatically disappear from the page if no content is published to it, sometimes (for example when testing) it's more of a hassle to have to go unpublish everything. You can easily turn the block of, it is like a master switch you can use to override everything else and hide the block completely.
You are going to want some blocks, depending on how they are used, to have equal height or it will look strange on your website. Particularly if a background is used on a set of horizontal modules. The equalize modules option, if set on that block, will automatically calculate the heights of the modules for you.
Default module FX style per block
You are able to set a default ModuleFX style for each block. These styles will be the same styles that are applied to the modules using Morph's ModuleFX, which by adding a suffix to the module changes the look of the module. The only catch with this feature is if you want all modules to have a particular style in that block, you have to open each module and add the suffix. This feature is a shortcut and allows you to set a default ModuleFX set of styles to all modules in a particular block.