• 本文摘要：　

　　如何用Elementor外掛程式編輯排版軟體編寫網站文章-圖像與文本篇詳細步驟教學讓您在wordpress价傳軟體環境中以最有效率的方式進行圖文並茂的美工網頁排版編輯，使閱讀您的部落格圖文是生活心靈極致享受，讓您很快晉身網紅部落客也指日可待。

　　文章閱讀與分享越多，長期而言也將讓您的網站成為搜尋引擎優化首選．

  •  寫作緣由：　

　　編寫文章都很費神了，還要在網路上排版，會不會很難呢？

　　拜Elementor網頁頁面|文章外掛軟體之賜，其實國小學童都能很快上手，更何況是聰明的您呢？更棒的是，Elementor還有免費版本，一般人用起來就很得心應手了，如果還需要更上層樓，在考慮付費版本即可！

　　個本文將間就文本與圖像的編輯作詳細步驟教學，其他族繁不及備載的眾多功能，請容在下令闢文章分別詳細介紹。

　　其實，實不相瞞，這兩招就夠滿足我網站幾乎所有文章的九成以上需求了，所以，咱們憶起先來了解這個基本的部分吧！

首先請進入WordPress控制台點選［文章］［撰寫新文章］即會出現以上畫面
首先請進入WordPress控制台點選［文章］［撰寫新文章］即會出現以上畫面
敬請輸入文章標題如上圖所示，輸入完畢之後敬請點擊畫面右下角［儲存草稿］按鈕。
敬請輸入文章標題如上圖所示，輸入完畢之後敬請點擊畫面右下角［儲存草稿］按鈕。
接下來畫面標題下方就會出現固定網址，以中文標題名稱為預設文章固定網址的一部份。
接下來畫面標題下方就會出現固定網址，以中文標題名稱為預設文章固定網址的一部份。
敬請點擊該固定網址右方的［編輯］按鈕，則該預設標題部分的固定網址會出現編輯對話框。
敬請點擊該固定網址右方的［編輯］按鈕，則該預設標題部分的固定網址會出現編輯對話框。
敬請改以有相關意義之英文關鍵字填入以有利於搜尋引擎優化，接下來請點擊其右方的［確認］按鈕，以結束該對話框。
敬請改以有相關意義之英文關鍵字填入以有利於搜尋引擎優化，接下來請點擊其右方的［確認］按鈕，以結束該對話框。
接下來，敬請再點擊一次［儲存草稿］按鈕。
接下來，敬請再點擊一次［儲存草稿］按鈕。
請將頁面往上滾動，即可看到右側欄［儲存草稿］按鈕，點擊該按鈕之後幾秒鐘就可以看到畫面左上角［文章草稿已更新］的訊息。
請將頁面往上滾動，即可看到右側欄［儲存草稿］按鈕，點擊該按鈕之後幾秒鐘就可以看到畫面左上角［文章草稿已更新］的訊息。
接下來，在Elementor外掛軟體安裝並啟用之後，就可以在標題左下角看到［使用Elementor編輯］按鈕。
接下來，在Elementor外掛軟體安裝並啟用之後，就可以在標題左下角看到［使用Elementor編輯］按鈕。
點擊該［使用Elementor編輯］按鈕之後，畫面就會更新如上圖所示。
點擊該［使用Elementor編輯］按鈕之後，畫面就會更新如上圖所示。
數秒鐘之後就可進入Elementor外掛程式所提供的編輯畫面，如上圖所示。
數秒鐘之後就可進入Elementor外掛程式所提供的編輯畫面，如上圖所示。

　　因為在此之前，咱們只有定義過標題，以及固定網址，可是，畫面一開始怎麼就有這麼多項目呢？

　　上圖左側欄乃是Elementor編輯器所屬的左側邊欄，其右方其餘畫面就好比空白稿紙一般，所以理論上，除了標題以外，的確應該是空無一物的。

