Website Setup Instructions

CLICK ON THE STEPS BELOW TO BE DIRECTED TO THE INSTRUCTIONS

 

STEP 1 : LOGGING IN AND EDITING THE USERS, PASSWORDS, AND WEBSITE TITLE

STEP 2 : UPLOADING A LOGO AND CUSTOMIZING THE WEBSITE USING THE THEME OPTIONS

To access the “Theme Options” panel simply click on the menu item “Theme Options” and it will pull up the customization options we have built into Folio Websites themes

 

CLICK ON A LINK BELOW TO SKIP TO THE SECTIONS OF THE THEME OPTIONS

GENERAL OPTIONS

Custom Logo : We recommend re-sizing your logo to the MAXIMUM size of 300 px wide by 125 px high and then saving it as a JPEG or PNG file.

Custom Favicon : Upload a 16 px X 16 px image here

Website Width : You can choose your desired website width

      – If you chose 750px you will use the following image size 750px x 500px

      – If you chose 800px you will use the following image size 800px x 533px

      – If you chose 960px you will use the following image size 960px x 640px

      – If you chose 1140px you will use the following image size 1140px x 760px

NOTE : For the Minimal and Modern website the image sizes vary slightly as the menu is included in the website width … so you will want to use the following image sizes

      – If you chose 750px you will use the following image size 580 px  x  390px

      – If you chose 800px you will use the following image size 630px  x  420px

      – If you chose 960px you will use the following image size 790px  x  530px

      – If you chose 1140px you will use the following image size 970px  x  650px

Website Margins : This allows you to set the pixel “padding” or space at the top of your website and the “padding” or space at the bottom of your website

Background Color or Background Image :  This allows you to change the background color of your website or upload a background image

Footer Text : This is the text that will show on the footer of your website … this is a good spot for a copyright line or adding social media links

To add links that say “facebook” and “twitter” paste the following code :

 

<a class=alignright title=Facebook target=_blank href=https://www.facebook.com >FACEBOOK</a>
<a class=alignright title=Twitter target=_blank href=http://twitter.com>TWITTER</a>

 

NOTE : you can modify the URLS in the code segment to link to your specific page

 

You can add the following facebook, twitter, & pinterest icons by copying and pasting the following code into your “footer text” box :

<a href=http://facebook.com><img title=facebook class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2013/01/FacebookSmall.png /></a>

 

<a href=http://twitter.com><img title=twitter class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2013/01/TwitterSmall.png /></a>

 

<a href=http://pinterest.com><img title=pinterest class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2013/01/PinterestSmall1.png /></a>

 
 
OR you can add the following facebook, twitter, & pinterest icons by copying and pasting the following code into your “footer text” box :

<a href=http://facebook.com><img title=facebook class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2012/03/facebook.png /></a>

 

<a href=http://twitter.com><img title=twitter class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2012/03/twitter.png /></a>

 

<a href=http://pinterest.com><img title=pinterest class=alignright src=http://foliowebsites.com/support/wp-content/uploads/2012/03/pinterest.png /></a>

 
So your Footer Copy box will look something like the following :

Tracking Code : This is where you can paste in Google Analytics tracking code

Custom CSS : This is where you can enter custom CSS to modify the look of your website

NOTE : ONLY USE THIS BOX IF YOU ARE COMFORTABLE EDITING CSS

ALSO NOTE : IF YOU HIRE SOMEONE TO CUSTOMIZE YOUR CSS OF YOUR WEBSITE, MAKE SURE THEY ENTER THE CUSTOMIZATIONS IN THE CUSTOM CSS BOX.  THIS WILL ENSURE THAT FUTURE THEME UPDATES DO NOT OVERWRITE YOUR CUSTOM EDITS.

FONT STYLING

This is the section where you can customize all your website fonts including the Menu, Body Text, Dropdown Text, etc

Font : This options changes the main body text for your website … if you click on the dropdown next to font family you will see that we have built in 10 options for fonts

The options for “px below paragraphs” sets the spaces between paragraphs on your website.  We recommend 10 px but you can choose whatever you would like.

Menu Font : This option customizes the font for your main menu

Menu Dropdown Font : This option customizes the font in the dropdown from your main menu

