Tech

TECH TUTORIALS

Below are instructions for editing and changing items in the homepage, inside pages and membership area. Click on the navigation links below to skip to the section that you need instructions for.

1 :: How to edit the homepage

2 :: How to upload testimonials

3 :: How to use the different page templates for the program pages + special landing pages

4 :: How to edit the membership pages

5 :: How to edit the Mailchimp "Welcome" emails

6 :: How to edit the price of existing programs in DAP


HOW TO EDIT THE HOMEPAGE

The Homepage layout is divided into eight parts:

  1. Welcome Message
  2. Home Optin
  3. Programs
  4. Home Quiz Banner
  5. Home Testimonials
  6. Blog Area
  7. Footer Banner Area (Banner for the Shop page)
  8. Footer Optin

Some sections can be edited via Pages while some can be edited / changed via Thesis > Skin Content.

Welcome Message

To edit the Welcome message, go to Pages > Welcome and edit.

Home Optin Text

To edit the title and call to action content of the Home Optin box, go to Pages > Home Optin and edit.

Programs

There are two ways that you may want to edit the Programs Section:

  1. Change the image being displayed
  2. Change the image and the page that it is linked to

Currently, the three boxes in the Programs section are linked to the following pages:

  1. Redesign Your Life Over 40
  2. 12 Weeks to Total Transformation
  3. Fabulous Over 40

When you want to change the image but not the page:

  1. Just edit the page of the program which has the photo you want to change.
  2. Upload your new image and copy the URL. To maintain the consistency of the design, make sure your image measures 600 pixels (width) by 700 pixels (height).
  3. Paste it to replace the URL on the Thesis Thumbnail box.

thesisthumbnail When you want to change the image AND the page it is linked to:

  1. Create the new page.
  2. Upload an image that measures 600 pixels (width) by 700 pixels (height), copy the image URL and place it in the Thesis Thumbnail box.
  3. Go to Thesis > Skin Content.
  4. The three boxes are labeled as Program 1, Program 2 and Program 3. Choose the box you want to change and click on its link.
  5. In the dropdown menu that appears, select the new page you've created.

program

Important: Make sure your new page has an image of the correct dimensions in the Thesis Thumbnail box, otherwise the space would appear blank.

Home Quiz Banner

To change the image for the banner:

  1. Go to the Weight Plan Quiz page
  2. Upload a banner image that measures 1240 pixels (width) by 350 pixels (height) and copy the URL.
  3. Paste the image URL in the Thesis Thumbnail box.

To change the banner AND the page it links to

  1. Create the new page.
  2. Upload an image that measures 1240 pixels (width) by 350 pixels (height) , copy the image URL and place it in the Thesis Thumbnail box.
  3. Go to Thesis > Skin Content.
  4. Click on the link for Home Quiz Banner.
  5. In the dropdown menu that appears, select the new page you've created.

Important: Make sure your new page has an image of the correct dimensions in the Thesis Thumbnail box, otherwise the space would appear blank.

Home Testimonials

To add a testimonial, refer to the How to upload testimonials tutorial

To replace the whole set of testimonials appearing in the testimonial slider:

  1. Upload the new testimonials and create a new category for the slider. Since these testimonials appear on a slider on the homepage, it's best to keep these testimonials short (about one to two sentences).
  2. Go to Easy Testimonials Settings > Shortcode Generator and configure the settings:
    1. Number of testimonials to be displayed
    2. Choose the category of the new set of testimonials you created
    3. Set the testimonial length. Since these are short testimonials, just tick "Always display testimonials at their full length."
    4. Tick on "Output your testimonials in a slider".
    5. Set the time between slides to 8.
    6. Testimonials per slide is 1.
    7. And tick on "Automatically adjust the height of the slider to fit each testimonial."
  3. Click on "Build my shortcode" button and copy the shortcode that appears in the box.
  4. Go to Pages > Home Testimonials, delete the old shortcode and paste the new shortcode in the post box.

testimonial

Blog Area

The blog area displays the two latest posts posted in the blog.

To maintain the design layout, make sure to upload a Featured Image for every blog posts that is at least 820 pixels wide.

Footer Banner Area

To change the banner image and the page it links to, go to Thesis > Skin Content.

