Today, I want to take a closer look at the new Design Editor which we began rolling out last week. The Design Editor offers the opportunity to make changes to the design of your Radium3 website without editing any code. The Design Editor works out of the box with all of Radium3's built-in designs. If you have a customized design, you would need to have it enabled to work with the Design Editor. For more information about having the Design Editor enabled on a customized design, please contact your Radium3 account manager.
One of Radium3's built-in designs loaded inside the new Design Editor. Click the image to view full size.
Accessing the Design Editor
If you'd like to try out the new design editor, you might want to create a new, free website under your account. This will allow you to work with the features of the Design Editor without affecting your live website. You can add a new website from the "Websites" screen under your account.
Once you're logged into your website, you can access the Design Editor by selecting "Design" on the top toolbar and then selecting the "My Designs" tab. This will show you a list of all the designs enabled on your current website. Select a design and then select the "edit" button. This will load up the new Design Editor.
Templates and Panels
Once the Design Editor is up and running, take a look at the very top left. You'll see the name of your design and just below it, you'll see the name of the currently-selected template. Selecting the template name will open a drop-down list of all the templates that can be edited within your current design.
Just below the template name, you'll see the name of the currently-selected panel. This will say something like "Base Styles," "Wrapper Styles," "Header Styles" ... etc. Selecting this will open a drop down of all the available panels for the currently-selected template (see image to the right). A panel is basically a set of controls that are assigned to a particular area of your template. For example, the "Nav Styles" panel presents a set of controls that adjust the design of the site's navigation. Each template may present a different list of available panels. This is because the designer of the template can determine what areas of the site are able to be controlled by the Design Editor.
Global vs. Template-Specific Panels
The Base Styles panel and the Nav Styles panel will make global changes to your design. Edits made on these two panels will be reflected across every template in your design.
On the other hand, all other panels make template-specific changes. This means, for example, that you can adjust the sidebar or the header uniquely on each individual template in the design. Or, you can set them all the same. The choice is yours.
More to Come
We'll be continuing to roll out improvements to the Design Editor over the next few weeks. For now, we just wanted to give you this overview so that you can explore the Design Editor on your own. Enjoy the new features!