BuddyDev

Search

The layout panel in Community Builder is one of the most powerful panel. It allows changing global site layout.

The Layout panel is futrher organized into three sections:-

  1. Global
  2. Header
  3. Footer

buddypress-community-builder-layout-panel-sections

 

1. Global:-

The Global Panel Allows changing global site layout. It will have effect on the whole site.

We will explain with screenshots.

buddypress-community-builder-layout-section-global-1

At the top of the global section, you can choose the default site layout, Layout style and the content width. The following rules apply:-

  • Site Layout:–  It is your global site layout. It can be overridden for individual post/page from the post/page screen but you can consider it as the layout that will apply to most of your site. You can select from
    • Single Column
    • Two Column Left Sidebar
    • Two Column Right sidebar
  • Layout Style:– Whether it will be a boxed layout of a fluid. The boxed layout has max-width set to 1250px, the fluid goes to 90% of current screen space.
    • Boxed
    • Fluid
  • Content Width:– You can  update the width of the content for two column layouts here. It will apply on any page having two columns. Changing the width does not require page reload.

Adminbar Visibility:-

You can hide or force displaying WordPress admin bar using the toggle option.

Panel Visibility:-

Community Builder offers two offcanvas panels. Panel visibility options allow you control the visibility of the left and the right panels They allow you to hide or show the panels based on users( which kind of user can see them) and visibility limit(always, by device etc).

As shown below, you can control the user scope and the visibility:-

The available user scopes are:-

  • Everyone
  • Loggedin User
  • Logged Out User

And the visibility options are:-

  • Always
  • Small Screen Only
  • Never

The same visibility option applies to the right panel too.

Also, you can control the visibility of the left and right panel on single post/pages etc from the edit post screen too.

Miscellaneous Layouts:-

Another set of options in this section allows you to control the layout of various WordPress pages(which don’t have any object association). For post/page layout, Please check the post screen.

buddypress-community-builder-layout-section-global-3

As you see from the image, you can set the layout for following pages here:-

  • Home Page
  • Archive Page
  • Search result Page
  • 404 page

Setting the option to “default” means you want to use the layout selected in the Site layout section above. If you are looking to change BuddyPress’s layout, Please see the BuddyPress Panel.

2. Header:-

The header section of the layout allows you to control the layout/appearance of the site header. At the moment, there are 10 layouts for the site header available.

buddypress-community-builder-layout-global-header-1

buddypress-community-builder-layout-global-header-2

Some of the controls on this page and some section in the Styling panel will vary depending on which header you have selected.

The Site header is divided into three sections:-

  • Top Header row
  • Main header row
  • Bottom header row

Based on the header layout you select, the top and the bottom header row may/may not be available. The main header row contains logo/site title and will always be available.

Another set of option in header section controls various elements visibility in the site header.

 

buddypress-community-builder-layout-global-header-3

These options will be available based on whether BuddyPress is active or not.

Another set of options in this section allows controlling who can see the “Dashboard” link and also the visibility of the social icons(The links we added in the General->Social Profiles section)

buddypress-community-builder-layout-global-header-4

 

The footer section in the layout panel allows controlling number of widget areas available in footer and also updating the site copyright info.

buddypress-community-builder-layout-global-footer

As shown in the above image, You can have upto four widget areas. You can also toggle the visibility of social icons.

Another thing to note here is you can use the literal [current-year] to display current year automatically. It can be used like Copyright 2002-[current-year] and It will display Copyright 2002-2016(or what ever is the current year).

Next:- Typography panel

Subscribe