Properties

• Tweet

• Tweet

• Theme properties
  • SEO / META panel
  • Page background design properties
• Common properties
  • ALT, CSS, Image, Margin Autonaming and Auto properties
  • Unique element
  • Image quality and compression
• Unique elements properties
• Related guides and tutorials

Each element has its own set of properties and styles, such as a background image, a link to another page, a font family, a font size, fx styles, etc.

Properties overview

Majority of elements properties (styles, bg image, fonts, etc.) are read off from a PSD template automatically at element’s assignment by Divine Elemente.

However, since not the whole set of properties can be read off from Adobe Photoshop, several ones (links, style’s name, graphic parameters, margins) are to be indicated manually in the Publish Editor.

When you save a PSD template at Divine Elemente v0.9 (the ‘File > Save to current PSD template’ menu), all the elements’ properties are saved in a PSD file and will be recovered the next downloading of this template.

Learn more: More details on what theme elements are, what types they have and what they are used for can be found in the Elements guide.

---

Theme properties

‘Theme / Website’ element defines a set of properties for all elements on theme or website and has additional properties and panels, such as:

• SEO / META panel
• Page background design properties
• Common properties
• ALT, CSS, Image, Margin Autonaming properties

Try to select the ‘Theme’ element in the Elements panel, and you’ll be able to set elements properties in the following way in the Properties one:

Theme properties

A. Elements’ name. It shows an element’s name, which properties are displayed in the Properties panel.	E. Background design properties. They allow to determine the method of background’s gaps filling in case the content breaks boundaries in height, set in the template.
B. SEO / META properties. They are used to improve the volume or quality of the traffic to a website or a web page (such as a blog) from search engines.	F. ALTs autonaming properties. They are used to specify an alternative text (alt text) that is to be rendered when the element, to which it is applied, cannot be rendered.
C. Image properties. They set image’s quality, type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.	J. CSS autonaming properties. They are used to specify a CSS class name of an element.
D. Margins properties. They are used to define the space around elements (from top, from top and bottom)

Note: Properties set for ‘Theme’ element’s autonaming are applied for the same properties of all elements.

SEO / META panel

SEO ( Search Engine Optimization ) properties are used to improve the volume or quality of traffic to a website or a web page (such as a blog) from search engines.

SEO / Meta properties. Use of meta information on a page

A. Header HTML (for advanced users): is an insertion of the additional page code (e.g. JS scripts) in the <Header> section.	D. Title (only for HTML pages): It determines a page’s title (Tag <Title>). And it’s used at HTML page’s creation only.
B. Footer HTML (for advanced users): is an insertion of the additional page code (e.g. JS scripts) in the <Footer> section.	E. Meta tag ‘Keywords‘ This tag describes the keywords linked to your web page. This is one of the most important meta tags that you should use.
C. Google Analytics ID: is unique ID for Google Analytics account.	F. Meta tag ‘Description‘ It allows to add a short page description. In order you can use the tag effectively, write this kind description using words and keywords of your page.

Set elements properties mentioned above and you’ll be able to improve your website’s place in search engines’ ratings greatly.

Hint: Don’t forget the fact that during website’s optimization you create a website for users, not only for search engines!

More details on Custom code addition to a WordPress theme.

Page background design properties

Page background is merged layers in Photoshop, which were not included in elements’ graphics. In other words, if you remove all elements from the template, everything that remains on the page will be… a page background. Simple enough?

These elements properties are responsible for various types of the page background:

Parameters of stretch and background filling

A. Stretching of grid blocks. It allows to set parameters of stretch for grid blocks (Header, Content, Footer).	E. BG (Background) Type. Optional parameter for filling of the page background that determines background’s behaviour at vertical page’s stretching.
B. Full Page BG (Background) Color. Page background’s color or Body color. By default this parameter adjusts more appropriate color for your page.	F. Stretch: Distance from top. It sets a top point of the background area, which will be used for the background’s gaps filling.
C. Stretch: Height of tile. It allows to set the background area’s height that will be used for background’s gaps filling.	J. BG (Background): Fade vertically. It’s used for vertical smooth image’s transition to the background’s color. It can be applied to the Header or Footer grid blocks.
D. BG (Background): Fade from sides. It’s used for smooth image’s transition to the background’s color from sides. It can be applied to any of grid blocks.

These parameters allow to determine the method of background’s gaps filling in case the content breaks boundaries in height, set in the template.

More details can be found in the Creative Background Design with Stretch guide.

---

Common Properties

Common properties are properties available for almost all elements. They are ‘Link’, ‘ALT’, ‘CSS’, ‘Image’, ‘Margin’.

Common elements properties

A. Element’s behaviour It’s used to display an element’s name and offers a chance to change the current value from the dropdown list.	E. Link It’s used for links creation. If this property is not empty, the element selected will be displayed as a link.
B. ALT text It is used to specify an alternative text (alt text) that is to be rendered when the element, to which it is applied, cannot be rendered.	F. Image Properties They set image’s quality, type, and text extraction format for publishing of element’s graphic component and autonaming of these files by default too.
C. Content This property notifies that this element’s content can be edited in CMS. More details can be found in the Editable content guide.	J. CSS text It’s used to specify a CSS class name of an element.
D. Margin property They are used to define the space around elements (from top, from top and bottom).

