Rev Slider
Rev Slider Margins
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 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 – 原始檔
-
Warning: sizeof(): Parameter must be an array or an object that implements Countable in /home/customer/www/joyofliving.site/public_html/joyofliving.site/wp-content/plugins/revslider/includes/output.class.php on line 4074
You drink the Coffee, we do the work01Yehaaa, lets goWatch your Business grow like never before02How this worksEfficiently making use of Cloud Services03Tell me moreThe right Idea for your Problem04Yes, I want it95% Customer Satisfaction Rate05Show statistics24/7 Customer Support waiting for you06Contact Support
App Showcase 2 – 練習筆記
-
You drink the Coffee, we do the work01Yehaaa, lets goWatch your Business grow like never before02How this worksEfficiently making use of Cloud Services03Tell me moreThe right Idea for your Problem04Yes, I want it95% Customer Satisfaction Rate05Show statistics24/7 Customer Support waiting for you06Contact Support
所有使用的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
Q:第二個Slide: Night & Day,背景mp4影片,需要了解 Attribute / Classes-tp-blendvideo 是什麼?背景 Overlay還沒弄懂?
發現這兩個教學影片很有幫助:
Before After
Rev Slider Demo #1
Before After 1 – 原始檔
-
NICEGet the Before / After Add-On for Slider Revolution freeMAKE A CHOICECLEANGet the Before / After Add-On for Slider Revolution freeMAKE A CHOICE
-
NightDAYI often think that the night is more alive and more richly colored than the day.
— Vincent Van GoghFishing, with me, has always been an excuse to drink in the daytime.
— Jimmy Cannon -
&Before&After
Before After 2 – DIY練習篇
-
BEFOREMAKE A CHOICEAFTERMAKE A CHOICE
-
NIGHTDAY
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

Enable Before After Add-On

Lantern Forrest
Rev Slider - Practices
Lantern Forrest
-
LANTERN
FORRESTLANTERN
FORRESTLANTERN
FORRESTLANTERNIt’s a Perfect Year of the Dog
FORREST
Feb 8-26 Oakridge Centre
Feb 17-18 Vancouver Art Gallery MISSISSAUGA
Feb 24-25 LIVING ARTS Centre COURTENAY
Mar 4 Florence Filberg Centre
Gravity Design 2 – 學習檔
-
GRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGN
SLIDER REVOLUTION DOWNLOAD THIS
TEMPLATE FOR FREE 85+ TEMPLATES
AVAILABLE IN LIBRARYCOPYRIGHT 2017 THEMEPUNCH OHG
Gravity Design 3 – 練習檔
-
LunarFestLunarFestLunar FestLunarFestIt’s a Perfect Year of the Dog!
RVSLDR
Rev Slider Demo #2
RVSLDR 1 – 原始檔
-
RVSLDRPARTICLE EFFECTS ADDONHOW TO INSTALL
-
BLENDINGEFFECTS FOR YOUR WEBSITEGET STARTED NOW
-
CLOUDYBLEND VIDEOS INTO YOUR SLIDERBUY A LICENSE
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
-
RVSLDRPARTICLE EFFECTS ADDONHOW TO INSTALL
-
BLENDINGEFFECTS FOR YOUR WEBSITEGET STARTED NOW
-
CLOUDYBLEND VIDEOS INTO YOUR SLIDERBUY A LICENSE
所有使用的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






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 – 原始檔
-
GRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGN
SLIDER REVOLUTION DOWNLOAD THIS
TEMPLATE FOR FREE 85+ TEMPLATES
AVAILABLE IN LIBRARYCOPYRIGHT 2017 THEMEPUNCH OHG
Slide Layout: Full Screen
Desktop Layer Grid Size: 1240×868
所有使用的Images








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





Gravity Design 2 – 學習檔
-
GRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGNGRAVITY
DESIGN
SLIDER REVOLUTION DOWNLOAD THIS
TEMPLATE FOR FREE 85+ TEMPLATES
AVAILABLE IN LIBRARYCOPYRIGHT 2017 THEMEPUNCH OHG
Slide Layout: Auto
Desktop Layer Grid Size: 1240×600
Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向,也可連線 (注意看滑鼠的滑過的效果!)





Gravity Design 3 – 練習檔
-
LunarFestLunarFestLunar FestLunarFestIt’s a Perfect Year of the Dog!
Particles Settings 雪花片設定
雪花片可設定形狀,大小,顏色,速度,方向 (注意看滑鼠的滑過的效果!)