　　稿紙右上方的圖像與相關文字，是網站專屬的識別標識。

　　因此，如果您將之看成是，這張高級的空白稿紙，有如五星級飯店的信紙，其上方不也都列印著該旅館的識別標識嗎？道理是相通的。這方面如何設定，我們也會有專文為您詳細步驟教學，敬請期待唷！

　　而網站識別標識下方，含有標題的一行字，則是系統自動產生的［麵包屑］，讓讀者與網路爬蟲，或是網路搜尋機器人知道這個文章物件相對於複雜的網路系統而言，所明白標識的路徑。

　　其下方的日期也是自動產生的，畢竟網路抄襲之風甚盛，這樣的時間標識，很容易判別是否為原創內容。

　　接下來呢？

　　當然是繼續步驟教學囉！

敬請將畫面往上滾動，於是在編輯畫面下半部，我們可以看到在虛線方框內紅與灰兩個按鈕。
敬請將畫面往上滾動，於是在編輯畫面下半部，我們可以看到在虛線方框內紅與灰兩個按鈕。
敬請點選紅色按鈕，您將看到畫面出現兩排不同的灰色小方塊分布的構成的偏即框配置群組，如上圖所示。若點擊方框內最左上角的方框配置選項，就會出現如下的編輯對話框。
敬請點選紅色按鈕，您將看到畫面出現兩排不同的灰色小方塊分布的構成的偏即框配置群組，如上圖所示。若點擊方框內最左上角的方框配置選項，就會出現如下的編輯對話框。
此一單一編輯對話框，可以乘載眾多不同內容選項。
此一單一編輯對話框，可以乘載眾多不同內容選項。
敬請點擊該編輯對話框灰色方框內部，則左側欄將會出現許多不同型態內容的選項，如上圖所示。
敬請點擊該編輯對話框灰色方框內部，則左側欄將會出現許多不同型態內容的選項，如上圖所示。
敬請點擊［圖像］按鈕，則畫面如上圖所示，在原左側邊欄出現［Choose You Image］點擊該按鈕，即會出現新的對話框，供您選取在電腦中，或網站媒體資料庫的圖像檔案。
敬請點擊［圖像］按鈕，則畫面如上圖所示，在原左側邊欄出現［Choose You Image］點擊該按鈕，即會出現新的對話框，供您選取在電腦中，或網站媒體資料庫的圖像檔案。
新的對話框供您選取在電腦中，或網站媒體資料庫的圖像檔案。如欲選取電腦中的檔案，敬請點擊左上角［上傳檔案］按鈕即可。
新的對話框供您選取在電腦中，或網站媒體資料庫的圖像檔案。如欲選取電腦中的檔案，敬請點擊左上角［上傳檔案］按鈕即可。
本案先以點選網站媒體資料庫為例，點選完畢後敬請點擊畫面中右下角的［插入媒體］按鈕，即會出現新的畫面，如上圖所示。
本案先以點選網站媒體資料庫為例，點選完畢後敬請點擊畫面中右下角的［插入媒體］按鈕，即會出現新的畫面，如上圖所示。
在左側欄圖像下方有［圖像尺寸］對話框的選項可供點選。
在左側欄圖像下方有［圖像尺寸］對話框的選項可供點選。
您也可以定義［連接到］對話框，選擇是否有網路位址可供定義以便點擊該圖像可自動連結到特定網頁。
您也可以定義［連接到］對話框，選擇是否有網路位址可供定義以便點擊該圖像可自動連結到特定網頁。
您也可以在［字幕］的對話框為圖像綴上說明文字，如圖所示。
您也可以在［字幕］的對話框為圖像綴上說明文字，如圖所示。
在左側邊欄最上方，您可以點選［格式］按鈕，為字幕多做一些選項使更為美觀。
在左側邊欄最上方，您可以點選［格式］按鈕，為字幕多做一些選項使更為美觀。
點擊［字幕］按鈕之後，就出現更多編輯選項，如圖所示。
點擊［字幕］按鈕之後，就出現更多編輯選項，如圖所示。
點擊［排版］選項，也會出現許多和排版相關的選項可供進一步編輯。
點擊［排版］選項，也會出現許多和排版相關的選項可供進一步編輯。
例如將尺寸調整至30，可以看到右側畫面的字幕同步變大。
例如將尺寸調整至30，可以看到右側畫面的字幕同步變大。
也可以為文字選擇您想要的字體顏色。
也可以為文字選擇您想要的字體顏色。
調整顏色時，右邊編輯欄內字幕的顏色也同步變化色澤。
調整顏色時，右邊編輯欄內字幕的顏色也同步變化色澤。
調整顏色時，右邊編輯欄內字幕的顏色也同步變化色澤，我們在此先選定紅色字體示範。
調整顏色時，右邊編輯欄內字幕的顏色也同步變化色澤，我們在此先選定紅色字體示範。
還可以選擇墨漬濃度。
還可以選擇墨漬濃度。
這個圖像編輯步驟教學先到此告一段落，接下來我們再示範其他選項，這次點選雙框編輯作示範步驟教學，請點擊上圖灰色大方框最上排佐顛第二個選項，如圖所示。
這個圖像編輯步驟教學先到此告一段落，接下來我們再示範其他選項，這次點選雙框編輯作示範步驟教學，請點擊上圖灰色大方框最上排佐顛第二個選項，如圖所示。
畫面隨即出現兩個均分的編輯對話框，這兩個對話框的水平寬度分配比例也是可調的。
畫面隨即出現兩個均分的編輯對話框，這兩個對話框的水平寬度分配比例也是可調的。
在此示範文本編輯器的使用，請以滑鼠江文本編輯器拖曳到您要編輯的對話框範圍內。
在此示範文本編輯器的使用，請以滑鼠江文本編輯器拖曳到您要編輯的對話框範圍內。
接下來就會出現如上圖所示的畫面。
接下來就會出現如上圖所示的畫面。
您可以在左側邊欄文本編輯器內將特定的字典選之後，點擊上圖［Ａ］選項所出現的色彩，定義文字的新色樣。
您可以在左側邊欄文本編輯器內將特定的字典選之後，點擊上圖［Ａ］選項所出現的色彩，定義文字的新色樣。
點選完畢之後，文本編輯器內的文字與又側邊欄的畫面內相關文字同步改變字體顏色。
點選完畢之後，文本編輯器內的文字與又側邊欄的畫面內相關文字同步改變字體顏色。
您也可以採用CSS語言進一步改變字體的款式與尺寸顏色等等多元選項。
以CSS語言改變字體外觀的例子,如圖所示。編輯告一段落，還可以點即左側邊欄右方的［＜］按鈕，將左側邊欄暫時隱身。
以CSS語言改變字體外觀的例子,如圖所示。編輯告一段落，還可以點即左側邊欄右方的［＜］按鈕，將左側邊欄暫時隱身。
如此便可即時看到未來網頁呈現在瀏覽器的模樣。再點擊該［＞］按鈕，就又可以恢復編輯狀態。
如此便可即時看到未來網頁呈現在瀏覽器的模樣。再點擊該［＞］按鈕，就又可以恢復編輯狀態。
接下來為您示範［按鈕］的編輯功能。敬請將左側邊欄的［按鈕］圖是拖曳到第二個編輯方塊內，如圖所示。
接下來為您示範［按鈕］的編輯功能。敬請將左側邊欄的［按鈕］圖是拖曳到第二個編輯方塊內，如圖所示。
拖曳完成後，［＊］按鈕即就定位，如圖所示。
拖曳完成後，［＊］按鈕即就定位，如圖所示。
將滑鼠游標移到右側畫面的編輯框，點擊滑鼠右鍵會出現新的編輯對話框。例如選擇最下方的［刪除］選項，該圖標即會消失，如下圖所示。
將滑鼠游標移到右側畫面的編輯框，點擊滑鼠右鍵會出現新的編輯對話框。例如選擇最下方的［刪除］選項，該圖標即會消失，如下圖所示。
如果是誤動作，我們可以點選左側邊欄最下方黑色橫幅嘴邊算起第三個按鈕。
如果是誤動作，我們可以點選左側邊欄最下方黑色橫幅嘴邊算起第三個按鈕。
名為［歷史］選項的按鈕
名為［歷史］選項的按鈕
此使左側邊欄就會出現編輯的［歷史］時點，可供您將時光到劉。
此使左側邊欄就會出現編輯的［歷史］時點，可供您將時光到劉。
最上面的歷史時點就是現況，因此點選第二個時點，就能恢復被誤刪的圖標了！
最上面的歷史時點就是現況，因此點選第二個時點，就能恢復被誤刪的圖標了！
回到編輯畫面，敬請點擊左側邊欄下方黑色橫幅左邊算起第二個［響應模式］按鈕。
回到編輯畫面，敬請點擊左側邊欄下方黑色橫幅左邊算起第二個［響應模式］按鈕。
此按鈕可供我們編輯過程中審視網頁在筆電桌電、平板與手機屏幕看到的最貼近真實的結果。此畫面為模擬平板的螢幕。
此按鈕可供我們編輯過程中審視網頁在筆電桌電、平板與手機屏幕看到的最貼近真實的結果。此畫面為模擬平板的螢幕。
此畫面則是模擬手機的螢幕。
此畫面則是模擬手機的螢幕。

