The accordions below will help guide you on customizing your SSC WordPress template website. We are continually updating this with more common requests and questions.

Header

How to change department names in header

Screen Shot 2015-09-22 at 3.21.11 PM copy

To change the department name that appears at the top of the page (boxed in red), first click on “Edit Page” or “Edit Frontpage” in the admin bar at the top of your screen.

In the sidebar of the page, click “Settings” –> “General”

Screen Shot 2015-09-22 at 3.28.50 PM copy

Scroll to the bottom of the page to find the “Department” box. Fill in the section with the appropriate name of your department and press “Save Changes” once you are finished.

Screen Shot 2015-09-22 at 3.32.57 PM copy

How to add social media button in header

Screen Shot 2015-09-23 at 3.06.09 PM copy

To add social media icons to the header (boxed in red), first click on “Edit Page” or “Edit Frontpage” in the admin bar at the top of the page.

In the sidebar of the page, click “Base Theme” –> “Social Profiles”

Screen Shot 2015-09-23 at 3.02.28 PM copy

Select a social icon from the dropdown menu, and insert the URL to your social media account in the appropriate box.

How to add items to main menu

Screen Shot 2015-09-22 at 3.21.11 PM copy

To edit the menu items found on your front page (boxed in red), first click on “Edit Page” or “Edit Frontpage” in the admin bar at the top of your screen.

In the sidebar of the page, click “Appearance” –> “Menus”

Screen Shot 2015-09-22 at 3.45.29 PM

On the pages box on the left of the page, you may add a page to your menu by selecting a page and clicking “Add to Menu”. In the example below, we have added a “Sample Page” to our menu and nested it under the “About” page. You may do this by simply placing the box of the appropriate page as indented under the parent page of your choosing, which in our case is the “About” page.

Screen Shot 2015-09-22 at 3.47.37 PM

You may delete a page in the menu by selecting the dropdown arrow at the right of the box of the page in question, and selecting “Remove”.

Editing Pages

How to add Events

To add an event, locate the black admin bar on the top of the page. Hover over the website name, and select “Dashboard.” This redirects you to the Admin Dashboard of your website.
Screen Shot 2015-11-09 at 11.12.04 AM

Locate the dashboard on the left side of the screen, and select “Events.” This redirects you to the Events Menu of your wesite.

1

To add a new event, select “Add New” at the top of the screen.

2

Displayed on your screen is a new event page. On this page, you can add an event title, event description, time & date, location, and all other relevant event information.

3

Once finished, locate the “Publish” sidebar on the right side of the screen. Select “Publish” to publish your event. On this sidebar, you may also edit event visibility and preview your event before publishing.

4

How to restore a revision

On the black admin bar at the top of the page you wish to restore a previous version of, click “Edit Page.”

Under the “Publish” box at the top right corner of the page, click “Browse” next to “Revisions.”

Screen Shot 2015-09-22 at 2.51.48 PM copy

Using the slider at the top of the page, you can visit the past revisions of your page. You may click the “Restore This Revision” button to restore your page to the revision of your choice.

Screen Shot 2015-09-22 at 3.01.37 PM

How to remove demo content

The SSC WordPress Template provides you with several dummy pages furnished with example content to get your website started.

Screen Shot 2015-10-20 at 11.37.52 AM

To delete this content, first navigate to the page where you want to delete content. In the top menu bar, click “Edit Page.”

edit

You can delete content in one of two ways. First, if you would just like to delete the information on the page, you can do so by hovering over the elements in the ‘Avia Layout Builder.’ Each element, when hovered over, has a small red ‘X’ in the top right-hand corner that will delete that element from the page. In our example below, hitting ‘X’ will result in the ‘About Us’ text to disappear.

avia

If the page is using the Default Editor, simply select all the content inside the white box and erase it with ‘backspace’ or ‘delete’ on the keyboard.

default

If you would like to completely remove the page from your website, find the ‘Publish’ box on the right hand side of the editing page. Select ‘Move to Trash’ to delete the page from your website.

trash

Organizing pages into a page hierarchy

If your website has a lot of pages, it’s a good to try to organize them into some kind of hierarchical structure; that way, when visitors are navigating your site, they have an organized way of accessing information, and helps you keep the pages in a logical order. We call this a parent-child hierarchy; with it we can generate a sidebar menu on our content pages.

1

We can set page hierarchy attribute from the ‘Edit’ side of any content page. In our example template we are using ‘Sample Page.’

On the ‘Edit’ page, find the ‘Page Attributes’ box in the right sidebar.  It should have the elements Parent, Template, and Order. We will be working with Parent and Order.

2

By default, pages that are created have no parent page; this means they are at the top of the hierarchy. Typically these pages are the kinds of pages you would see on the top-level of a main menu. In order to give a page a parent, we click on the drop down underneath Parent, which expands a list of all the pages on the website. In the below example, all the pages are non-parented; they are all leftmost justified and aligned vertically (more on this later). We set a parent by simply choosing one of these pages.

