The page title box shortcode adds a page title and sub title with diverse styles including background images, background videos and various animation effects.
To see a live demo of the Page title box shortcode you may check out the demo page.
Displaying Page Title Box
To display page title box in a page or post:
1Add a new page or edit an existing page.
2From Visual Composer screen, click +
3In Add Element pop-up screen, search for Page title box and click on it to be added to the page.
4When the shortcode is added, a new pop-up screen called Page Title Box Settings opens. It allows you to configure the shortcode settings.
5Enter a title, click Save Changes and publish or update the page to check the result.
Page Title Box Types
There are three main page title types which include background images, background video or a background color.
To see a live demo of the each type, click the respective Demo Page links:
- Regular Page Title
- Video Page Title
- Page Title with Gradient Effect
- Page Title with Scale Effect
- Page Title with Parallax Effect
Page title box with background image
To add background image to page title:
1Access Page title box settings pop-up.
2Set Background Type as “Image“. New option will appear below. Click on Upload next to Background Image.
3Upload your image, click on Save Changes and publish or update your page to check the result.
Page Title Box with Background Video
To add background video to page title:
1Access Page title box settings pop-up.
2Set Background Type as “Video“. New options will appear below. Click on Upload next to the correct video format.
3Upload your video, click on Save Changes and publish or update your page to check the result.
Page Title Box Layout
There are some settings in page title box settings pop-up to configure the layout:
| Setting | Description |
|---|---|
| Section height | Sets a custom height. |
| Background position | Sets a custom background position. Only available with background image. |
| Text align | Aligns the text inside page title box. |
| Title padding | Adds a custom padding to the title. |
Page Title Box Styling
There are some settings in page title box settings pop-up to configure the style:
| Setting | Description |
|---|---|
| Background color | Sets a custom background color. |
| Background effect | Creates a specific background effect. |
| Background attachment | Sets whether the background image is fixed or scrolls with the rest of the page. |
| Color overlay | Adds a custom overlay. |
| Title color | Sets a custom title color. |
| Title underline | Adds an underline below the title. |
| Subtitle color | Sets a custom subtitle color. |