Menu Dropdown Background and Hover Background : This option customizes the colors of your dropdown menu

 Link Styling : These options customize the look of general links on your website

GALLERY OPTIONS

Here you can customize the look and functionality of your galleries …

Note : Due to functionality of some themes, you may not have access to all the below options

BLOG OPTIONS

Blog Layout and Blog Header Image : These options allow you to customize the header of your blog.  If you choose a layout that includes a header image you can upload the header image in the “Blog Header Image” box.

Note : Due to layout of certain themes, not all theme have the option for multiple header styles

Note : you will want to upload the header image to the width you chose in the “General Options” … either 750px, 800px, 960px, or 1140px

Blog Header Styling : This option modifies the layout of your blog post titles

Additional Blog Header Styling : This option allows you to customize the font family, font size, and font color of your blog post titles

Line Below Post Header and Line To Separate Posts : This option allows you to add strokes below post titles and between posts while also allowing you to modify the spacing of your blog

STEP 3 : PREPARING IMAGES FOR YOUR WEBSITE

 
 
One of the easiest programs for resizing your images is BlogStomp … we would highly recommend purchasing this program as it makes life so much easier when resizing images and will save you TONS of time when blogging, etc …

Click here to visit BlogStomp.
 
 

USING ADOBE LIGTHROOOM

NOTE : If you have the PURE platform you will want to resize the images to the size you selected in your “Theme Options” Panel :

      – If you chose 750px you will use the following dimension 750px x 500px

      – If you chose 800px you will use the following dimension 800px x 533px

      – If you chose 960px you will use the following dimension 960px x 640px

      – If you chose 1140px you will use the following dimension 1140px x 760px

NOTE : For the Minimal and Modern website the image sizes vary slightly as the menu is included in the website width … so you will want to use the following image sizes

      – If you chose 750px you will use the following dimension 580 px  x  390px

      – If you chose 800px you will use the following dimension 630px  x  420px

      – If you chose 960px you will use the following dimension 790px  x  530px

      – If you chose 1140px you will use the following dimension 970px  x  650px

 



USING ADOBE PHOTOSHOP

NOTE : If you have the PURE platform you will want to resize the images to the size you selected in your “Theme Options” Panel :

      – If you chose 750px you will use the following dimension 750px x 500px

      – If you chose 800px you will use the following dimension 800px x 533px

      – If you chose 960px you will use the following dimension 960px x 640px

      – If you chose 1140px you will use the following dimension 1140px x 760px

NOTE : For the Minimal and Modern website the image sizes vary slightly as the menu is included in the website width … so you will want to use the following image sizes

      – If you chose 750px you will use the following dimension 580 px  x  390px

      – If you chose 800px you will use the following dimension 630px  x  420px

      – If you chose 960px you will use the following dimension 790px  x  530px

      – If you chose 1140px you will use the following dimension 970px  x  650px

 

IF YOU WANT PHOTOSHOP TEMPLATES TO HELP WITH RESIZING YOUR IMAGES … CLICK HERE TO DOWNLOAD PHOTOSHOP IMAGE TEMPLATES

 

 

 

IMAGE SPECS:
All of the image files for the website will be displayed within the maximum image size you choose in your “theme options” panel. So to prepare the images for the website we recommend using either Photoshop, Lightroom, or Aperture to re-size your files.

 

 

NOTE : If you have the PURE platform you will want to resize the images to the size you selected in your “Theme Options” Panel :

      – If you chose 750px you will use the following dimension 750px x 500px

      – If you chose 800px you will use the following dimension 800px x 533px

      – If you chose 960px you will use the following dimension 960px x 640px

      – If you chose 1140px you will use the following dimension 1140px x 760px

NOTE : For the Minimal and Modern website the image sizes vary slightly as the menu is included in the website width … so you will want to use the following image sizes

      – If you chose 750px you will use the following dimension 580 px  x  390px

      – If you chose 800px you will use the following dimension 630px  x  420px

      – If you chose 960px you will use the following dimension 790px  x  530px

      – If you chose 1140px you will use the following dimension 970px  x  650px

 

