內容簡介
你是否曾經希望修改 Elementor 在您的網站上呈現其小工具的方式？
Fundamento 提供了一種更簡單的方式，讓您可以將額外的 CSS 類注入到 Elementor 的小工具中。
使用方法
藉由在您的 functions.php 文件中使用以下代碼，告訴 Elementor 您有一個新的外觀可用：
新增一個應用程式以初始化 Fundamento，然後添加一個對 Fundamento 的 register_skin() 函數的調用：
if(is_plugin_active('fundamento/fundamento.php')) {
function fundamento_init() {
// 創建新的 Fundamento 實例
$f = \Fundamento\Plugin::instance();
// 註冊新的外觀
$f->register_skin([
'name' => 'Red', // 您的新外觀名稱，它將出現在 Elementor 中
'element' => 'button', // 您要套用皮膚的元素
'is_default' => true, // 選填 - 是否將此外觀作為預設設置在所有此類元素上
'css' => get_stylesheet_directory_uri() . '/skins/button/red.css', // 選填 - 讓 Fundamento 加入額外的 css 檔案
'js' => get_stylesheet_directory_uri() . '/skins/button/red.js', // 選填 - 讓 Fundamento 加入額外的 js 檔案
]);
}
add_action('elementor/init', 'fundamento_init');
}
在您的 CSS 檔案中新增選擇器：
/* 類別始終是 .skin-{element}-{name} */
/* 名稱轉換為小寫，空格則改為 "-" */
.skin-button-red {
background: #f00;
}
藉由在您的 functions.php 文件中使用以下代碼，告訴 Elementor 您有一個新的內邊距預設：
新增一個應用程式以初始化 Fundamento，然後添加一個對 Fundamento 的 register_padding() 函數的調用：
if(is_plugin_active('fundamento/fundamento.php')) {
function fundamento_init() {
// 創建新的 Fundamento 實例
$f = \Fundamento\Plugin::instance();
// 註冊新的外觀
$f->register_padding([
'name' => 'Standard', // 您的內邊距預設名稱，它將出現在 Elementor 中
'element' => 'section', // 您要套用內邊距預設的元素
'padding' => '30px', // 此預設應套用的內邊距值和單位
'is_default' => true, // 選填 - 是否將此內邊距預設作為預設設置在所有此類元素上
]);
}
add_action('elementor/init', 'fundamento_init');
}
外掛標籤
開發者團隊
原文外掛簡介
Have you ever wanted to alter the way Elementor renders one of its widgets on your website?
Fundamento provides an easier way to achieve this by allowing you to inject extra CSS classes into Elementor’s widgets.
Usage
Tell Elementor that you have a new skin available by utilizing the following code in your functions.php file:
Add an action to initialize Fundamento, then add a call to Fundamento’s register_skin() function:
if(is_plugin_active('fundamento/fundamento.php')) {
function fundamento_init() {
// create a new Fundamento instance
$f = \Fundamento\Plugin::instance();
// register a new skin
$f->register_skin([
'name' => 'Red', // The name of your new skin, as it will appear in Elementor
'element' => 'button', // The elementor element you are skinning
'is_default' => true, // optional - should this skin be set by default on all elements of this type
'css' => get_stylesheet_directory_uri() . '/skins/button/red.css', // optional - have Fundamento enqueue an extra css file
'js' => get_stylesheet_directory_uri() . '/skins/button/red.js', // optional - have Fundamento enqueue an extra js file
]);
}
add_action('elementor/init', 'fundamento_init');
}
Add the selector to your css file:
/* Class will always be .skin-{element}-{name} */
/* Name is transformed to lowercase and spaces are replaced with "-" */
.skin-button-red {
background: #f00;
}
Tell Elementor that you have a new padding preset by utilizing the following code in your functions.php file:
Add an action to initialize Fundamento, then add a call to Fundamento’s register_padding() function:
if(is_plugin_active('fundamento/fundamento.php')) {
function fundamento_init() {
// create a new Fundamento instance
$f = \Fundamento\Plugin::instance();
// register a new skin
$f->register_padding([
'name' => 'Standard', // The name of your padding preset, as it will appear in Elementor
'element' => 'section', // The elementor element you are skinning
'padding' => '30px', // The value and unit of the amount of padding this preset should apply
'is_default' => true, // optional - should this skin be set by default on all elements of this type
]);
}
add_action('elementor/init', 'fundamento_init');
}
