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的設定!