ALT, CSS, Image, Margin Autonaming properties

Autonaming is an automatic defining of names for CSS classes, ALT text, image file’s name, etc. It consists of its data (element’s name, layer’s name, ID number) and a separator between these data too.

Autonaming settings

A. Stretching of grid blocks. It allows to set parameters of vertical stretch for grid blocks (Header, Content, Footer).	E. BG (Background) Type. Optional parameter for filling of the page background that determines background’s behaviour at vertical page’s stretching.
B. Header BG (Background) Color. Background color for the Header grid block. By default this parameter sets more appropriate color for your page.	F. Stretch: Distance (Space) from top. It sets a top point of the background area, which will be used for the background’s gaps filling.
C. Stretch: Height of tile. It allows to set the background area’s height that will be used for background’s gaps filling.	J. BG (Background): Fade vertically. It’s used for vertical smooth image’s transition to the background’s color. It can be applied to the Header or Footer grid blocks.
D. BG (Background): Fade from sides. It’s used for smooth image’s transition to the background’s color from sides. It can be applied to any of grid blocks.

Autonaming rules

Autonaming is carried out in the following way:
‘Elements name’ + Separator + ‘Layer name’ + Separator + ‘ID number’

That order is used for display of name’s parts (CSS, ALT, or Image).
Separator will be displayed only between two chosen parts.

Example: If you indicate ‘Element name’ and ‘ID number’ with ‘Underscore’ separator in the autoname CSS properties of the ‘Text’ element, you’ll get CSS name – ‘Text_n150’.

Margin property

Margin property allows to calculate an indent for the selected element’s sides automatically.

Common properties. Margin properties

There are 2 options of the margin property at the moment:

• From left, top
• From left, top and bottom

Info: Indent is a space from the current element’s boundary to the inner boundary of its paternal element.

Image quality and compression

You can specify image’s quality and compression by default for all elements (by indicating properties for the ‘Theme’ element) or for each element separately, clicking on ‘Image Properties’ button in the Properties panel and selecting required settings in the ‘Image type and quality’ section panel.

Image properties. Here: Image quality, format and compression.

A. Export (publish) text as … option that allows choosing the way of the element text’s display on the page (Text, Image or Text + Image).	C. Image’s quality option that allows setting the quality of the element’s image displayed on the page.
B. Additional properties of the image’s format option that allows setting such properties as image quality for JPG, transparency for GIF and PNG images.

Image’s quality:

• JPG – is a format with quality loss that is ideal for “square” photos.
• PNG8 or PNG24 – is a format with 256 or millions of colors, with true transparency or not. That is ideal for complex modern templates.
• GIF – is a format with 256 colors, with or without transparency. That is recommended for plain graphics, for example: one-color background.

Additional properties of the image’s format:

• for JPG – Image quality – property that allows to set JPEG image quality from 0 (Low) to 100% (Very High).
• for GIF – Simple transparency – property that allows to publish a GIF image with 1bit transparency support.
• for PNG – True transparency – property that allows to publish a PNG24 image with true 8bit transparency support.

Newbie?: Which Graphic File Format Is Best To Use When?

Hint: Each element can be displayed as a text, image or text + image on the page. Text + image is a way of the element’s display that is found most often, in other words, an element consists of a background image and a text over it. This way of the element’s display is convenient for creation of text blocks with an icon to the left or for decorative underline to a text, gouache stains, etc.

Hint: If an element has a text layer and its outline and effects are not supported by a browser (e.g. advertising text written to circle – it’s called a warped text), than must be published as an image.

Remember: Using any given format (GIF, PNG24 and JPG), please remember that browsers don’t support rendering modes (overlay, multiply etc.) like in Photoshop. So, all element’s layers merge in one GIF / PNG / JPG file taking into account images of lower layers and page background.

Image properties description. Image autonaming, quality and compression

Remember: Transparency of a layer (or a group of layers merged to an image) will be the same as in Photoshop, if all layers, FX and styles of an elements will be ‘Normal’ in the rendering mode! Otherwise, a background image of an element will be published with slight distortion:

• element’s layers will be merged in one PNG24 image taking into account images of lower layers and page background.
• transparency of all merged layers will differ from the original one.

---

Unique elements properties

Majority of elements have a similar set of properties (ALT, CSS, Link, Image, etc.). However, several elements (‘Label’, ‘Favicon’, ‘Billboard’, ‘Post separator’, ‘Avatar’, ‘Date’, ‘Author’, ‘Counters’) have unique properties too that can be seen in the example below:

Unique elements properties description

More details on arrangement, properties and behaviour of each element can be found in the Detailed elements properties guide.

---

Conclusion

Thus, you have just learned about theme properties in details, paying attention to SEO, background design, common and autonaming properties, and elements properties in general, and can set elements properties having in mind all their features.

---

Related Guides and Tutorials:

1. Elements
2. Custom code addition to a WordPress theme
3. Creative Background Design with Stretch
4. Editable Content
5. Detailed Elements Properties

---

External links

1. Wikipedia: SEO
2. Wikipedia: Keywords
3. Wikipedia: Description
4. Google Analytics
5. Which Graphic File Format Is Best To Use When?