Site Layout Customizer

FAQ

What is a layout?

In the menu you can choose from several layouts. Each layout can be customized with “what you see is what you get” interface, and has a number of options such as where to put the title, image and excerpt, effects and so on.

How do I add a Layout on a page?

To make a layout show up on a page you simply paste a shortcode on a page. Add a new page and add the following shortcode exactly:

[layout show=”1″]

and then publish it. View the page. You should now see the layout with the latest posts showing up. You can custom the layout and how many posts to show in the menu by choosing Layout 1 in the plugins menu. The default settings offer a starting point.

You can also custom the layouts 2, 3, 4 to make them show up on a page. To do this you simply change the number 1 in the shortcode to the number of the layout you want to show. For example to show layout 2 we add the shortcode

[layout show=”2″]

How do I add several Layouts on a page?

To display several layouts on one page, simply add several short codes after each other For example:

[layout show=”1″]

[layout show=”2″]

[layout show=”3″]

The Settings

Each layout has a number of settings that can be customized. The placement settings allows you to put title, image and other elements in three different main areas TOP, LEFT and RIGHT. So this allows you for example to put the title to the right and the image to the left or in any combination.

There is also a position selector (beside the area selector) where you can select a number between 1 to 10. This allows for arranging elements within each area. A higher number puts the element higher up and a lower number puts it lower down. This makes it possible for example to put the title over the excerpt.

In addition to the 3 main areas top, left and right there is also an over image option where you can put any text over the image.

Making a page the front page

To make a page a front page, go to Settings then Reading Settings and select Static Page, in the drop down menu choose the page you want as your front page.

Images

The plugin uses the image sizes set under settings->media. You can set the width and height of the image in the layout settings, this will just upscale or downscale the image without actually changing the original image size. If a featured image is set for the post then that will be used, otherwise if a image has been inserted into the post then that image will be used.

CSS important!

This information is valid only if you want to edit the css stylesheet

You have the option to add your own external css file and overide the plugin stylesheet. To protect your css file from being overwritten you need to put it in a safe directory outside the plugin directory. Change the css file url in the main option page to point to your css file.

Steps:

1. take a copy of the style.css in the plugins directory
2. put the copy in a safe directory outside the plugin. Example the root or the themes folder
3. Change the css file url in the main option page to point to your css file.

Note: adding a css file will not disable the css file in the plugin, both will be used.

Title & excerpt can be set individually for each layout. Most of the other elements are common for all layouts. In your css file you can override id tags & classes. Title & excerpt can be set individually for each layout. Most of the other elements are common for all layouts.

Theme Compability

The plugin has been tested with a number of themes but there might be some themes that will need some css tweaking to work properly.