Special Offer!

GRAB 20% DISCOUNT

Chapter 3: How to add Content to Joomla page

Now when you start to build your perfect page with JSN PageBuilder 4, spend a few minutes to look through these tips to add content since they will help your process run smoothly.

General

Use the Heading & Paragraph elements properly

Use the Heading & Paragraph elements properly
Use the Heading & Paragraph elements properly

You should use the Heading element only when the content is key concepts.

For regular content, the Paragraph element is our recommendation.

Use element variation whenever possible

In JSN PageBuilder 4, every element has multiple variations ready to use. So whenever possible, use those variations instead of constructing it from scratch.

Check the following example with heading and icon:

Heading element
Heading element

Do not use Icon element + Heading element separately. 

Heading with icon
Heading with icon

Use the variation of Heading that has icon included.

Keep the content code clean

Redundant HTML
Redundant HTML

Heading

HTML Heading
HTML Heading

Choose the proper heading HTML tag to have a logical heading structure, which is good for SEO.

Image

Set “Image Size” to “Full Width” when you need to fill the whole container

Full-width image
Full-width image

If an image needs to be filled to the whole container as per design, then set the “Image Size” parameter to “Full Width”.

Set parameter for “All” devices so that mobile layout will inherit as well.

Make sure the image has ALT text setup

ALT text example
ALT text example

An alt tag, also known as "alt attribute" and "alt description," is an HTML attribute applied to image tags to provide a text alternative for search engines. 

You should make sure that all images have an alt tag fill with the right description since it can positively impact an e-commerce store's search engine rankings.

Read more about ALT and title text here.

Choose to show image wisely

  • If the image delivers actual content, use the Image element.
Image Element
Image Element
  • If the image serves as a background with some text, set it as a background for the container.
Container background
Container background

Button

Use Button element for a Call-to-action (CTA)

Button element
Button element

For CTA, use Button element, not Paragraph.

When CTA is just a link, use Button element without border, but preserve the padding to keep clicking area big enough.

Use Button variations

Button variations
Button variations

Different button variations are designed to help users have more flexibility when they use JSN PageBuilder 4.

References

https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/


Previous chapter:

Chapter 2: A Quick Tutorial to build Page structure

Next chapter:

Chapter 4: Learn to adjust The Layout Pages

 

Comments (0)

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