senna - user guide
Post on 03-Jun-2018
236 Views
Preview:
TRANSCRIPT
-
8/12/2019 Senna - User Guide
1/18
by PixelGrade
User Guide
1
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
-
8/12/2019 Senna - User Guide
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
shared on wplocker.com
top related