Click on Footer Banner Area and replace the code with a new code that has the URL of the new page and new image:

< a href="http://wonderswellness.com/link-of-new-page" target="_blank">< img src="http://wonderswellness.com/wp-content/thesis/skins/WondersWellness/images/new-banner-image.png" class="aligncenter" />< /a >

To maintain the design and layout, the new banner image must measure 1240 pixels (width) by 330 pixels (height).

Footer Optin Title and Content

To edit the title and call to action content of the Footer Optin box, go to Pages > Footer Optin and edit.


How to upload testimonials

Testimonials are uploaded using the Easy Testimonials plugin.

  1. Go to Testimonials > Add New Testimonial
  2. Type the name or title of the testimonial. This is only for identification purposes in the Testimonials list and does not appear on the page.
  3. Paste the testimonial content in the post box. Remember, for the rotating testimonials on the homepage, keep the testimonial content to one to two sentences. For the other pages, they can be as long as you like.
  4. Type the name and location of the person in the Testimonial Information box.
  5. Click on the Testimonial Category:
    1. 12 WTT Testimonials - For the testimonial list on the 12 Weeks to Total Transformation Sales Page
    2. Home Rotating Testimonials - For the testimonials appearing in the slider on the homepage
    3. Redesign Testimonials - For the testimonial list appearing on the Redesign Your Life Over 40 program page
    4. Testimonials Page - For the testimonial list appearing on the Satisfied Clients testimonial page

Note: The testimonials are listed in chronological order so new testimonials automatically appear at the bottom of the list. If you want to make the new testimonial you're adding to appear on top or at a specific order in the testimonial list, just change the published date to a date that's older than the testimonial you want it to precede.

To just add a single testimonial to a page

  1. Go to Testimonials > Testimonials
  2. Scroll to the name of the testimonial you want to embed
  3. Copy the single shortcode (Example: [ single_testimonial id=3018 ] )
  4. Paste it on the page where you want it to appear.

How to use the different page templates for the program pages + special landing pages

For 12 Weeks to Total Transformation

  • When you want to add a page to the membership area that needs to have the menu, choose the Thesis Skin Custom Template "12 WTT Membership Pages"
  • When you want to add a page that only needs the header but not the menu (example: a Thank You page), choose the Thesis Skin Custom Template "12 WTT Landing Page"

For Fabulous Over 40 pages

  • Choose the Thesis Skin Custom Template "Fab Over 40 Landing Page"

For landing pages that have the website logo but no menu

  • Choose the Thesis Skin Custom Template "Landing Page - No Menu and Footer"

For landing pages that have the website logo but have a narrow content box and enclosed in a dark blue background (like the Weight Plan Quiz Page)

  • Choose the Thesis Skin Custom Template "Landing Page - Enclosed".

template


How to edit the membership pages

To add an image linked to a file from S3:

Click on "Add Media".

For PDF file thumbnails, upload an image that's 309 pixels (width) by 409 pixels (height).

Then on the "ATTACHMENT DISPLAY SETTINGS" in the right column, select "Custom URL" from the "Link to" dropdown and paste the shortcode in this format:

[ s3mv fileName='filenameoftheitem.pdf' fileType='url' ]

Note: I had to place extra spaces after "[" symbol and before "]" symbol in the shortcode so that it will show up as a shortcode and not the actual Amazon S3 link. Remember to REMOVE THE SPACES at the beginning and end of the shortcode when you paste it.

The complete linked image code should look like this:

< a href="[ s3mv fileName='filenameoftheitem.pdf' fileType='url' ]" target="_blank">< img src= "http://wonderswellness.com/wp-content/uploads/2014/10/filethumbnail.png" width="309" height="409" class="aligncenter" />< / a >

Note: This code has extra spaces so that it will show up as a code and not the actual file and image.

To lay out the PDF file graphics in columns

To make it easy to create columns, we are using a plugin called Shortcodes Ultimate.

To add a shortcode, click on the "Insert shortcode" button (next to "Add Media") and choose "Row".

The default shortcode shows three columns measuring 1/3 each.

Click on "Insert shortcode" and it will embed the following:

Note: Spaces have been added after "[" symbol and before "]" symbol to make the shortcode show up. These spaces should be removed in the actual shortcode.