3

Now, we have nested ‘Sample Page’ to be a child of ‘About.’ This would be the equivalent of adding ‘Sample Page’ as a drop-down menu item to ‘About.’ Now, when we are on the ‘About’ page, we can easily navigate to ‘Sample Page.’ Additionally, we can control the order that our child pages in the sidebar menu using the Order parameter. ‘0’ means the child has the highest precedence, so it would be the first item under parent in the sidebar menu, ‘1’ being the next highest precedence, and so on.

4

Next, let’s nest ‘Nested Sample Page’ under ‘Sample Page.’ Go to ‘Nested Sample Page’ and on the editing page, look at the Page Attributes. If we click the drop-down menu underneath Parent, we’ll see that ‘Sample Page’ has been indented in comparison to the rest of the list of pages. This is because it is now a child of ‘About.’ If we allow ‘Sample Page’ to be the parent of ‘Nested Sample Page,’ then ‘Nested Sample Page’ would be indented twice to say its most relevant page (parent) is ‘Sample Page’ and falls under the category (grandparent) of ‘About.’

Nesting pages in this parent-child hierarchy is a good way of organizing content by groups of information. It makes navigation easier for both you and the viewer!

6

Adding other elements (Blog Post, Team Member, Testimonial)

To add Blog Post, Team Member, and/or Testimonial items to your page, first navigate to the page where you would like to add this content.

Click “Edit Page” in the top menu bar. Make sure that you are editing the page with Avia Layout Builder. If your screen does not look similar to the one below, click “Advanced Layout Editor” instead to reach this screen.

Next, click “Content Elements” which should open a dropdown displaying elements you can add into your page, including Blog Post, Team Member, and Testimonial.

An editable format of the page you are editing is right underneath these options (scroll down to see it). Click and drag any of the content elements you wish to add directly into this space in the position desired.

To edit the content element you have just inserted (such as adding a team member’s picture and name if you added a Team Member option), simply click on the new object that appeared after dragging the content option into the work area.

Avia Layout Builder

The Avia Layout Builder provides several different options to customize the layout and elements on each page.

Basic Usage

You can open the Avia Layout Builder by clicking on the blue button located on the left hand side above the Default Text Editor.

From here, you can select whether you’d like to add Layout Elements, Content Elements, etc. To add an element, simply drag and drop the element to the empty block below the options. The block will turn green to indicate the element can be dropped.

Hovering over the element, you can see the options in the top left hand corner of the element. The middle icon allows you to duplicate the element, while the right icon open a new dialogue for editing the element. Remember to click ‘Save’ at the end of the dialogue to retain changes.

Text Block

Text blocks are used for the main content of a page. When editing the text block, a rich text editor will appear (just like when you normally edit a page); you can type your content directly into the box or copy & paste your content.

Additionally, you can use the top bar of options for formatting your text, such as creating headings, bullet points, changing font color or size, adding an image directly into the text block, adding a link, etc. Selecting “Toolbar Toggle” will allow you to see more styling options.

If you would like to manually style your text, you can click on “Text” in the top right hand corner of the editor in order to write in HTML.

Special Heading

A Special Heading can be used to make a title or piece of text stand out on the page (each section of this page is divided by special headings!). The ‘Content’ tab has several options:

Heading Text: This is what will display on the page.

Heading Type: This controls the size (the biggest being H1) and style of the heading.

Heading Style: Options on how the heading will appear on the page. The default is left-aligned text, followed by a thin grey line extending the width of the container. For non-default styles, you can also specify the Heading Size and an additional Subheading.

Padding Bottom: How much white space will appear between the bottom of the Special Heading and the next element on the page.

In the ‘Colors’ tab, click ‘Custom Color’ from the Heading Color drop-down to choose the color of the heading text.

Content Slider

Content Sliders can be used to display several bodies of text in a rotating carousel.

To add a slide, Click on the ‘+’ button in Add/Edit Slides. To change the order of the slides, click the double-facing arrows on the left side of each slide and drag it into the desired position. To delete a slide, click the ‘x.’ Slides can be edited by clicking on the corresponding box. This will open up options to change the Slide Title and the rich text editor for the slide content.

You can also change how many columns appear, the transition type, and the autorotation options.

Choosing a ‘Custom Color’ under the ‘Colors’ tab will apply the same color to all the text.

Tabs

Tabs, like Content Sliders, allow you to display text in a condensed space on the page. Users can toggle what content they are viewing by clicking on each tab.

To add a tab, Click on the ‘+’ button in Add/Edit Tabs. To change the order, click the double-facing arrows on the left side of each tab and drag it into the desired position. To delete a tab, click the ‘x’ next to the name of the tab. You can click on either the tab name or space below the tab to open up the rich text editor, where you can add icons to the tab or change the tab content.

