SageFrame is ready to take yet another leap with release of SageFrame 3.8. This release is mainly focused on the benefits for the designers. With the addition of just a handful of features, SageFrame 3.8 is all set to charm its users and widen its horizon. This release introduces some minor changes like creating easy layout and editing template.css from web app. The details on each of the features is given below.  
 
Creating Modern Layout
Creating layout is an existing feature that has been made more dynamic than in the previous versions. This feature has been refurbished and made more flexible from the designer point of view. The designers can now create their own methods, layouts, duplicate containers and attributes. The layout looks easy and simple. Another change here is that the designers can visually see their output right where they work.
Let’s learn how to use this feature stepwise.
1.      On SageFrame Layout Manager page, click on the template on which you want to add a modern layout to.
2.      Click on Create Modern Layout button and you will land on the following page.




3.      There are three different methods in which you can use this modern layout.
a.      Create a new modern layout from scratch.
To create a new modern layout, click on New Template.
You will be prompted with a blank space where you can add containers, empty DOM, preview and set properties.




Now, let’s play with some containers to create a customized layout.
At the top there are three options.

·        

Click on the rectangular button to Create Parent Containers. You can create as many as you like.
Each of the container shows further five settings options as shown in the image below.


 
1.      The first option allows you to add containers or columns to the layout.



Add Child Container allows you to insert a child container within that container as seen in the image below.



The newly added child container is added as seen in the image below.



With the Add Free Container option, you can insert any number of free containers according to your need. The difference with the free container is that this cannot be split, merged or wrapped with other normal containers.



The newly added free containers are added as seen in the image below.



Note: The free containers are shown as green.
Insert Column allows to insert multiple columns in your container.



Enter or select a column number and your container will look as shown in the image below.



2. The second option allows you to create duplicate DOM (Document Object Model) as the previous one.



3.   Delete icon allows you to either Delete or Empty that container.



4.      The fourth option allows you to select a container for split, merge and wrap.
To select a container, its Name must be saved first. The selected container is seen with a blue outline as seen in the image below.



Once one or more containers are selected, you can either merge, split or wrap them.
 Let’s split a container.



Select the desired container and enter Name, Class and Style. Then click on Split.



This same container can again be merged into a single one. All you need to do is select both the containers and click on Merge.


> Now, let’s wrap this container. Select the container and enter the Name, Class and Style. Then click on Wrap.



The container is wrapped by a new container as seen in the image below.



5.      The final option shows the properties of the container.



Click on Save to save your work. Once you complete all your work on the containers, click on Save & Exit to return to Template Manager page.
b.      Use an existing layout to create a modern layout.
To use an existing layout, all you need to do is select the already created layout as seen in the image below.



Once you select the layout, the settings options are as same as described in Create modern layout from scratch.
c.       Insert code to create a modern layout.
If you already have your code for layout, you can directly insert it here and use your customized layout.



Once you finish all your work on the layout, click on Save.



The newly created layout named as TestLayout can be seen along with the list of layouts in Layout Manager as seen in the image below.



To edit or delete a modern layout, click on it and you will land on the following page.



 
The second feature is editing template.css from web app itself using Theme Options. With the addition of this feature, the designers need not have to use other editors to open .css files. They can edit the templates and change color, font, size, etc. straight from the UI. All of this can be done right where the template is created and the result can be viewed instantly.
Let’s learn how to use this feature stepwise.
Theme Options
1.      From your SageFrame C-Panel, click on Templates
2.      You will land on Template Manager page. Click on the name of the desired template. Click on Customize where you will be prompted with four options – Pages, Preset, Layout Manager and Theme Options. 
3.      Click on Theme Options.



4.      You will land on the following page.




There are a number of settings options available on the left side to customize your theme. Let’s learn about each of them in detail.
General
The General tab shows some basic settings for the theme. There are three sections in the general layout.
·         Select Layout allows you to select a layout from the available ones in the dropdown list.



Note: All the layouts are controlled by sfwide class.
·         CSS Components allows you to check/uncheck the css components to show in your theme.



·         Direction from Right to Left allows you to check/uncheck your layout direction from right to left.




 
Typography
Typography basically focuses on font styles and sizes.


This tab consists of the following sections.
·         When you check Google Font, you can directly enter the code from google fonts and use it.



·         You can select Heading Font and Body Font from the dropdown list.
·         You can also upload Custom Fonts but note that the file formats should be .ttf, .woff, .eot, .svg, .woff only.



·         You can also select the Font Sizes for all the text styles. Note that the font sizes are in pixels.

Images
This tab allows you to upload files for favicon, background images and background patterns.



·         In Favicon, you can upload icons in .ico file format. If you need to create this kind of file, a link is present for your convenience.



·         Full Page Image Background allows you to upload .jpg files for background image. The minimum size for the image is given as seen in the image below.

·         You can upload your Background Patterns here.

Note: This image can be uploaded in Boxed Layout only.
 
Colors
You can customize the color for all the styles, headings and buttons from here.



·         Common Styles shows color selection for Body Text Color, Body Background Color, Link Text Color and Link Hover Color. Just click on the color box or type your color code in the textbox.



·         You can select different colors for headings from Heading Text Color.



·         You can also select colors for the different buttons that you use in your theme with Buttons Color.



 

 
Header
You can use different header options for your theme.



·         Sticky Header is an ever present header at the top of the page. You can enable or disable this sticky header according to your need.
·         Transparent Header allows you the select header transparency from 0-1 or completely make the header transparent.
·         Header As Fixed Sidebar automatically shifts your header to the left side of the page.
 
Custom CSS
You can write your custom CSS here or use your previous CSS as well.



Reset
The Reset button will restore the default settings from SageFrame.



Don’t forget to click on Save Changes to save all your setting details.
 
Application Upgrader is an ever-present feature. This release upgrades the preceding versions of SageFrame to SageFrame 3.8 and also brings along with it the features that were released in the earlier versions.
SageFrame has always stretched its hold to achieve newer milestones. This release aims to pave a way through for a bigger and better SageFrame. So, don’t hesitate to download this latest version.
Also, check out the latest videos from SageFrame.