Senna - User Guide

8/12/2019 Senna - User Guide

1/18

by PixelGrade

User Guide

1

shared on wplocker.com


2/18

Table of Contents

1. Theme Options

1.1 General Options

1.2 Style Options

1.3 Header Options

1.4 Footer Options

1.5 Home Page

1.6 Contact Page

1.7 Portfolio Options

1.8 Blog Options

1.9 Social and SEO Options

2. The Homepage Slider

2.1 Adding Slides

2.2 Order the Slides

3. Custom menus

4. Shortcodes

4.1 Columns

4.2 Team member

4.3 Icon

4.4 Glossary

4.5 Circle

4.6 Button

5. Custom widgets

5.1 Flickr Photostream

5.2 Dribbble Photostream

5.3 Latest Posts

5.4 Social Links

5.5 Newsletter

6. The Portfolio

2



3/18

1. Theme Options

1.1 General Options

Here you will find the general options for the Senna theme.

Enable or disable the smooth scrolling (the Apple style scrolling) for a professional looking

website.

Setup the site logo (both normal and Retina sized logo image - 2x), the favicon, the Apple

icon and the Metro icon. You can also enter your Google Analytics tracking code.

3



4/18

1.2 Style Options

Here you can play with the styling options the we provide.

Change the overall accent color with a built-in color picker and adjust the color to match

your logo or company color.

You can also change the default, included font, with one of the 600+ Google Web Fonts,

with a instant live preview of the selected font.

If you need to make some minor CSS changes to the site, you can use the Custom CSS

4



5/18

Style box to add the necessary CSS overwrite rules. For more advanced changes, we

recommend that you edit the .scss files or hire a developer. You can also add custom

javascript code that will be added to your section.

1.3 Header Options

From here you can choose whether the header portion should stay fixed (float on top of the

content and remain at the top of the screen), or should it be a normal header that

disappears when you scroll down.

1.4 Footer Options

From this section you can control

the site-wide Call to Action section

block, and edit its contents, button

and link. You can also define the

copyright text.

5



6/18

1.5 Home Page

This section offers you the controls

for the home page.

You can choose whether or not to

display the parallax animated slider,

edit the content below that slider

(the primary content area), choose whether or not to display the latest 3 portfolio projects,

and edit the content below the portfolio latest projects (the secondary content area).

1.6 Contact Page

Here you have the options to

manage the contact page

information.

You can choose whether or not

to display a Google map of

your location, and input the

needed map link, edit the

contact information, edit the

page content on the left, the

page title and choose the

previously created Contact

Form 7 contact form.

6



7/18

1.7 Portfolio Options

In this section you can portfolio page (the archive for the projects) title and header image

(we recommend uploading an image of at least 1200px wide since this will be a full width

image).

You also have advanced custom post type controls to define the singular and plural, change

the slug for the project and portfolio, and also whether or not you want to use tags for your

projects.

7



8/18

1.8 Blog Options

In this section you control the look of

your blog archive and single article

pages. You can choose the header

image that will be shown behind the

blog archive pages, choose from 3

different layouts for your archives (full

width without sidebar, sidebar left and

content, and sidebar right and content).

You can also choose whether or not to

show the article featured images on the

blog archives and change the word

count for the archive article excerpts.

8



9/18

The same layout options for the single article layout (full width, sidebar right and sidebar

left).

1.9 Social and SEO Options

This section is dedicated to the social

and SEO optimizationof your site. You

can choose whether or not to let us add

the social meta tags that the search

engine and share buttons so love. We

will need from you, for each social

service, Facebook, Google and Twitter,

some info regarding publishers, app

IDs that control the social presence ofthe website, profile URL. The

explanations provided for each field are

pretty clear.

9



10/18

In this section, you can also play with the social icons that will be used for the custom Social

Icons widget. Input your social links and order the icons with drag&drop.

2. The Homepage Slider

Your beautiful front page comes integrated with a full-width

slider with nice animated text, smooth transitionsand

parallax scrolling. All you need to do is add slides from the

left side menu section Homepage Slider.

2.1 Adding Slides

Simply add new slides like you would do with posts. For your comfort, weve made a

custom interface for adding/editing slides allowing you to enter all the data necessary for

you slides to rock.

10



11/18

Upload or select and existing background image in the Image section using the Wordpress

Media Uploader.

Add the slider content in the Content section using the Wordpress editor. You can have as

little as a h1 title or you can use our PixelGrade Shortcodes plugin to add columns,

icons, and much more. The remaining 2 inputs allow you to set the button text and the link ofthe button. All this content will appear above the background image, with nice transition

animations.

11



12/18

2.2 Order the Slides

To order the homepage slides, you need go into the edit

mode, or use the Quick edit feature, and assign an order

number to each slide.

3. Custom menus

Senna will add 2 custom menu zones

upon activation, allowing you to use

the Wordpress menu editor to control

the nicely integrated menus at the top

and footer.

