如何在 Ning 上設計您的社區

已發表: 2018-05-16

儘管內容無疑是您的 Ning 網絡最寶貴的資產,但設計也是需要非常重視的 無論您的內容多麼相關和引人入勝,沒有人會特別興奮地瀏覽一個醜陋的網站,對吧? 事實是,如果網站沒有吸引力 38% 的人會放棄與該網站的互動 顯然,作為網絡創建者,您不想失去這麼多觀眾。 相反,您希望用戶對您創作的每個方面都感到滿意。

視覺上吸引人且用戶友好的網絡設計可幫助您抓住人們的注意力並確保最佳的用戶體驗。 這不僅僅是審美的問題。 只要您的網站設計專業且直觀,就會有更多的用戶想要與之互動,因此更多的人加入您的網絡,您訪問您網站的流量就會更多。

此外,獨特而個性化的設計可以讓您的網絡脫穎而出,讓您暴露其真實身份。 畢竟,我們談論的Ning聞名的個性化社交網絡

但是,如何設計一個既看起來很酷又令人愉悅的網站呢? 對於那些剛開始探索 Ning 平台及其功能的人,這裡有一些有用的提示。

NING 設計工作室入門

Ning 的首要任務之一一直是讓用戶最大程度地控制其網絡的視覺外觀。 這就是創建設計工作室的原因。

NING Design Studio 是一套工具,允許自定義在 Ning 平台上創建的社交網站的設計。 它為用戶提供了豐富的自定義選項,旨在使每個 Ning 網絡都獨一無二且美觀。

Design Studio 可以通過單擊管理儀表板上的相應圖標輕鬆啟動,該圖標作為每個網絡頁面左上角的綠色工具欄提供。

Design Studio 菜單中有幾個可用的自定義類別:

  • 主題:為您的網站選擇一個通用的設計模板;
  • 背景:選擇和配置出現在您網站背景中的圖像;
  • Header :設計一個與你的網絡主題相匹配的標題;
  • Page : 設置網頁的整體外觀;
  • 自定義 CSS :插入自定義 CSS 代碼以對您的網站設計進行高級更改。

每個類別都包含幾個獨特的自定義選項。 要設計一個看起來真正專業的網站,請慢慢來,從一個類別逐漸過渡到另一個類別,根據您的創意願景設置網絡中每個元素的參數。 您幾乎可以配置網站設計的每個方面以匹配您的審美偏好。

此外,Design Studio 允許您在實際應用到您的網絡之前預覽您所做的任何更改。 這使得定製過程非常方便和直觀。

事實上,使用 Design Studio 不需要任何技術知識和技能,因為每個設計元素都可以在用戶友好界面的幫助下輕鬆修改。 但是,要了解您可以使用的自定義選項的基本概念,讓我們更詳細地查看它們。

主題

主題是確定網站基本設計的模板。 通過將主題應用於您的網絡,您可以應用設計元素的預設組合,包括標題、背景圖像、頁面佈局、導航欄、字體等。

Ning 為不同類型的網站精心設計了廣泛的即用型主題。 需要投資組合網站嗎? 在庫中選擇相應的主題。 準備創建一個音樂社區? 沒問題,Ning 也有模板!

您可以在 Design Studio 菜單的“主題”選項卡中找到 Ning 開發的所有主題。

屏幕1 只需選擇最適合您的目的,然後點擊“發布”按鈕。 在應用主題之前,您可以預覽它。

Ning 主題在桌面和移動設備上看起來都很棒,因為它們經過精心優化,可在所有現有平台上獲得最佳性能。

此外,“主題”選項卡包含兩個子選項卡:

  • 歷史記錄:允許您查看以前應用於網絡網站的所有主題;
  • 管理:在這裡您可以導入和導出主題; Design Studio 支持 .txt 格式的主題。

雖然您可以按原樣使用預設主題,但也可以進一步自定義它們以實現完全獨特的設計。

背景

通過設置背景圖像開始自定義您的主題。 有兩種簡單的方法可以做到:

  • 選擇Ning提供的標準圖像之一;
  • 上傳您自己的圖片並將其應用為背景。

要上傳您自己的圖像,請選擇“背景”選項卡並單擊相機圖標。

在圖像選擇列表的右側,您會找到幾個用於調整背景圖像的附加選項:

  • 顏色:設置背景顏色;
  • 對齊和方向:為您的背景圖像選擇九個位置之一;
  • Rendering : 定義你的背景圖像將如何在頁面上呈現; 下拉菜單中有五個可用選項:平鋪、水平平鋪、垂直平鋪、拉伸和正常。
  • 滾動選項:您可以通過選中相應的單選按鈕啟用滾動或固定背景圖像的位置。

完成背景圖片後,就該進入頁眉了,它是網站設計中最重要的元素之一。

