How to display the PAge title on top of the header image

Hi,

Is it possible to display the page title on top of the header image? In the sample page I’ve provided, I cheated by putting the text in the image before I upload it just to demonstrate the requirement. But I want every page title to dynamically appear on top of the header image.

Thanks in advance,
Carlou

Sample page

Hello Carlou,

I don’t think that there is an easy way to do that, this task seems to require some coding and testing on different screen resolutions. I think that the easiest way is to add title to header image like you did on that sample page, just use larger image (in terms of resolution) in order to make it look better.

Kind Regards, Roman.

Hi Ramon,
I found a workaround to deliver this requirement. It is not ideal but it does the work. Here are the steps just in case somebody is interested.

  1. I used the CSS code you provided to hide the header.
  2. Add a Site Origin row and add a Visual Editor widget his row.
  3. Enter the text you want to appear. In the sample page, I have added a Main Page Title and a Sub-page title.
  4. Add the background image to the row.
  5. Set the Top/Bottom padding of the row to 0.

And it works. The distance between the Main Page Title and Sub-page Title is a little bit wide and if possible I want to reduce the spacing. Just in case you have a solution, kindly share.

Regards,
Carlou

Here the sample page.

Hello Carlou,

It looks like you have the following HTML code in that widget (check the Text tab to see HTML code, spacing can be different).

<p style="text-align: center;">
    <span style="font-size: 24px; font-family: 'arial black', sans-serif; color: #d1d1d1;">
        This is the Main page title
    </span>
</p>

<p style="text-align: center;">
    <span style="font-family: 'arial black', sans-serif; color: #d1d1d1; font-size: 16px;">
        This is the sub title
    </span>
</p>

Please try to replace it with this:

<p style="text-align: center; margin-bottom: 0; line-height: 1.1;">
    <span style="font-size: 24px; font-family: 'arial black', sans-serif; color: #d1d1d1;">
        This is the Main page title
    </span>
</p>

<p style="text-align: center;">
    <span style="font-family: 'arial black', sans-serif; color: #d1d1d1; font-size: 16px;">
        This is the sub title
    </span>
</p>

Kind Regards, Roman.

Hi Ramon,

The code you’ve given worked. Thanks a lot. I’ve very happy now with my training template. I can see in this forum that there are some questions regarding this functionality. I hope they will benefit with what we’ve found so far. May I suggest this feature to become standard in the next release of Sydney theme?

Best Regards,
Carlou

Great! You are welcome Carlou!

I’m not sure about this particular feature, but we are trying to listen our users when they suggest features :slight_smile:

Kind Regards, Roman.