JSN newshub  is released


Chapter 5: Style your Pages with default settings

This chapter includes application tips for styling your pages in a logical and compelling way.

Set common styling

Common Styling
Common Styling

If some settings need to be done for both parent & children elements, it should be set for parent element first, not individual child. Then, the settings will be inherited

The above examples are recommended for inherited stylings:

  • Text alignment
  • Colour


In some special cases, the styling should be set to individual elements to avoid the theme’s override, for example:

  • Font styles

Set device-specific styling

Set device-specific value only when needed

Specific Styling
Specific Styling

When editing the device-specific layout:

  • If no special styling is required, leave the value to either “--” or blank.
  • If special styling is required, try to update those parameters that already has some value set in “All” mode.

Use device-specific image only when needed

Specific Image
Specific Image

If no special image is required for an individual device, just set once in “All” mode. JSN PageBuilder 4 will automatically generate and choose the appropriate image size for individual devices.

Set background

Set background image

Background Image
Background Image
  • Be thoughtful when selecting which container to have a background. For example:
    • Full-width background must be set to section.
    • A background designed only for a specific container must be set to the column.
    • The decorative background of some elements must be set to that element.
  • Clearly, understand the Background Size parameter and choose “Contain” and “Cover” carefully.
    • If “Size” is set to “cover”, then “Repeat” is not required.
  • If the background is patterned, create seamless background image carefully and utilize the “Repeat” parameter accordingly.

Handle background image with border properly

If the background image has border, better to cut that border out of background image and use “Border” settings instead. That will make the layout looks good on all devices automatically.

Image border
Image border

Have a background image with the border will make it presents poorly on the different device screen.

Image without border
Image without border

Have a background image without border will make it look good on all devices. Also, when the image goes through JPEG compression, the picture with border might decrease quality. Thus, it is recommended using “Border" setting to keep high quality for the image

Handle lines

Use the border instead of the divider if possible

Lines example
Lines example

Most of the time, lines are just a decoration of some elements. In this case, use border settings of that element instead of the Divider element.

Use divider when needed

Divider example
Divider example

If the design is sophisticated, and the border is not a good idea to separate different parts, use the divider element.

Handle inline & block elements

Inline & Block setting
Inline & Block setting

By default, block-level elements (heading, paragraph, etc.) will expand their width to the full container. If you want those elements to have width-by-content behaviour, then set “Inline” in the Display section.

Read more about the difference between inline and block elements.

Keep line-height consistently

Consistent setting
Consistent setting
  • The line-height of similar text elements should be the same.
  • If no special design requirements, the recommended value is 1.5 for both heading and paragraph.

Do not set redundant values

Case #1

Margin setting

Margin setting

If the box got inherited number from parent and you do not have the need to change it. Just keep it, you do not put the same number again

Case #2

If the visual boundaries around content are not necessary, do not set spacing parameters.

Boundaries setting
Boundaries setting

Case #3

All devices setting
All devices setting

If some parameters need to be set with the same value for all devices, set it for “All devices” mode and don’t need to set for single-mode such as “Mobile” or “Desktop”.

Avoid using Custom CSS code

  • Try to use element parameters to get the job done with no custom CSS code involved.
  • Set styling parameters only when necessary. It’s better to keep the page inherit style from the theme.


Previous chapter:

Chapter 4: Learn to adjust The Layout Pages

Next chapter:

Chapter 6: Check your final works


Comments (0)

There are no comments posted here yet
Rate this article
(0 votes)