標題

標題是包含網站介紹信息(名稱、徽標等)和導航欄的塊。 標題在網站的每個頁面上都保持可見,通常位於頂部,但有時也可以根據設計理念將其放置在頁面的右側或左側。

要開始設計您的網站標題,請單擊“標題”選項卡。 標題

在選項卡中,您會找到幾個子選項卡,允許您設置標題的不同參數:

  • 風格:

您可以在此處設置標題的位置和方向。 經典選項是位於頂部的標題,包含背景圖像、網絡名稱、徽標和下方的導航欄。 但是,您可以考慮其他可用的變體,以使您的網絡脫穎而出。

此外,您可以通過在相應的框中輸入所需的值(以像素為單位)來自由更改標題的大小(高度和寬度)及其填充。

提示大多數主題的默認高度限制為 135 像素。

  • 名稱/標誌:

標題的基本功能之一是傳達網站名稱(或公司/品牌名稱)。 要完成圖片,您還需要顯示您的徽標。 使用 NING Design Studio,您可以輕鬆自定義名稱和徽標。

要設置網絡名稱,請轉到可從管理儀表板訪問的“社交站點管理器”菜單的“常規設置”,然後在“站點名稱”文本框中輸入名稱。

然後您可以返回到 Design Studio 並選擇應用於您網站名稱的字體的樣式、顏色和大小。

完成自定義網絡名稱後,就可以上傳徽標了。 為此,只需單擊相機圖標並在您的計算機上找到所需的圖像文件。

徽標上傳後,您可以藉助右側的滑塊調整其大小。 您還可以更改徽標的填充大小和對齊方式。

  • 導航

此菜單允許您自定義導航欄。 您可以更改背景顏色和邊框類型、調整選項卡和子選項卡的字體、設置顏色、控制懸停效果、修改選項卡填充大小以及調整選項卡之間的間距。

  • 背景

為了使您的頁眉美麗而獨特,請為其設置一個好看的背景圖片。

“背景”菜單使您可以自定義畫布背景和全角背景。 這開闢了更多嘗試標題設計的方法,讓您可以選擇正確的顏色和圖像組合。 嘗試找到與您選擇的設計主題以及網絡主題相匹配的那些。 您可以隨心所欲地發揮創意!

找到合適的圖片了嗎? 好的。 只需通過單擊相機圖標上傳它們並調整它們的位置和對齊 - 簡單!

您可能還想編輯圖像以使其適合標題的大小、應用濾鏡和效果等。為此,請使用在線圖像編輯工具,例如BeFunkyPixlr

  • 賬戶欄

您可以在此處設置每個網絡頁面頂部顯示的帳戶欄的顏色。 您可以控制背景顏色、文本顏色和懸停效果。 此外,還有一個選項可以將帳戶欄固定到瀏覽器窗口的頂部。

Design Studio 菜單的“頁面”選項卡可幫助您自定義網絡頁面的整體外觀。 它包含幾個子選項卡:

  • 通用:設置頁面背景顏色,選擇頁面上出現的字體,調節段落間距,修改頁面內邊距大小和頁面寬度。 如果您希望您的網站以全屏模式運行,請在“頁面寬度”下拉菜單中選擇“100%”。
  • 模塊:控制模塊的參數。 模塊是出現在網絡頁面上的內容塊。 您可以更改它們的背景顏色、字體、平鋪和內容填充、平鋪對齊等。
  • 鏈接:自定義網站上鍊接的外觀,包括頁面導航按鈕和帖子標題。
  • 按鈕:調整在網站上執行各種操作的按鈕的設計。
  • 效果:使頁面和內容模塊的角變尖或變圓,並設置個人資料照片的形狀。

自定義 CSS

如果內置的自定義選項對您來說還不夠,而且您不熟悉編碼,請瀏覽“自定義 CSS”選項卡。 它允許您插入自定義 CSS 代碼,從而對您的網站設計應用高級修改。

有兩個區域可以輸入 CSS 代碼:

  • Global CSS : 指通用定制;
  • 主題 CSS :指的是特定於主題的自定義。

精通技術的用戶會發現自定義 CSS 功能對於在視覺呈現方面獲得更令人印象深刻的結果特別有用。

設計您的完美網站

設計一個視覺上令人驚嘆的網站是一個靈感、創造力和多功能定制工具的問題。 NING Design Studio 為您提供這些工具,並鼓勵您開發一個獨特且有吸引力的網站,該網站既美觀又方便瀏覽。

希望這份對 Design Studio 核心功能的簡要概述將幫助您創建一個真正打動您的觀眾的社交網站。 同時,繼續嘗試! 嘗試不同的事物和它們的組合,以達到讓您感到高興和自豪的設計。


布倫達·彼得森

Brenda 是 Ning 的技術專家