Knowledge Base

September 26, 2016

Design Options – Header Styles

You can change the design via Customize > Styling Options > Design Options. RT-19 comes with four different design options. These are;

  1. Layout 1 – Vertical Navigation
  2. Layout 2 – Horizontal Navigation
  3. Layout 3 – Horizontal Navigation (v2)
  4. Layout 4 – Centered Logo

When you switch to another design layout,  you may see new options appeared across the Styling Options.

Important notes about switching the design options;

  • Many styling options are common for all four design options. When you switch between the designs you may notice that your header, menu styling etc. are not looking good as the demo site. It is because there are other options that affect your header look such as; Header Options,  Main Navigation Options, Shortcut Icons Options etc. You must check and adjust these settings if needed. If you haven’t customized the colors yet, you can do it easily by using the Styling Options > Pre-Made skins.
  • All these designs has different content widths, column margins, row paddings etc. If you have dynamically resized images then you need to make sure they are still looking good, after the switch. If not, you can simply increase the min width and height values for the resizer.
  • If you have switched your layout from one of the v1 layouts (Layout 1, Layout 2) to any of v2 layout (Layout 3, Layout 4) and if you have a custom value set to any “Image Max Width” field for one of the listed options or modules below, you better check and adjust them. We recommend minimum 690px for the “Image Max Width” fields or leave it blank for auto resizing.
    • Product Options -> Featured Images
    • Portfolio Options -> Featured Images
    • Blog Options -> Featured Images
    • WooCommerce Options -> Featured Images
    • Modules used within the Visual Composer that has custom featured image settings like Product, Portfolio, Blog, WooCommerce posts and carousel modules.

Example image resizing setting for Layout 3 or 4;

 

featured-image-resizing-2

featured-image-resizing