+For vertical images, we recommend re-sizing them to 500px tall, 533px tall, 640px tall or 760px tall …. and if you want two verticals to show up in one frame, just paste two of the re-sized verticals onto horizontal frames sized to the sizes listed above

STEP 4 : EDITING THE HOME SLIDESHOW IMAGES

Click on Pages -> Home and then click “edit”

 

Click on the “Upload / Insert Media” Icon

 

Drag and Drop your images into the gallery

 

You can add SEO information for your images here

 

And then you can rearrange the gallery image order after clicking “save all changes”

Click on “Save All Changes”

 

Click on Update to save your changes

EDITING THE HOMEPAGE – VIDEO

STEP 5 : CREATING GALLERY PAGES

Click on Pages and then click on Add New

 

Click on the “Upload / Insert Media” Icon

 

Drag and Drop your images into the gallery

**NOTE: WE RECOMMEND PUTTING NO MORE THAN 30 IMAGES PER GALLERY, THIS WILL HELP SPEED UP YOUR GALLERIES

You can add SEO information for your images here

 

And then you can rearrange the gallery image order after clicking “save all changes”

Click on “Save All Changes”

 

Make sure you apply the page template named “gallery”

Click on Update to save your changes

 

GALLERY VIDEO

TROUBLESHOOTING TIPS
If your gallery is not displaying when you test it … make sure you check both of the below items:

1. Did you click the button “insert gallery”? If so, you don’t need to click this button … so you can go back to your editor and delete the inserted gallery. Once you delete the gallery, click “update” and check to see if the gallery is working.

2. Did you apply the page template named gallery?

STEP 7 : ADDING AND REMOVING PAGES FROM YOUR WEBSITE MENU

First, go to Appearance -> Menus

 

Then you can click on the “Website Menu” option to edit your website menu  (we have already created this as a sample for you)

 

Inside of this menu you can re-arrange the menu items by dragging them around or remove menu items by clicking on the little right arrow icon and clicking remove

 

You can add pages to the Menu by checking the corresponding pages in the “pages” tab and clicking “add to menu”

 

And you can add custom links by using the “custom links” box

 

And when the menu or menus are ready … you can apply them to your website in the “Theme Locations” box
Note : you will see that your website supports two menus, one for the website and one for the blog … these can be the same menu or you can create two different menus

 

Menu Management Video


STEP 8 : CREATING PAGES WITH TEXT OR TEXT AND IMAGES

Click on Pages -> Add New

Then add the page title, add the text you would like into the main box, apply the “default template”, and choose whether or not you would like your footer widgets to show on the page

 

You can style the text by using the built in editor options

 

If you would like to add and image to the page you can do so setting the cursor to the beginning of your text

 

And then you can upload an image like you do for a gallery … and then you can choose either right or left aligment and click “insert into post”

 

If you are familiar with HTML styling you can use the HTML editor view to add custom styling to your page


STEP 9 : CREATING BLOG POSTS AND IMPORTING OLD BLOG POSTS

 

IMPORTING AN OLD BLOG

If you have any old blog posts you would like to import into your new FOLIO website … you can follow the instructions on exporting and importing a wordpress blog here:

Export : http://codex.wordpress.org/Tools_Export_Screen

Import: http://codex.wordpress.org/Tools_Import_SubPanel

When importing your blog export file you will reach a page that “assigns authors” and allows you to “Download and import file attachments” … MAKE SURE YOU CLICK THIS BOX to import the files because if you don’t your images won’t show up when you go live! (see image below)

 
 
One of the easiest programs for resizing your images and creating image collages is BlogStomp … we would highly recommend purchasing this program as it makes life so much easier when resizing images and will save you TONS of time when blogging, etc …

Click here to visit BlogStomp.
 
 

To Create a New Post Click on Posts -> Add New

 

 

Click on the “Upload / Insert Media” Icon

 

 

Drag and Drop your images into the post

 

NOTE : If you have the PURE platform you will want to resize the images to the size you selected in your “Theme Options” Panel :

      – If you chose 750px you will use the following dimension 750px x 500px

      – If you chose 800px you will use the following dimension 800px x 533px

      – If you chose 960px you will use the following dimension 960px x 640px

      – If you chose 1140px you will use the following dimension 1140px x 760px