[ su_row ]

[ su_column size="1/3"]Insert content here[ /su_column ]

[ su_column size="1/3"]Insert content here[ /su_column ]

[ su_column size="1/3"]Insert content here[ /su_column ]

[ / su_row ]

Every row of columns is enclosed by the opening [ su_row ] shortcode and the closing [ / su_row ] shortcode.

Then in between these, you can place a shortcode for each column with its corresponding measurement: [ su_column size="1/3"]Insert content here[ /su_column ] .

Paste the complete code for the linked graphic image between each shortcode where it says "Insert content here".

When you want to change the number of columns, just change the fraction measurement AND add or subtract the number of shortcodes.

For example, you want four columns:

Change the fraction to "1/4" and add another row.

[ su_row ]

[ su_column size="1/4"]Insert content here[ /su_column ]

[ su_column size="1/4"]Insert content here[ /su_column ]

[ su_column size="1/4"]Insert content here[ /su_column ]

[ su_column size="1/4"]Insert content here[ /su_column ]

[ / su_row ]

If you want two columns:

Change the fraction to "1/2" and just insert two rows of shortcodes:

[ su_row ]

[ su_column size="1/2"]Insert content here[ /su_column ]

[ su_column size="1/2"]Insert content here[ /su_column ]

[ / su_row ]

How to edit the video shortcodes

An easy way would be to delete the old video files from S3 and name the new video files EXACTLY the same way as the old ones when you upload them to S3. This way, the existing shortcodes in the membership pages will still work.

However, if you're using new filenames for new video files, you'll have to edit the shortcodes in the member pages.

[ s3mv fileName='NewVideoFileNameHere.mp4' fileType='video' source='s3' width='640' height='480' splashImage='http://wonderswellness.com/wp-content/uploads/2014/06/wtt-video-cover-w1.jpg' preLoad='Y' autoPlay='N' belowVideoHTML='' cuePoint='' redirectURL='' pauseAtCuePoint='N' fixedSizeVideo='N' ]

 

Insert the new filename of the video after the s3mv fileName code.

To make a cover image appear for each video, insert the image URL of the cover image after the splashImage code.

If you only have one video, you can just embed the shortcode as an individual video.

If you have a couple of videos and you want to display the videos in a panel

Click on "Insert shortcode" button and choose "Tabs".

The "Vertical" option should be clicked as a "Yes".

And the in the "Class" box, paste the code wtt-custom-tabs - this is the tab panel specially customized for the 12 Weeks program.

It will produce a set of shortcodes like this:

[ su_tabs vertical="yes" class="wtt-custom-tabs"]

[ su_tab title="Title 1"]Content 1[ /su_tab]

[ su_tab title="Title 2"]Content 2[ /su_tab]

[ su_tab title="Title 3"]Content 3[ /su_tab]

[ /su_tabs ]

Every tab panel is enclosed by the opening [ su_tabs vertical="yes" class="wtt-custom-tabs"] shortcode and the closing [ /su_tabs ] shortcode.

Then in between these, you can place a shortcode for each video with its corresponding title: [ su_tab title="Title 1"]Content 1[ /su_tab] .

You can type the title of video where it says "Title 1".

You can insert the shortcode for the video where it says "Content 1".

You can add or subtract tabs as you need them depending on the number of videos you want to display.

How to edit the Mailchimp "Welcome" emails

1. After logging in to Mailchimp, click on "Lists" at the left column menu.

2. Click on the list you want to modify, for example:

  • Weight Loss and Wellness = 7 - Day Kickstart Opt in
  • Wonders Wellness = Guided Meditation Opt in

3. From the navigation menu on top, click on "Signup Forms", then "General Forms".

4. From the "Forms and response emails" drop down menu, select Final "welcome" email.

5. Hover on the body of the email and click on the "edit" button.

6. In the "Edit Your Content" box, make changes to your welcome email then click on "Save and close".

How to edit the price of existing programs in DAP

paypalprice

1. Click on Digital Access Pass (DAP).

2. In the DAP dashboard, click on Products / Levels.

3. Click on the Program Name of the product you want to edit.

4. Click the Pricing Tab.

5. Change the price of the program and click "Save Product".