Title: Probuilder – Visual live CSS editor
Author: Lingulo
Published: <strong>2017年7月18日</strong>
Last modified: 2017年7月18日

---

搜尋外掛

![](https://ps.w.org/probuilder/assets/banner-772x250.jpg?rev=1698275)

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/probuilder/assets/icon-256x256.jpg?rev=1698275)

# Probuilder – Visual live CSS editor

 由[Lingulo](https://profiles.wordpress.org/sacredclown/)

[下載](https://downloads.wordpress.org/plugin/probuilder.0.1.zip)

 * [詳情](https://zh-hk.wordpress.org/plugins/probuilder/#description)
 * [評價](https://zh-hk.wordpress.org/plugins/probuilder/#reviews)
 *  [安裝](https://zh-hk.wordpress.org/plugins/probuilder/#installation)
 * [開發](https://zh-hk.wordpress.org/plugins/probuilder/#developers)

 [支援](https://wordpress.org/support/plugin/probuilder/)

## 描述

Probuilder is a visual live CSS editor that helps you adapt the design of your website
in a super simple way. Just activate Probuilder in the front end, select an element
on your site and click on it. An editor with lots of different properties will open.
All you need to do now is select or enter the values you would like to apply. Probuilder
is both for experienced users as well as people without any coding knowledge. Even
if you have no idea about CSS you will be able to adapt your website’s design using
Probuilder.

## 螢幕截圖

 * [[
 * The simple Probuilder editor, just add a value and the change will be visible
   to you on your page immediately
 * [[
 * Using the Pro version of Probuilder you have great features like Autoprefixing,
   media queries and keyframes.
 * [[
 * See the generated CSS code and add custom code if you like.

## 安裝

 1. Upload the plugin files to the `/wp-content/plugins/probuilder` directory, or install
    the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. Go to the front end of your website and click on the blue button in the top right
    corner saying ‘Activate Probuilder’.
 4. Once activated you can select an element with your mouse and click on it to open
    up the editor.
 5. Do changes as you wish and click ‘Save Changes’ to save your newly created CSS 
    code. To find out more please read our documentation by going to ‘Probuilder’ in
    the admin section.

## 常見問題

What happens if I destroyed some part of my website?

If you did some changes and now your website looks like a mess you can simply click
on ‘All Probuilds’ on the right side of your screen (in front end). This will give
you an overview over all changes you have made. You can then simply edit a change
by clicking on it or click on the trash icon to completely delete the styling for
that element.

Will Probuilder work with my theme?

We have tested Probuilder on several WordPress installs with several different themes
and it did work for all of them. However since Probuilder is still very young we
can not guarantee the functionality in every theme. If you experience problems please
write us: probuilder@lingulo.com

I added a value in the editor but nothing happens on my website, why?

This sounds like another CSS rule is more specific and therefore stronger than the
one you just created. You can try to add ‘!important’ just after the value you entered.
In the future we will take care of this problem by determining whether a rule you
added applies or not and if not add the ‘!important’ automatically.

Probuilder is not working as expected or looks messed up, what can I do?

Please send us a link to your site or a screenshot so we can investigate what the
problem might be. Also please make sure to update to the latest WordPress version
and to use a modern browser. Please don’t use Internet Explorer 😉

  Installation Instructions

 1. Upload the plugin files to the `/wp-content/plugins/probuilder` directory, or install
    the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. Go to the front end of your website and click on the blue button in the top right
    corner saying ‘Activate Probuilder’.
 4. Once activated you can select an element with your mouse and click on it to open
    up the editor.
 5. Do changes as you wish and click ‘Save Changes’ to save your newly created CSS 
    code. To find out more please read our documentation by going to ‘Probuilder’ in
    the admin section.

## 評價

There are no reviews for this plugin.

## 貢獻者及開發者

“Probuilder – Visual live CSS editor” 是一個開源的軟體。以下的人對這個外掛作出了
貢獻。

貢獻者

 *   [ Lingulo ](https://profiles.wordpress.org/sacredclown/)

[將 Probuilder – Visual live CSS editor 外掛本地化為台灣繁體中文版。](https://translate.wordpress.org/projects/wp-plugins/probuilder)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/probuilder/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/probuilder/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/probuilder/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/probuilder/)。

## 修改日誌

#### 0.0.1

 * Initial commit

## 其它

 *  Version **0.0.1**
 *  Last updated **9 年之前**
 *  Active installations **少於10**
 *  WordPress version ** 3.0.1 or higher **
 *  Tested up to **4.8.28**
 *  Language
 * [English (US)](https://wordpress.org/plugins/probuilder/)
 * Tags
 * [change style](https://zh-hk.wordpress.org/plugins/tags/change-style/)[css](https://zh-hk.wordpress.org/plugins/tags/css/)
   [css editor](https://zh-hk.wordpress.org/plugins/tags/css-editor/)
 *  [進階顯示](https://zh-hk.wordpress.org/plugins/probuilder/advanced/)

## 評分

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/probuilder/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/probuilder/reviews/)

## 貢獻者

 *   [ Lingulo ](https://profiles.wordpress.org/sacredclown/)

## 支援

有話想說？需要協助？

 [檢視支援論壇](https://wordpress.org/support/plugin/probuilder/)