Accordion

An Accordion object  is used to group and fold different spaces into a more compact form. You are reading content from an Accordion right now!

In the Avia Layout Editor under Content Elements, drag and drop the Accordion item into position and begin editing it by clicking on the object that is created.

On the top left of the editor you can find your currently created accordion sections. To edit an accordion tab (such as to add its content or its title), simply click on its name on this page. To add a new accordion section, click the ‘+’ button. To rearrange the order of the sections of your accordion, drag and reposition by the double-arrows on the left of a tab. You may read the descriptions of the other options on this page to change the overall behavior of the accordion.

Other elements (Blog Post, Team Member, Testimonial)

Avia Layout Builder has many other content options available for your page. Simply browse the Content Elements tab and drag and drop the object you would like to add to your page.

Edit it by clicking on it, and read the descriptions available for each option to modify the content to your liking.

Media Gallery

How to create a media gallery

Under the Pages section on the side bar, use the Advanced Layout Editor and open the “Content Elements”  tab. Add a Portfolio Grid Element to your page by dragging and dropping the element to your work area.

Screen Shot 2015-09-23 at 3.24.23 PM

Click on the Portfolio Grid Element that you added, and under the first box that asks “Which categories should be used for the portfolio?” select all choices (Galleries, Photos, Videos). Customize your media gallery by changing the different options on this page. We recommend that under “Link Handling,” the “Open a preview of the entry (known as AJAX Portfolio)” should be used. This will allow the user to open the content without loading another page.

Screen Shot 2015-09-24 at 1.49.41 PM

How to add images to your media gallery

In this section you will learn to add images to your portfolio grid. More specifically, you will learn to add either a single image or several image as an entry with a title and description to your portfolio.

To add/remove images and change their appearance in your media gallery, first visit your dashboard by hovering over your website’s name in the admin bar and clicking “Dashboard”. On the sidebar of the page, select  “Portfolio Items”.

To add a new portfolio item, click “Add New” at the top of the page. Enter the title for your entry in the top field of the page.

The featured image entry on the right of the page will set the cover picture for this entry in your media gallery. If you wish to add a single image as an entry to your portfolio, set this image as your featured image, and ignore the next step.

If you wish to add an album of images under your entry, find the “Add Preview Images” section of the page. Click on the “Add Preview Images” button and select the images you would like to add. You may add a caption to each image during this step, which will appear when the user hovers over the image when he/she visits your gallery. You may choose how these images are displayed under the “Display Preview Images” dropdown menu.

On the right side of the page, find the “Portfolio Categories” box. Select the “Photos” option.

Under the “Add Preview Text” section of the page, you may add a description of your entry which will appear once your entry is selected from your media gallery. The following image highlights all the sections you should modify to create your media gallery entry.

Screen Shot 2015-09-24 at 2.39.38 PM

Once you are finished, click the blue “Publish” (or “Update”) button.

The next shows the result from the previous step. It shows what our entry looks like when it is opened and the user is hovering over the thumbnail picture of Royce Hall. The caption “Royce Hall” was added to the picture when it was inserted into the entry.

Screen Shot 2015-09-24 at 2.44.09 PM

Don’t be alarmed by the other pictures in the portfolio grid–they are separate entries that existed before this tutorial.

How to add a video to your media gallery

To add a video to your media gallery, first visit your dashboard by hovering over your website’s name in the admin bar and clicking “Dashboard”. On the sidebar of the page, select  “Portfolio Items”.

To add a new portfolio item, click “Add New” at the top of the page. Enter the title for your entry in the top field of the page.

The featured image entry on the right of the page will set the cover picture for the video in your media gallery.

To add the video, modify the first two entries under the “Additional Portfolio Settings” section. For “Overwrite Portfolio Link setting”, choose the “Define custom link” option. In the field directly to its right, add the video URL.

On the right side of the page, find the “Portfolio Categories” box. Select the “Videos” option.

You should change the following fields to add a video to your media gallery:

Screen Shot 2015-09-24 at 3.00.34 PM

Once you are finished, click the blue “Publish” (or “Update”) button.

Footer

How to change department address in footer

Screen Shot 2015-09-22 at 4.12.50 PM copy

To change the department address that appears at the bottom of the page (boxed in red), first click on “Edit Page” or “Edit Frontpage” in the admin bar at the top of the page.

In the sidebar of the page, click “Settings” –> “General”

Screen Shot 2015-09-22 at 3.28.50 PM copy

Scroll to the bottom of the page to find the “Address” box. Fill in the section with the appropriate address of your department and press “Save Changes” once you are finished.

Screen Shot 2015-09-22 at 4.10.25 PM copy