NOTE : For the Minimal and Modern website the image sizes vary slightly as the menu is included in the website width … so you will want to use the following image sizes

      – If you chose 750px you will use the following dimension 580 px  x  390px

      – If you chose 800px you will use the following dimension 630px  x  420px

      – If you chose 960px you will use the following dimension 790px  x  530px

      – If you chose 1140px you will use the following dimension 970px  x  650px

 

 


 

 

You can add SEO information for your images once they have uploaded by clicking on “Show”

 

And then you can rearrange the post image order after clicking “save all changes”

Then you can “mass edit” the images by selecting all the images by clicking on “invert selection”

 

And you can apply alignment and image size adjustments in the “Mass Image Edit” box … and then you can click “apply changes”

 

note : you will either want to choose “None” or “Center” for the Image Aligment

 

note : you will want to select “full size” for the image sizes

 

 

Then you will want to click on “Insert Selected Images” once you have finished making your image edits

 

 

Then you can click on Publish to publish your post immediately or you can set the date for the post to publish

 

BULK UPLOADING AND BULK INSERTING POST IMAGES

We created a new plugin for the blog that allows you to bulk upload AND bulk insert images to the posts (so no more code editing). So when you upload images to a blog post you will now have the option to “insert selected images” and it will insert all your images into the blog post (without having to do a gallery).

You can download the Plugin here:

http://foliowebsites.com/support/downloads/faster-image-insert.zip

To install the plugin simply login to your wordpress admin and then go to Plugins -> Add New -> Upload.

We have already created the Blog page for you … so you can simply use the Posts tab under the main menu to create your blog posts. This is WordPress’ “forte” … to see all that you can do with WordPress’ amazing blogging platform visit : http://learn.wordpress.com/get-published/

And then drag your desired widgets over to the Footer 1, Footer 2, Footer 3, and Footer 4 widget boxes.


EDITING THE CONTACT PAGE

First thing you will want to do is add your email address to the contact form … to do this click on “Contact”

And then enter your email address in the “To:” field …

If you are wanting to customize the contact form … such as adding addition fields, changing the field text, etc, you can visit the plugins website for info on how to do so:
http://contactform7.com/faq/

And then if you would like to add a second email (To integrate Shootq, for example) … inside of the contact form settings you can check the “Use Mail 2” box and enter your additional email in the “To:” box

If you would like to add additional fields to your contact form … you can follow the instructions here:
http://contactform7.com/faq/#How_can_I_add_a_field_to_my_contact_form

If you are wanting to add text and an image to the contact form page simply go to Pages -> Contact

If you would like to add an image … first, hit return to bump this text [contact-form 1 “Contact form 1”] down and then you can click on the “upload an image” icon … choose your image and then make sure before you insert it you select right-justification checkbox and click “insert into post”

note: make sure your image is 500 px tall

 

TROUBLESHOOTING TIPS
If you test the contact form and you don’t receive an email:

- Make sure you domain email is working (as our email servers will not kick in until you go live and point your domain name to our servers)

- Make sure the proper email address is entered in the “To:” box of the Mail Form Box

 

- Make sure your email is set up properly : SETTING UP EMAIL
*** NOTE: Make sure you check your spam mail to see if your contact forms are going in there … If they are not showing up and you are using a domain email “yourname@yourdomain.com” then you should check with your domain registrar to see why they are not coming through. Please also note that once you point your domain to our servers your domain email will be delivered in your cPanel (which you
received a login in the initial “website is ready” email).

If you test the contact form and you don’t receive a confirmation that the contact from was sent:

You can check out the FAQ here: http://contactform7.com/faq/

ADDING/EDITING FOOTER WIDGETS FOR SEARCH, ARCHIVES, CATEGORIES, ETC

To Add or Edit Widgets for your website click on Appearance -> Widgets

And then once inside you can click and drag “available widgets” into the “Footer Widgets” on the right

 

These widgets will by default show on the Blog page … if you would like them to display on other pages of your website you can edit the page you would like it to show on and check the box that says “Enable Footer Widgets on This Page”


CREATING A PAGE WITH VIDEO

ALL IN ONE SEO PLUGIN

Once you are done setting up your new website you can “go live” by following the steps on this page: GOING LIVE