Definition and use of Divine Elemente’s new special feature: Editable Content. In this tutorial you’ll learn how to edit WordPress themes online.



Related: Elements, Properties, Publish Editor

Such elements as ‘Link’, ‘Image’, ‘Text’ have a unique property – Editable content in Divine Elemente v0.9. It is a new feature that informs your CMS after theme’s publishing that the content of such kind element’s block can be editable in WordPress CMS, right at the website frontend!

Working process with the Editable content property

Working process with the Editable content property.

A small ‘Edit’ label gives you a possibility to edit texts, images or insert adsense code directly at the website frontend after the publishing it from Adobe Photoshop.

You can also add your favorite YouTube reels, mp3 players, etc. with the help of the Editable content feature in Divine Elemente v0.9.

The Editable content window

The Editable content window.

And in case you are an advanced user, you can insert any HTML code or WordPress CMS plugin and extend your website’s functionality infinitely!

Below you can find more details on how to edit website content with no difficulties.


How to use Editable content?

Step 1. Create a required element / layer in Adobe Photoshop.

First of all, you are to prepare layers / group of layers for the element in your PSD template, and then, you are to assign such elements as ‘Image’, ‘Text’, or ‘Link’ to the layer.

Elements assignment in Adobe Photoshop using a PSD hint or in the Publish Editor of Elemente

Elements assignment in Adobe Photoshop using a PSD hint or in the Publish Editor of Elemente.

Step 2. Launch Divine Elemente and change the Editable сontent property.

And then ‘Content: Editable in CMS’ is to be set in the ‘Properties’ panel.

The Properties window

The Properties window.

Not editable in CMS (by default) – means that the field for editing in CMS is not displayed. The element is published as a static one, and its content cannot be edited in the WordPress CMS backend.

Editable (Rewrite in CMS) – means that the field for editing in CMS is displayed, and at each theme’s activation, this element’s data are rewritten by the data indicated in Adobe Photoshop (in case this element has been found in the previous theme in CMS).

Editable (Leave as is in CMS) – means that the field for the selected element’s editing in CMS is displayed, and at each theme’s activation, this element’s data remain the same as they were in CMS (in case this element has been found in the previous theme in CMS).

Step 3. Publish a theme and log in to the backend of WordPress CMS.

Theme’s activation

Theme’s activation.

Step 4. Switch on the content editing.

Find a hidden floating menu with Divine Elemente label. It is located in the top right corner of the browser window or in the top left corner (it depends on the ‘Frontend label‘ element properties – you can find it in the Publish Editor). After that, you are to click on the checkbox ‘Edit content’ to enable (or disable) the editing mode.

Editable content: a hidden floating menu

Editable content: a hidden floating menu.

After you switch on the content editing mode, you’ll find the “e>” icon near editable elements. So, you can click on this icon and start editing an appropriate element.

Note: The hidden floating menu is active only if a user is logged in to the CMS as an administrator.

Step 5. Edit the element’s content.

You are to click on the icon that is near the editable element and make necessary changes of the element’s content in the appeared edit window. After that, click on the ‘OK’ button.

Insertion of the element’s new content and output

Insertion of the element’s new content and output.

And congratulations! After you confirm the changes made, all new entered data will be updated immediately. So, you can check your work at once with a new property of Divine Elemente – Editable content.


Conclusion

Thus, in few minutes you have learned Divine Elemente v0.9 new feature and now able to change editable content in WordPress theme directly at its frontend with help of the Editable Content.

Related Guides and Tutorials:


External: