這幾天在幫客戶製作一個活動網頁,其中一個區塊,客戶需要放一個表格來呈現議程內容,這個表格在電腦上看起來很正常也很漂亮,但在手機上就太擁擠不好看… 那要怎麼辦呢?要怎麼把複雜的表格變成在手機上也好看呢? 於是我找到了這個線上的免費工具,幾分鐘就幫我把表格轉換成RWD的版本了喔! 不過,這個技巧還是需要稍微懂一點點HTML/CSS程式的朋友們用,新手們可能不太適合喔! 製作RWD表格的三種方式: 1. Enter Data 手動輸入表格內容來產生RWD表格 填入你需要的列數與行數,並且填入表格內容,他就會把產生的表格程式碼顯示在HTML output裡面喔。 2. Paste From Spreadsheet 從Excel,或Google表格來產生RWD表格 從 Excel 去複製欄位,貼到這個工具裡就可以在HTML output的地方得到RWD的表格的程式碼。 3. 貼入一般表格來產生RWD表格 我自己是用這個方式喔,只要貼入任何的表格的程式碼,他就自動幫你轉換成RWD的程式碼喔! 最重要的來了!不論你用上面哪一種方式產生RWD表格的程式碼,記得需要補上自訂的CSS到你的主題裡。我是直接把CSS貼到Visual Composer在文章裡的自訂CSS的地方,就可以了。 ➡️ 自動轉成RWD表格的免費線上工具 https://ianrmedia.unl.edu/responsive-table-generator-tool 希望這個工具對大家的表格有幫助喔!
WordPress教學
-
-
今天帶路姬第一次使用GeneratePress,搭配 Elementor Pro,並且較深入的使用來做一個完整的形象網站。 稍微分享一點心得… 首先,一開始我卡了5分鐘,有點搞不懂怎麼做,因為他的中文翻譯的有點怪… 可能我真的不常看到主題有翻譯的,不過,對不習慣英文的人來說應該是好消息。 後來,我改回英文後,終於看懂了95%… 改回英文後,GeneratePress 本身的設定都在「外觀」的「自訂」裡面,和 OceanWP 很類似,兩個都蠻好用的,只是,GeneratePress 的自訂項目稍微更簡略一點,所以讓網站很輕爽的感覺,不足的部分再用Elementor來補。 Elementor & Beaver Builder 的比較 這次也是我第一次很完整的使用 Elementor,之前很常用 Beaver Builder 和 Visual Composer,相較之下, Elementor 真的可以控制的很細緻很完美,可以分別針對手機版和電腦版設定各自的 padding, margin 等等,對我這種對質感吹毛求疵,有「對齊控」「強迫症」的設計師來說,真的是超讚的。 雖然,在這方面,Beaver Builder也是做得不錯了,可是插入物件的方式不同,Elementor比較少用到拖拉,不會覺得手腕很痠,Beaver Builder比較直覺好學,可是用久了手有點累XD,Elementor有些功能是要點「右鍵」才會出現,像我一開始找不到地方刪除物件,這就需要一點學習和摸索,可是一旦找到了,後來就覺得很輕鬆,不用一直移動滑鼠… 有些功能,隨處可得。 Elementor 好用嗎? 基本的 Elementor,我是覺得不算太難,也是一樣增加一行,然後可以直接插入Library裡面的Block(事先做好的各種區塊),或者,直接插入Library 裡事先做好的頁面,都很方便! 還有一個地方讓我稍微卡了一下,GeneratePress本身可以匯入很多範例網站,其中有一些有用到他們自己的Header Builder,一個獨立的製作頁首的功能,這個是其他主題沒有的,害我一開始一直找不到,我的頁首要怎麼編輯… 後來,我不喜歡他的Header Builder,我停用他,換成Elementor自己的頁首了。關於這點,GeneratePress還不錯的是,他跟OceanWP一樣,都可以讓你停用你不需要的功能,讓網站速度更快。 整體來說,Elementor是一個可以簡單、也可以不簡單的內容編輯器… 用途算蠻廣的,彈性很大!他不只讓你編輯內容、還可以編輯頁首和頁尾,很好玩喔! 不過,如果你是第一次使用WordPress,帶路姬還是建議你從Avada開始會比較好,今天介紹的工具都非常好用,可是要有老師教才會比較快,自己學可能會蠻吃力的喔… 今天的製作很愉快,以後還是會考慮續用這組搭配,推薦給大家。 GeneratePresshttps://wpointer.com/recommends/generatepress/ Elementorhttps://wpointer.com/recommends/elementor/ OceanWPhttps://wpointer.com/recommends/oceanwp/
-
WordPress 如何編輯形象官網的首頁?如何新增更多內容?如何編輯選單?如何編輯側邊的額外資訊?如何新增滑塊 Slider 到網站首頁?如何增加三個精選圖片連結到首頁?如何改變首頁文章列表的排版方式?文章與頁面的差別? 如何編輯網站的小工具?更多 WordPress 的基本操作教學喔!
-
WordPress 如何編輯文章與分類?如何設定製作中模式及暫時阻擋 Google 索引?如何設定永久網址的結構?如何安裝 Avada 的佈景主題?如何獲得授權使用 Avada 主題?如何把網站變得和範例網站一樣?如何修改一篇現有的文章?如何編輯文章的分類,讓文章更好找喔!
-
自架 WordPress 形象官網的第一步:幫網站準備好一個主機、網址、佈景主題!為什麼要買主機?A2 Hosting 主機有什麼方案呢?要怎麼購買 A2 Hosting 主機?如何安裝 WordPress?如何登入WordPress網站的控制台(後台)?如何驗證信箱以啟用網域?如何購買 Soledad 佈景主題?
-
WordPress 可以幫助任何不懂程式的人,輕鬆做出一個部落格、形象官網與購物網站,只要跟著帶路姬的免費線上課程,只要用五天的下班時間,每天約一個小時,就能輕鬆做好第一個 WordPress 網站,還可以加入帶路姬的臉書社團,和兩萬多個學長姐一起學習喔!
-
今天跟大家分享一個製作Sitemap網站地圖的小外掛喔!根據美國知名SEO龍頭網站Moz的證實,增加一個靜態的網站地圖對SEO是有幫助的,可是,每次都要手動去增加,不是很麻煩嗎? 所以,還好有這個外掛的幫忙,他會自動列出所有的頁面和文章喔! 如何使用: 只要把短碼 [wp_sitemap_page]貼進文章或頁面裡面,就會自動列出來了! 如果有哪一頁不想列進去,就把該頁面或文章的ID貼到Exclude Pages的欄位,就可以了。 他的設定是在 Settings>WP Sitemap Page 如果不會找ID的人,歡迎來社團發問喔! 希望這個小工具對大家的SEO有幫助! [button color=”black” size=”big” link=”https://tw.wordpress.org/plugins/wp-sitemap-page/” icon=”” target=”true” nofollow=”false”]實際效果展示[/button] [button color=”black” size=”big” link=”https://tw.wordpress.org/plugins/wp-sitemap-page/” icon=”” target=”true” nofollow=”true”]下載免費外掛[/button]
-
WordPress 真的有比其他架站與部落格平台好嗎? 不懂程式的新手只要先用三分鐘看完認識 WordPress的懶人包、用五分鐘了解 WordPress的架站流程、再進入帶路姬的 WordPress 新手說明會,就能輕鬆做好第一個 WordPress 網站喔!
-
你是第一次用 WordPress 架站嗎?開始前有沒有什麼一定要注意的地方?要怎麼做才能順利一點呢?很多人都在網路上找到教學就直接開始了… 不論你找到什麼教學,如果先知道這五點,可以避免你白白浪費一些不必要的時間喔…WordPress架站 卡卡一:分不清楚…
-
你們有沒有遇過一種情況,你的某張圖片 (照片)在Google圖片排名排的很前面,可是,你想換張更適合的圖片,卻影響了圖片本身和他的所在文章的排名… 針對這點,Yoast SEO 特別寫了一篇文章, 帶路姬精簡它來給大家參考… 如果你不希望你更新了圖片,影響到你的圖片與文章的Google排名,請注意下面兩點: 保持網址一致(文章網址不要變) 從文章,同一個地方,直接替換圖片,不要改動任何圖片周圍的東西,Google一旦發現圖片周圍的東西有改變,它就得重新索引和排名。 為了保持網址都一致,我自己是另外建議,連圖片本身的網址也要注意。因為,同一個圖片檔名,如果你重複上傳時,WordPress其實會自動產生副本,檔名就變了(例如:xxx-1.jpg)。如果不希望檔名改變,也不希望刪掉原本的圖片(可能會有已經使用該圖片的文章,連結不到該圖片的風險),我比較建議的做法是,使用替換圖片的外掛。 替換圖片的外掛推薦 Enable Media Replace (允許媒體替換-免費) 安裝啟用這個外掛後,你就可以到媒體庫的媒體列表,直接從你想要改的圖片的地方,找到Replace Media的連結與上傳檔案的按鈕,就可以替代原本的,而且不會影響到原本的文章了。 用這個外掛還有一個好處,可以幫你節省空間,不會不小心堆積一堆垃圾圖片? 使用建議: 替代的檔案,取同樣的檔名 在上傳新的檔案時,外掛會問你,是直接取代檔案,還是使用新檔名並且更新文章裡的圖片連結。如果你是用同樣的檔名了,選第一個,直接取代檔案就可以了(Just replace the file) 好啦,以上是一點經驗分享加上一些Yoast SEO的官方建議,希望對大家有幫助。 有問題的話,歡迎來社團發問喔!