Detalės

In this section of the User Guide we will discuss page creation in more detail, including the various page templates available in the theme, and all the page specific options.

When creating a new page, one of the first things you will probably want to do is to choose an appropriate template for your page. To this this, visit your page from the backend (or create a new page by going to Pages > Add new), and locate the Page Attributes section on the right side of the screen. Neo Ocular comes with a variety of page templates to choose from:

  • Default Template - Select this template if you would like to create a standard page with your content inside the grid.
  • Qode Blank Template - Choose this template to create a page with no header or footer.
  • Qode Full Width Template - Select this template if you would like to create a standard page with your content spanning across the full width of the page.

Now that you have chosen an appropriate template, let’s go over the custom fields available for pages.

Please note that any settings you save here will override the global settings you've set in Neo Ocular Core Options. It is generally considered good practice to set up the look of your pages on a global level, and then override settings on a local level, if necessary. This will save you a lot of time, unlike if you were to set up every page locally.

Neo Ocular Settings

Page Settings

  • Page Background Color - Set a color for the page background.
  • Page Background Image - Set a background image for the page.
  • Page Background Repeat - Set a background pattern for the page.
  • Page Background Size - Choose whether you wish to resize the background image to cover the entire background (even if this means streaching or cutting the image), or if you wish to resize the background image to display it in its full size.
  • Page Background Attachment - Choose whether the background image will be fixed or can be scrolled.
  • Page Content Padding - Set the padding values for the content on this page. Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
  • Page Content Padding Mobile - Set the padding values for the content on this page on mobile screens (1024px and below). Please input the padding values in the format: top right bottom left (e.g. 10px 5px 10px 5px).
  • Boxed Layout - Set this option to "Yes" to enable the boxed layout. If you choose a boxed layout for this page, the content will be fitted in a centrally positioned grid.
    • Boxed Background Color - Set a background color for outside the boxed content.
  • Passepartout - Set this option to "Yes" if you would like to display a passepartout border around this page.
    • Passepartout Color - Set a color for the passepartout.
    • Passepartout Background Image - Upload an image to be displayed in the passepartout background.
    • Passepartout Size - Set a size for the passepartout.
    • Passepartout Responsive Size - Set a size for the passepartout border when viewed on smaller screens.
  • Initial Width of Content - Set a width for the grid on this page.
  • Always Put Content Behind Header - Set this option to "Yes" if you would like the header to cover the top of the page content.

Footer Settings

  • Enable Page Footer - Set this option to "Yes" to display the footer on this page.

Footer Area

  • Uncovering Footer - Set this option to "Yes" if you would like to make the footer gradually appear on scroll.
  • Enable Top Footer Area - Set this option to "Yes" if you would like to display the top footer area.
    • Top Footer Area in Grid - Set this option to "Yes" if you would like the top footer area to be displayed in grid.
    • Top Footer Area Styles - Set the background color, background image, top border color and top border width for the footer top.
  • Enable Bottom Footer Area - Set this option to "Yes" if you would like to display the bottom footer area.
    • Bottom Footer Area in Grid - Set this option to "Yes" if you would like the bottom footer area to be displayed in grid.
    • Bottom Footer Area Styles - Set the background color, top border color and top border width for the footer bottom.

Header Settings

  • Header Layout - Choose a header type to use on this page. Depending on the header type you choose, different options will be available.
  • Header Skin - Here you can choose a header style to be applied to the header on this page. The "Light" header style displays white navigation text and the "Light" logo version, while the "Dark" header style displays black navigation text and the "Dark" logo version. If you wish to use the default colors and logo, leave this field empty.
  • Show Header Widget Areas - Set this option to "Yes" if you wish to display the header widget areas on this page.

Main Menu

  • Dropdown Position - Input a value for the dropdown menu height in pixels.

Scroll Appearance Section

  • Header Scroll Appearance - Choose a scroll appearance/behavior for the header on this page.

Centered Header

  • Header Height - Input a value for the header height.
  • Header Background Color - Set a background color for the centered header.

Minimal Header

  • Content in Grid - Set this option to "Yes" if you wish to set the minimal header content in grid.
  • Header Height - Input a value for the header height.
  • Header Side Padding - Set the side padding for the minimal header on this page.
  • Header Background Color - Set a background color for the minimal header.

Standard Header

  • Content in Grid - Set this option to "Yes" if you wish to set the standard header content in grid.
  • Header Height - Input a value for the header height.
  • Header Side Padding - Set the side padding for the standard header on this page.
  • Header Background Color - Set a background color for the standard header.
  • Menu Position - Choose where you wish to position the menu within the standard header.

Vertical Header

  • Header Background Color - Set a background color for the vertical header.

Top Area

  • Enable Top Area - Set this option to "Yes" if you wish to display the top area on this page.
    • Top Area Options - Set the background color, top area height, and top area side padding for the top area on this page.

Logo Settings

Header Logo Options

  • Logo Height - Set the logo height for this page.
  • Logo - Main - Upload a default logo image to display in the header on this page.
  • Logo - Dark - Upload a dark style logo to display in the header on this page.
  • Logo - Light - Upload a light style logo to display in the header on this page.
  • Logo - Sticky Height - Set a height for the sticky logo.
  • Logo - Sticky - Set a sticky logo image to be displayed.

Mobile Header Logo Options

  • Mobile Logo Height - Set the mobile logo height for this page.
  • Mobile Logo - Main - Upload a default mobile logo image to display in the header on this page.

Mobile Header Settings

  • Mobile Header Layout - Choose a mobile header layout for this page.

Sidebar Settings

  • Sidebar Layout - Choose the desired layout for your sidebar. You can also disable the sidebar here by choosing "No Sidebar".
  • Set Grid Gutter - Choose a predefined grid gutter size to set space between content and sidebar.

Title Settings

  • Enable Page Title - Use this option to control whether you would like to display the title area on this page or not.

Title Area

  • Title Layout - Chose a type of title area to use.
  • Page Title in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
  • Height - Set a height for the title area.
  • Height on Smaller Screens - Set a height for the title area on smaller screens when the mobile header is displayed.
  • Background Color - Set a background color for the title area
  • Background Image - Chose a background image for the title area.
  • Background Image Behavior - Choose how you would like the background image to behave.
  • Title Color - Choose a color for the title.
  • Text Alignment - Set an alignment for the title area text.
  • Vertical Text Alignment - Define the vertical alignment setting for the title area content on this page. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window.