Go to Appearance > Menus, and

create 2 menus, one as the header

menu (you can have multiple levels)

and one as the footer menu (only one

level). After that assign each each

menu to the respective location, in theleft side section Theme Locations.

4. Shortcodes

Here is where the beauty lies. Weve taken that

extra-mile and crafted an advanced but simple to

use shortcodes plugin that will allow you to give

structure and bling to your pages and posts. To

ensure ease of use, everything is visual, nicely

packed in a modal window accessible from the

Wordpress editor. Look for that funky P button.

12



13/18

4.1 Columns

The main shortcode that will be the workhorse of your pages, is the Columns shortcode.

This enables you to divide the content into a multitude of columns via a simple and intuitive

slider interface. Simply choose how many columns do you want and then drag the sliders to

select the proportions of each column. To get that much needed edge, you can add a

custom color to the background of the row of columns (hexadecimal color code) and make

the background extend to the full width of the screen.

Once you are done, hit the Insert button and we will generate for you the shortcode, with

some dummy content for each column. From here you can add what content you desire in

each column, text, images or even other shortcodes.

13



14/18

You can have multiple rows of columns in one page, with different column configurations,

but we urge you to take the time and think things over, so you dont clutter your pages with

too much complexity. Just a heads up to keep Senna working in your favour :)

4.2 Team member

This shortcode helps you add team member

information in a structured way, like you can see

at the bottom of the About page. You simply addthe Name, Title, Description and an image and

you are good to go. If you or your team members

are socially engaged (who is not these days) you

can also add the links to the main social networks:

Twitter, Facebook, LinkedIn and Pinterest.

14



15/18

4.3 Icon

Because icons are cool, weve made it

easy for you to add icons using the famous

FontAwesome icons. We also allow you

choose between 2 background styles (a

rectangle or circle) and 3 sizes (small,

medium and large). All these so you can

better make your point.

4.4 Glossary

Using this shortcode you can add a glossary at the end of your pages or posts, with a

custom styled title, link and left or right aligned. Simply input the Title,Link, Content and

Alignment. You can also input a CSS class to allow you to custom style the glossary.

4.5 CircleTo make your point about certain key aspects of your vision, you can use the Circle

shortcode to add a word enclosed in nicely styled circle. Maybe at the top of your columns

defined using the Column shortcode?

4.6 Button

15



16/18

To further emphasize your call to action or links, you can use this Button shortcode to get a

beautiful button that is in line with the rest of the theme (we really hate those pesky default

browser buttons). Simply input the button link and label and you are good to go. You can

also choose the size of your button: small, medium or big. For custom styling you can add a

CSS class and/or id.

5. Custom widgets

To help you further customize your sidebars and footer weve come up with a series of

custom coded widgets that integrate beautifully with your Senna theme. You can find the

widgets and the sidebars in the Appearance > Widgets section of the left side menu.

5.1 Flickr Photostream

Use this widget (called Senna Flickr Widget) to add the latest photos from a users stream

or a Flickr RSS feed. You can set the widget title, username or RSS url, tags (to filter the

stream to certain topics) and the number of images to display (we recommend to keep this

number short, somewhere between 8 and 12 - the maximum allowed is 20).

5.2 Dribbble Photostream

Use this widget (called Senna Dribbble Widget) to add the latest photos from a users

Dribbble account. You can set the widget title, the Dribbble username and the number of

images to display (we recommend to keep this number short, somewhere between 8 and

12 - the maximum allowed is 20).

16



17/18

5.3 Latest Posts

Use this widget (called Senna Latest Posts) to display in your sidebar or footer the latest

blog posts, the first having besides the title link, a short excerpt. You can input the Title of

the widget and the number of posts.

5.4 Social Links

This is a very simple to use widget (called Senna Social Links). It simply displays the social

links youve previously setup in the Senna Theme Options, using our custom designed

social icons. You just need to tell it the Title and youre done.

5.5 Newsletter

Use this widget to get a custom styled newsletter form.

6. The Portfolio

Let us give some information about how the portfolio grid-based patchwork style gallery is

set to work. Keeping up the main idea, weve decided that we will make it easy for you. Foreach project (you can add/edit new ones in the left side menu item Projects) you just have

to add your content, upload the images (we recommend at least 700px wide images) and,

this is important, to set the Featured image. This will be the image that will be used as the

big image on the home page, portfolio page, and the project page.

17



18/18

The rest of the images will be chosen based on their aspect ratio because we (and you we

think) want to crop as little as possible from your carefully made pictures. So for each

smaller image we try to find suitable candidates. If you havent uploaded enough images

to a project (we need at least 4-5 depending of the position of the project in the gallery - so

if you upload more than 5 you will be covered) we will fill that position with the site accent

color, defined in the Theme Options > Style Options.

On the project page, we only crop the big image, the rest being shrunk to fit the grid, so no

cropping there.

18


Senna - User Guide

Documents

Transcript of Senna - User Guide