Revolution Slider Tutorials – Ken Burns

米蠍屋筆記

Background Image: Flower Bucket by Eleanor Lutz

Revolution Slider Tutorials - Ken Burns

April 5, 2018

1 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

Photo: lunarfest.org

Rev Slider Margins

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

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 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

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

Ｑ：第二個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:

Slide 2 使用的Images:

還有一個雲朵的mpt4

Slide 3 使用的Images:

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

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

還有一個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