Photo: Silverton Lookout, BC
Switch Divi Theme to GeneratePress w/Elementor
Migration
Divi Theme在上兩個星期到期時我沒有續約，想說老闆每年換新版，應該不需要再用到Divi了，也想省點錢，結果我漏掉了協會的網站可能是不換版的，這下子可好了，我沒有更新版的Divi，協會這個網站要換theme來做，又是個大工程，嗚嗚….
首先，先備份網站吧！原本用Mannually的方式，但是用SFTP備份，從昨天下載到今天，到現在還在下載，是怎麼了…換用Plugin好了…
先看這個教學影片：
這個影片教的是：All-In-One-WP-Migration plugin. 免費的適用於500MB以下的網站．
還教了怎麼改下載容量：
Plugins > Editor
> Select plugin to edit: all-in-one-wp-migration/constants.php
> Scroll to Max File Size, 536870912
(在後面加個0就從500MB變成5GB了)
不過這個影片，省掉了一些步驟，廢話還不少，大概不太放心追隨這位大師呦！
再看看另一個影片嚕：
這真是個救世主呀！轉移網站可以這麼簡單？今年底最讚的禮物了，而且是免費的！
步驟：
1. 先設好新網址及安裝WordPress
2. 在舊網址安裝 All In One WP Migration > Export > Export To / File > Download the files
3. 在新網址安裝 All In One WP Migration > Import > File > load the files
然後會看到：
這個警告是說，按下PROCEED後，將覆蓋所有網站的資訊，那正是我們要的！
點入Permalinks Settings
重新登入WordPress，儲存兩次Permalinks Settings後，就大功告成了！
沒想到這個Plguin這麼簡單用，我一口氣備份了兩份：
https://acsea2017b.joyofliving.site/
https://acsea2017c.joyofliving.site/
這下子可以放心的來換新的theme了．
首先把Divi Theme換成Generate Press和Elementor Pro，開始作業了！這次用Elementor出現的問題是：502 Bad Gateway，需要在.htaccess裡加上這一條：
SubstituteMaxLineLength 10m
才能順利使用Elementor.
Custom Header w/Nav Menu
用下面步驟製做MENU:
Step 1: Elementor > My Library > Add New Template
Step 2: Logo uses Image Widge & Menu uses Elementor Pro Element – Nav Menu
Step 3: Disable the theme header by
1. Placing the template shortcode in GP Hook – Before Header Content section
2. Hiding the site title & site tagline in Appearance > Customize > Site Identity
3. Setting No Navigation in Appearance > Customize > Layout > Primary Navigation > Navigation Location > No Navigation
4. Setting Header Padding 0 0 0 0 in Appearance > Customize > Layout > Header > Heading Padding 0 0 0 0
這個CONTACT US以前在Divi是用一般Secondary Navigation做的，但是在Generate Press裡的Primary Navigation做不出來讓Menu和Logo居中，我用了Custom Header的功能來取代Navigation，所以這裡想要用Secondary Navigation來做CONTACT US就行不通了．
山不轉，路轉！那我就在Custom Header裡繼續客製化我的Menu了，首先我用Text Editor加Link的方式，但是這樣改了Link的顏色．最後這個CONTACT US是用Heading做出來的，Heading有讓你加Link的功能．真是謝天謝地呀！
去掉換掉Divi Theme，要付出的最大代價就是一頁一頁重做，每個步驟重新調過，真是欲哭無淚呀！不過就把它當成熟練功的養成吧！ 12.12.17 12:00pm
Page Layout and Wireframe Concept
每次重新建立新網站時，最挫折的部份無非是基本概念的部份，網頁結構及螢幕比例的問題，不是科班出身的我，完全沒有概念，雖然每一個新網站都讓我學到更多，總是希望一開始有人可以教我正確的方法．抹掉自卑的陰影，現在每次撞牆時總是會想起老闆那句話…妳這樣會害我們的網站很不專業…我已經很努力在每次遇到問題時找到解決方法，卻也不斷的問自己，也許自己太老，反應太慢，是真的不適合這份工作的，但是什麼時後該是認清事實，接受它，放棄的時後？還是不要我來出聲，繼續下去，讓時間來回答我這個問題吧！
找到下面這三個Elementor教基礎概念的影片：
Content Width:
Boxed
Full Width
Columns Gap:
Default: 10, 10, 10, 10px
No Gap: 0, 0, 0 , 0px
Narraow: 5, 5, 5, 5px
Extended: 15, 15, 15, 15px
Wide: 20, 20, 20, 20px
Wider: 30, 30, 30, 30px
Height:
Default-
Fit to Screen
Column Position:Stretch/Top/Middle/Bottom
Min Height
Minimum Height- set by px or vh
Column Position:Stretch/Top/Middle/Bottom
Content Position:
Default
Top
Middle
Bottom
HTML Tag:
Default
section
header
footer
aside
article
nav
div
再繼續看完這兩個教學影片，才懂得前兩天重做acsea.ca遇到的問題．看來我又得重新再做第三次了，一來開心找到改進的方法，二來又陷入為什麼我還是這麼菜鳥的漩濄….12.16.2017 4:46pm
第三個影片順便複習一下如何應用Responsive Tablet和Mobile的設定！
