homepage

Homepage Customization in Hale or Prudence

Posted on by

Layout and Other Theme Options

Go to Appearance > Themes and select the Customize link. From here, you have the following options:

Site Title & Tagline

Here, you can change the name of your site as it appears in the top bar. The tagline is not currently used in the system.

Template Options

Here, you can choose what kind of homepage layout you’d like, and choose to include a School, or College in your top bar.

Navigation

Here, you can choose which Menu will appear as the main navigation for the site. You can probably leave it as is. To edit your navigation, see the Navigation guide.

Static Front Page

If you’d like to switch from a traditional site layout to a blog, select “Your latest posts”.
After you’ve finished customizing, hit save in to top right corner of the side panel, and those changes will appear on the site.

Homepage Content

Go to Appearance > Widgets. From here, you have the following:

Available Widgets

This is the library, the repository of possible widgets you can use in your site. To add widgets to the Sidebar, or a Home section, drag it in. The change happens immediately. Some widgets will need to to have some settings configured before they work fully.

Widgets Page
Widgets Screen

Inactive Widgets

Located below Active Widgets, you can use this to “save” a widget and it’s settings. If you switch themes, some of your widgets may end up here.

Sidebar

Widgets placed in the Sidebar will appear on the “News” page, the search results page, the archives page, and pages that use the ‘Default w/Sidebar’ page template.

Home1-Home5

These sections correspond to the different areas of a homepage layout. They will always start form the top left, and then wrap down to a second line.

Homepage Customization in Sherman or Hale 2015

Posted on by

The homepages of Sherman, Hale 2015 and Prudence 2018 are configured primarily in the Page Builder. On the homepage, click ‘Edit Page’. If you see the ‘Visual’, ‘Text’, and ‘Page Builder’ tabs on the top right of your page editing area, click ‘Page Builder’.  If you only see ‘Switch to Editor’ this means you’re already in Page Builder mode.

Page Builder View
View of editing screen in Page Builder mode – click to enlarge

Templates

There are a few different template options to choose from for the homepage that cooperate with Page Builder. Users can select Blank, Page Builder, or Page Builder – Cards. Each of these give the homepage a slightly different look, so it is best to try them all out and see which one fits best.

Note: Home and Default Template do NOT work with the Page Builder layout. They were used for the old style homepages that were customized under Appearance > Widgets.

Layouts

The page builder allows users to add different widgets in different areas of the page. To begin, click ‘Add Row’ at the top of the page editing area. Users can add as many rows as they would like. Before the row is added, the user can choose how many columns will be in that row and what percentage of the row each column will take up. There are many pre-made column ratios to choose from as well. Once the columns are set up, click ‘insert’ to officially insert the row into your homepage.

Home Page Builder Add New Row
Page Builder Add New Row screen – click to enlarge

If you roll your mouse over the wrench button above the top right corner of the row, you will see options to edit, duplicate, or delete it. You can move a row up or down by clicking and dragging the arrow button next to the wrench button.

Row Options

If you click to edit a row, you will see a screen similar to when you first added the row. However, in addition to editing the column number/sizes, you may also edit some row styles found on the right side of the screen.

Attributes

This section allows you to add a Row ID to your row or Row/Cell classes. In addition, you can add your own custom CSS to be applied to that specific row.

Layout

Here you can choose whether you want your row to have a bottom margin or padding. You can also choose a ‘gutter’ amount, which is the space between each column in the row. You can decide how much you want to stretch the row under ‘Row Layout’ and in which order you want each column to collapse for smaller screens under ‘Collapse Order’.

Design

Design allows you to choose a background color/image and a border color for your row.

Widgets

Each column on the Page Builder layout can hold 0, 1, or multiple widgets. To insert a widget, simply click ‘Add Widget’ and choose the widget you would like to add. Once a widget has been added, you can drag and drop it to the column you wish to place it in. If you roll your mouse over a widget you will see options to edit, duplicate, or delete it.

Widget Options

If you click to edit a widget, you will get a screen split into two sections. On the left side, you can edit the content of your widget. On the right side, you can edit the styles of your widget.

Attributes

This section allows you to add widget classes and custom css.

Layout

Here you can add padding around the widget.

Design

Design allows you to colors for different aspects of your widget including background, border, font, and links. In addition, you may also choose to add a background image to the widget here.

Full-Width Homepage Slideshow or Image

Posted on by

Follow these instructions for a full-width slideshow or image at the top of your homepage. Examples of this can be found on the UConn website as well as The Major Experience website. Note that your homepage must be using the Page Builder and the Template must be Blank. Also, your theme must be either Sherman or Hale 2015.

Slideshow

  1. Create the slideshow. You can find more information about our Meta Slider slideshow tool here.
  2. On the Metaslider page, set the width for your slideshow to be at least 1800px
  3. On the right side of the Metaslider page, under Advanced Settings > Stretch  select, "100%  wide output"
  4. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  5. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  6. Insert a Meta Slider widget into the row and select the slideshow. Do not add a title.
  7. Add the following code to your Custom CSS:
    • SHERMAN THEME 
      .home .entry-content {
margin-top:0
}
    • HALE 2015 THEME 
      .home #content {
padding:0
}
    • PRUDENCE 2018 THEME 
      .home #content .container { 
padding-top:0 
}  
.home .entry-content { 
margin-top:0 
}

Image

  1. Please Note:  Currently extra CSS may need to be added for the image to stretch full screen.  Follow the instructions below, if the image is left justified.
  2. Upload the image. Note: It may be a good idea to crop the image before adding it to your homepage. Normally, the ideal full-width homepage image will be very wide and very short.
  3. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  4. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  5. Insert an Image widget into the row and select the image. Do not add a title, but you must add alternate text.
  6. Add the following code to your Custom CSS:
    • SHERMAN THEME 
      .home .entry-content {
margin-top:0
}
    • HALE 2015 THEME 
      .home #content {
padding:0
}
    • PRUDENCE 2018 THEME 
      .home #content .container { 
padding-top:0 
}  
.home .entry-content { 
margin-top:0 
}
  7. If your image is Left Justified and not fully stretched, add the following to your Custom CSS:
    • Custom CSS 
      .siteorigin-panels-stretch img {
    width: 100%;
}

Widgets & Sidebars

Posted on by

WordPress widgets add content and features to your sidebars. Examples are the default widgets that come with WordPress for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Sidebars

You can create a sidebar by going to Appearance > Manage Sidebars. Under Add New Sidebar, type a name for your sidebar and click 'Add'.

Once a sidebar has been created, add widgets to it by going to Appearance > Widgets. You will see available widgets on the left side of the page and sidebars on the right. Simply drag and drop a widget onto the sidebar in which you want it to appear. Note that the Default sidebar automatically appears with Archives, Search Results, and when viewing single posts.

To get a sidebar you've created to appear on a specific page, go to edit the page. On the right side there will be a box titled 'Page Settings', under which you can choose to display one of your sidebars. There is also a checkbox to apply this same sidebar to all child pages. If you want to apply the same sidebar to an entire section of a site, this option will be useful.

Template Support

Most pages support this feature.

Theme May Assign Sidebar Uses Default Sidebar
Sherman, Hale 2015 Default Page,
A-Z Index,
Blank,
Blog,
Homepage,
User Profile		 Archives,
Search Results,
Posts
Hale & Prudence Default Page,
A-Z Index,
User List,
User Profile,
User Table		 Archives,
Default w/Sidebar,
Posts,
Search Results