Skip to content

Pages

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. Caledon comes with a variety of page templates to choose from:

Page Attributes

  • Default Template - Select this template if you would like to create a standard page with your content inside the grid.
  • Blog: Masonry* - Select this template to display a list of your blog posts on the page. The blog list will be displayed in a Masonry type grid.
  • Blog: Standard* - Select this template to display a list of your blog posts on this page. The blog list will be displayed in the Standard layout (post info text located underneath the featured image).
  • Coming Soon Page - Choose this template to create a page with no header or footer.
  • Full Width - Select this template if you would like to create a standard page with your content spanning across the full width of the page.

*All of the blog templates listed above are used for displaying blog posts in various manners.

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

Tip

Please note that any settings you save here will override the global settings you've set in Theme 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.

Codebean General

  • Slider Shortcode - If you wish to have a slider on the top of your page, copy and paste the slider shortcode here.
  • Always Put Content Behind Header - Set this option to "Yes" if you would like the header to cover the top of the page content.
  • Content Style - Define styles for the page content.
  • Dynamic Background Color - Set this option to "Yes" if you would like to enable an altering background color. The color depends on the value set for each individual row which is currently in the viewport. You will be able to set the color by modifying its value for each Row.
  • Initial Width of Content - Set a width for the grid on this page.
  • Grid Layout Space - Set a predefined size for the space between the content layout and the sidebar layout for this page.
  • 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.
    • Page Background Color - Set a background color for outside the boxed content.
    • Background Image - Set a background image for the content outside the box.
    • Background Pattern - Set a background pattern for the content outside the box.
    • Background Image Attachment - Choose whether the background image will be fixed or can be scrolled.
  • 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 Size - Set a size for the passepartout.
    • Responsive Passepartout Size - Set a size for the passepartout border when viewed on smaller screens.
    • Disable Top Passepartout - Set this option to "Yes" if you would like to disable the top passepartout border.
    • Enable Fixed Passepartout - Enabling this option will set fixed passepartout for your screens
  • Smooth Page Transitions - Set this option to "Yes" if you would like to enable smooth loading transitions on this page.
    • Enable Preloading Animations - Set this option to "Yes" to enable an animation while the page is loading.
      • Page Loader Background Color - Set a background color for the page while it is loading.
      • Loader Style - Choose a type of loader and a color for it.
    • Enable Fade Out Animation - Set this option to "Yes" to enable a fade out animation when navigating away from this page.
  • Show Comments - Set this option to "Yes" to display comments on this page.

Codebean Blog

  • Blog Category - Choose a category of posts to display (only if you are using one of the blog list templates for this page).
  • Number of Posts - Set a number of posts to display (only if you are using one of the blog list templates for this page).
  • Masonry Layout - Choose whether you would like Masonry blog lists to be in grid or full width.
  • Masonry - Number of Columns - Choose a number of columns to display Masonry blog lists in.
  • Masonry - Space Between Items - Choose a predefined spacing between posts in Masonry blog lists.
  • Featured Image Proportion - Choose a proportion for your blog list featured images. Depending on the proportion you choose, you can set dimensions of the featured image for each of your blog posts individually.
  • Pagination Type - Choose a pagination type to use on blog lists.
  • Number of Words in Excerpt - Define a maximum number of words to display in blog post excertps.

Codebean Sidebar

  • Layout - Choose the desired layout for your sidebar. You can also disable the sidebar here by choosing "No Sidebar".
  • Logo Image - Default - Upload a default logo to display in the header on this page.
  • Logo Image - Dark - Upload a dark style logo to display in the header on this page.
  • Logo Image - Light - Upload a light style logo to display in the header on this page.
  • Logo Image - Mobile - Upload a logo to display in the mobile header on this page.

Codebean Header

  • Choose Header Type - 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.
  • Choose Header Behavior - Choose a behavior for the header on this page.

Top Area

  • Header Top Bar - Set this option to "Yes" to display the header top bar.
    • Top Bar in Grid - Set this option to "Yes" if you would like to place the top bar content in grid.
    • Top Bar Background Color - Set a background color for the header top bar.
    • Top Bar Background Color Transparency - Set a transparency (0-1) for the top bar background.
    • Top Bar Border - Set this option to "Yes" to display a bottom border on the header top bar.
      • Border Color - Set a color for the border.

Logo Area Style

  • Disable Header Logo Area Widget - Set this option to "Yes" to hide the Logo Area widget area.
  • Logo Area in Grid - Set this option to "Yes" to place the logo area content in grid.
  • Background Color - Set a background color for the logo area.
  • Transparency - Set a transparency (0-1) for the logo area background
  • Logo Area Border - Set this option to "Yes" to display a bottom border on the logo area.
  • Border Color - Set a color for the border area.
  • Height - Input the height for the logo area in pixels.
  • Disable Header Menu Area Widget - Set this option to "Yes" to hide the Menu Area widget area.
  • Menu Area in Grid - Set this option to "Yes" to place the menu area content in grid.
  • Background Color - Set a background color for the menu area.
  • Transparency - Set a transparency (0-1) for the menu area background.
  • Menu Area Shadow - Set this option to "Yes" to enable a shadow effect on the menu area.
  • Menu Area Border - Set this option to "Yes" to display a bottom border on the menu area.
    • Border Color - Set a color for the border area.
  • Height - Input the height for the menu area in pixels.
  • Dropdown Position - Set a position for the dropdown menu. Input the value in percentages (where 100% is the full height of the header).
  • Wide Dropdown Menu In Grid - Choose wheter you would like the wide dropdown menu to be displayed in grid.
    • Wide Dropdown Menu Content In Grid - Choose wheter you would like the wide dropdown menu content to be displayed in grid.

Codebean Title

  • Show Title Area - Use this option to control whether you would like to display the title area or not on your website.
    • Title Area Type - Chose a type of title area to use.
    • Title Area 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.
    • 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.
    • Vertical 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.
    • Title Tag - Choose a heading tag for the title.
    • Title Color - Choose a color for the title.
    • Title Width - Set the width for the title.
    • Subtitle Text - Enter subtitile text to be displayed in the page title area.
    • Subtitle Color - Set a color for the subtitle.
    • Subtitle Width - Set the width for the subtitle.
    • Subtitle Side Padding - Input padding values for the subtitle.
    • Breadcrumbs Color - Set a color for the breadcrumbs text.
  • Disable Footer for this Page - Set this option to "Yes" to disable the footer on this page.
  • Uncovering Footer - Set this option to "Yes" if you would like to make the footer gradually appear on scroll.
  • Footer Skin - Set the skin for the footer.
  • Footer in Grid - Set this option to "Yes" if you would like the footer to be displayed in grid.
  • Show Footer Top - Set this option to "Yes" to enable the footer top area on this page.
  • Footer Top Background Color - Set the background color for the footer top.
  • Show Footer Bottom - Set this option to "Yes" to enable the footer bottom area on this page.
  • Footer Bottom Background Color - Set the background color for the footer bottom.

Codebean Content Bottom

  • Enable Content Bottom Area - Set this option to "Yes" to display the content bottom area, which is located between the footer and the page content.
    • Sidebar to Display - Choose a custom widget area to display in the content bottom area.
    • Display in Grid - Set this option to "Yes" to display the content bottom area in grid.
    • Background Color - Set a background color for the content bottom area.