Getting Started

Theme Options & Style

General Guidelines

Plugins

FAQ

Extras

Header

The header theme area consists of various elements like logo, menu, or social icons. The theme offers the Header Builder so you have full control over the header composition.

Header Builder

The header builder allows you to compose any header layout using an easy and intuitive drag & drop interface.

Quick Start

To start building your header, please do as follows:

  1. Open the Newsy → Theme Options → Header → Header Builder Option
  2. Choose header type (e.g. Desktop)
  3. Use drag & drop interface to move header elements between rows
  4. Click on an element (e.g. Logo) to open its settings panel
  5. Save changes

Manage Rows

The header layout is divided into 3 rows (labeled as top, mid, bottom). Every row has 3 cells (left, middle, right).

  1. To reposition rows, mouse hover to rows.
  2. To change row/cell properties, click the  icon.
  3. To move a row, just drag & drop it.

Manage Cells

The header layout rows has 3 cells (left, middle, right).

  1. Align: place items to left, center, right.
  2. Display: Grow is force cell size wide. Normal cell is takes items size.

Header Presets

The builder offers a few pre-made header compositions for a quick start. Please do as follows to start working from a pre-defined layout:

  1. Open the Newsy → Theme Options → Header → Header Presets
  2. Click one of the available Compositions.
  3. Adjust your header.
  4. Save changes
Note:
We will reset all options inside header builder panel when you click one of the starter layout
You can modify your header using header builder like normal after choosing header builder layout.

Header Style

The header layout is divided into 3 rows (labeled as top, mid, bottom). Every row has 3 cells (left, middle, right).

Header: Wrap Style

  1. Header Background Color
    Select header wrapper color. This will set background color for all header bars.
  2. Header Background Image
    Select header wrapper background image. This will set background image for all header bars.
  3. Header Shadow?
    Enable shadow effect for header wrap.

Header: Desktop Style

The desktop header layout is divided into 3 rows (labeled as top, mid, bottom). Set style and height for each bar in here.

- Top Bar

  1. Row Style
    Base css style for the row. You can add specific colors and spaces for row.
  2. Row Height
    Set height size of top bar height.

- Mid Bar

  1. Row Style
    Base css style for the row. You can add specific colors and spaces for row.
  2. Row Height
    Set height size of mid bar height.

- Bottom Bar

  1. Row Style
    Base css style for the row. You can add specific colors and spaces for row.
  2. Row Height
    Set height size of bottom bar height.

Header: Sticky Bar Style

The sticky header layout labeled as sticky bar. Set style and height for sticky bar in here.

  1. Sticky Type
    Choose sticky effect or disable sticky header.
  2. Row Style
    Base css style for the row. You can add specific colors and spaces for row.
  3. Row Height
    Set height size of sticky bar height.

Header: Mobile Bar Style

The mobile header layout labeled as mobile bar. Set style and height for mobile bar in here.

  1. Row Style
    Base css style for the row. You can add specific colors and spaces for row.
  2. Row Height
    Set height size of mobile bar height.

Header Elements 

All available builder elements are listed below. Some elements require setup. Please refer to their configuration pages before using it inside the builder.

By default the theme displays the site title in the Header Theme Area. You can easily change it and display the logo image.

  1. Logo Type
    Choose logo type. Text or Image.

    Text Logo

    1. Text Logo
      Set site name here for logo text.
    2. Text Logo Typography
      Set typography for logo text. 

    Image Logo

    1. Logo Image
      Upload an image as logo.
    2. Logo 2x Image
      Upload a retina image as retina logo.
    3. Logo Dark Image
      Upload an image as logo for dark scheme.
    4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

By default the theme displays the main logo in the Sticky Header Theme Area. You can easily change it and display the sticky logo image.

  1. Logo Type
    Choose logo type. Text or Image.

    Text Logo

    1. Text Logo
      Set site name here for logo text.
    2. Text Logo Typography
      Set typography for logo text. 

    Image Logo

    1. Logo Image
      Upload an image as logo.
    2. Logo 2x Image
      Upload a retina image as retina logo.
    3. Logo Dark Image
      Upload an image as logo for dark scheme.
    4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

By default the theme displays the main logo in the Mobile Header Theme Area. You can easily change it and display the mobile logo image.

  1. Logo Type
    Choose logo type. Text or Image.
  2. Text Logo
    1. Text Logo
      Set site name here for logo text.
    2. Text Logo Typography
      Set typography for logo text. 

    Image Logo

    1. Logo Image
      Upload an image as logo.
    2. Logo 2x Image
      Upload a retina image as retina logo.
    3. Logo Dark Image
      Upload an image as logo for dark scheme.
    4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

In this part, you can setup several options for main menu.

  1. Activate Responsive More Menu?
    Choose to enable responsive more menu.
  2. Fit Menu To Container?
    Extend the menu items up to the container.
     

Header: Top Menu

In this part, you can setup several options for top bar menu.

Header: Date

In this part, you can setup several options for header date.

  1. Date format 
    Set date format for header. For more detail about date format, please refer to Developer Codec
  2. Text Typography
    Set typography and color for date.

Header: Search From

In this part, you can setup several options for search form.

  1. Search Form Style
    Choose search form style that you want to use.
  2. Search Form Width
    Set search input form width in percentage.
  3. Search Input Background Color
    Set search input background color.
  4. Search Input Border Color
    Set search input border color.
  5. Search Icon Color
    Set search icon color.
  6. Search Input Text Color
    Set search input text color.
  7. Search Button Color
    Set search button color.

Header: Search Button

In this part, you can setup several options for search icon.

  1. Search Button Icon Color
    Set color of search icon.
  2. Search Button Hover Icon Color
    Set hover color of search icon.
  3. Search Button Background Color
    Set color of search button background color.
  4. Search Button Hover Background Color
    Set color of search button background color.

Header: Social Icons

In this part, you can setup several options for header social icons.

  1. Select Social Icons
    Choose social icons.
  2. Social Icons Style
    Choose social icon style.
  3. Social Icons Background Color
    Set icon background color.
  4. Social Icons Color
    Set icon color.

In this part, you can setup several options for navigation menu handler icon.

  1. Menu Handler Lines Color
    Set nav icon color for navigation menu handler.
  2. Menu Handler Lines Hover Color
    Set nav icon hover color for navigation menu handler.
  3. Menu Handler Text
    Set menu handler text. Eg: Menu

Header: Buttons

In this part, you can setup several options for button element.

Button 1-2-3

  1. Button Text
    Insert button text.
  2. Button Icon
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Text hover Color
    Set text hover color for the button.
  9. Border Color
    Set border color for the button.
  10. Border Hover Color
    Set border hover color for the button.

Header: Ads

In this part, you can setup several options for Header Ads element.

  1. Ad 1
    Select ad element.
  2. Ad 2
    Select ad element.

Header: Html Elements

In this part, you can setup several options for HTML element.

  1. HTML Element 1
    Insert html or shortcode element.
  2. HTML Element 2
    Insert html or shortcode element.
  3. HTML Element 3
    Insert html or shortcode element.
  4. HTML Element 4
    Insert html or shortcode element.
  5. HTML Element 5
    Insert html or shortcode element.

Content