Want to create a theme for WordPress CMS and then have a chance to add any page object inserting a prepared website HTML code? Use Divine Elemente and learn how to insert HTML code in the theme following our step-by-step tutorial.

Related: Editable content, Properties
[divineAds]

With the help of Divine Elemente v0.9 to generate a theme for WordPress CMS and then to add a prepared element’s code to the theme is easy as never.

Custom object. Banner

Custom object. Banner

Let’s consider the whole step-by-step process on how to insert HTML code in the theme with the example of the Flash banner addition to a prepared theme for WordPress CMS.

Step 1. Open a PSD template in Adobe Photoshop.
We use a “Iphone4.psd” PSD template for this tutorial.
But you can also download any other PSD template from the Marketplace and work with it.

Step 2. Add a new element to the PSD template.
First of all, you are to prepare a place for a new object arrangement in the Footer grid block (in our case). To do that, in Adobe Photoshop you should:

  • (A) Select a Rectangle Tool (U)
  • (B) Draw a rectangle with 125 x 125 px dimensions (our banner dimensions)

Custom object. New element in a PSD template

Custom object. New element in a PSD template

Step 3. Launch Divine Elemente.
Select the “Elemente > Publish and Upload” item in the menu.

Custom object. Launch Divine Elemente

Custom object. Launch Divine Elemente

Step 4. Set required element’s properties.
Select the element created and assign it as an “Image”.

Custom object. Element assignment

Custom object. Element assignment

The following properties are to be indicated in the Properties panel:

  • Content: Editable in CMS
  • CSS: New_banner

Custom object. Element properties

Custom object. Element properties

More details on Elements and their Properties.

Step 5. Publish a theme.
Select a prepared FTP account (A) (B) and click on the “Publish” button (C).

Custom object. Theme publishing

Custom object. Theme publishing

More details on FTP accounts and the whole publishing process can be found in the “Publish Editor” guide.

Step 6. Activate the theme at the website.
Being in the WordPress CMS backend, move to the “Appearance > Themes” section and select a new theme uploaded.

Custom object. WordPress CMS theme activation

Custom object. WordPress CMS theme activation

Step 7. Switch on the Editing mode at the website.
Don’t log out from your admin account. And move to the website with the theme activated.
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) and click on the checkbox “Edit content” to enable the editing mode.

Custom object. Editable content

Custom object. Editable content

Read more about Editable content.

Step 8. Insert a prepared element’s code.
Select your prepared element and change the current code by your prepared website HTML code addition in the editor appeared.

Custom object. Element’s editing.

Custom object. Element’s editing.

Step 9. Save and switch off the Editing mode.
Click on the “Save” button in the editor. Then, in the hidden floating menu uncheck the “Edit content” checkbox to disable the editing mode. After that, all changes will take effects immediately, and you’ll be able to enjoy the result of the website HTML code addition.

Step 10. Admire the result ;)


Conclusion

In such a way, you have just learned the whole process of a WordPress theme creation and how to insert HTML code in theme any time you need it with Divine Elemente v0.9.

Related Guides and Tutorials:


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • C Jason K
    video tutorial is the most effective and easiest way for learning… If you make all your tutorials as video it will be most powerful way to learn. and im waiting for if…
  • C Jason K
    video tutorial is the most effective and easiest way for learning… If you make all your tutorials as video it will be most powerful way to learn. and im waiting for it.
  • Rafał R.
    There is no “Image” option :/ I don’t even have “All from selection” there is only “shape x” and “Cannot be selected”… Does anyone know why?
  • Divine Elemente
    Looks like you have not created a layer as shown in the tutorial, or the boundaries of the layer overlaps the boundaries of the grid. Please take a look at our best practices tutorial: http://divine-project.com/best-practices