Revolution Slider Tutorials – Ken Burns

米蠍屋筆記

Revolution Slider Tutorials - Ken Burns

April 5, 2018

Muhammad Qasim – 2017.03.19

Scale: (in %) From 150 to 100, Don’t use % less than 100

2 . WP Tuts – 2016.02.17

這位老師解釋的很清楚,多看幾次!

3.   Elegant Marketplace – 2016.1.13

Import Demo – Classic Carousel Slider, delete other sliders only leave Ken Burner slide

  • Minimum 3000 px wide (upto 5000 px) and very high quality image
  • 3個觀念要懂的:
    1. Scale (%) From ___ To ___
    2. Horizontal Offset (px) From ____ To ____ (以中心點用正負px來設定起點和終點)
    3. Vertical Offset (px) From ____ To ____ (以中心點用正負px來設定起點和終點)

Rev Slider Margins

Rev Slider Margins

花了兩天的時間,才知道自己繞了一大圈,下面紅色部份是解決黃色 Margin的方法.

#1 1920x1080 (38%)
#2 1366x768 (53%)
#3 600x800 (51%)
#4 1366x1024 (40%) iPad Pro 12.9"
#5 1112x834 (49%) iPad Pro 10.5"
#6 1024x768 (53%) iPad 9.7"
#7 1024x768 (53%) iPad mini 7.9"
#8 414x736 (55%) iPhone 7Plus
#9 375x667 (61%) iPhone 7
#10 320x568 (72%) iPhone SE

Rev Slider: Year 2018

Slider Settings:
1. Content Source: Default Slider
2. Slider Titel & Shortcode
3. Select a Slider Type: Standard Slider
4. Slider Layout: Full-Width
  ** Desktop Large: 1280×800
  ** Notebook: Auto Sizes
  ** Tablet: Auto Sizes
  ** Mobile:  Auto Sizes

Slider Editor:
1. Main Background: Color Yellow
2. Add Layer : Image Size: 1280×800

Rev Slider: Year 2018C

Slider Settings:
1. Content Source: Default Slider
2. Slider Titel & Shortcode
3. Select a Slider Type: Standard Slider
4. Slider Layout: Full-Width
  ** Desktop Large: 1280×800
  ** Notebook: Auto Sizes
  ** Tablet: Auto Sizes
  ** Mobile:  Auto Sizes
  ** Respect Aspect Ration : On

Slider Editor:
1. Main Background: Image 1280×800
2. Add Layer : N/A

Rev Slider Practice – App Showcase

Rev Slider Demo #11 - App Showcase

App Showcase 1 – 原始檔

App Showcase 2 – 練習筆記

所有使用的Images

Image 01 510x900 (jpg)
Image_02 510x900 (jpg)
Image_03 510x900 (jpg)
Image_04 510x900 (jpg)
Image 05 510x900 (jpg)
Image_06 510x900 (jpg)
Image_00 510x900 (jpg)
Image_iPhone 1500x1500 (png)

Slider Settings:
1. Content Source: Default Slider
2. Slider Titel & Shortcode
3. Select a Slider Type: Standard Slider
4. Slider Layout: Full-Width
  ** Desktop Large: 1240×868
  ** Notebook: 1024×768 Custom Grid Size – On
  ** Tablet: 778×960 Custom Grid Size – On
  ** Mobile: 480×720 Custom Grid Size – On

General Settings
1. Slideshow 2. Defaults 3. Progress Bar 4. 1st Slide 5. Misc

Layout & Visual
1. Appearance 2. Spinner 3. Mobile 4. Position

Parallax & 3D

Scroll Effects 

Performance & SEO

Problem Handlings
1. Fallbacks   2. Troubleshooting

Google Fonts

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向
Custom Settings: 1. Particles  2. Styles  3. Movement  4. Interactivity  5. Pulse

Slider Revolution Toturials

Slider Revolution Tutorials

老闆在11月30日從這裡 https://revolution.themepunch.com/examples/ 挑了她喜歡的10款,很怕在12月15日發射網站首頁時,無法達到她要的標準,又開始不眠不休的學,真希望自己對自己有信心一點,不要老覺得自己做不出來,不要老覺得自己老了,我已經盡全力了.把心情和學習過程記錄在此,也許15日發射網站後,會對自己的成績滿意一些!

#1. https://revolution.themepunch.com/before-after-slider/
#2. https://revolution.themepunch.com/particle-effect-for-wordpress/
#3. https://revolution.themepunch.com/wordpress-slideshow-gallery/
#4. https://revolution.themepunch.com/agency-website-hero-header/
#5. https://revolution.themepunch.com/wordpress-content-blocks/
#6. https://revolution.themepunch.com/wordpress-facebook-feed/
#7. https://revolution.themepunch.com/coming-soon-add-on/
#8. https://revolution.themepunch.com/parallax-scroll/
#9. https://revolution.themepunch.com/best-wordpress-slider-plugin-2017/
#10. https://revolution.themepunch.com/content-zoom-slider/

12月 3日 我先挑了#9 試做 – 原來我以為背景會動是用Gif圖檔的效果,結果是這個Plugin的Particle Effect.

12月3日 再挑#2來練習,#2也是Particle Effect的效果

12月4日 練習做#1 Before After 

Q:第二個Slide: Night & Day,背景mp4影片,需要了解 Attribute / Classes-tp-blendvideo 是什麼?背景 Overlay還沒弄懂?

發現這兩個教學影片很有幫助:

Before After

Rev Slider Demo #1

Before After 1 – 原始檔

Before After 2 – DIY練習篇

Slide 1使用的Images:

Image_Mac_1 2000x2000 (png)
Image_plant 1500x1500 (png)
Image_keyboard 1600x1600 (png)
Image_glasses 1000x1000 (png)
Image_mouse 1000x1000 (png)
Image_mac_2 2000x2000 (png)
Image_coffee 1500x1500 (png)

Slide 2 使用的Images:

Image_night 1600x986 (jpg)
Image_day 1600x986 (jpg)
Image_雲朵 1920x1080 (jpg)

還有一個雲朵的mpt4

Slide 3 使用的Images:

Image_before 1600x1000 (jpg)
Image_after 1600x1000 (jpg)

Slider Settings:
1. Content Source: Default Slider
2. Slider Titel & Shortcode
3. Select a Slider Type: Standard Slider
4. Slider Layout: Full Screen
  ** Desktop Large: 1200×800
  ** Notebook: Auto Size 
  ** Tablet: Auto Size
  ** Mobile: 480×700 Custom Grid Size – On

感謝有WPTuts的教學影片,讓我不再大海撈針的猛讀Documentation,看過影片後,對Before After效果有概念多了!

General Settings
1. Slideshow 2. Defaults 3. Progress Bar 4. 1st Slide 5. Misc

Layout & Visual
1. Appearance 2. Spinner 3. Mobile 4. Position

Navigation
1. Arrows  2. Bullets  3. Tabs  4. Thumbs  5. Touch  6. Misc

Parallax & 3D 
Disabled

Scroll Effects 

Performance & SEO

Problem Handlings
1. Fallbacks   2. Troubleshooting

Google Fonts

Before / After
1. Arrows  2. Drag Container  3. Divider Line  4. Defaults  5. Misc

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向
Custom Settings: 1. Particles  2. Styles  3. Movement  4. Interactivity  5. Pulse

Enable Before After Add-On

Enable Before After Add-On

Lantern Forrest

Rev Slider - Practices

Lantern Forrest

Gravity Design 2 – 學習檔

Gravity Design 3 – 練習檔

RVSLDR

Rev Slider Demo #2

RVSLDR 1 – 原始檔

RVSLDR 2 – 學習檔
** 還沒學會這個Blend Mode Effect – 就是滑鼠滑過才會顯現底圖,也發現手機無法呈現這個效果,所以先暫停.

找不到下面這些…
** Blend Mode Effect – thru a layer image with CSS blend mode
–> Select “BLEND MODE IMAGE” layer
–> Go to advanced style
–> Filters –> blend mode

所有使用的Images

Image_風景 1920x1280 (jpg)
Image_人頭 1920x1280 (jpg)
Image_雲朵 1920x1080 (jpg)

還有一個mp4檔 2MB

Slider Settings:
1. Content Source: Default Slider
2. Slider Titel & Shortcode
3. Select a Slider Type: Standard Slider
4. Slider Layout: Full Screen
  ** Desktop Large: 1240×868
  ** Notebook: 1024×768 Custom Grid Size – On
  ** Tablet: 778×960 Custom Grid Size – On
  ** Mobile: 480×720 Custom Grid Size – On

General Settings
1. Slideshow 2. Defaults 3. Progress Bar 4. 1st Slide 5. Misc

Layout & Visual
1. Appearance 2. Spinner 3. Mobile 4. Position

Navigation
1. Arrows  2. Bullets  3. Tabs  4. Thumbs  5. Touch  6. Misc

Parallax & 3D 
Disabled

Scroll Effects 

Performance & SEO

Problem Handlings
1. Fallbacks   2. Troubleshooting

Google Fonts

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向
Custom Settings: 1. Particles  2. Styles  3. Movement  4. Interactivity  5. Pulse

Gravity Design

Rev Slider Demo #9

Gravity Design 1 – 原始檔

Slide Layout: Full Screen
Desktop Layer Grid Size: 1240×868

所有使用的Images

Image_Background 1920x1280 (jpg)
Image_Astronaut 1025x500 (png) 透明
Image_Galaxy 407x200 (png)透明
Image_Flake_1 25x24 (png)
Image_Flake_2 29x21 (png)
Image_Flake_3 27x26 (png)
Image_Flake_4 26x24 (png)
Image_Flake_5 28x27 (png)

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向

Gravity Design 2 – 學習檔

Slide Layout: Auto
Desktop Layer Grid Size: 1240×600

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向,也可連線 (注意看滑鼠的滑過的效果!)

Gravity Design 3 – 練習檔

Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向 (注意看滑鼠的滑過的效果!)

同一頁有兩種不同的Slides時,第二個Slide看不到Initial的動畫效果,除非refresh the page.