　　恭喜老爺！賀喜夫人！

　　一不小心，才幾分鐘，您又學會了如何撰寫網站文章與編輯排版的九成以上功力了！

　　接下來，當然主要就是熟能生巧，多練習囉！

　　其實，其他的眾多功能，您也可以當作玩具一般，先試著玩著，很快也會精通的！

　　當然，我還是會抽空多多製作步驟教學的文章，讓您減少摸索的時間。敬請期待唷！感恩！

室內設計-裝潢-鄉村風-新古典-混搭風-作品分享-幸福莊園-餐廳-陶偶-裝飾
學習的道路上，歡喜有您與我共同成長！
免費註冊訂閱築韻集團專業文章
免費註冊訂閱築韻集團專業文章

    不想漏接下次的精采文章嗎？

    敬請點擊上方圖案，免費註冊，免費訂閱築韻集團專業文章，以後只要有新作出刊，您的電子信箱就會馬上收到通知。感恩！

相關文章：

自架網站很難嗎？很貴嗎？

如何購買超便宜域名所有權？

如何向bluehost選購超便宜又適合自己的虛擬主機代管服務？

如何向bluehost指定外購域名的虛擬主機代管服務？

如何在bluehost同時擁有多個網站代管？

如何不花一毛錢自行合法安裝市占率最高的WordPress架站軟體？

如何完成網站WordPress基本設定與控制台介面中文化？

如何不花一毛錢自行合法安裝主題佈景？

如何安裝免費版超好用網頁排版編輯外掛程式Elementor？

如何自架網站-讓您跌破眼鏡超便宜超簡單架設個性化網站詳細步驟教學

最新文章
勵志企管
室內設計
生活美學
經營理念
網站優化
築韻出版
3D動畫
下載專區

總公司地址：台灣省新竹縣竹北市福興路1028巷1號

台中分公司：台灣省台中市北屯區崇德路二段462號9樓之一

聯絡人：張世忠先生（0939-061-556）

電子信箱：mark.chang.1031@gmail.com

築韻空間美學工坊臉書粉絲團

築韻出版社臉書粉絲團

築韻集團YOUTUBE影片頻道

築韻集團FLICKR相簿圖庫