專注於架設企業網站,分享WordPress教學和Elementor教學

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

更新日期:2024-07-26
本系列教學

正版分銷:

90元/1個網站/2年

最先進的WordPress頁面編輯器,能夠快速創建高端的、完美的網站。 適合任何主題,任何頁面,任何設計。
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我

要設置Elementor的小部件/元素塊為圓角,請左鍵點擊小部件后,在左側找到Style/樣式標籤,其中,如果你能找到border radius/邊框半徑屬性,便可以用於設置圓角。 如果找不到,說明當前元素不支援圓角設置,但是你也可以在Advanced/高級標籤中,找到border並設置整個元素的border radius屬性進行設置。

給圖片設置邊框半徑

如下圖所示,我們可以直接在圖像小部件中設置邊框半徑/border radius屬性。

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

您可以將屬性設置為px或百分比(%)。

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果
如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

給Heading文本設置邊框半徑

如果你想對Heading文本設置border radius,那麼需要進入advanced中設置,如下圖所示,你將看到的是對整個文本區域的圓角設置。

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

如果你希望僅僅對文本所在的寬度進行圓角設置,那麼可以對這個文本進行如下設置

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

學習了這個,你便可以以此類推,給其他元素添加邊框半徑了。

給列(column)添加邊框半徑

我們還可以對佈局進行邊界半徑設置,譬如,在舊版本的Elementor中,我們可以對column/列的border radius屬性進行設置。

左鍵點選列后,轉到樣式和邊框以查看邊框半徑屬性。

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

讓我們嘗試使用邊框半徑的懸停效果 (hover)

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

下圖便是具有邊界半徑懸停效果的列

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

給container欄目添加邊框半徑

在Elementor的最新版本中,欄目佈局的元素名字已經改為了container,你可以按照下圖的方法,給container設置邊框半徑

如何在Elementor中給圖片、標題、欄目添加邊框半徑border radius,即圓角效果

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
黑五優惠前4個月6折, 戳上方按鈕註冊即可自動帶入優惠碼BFCM2024
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com邮箱,注册易通过
遇到問題,聯繫我