Place title on the header image

Hi,

I am facing two challenges that I cannot resolve by myself. Here is the link to the page: http://www.monespacetest.mjules.com/nos-services/

  1. How can I place the title “Nos Services” (a SiteOrigin headline widget) on the header image?
  2. How can I center the image (a SiteOrigin image widget) with the text and keep it centered with any screen size?

Thanks a lot for your help and your amazing work!

Cheers,

Jerome

Hi Jerome,

So you want to create custom service widget? Try this trick :smiley:

  1. Create Row then add Text widget (For the title) and Layout builder widget (for service items) http://prntscr.com/9bbdf5
  2. Adjust the padding for Text widget to remove the white space http://prntscr.com/9bbe6u
  3. Manage your service items using Layout builder widget http://prntscr.com/9bbej5

Hope it help.

Regards,
Awan

Hi Awan,

Thank you for your help! I have never used the layout builder before, it’s great!
However, it does not help me to achieve what I want. I will try to explain it more carefully. As an image is worth a thousand words, let’s visualize my ideal layout: http://prntscr.com/9bq9fl

A. Objective 1: Put the “Nos Services” box on the header image.
However, the header image is not a widget, it would be too easy :slight_smile: It’s a header image using the Sydney theme header options and modified with the following code to have a different image on each page:

.page-id-12 .header-image {
  background-image: url(http://www.monespacetest.mjules.com/wp-content/uploads/2015/12/Click-Button.jpg);
  display: block;
}

Do you know any way to add a title on the image? I have though about modify the original image to add the title but then the title size won’t be appropriate on smartphone device.

B. Objective 2: Center the 4 green circles with the text column below (the text is centered, not the image):
I tried the “full size” image option instead of the thumbnail (http://prntscr.com/9bqbbn), but it is still align on the left. I have to check the “full width” option in the SiteOrigin Image settings but then the image is too big (i.e. circle 2 and 3 on my page: http://www.monespacetest.mjules.com/nos-services/) . I tried to add padding on left and right sides but then the image get very small if I reduce the screen size. Is there a way to set a minimum size?
Do you have any other idea?

Thanks again for you support!

Oh I see…
Please try this tricks:

  1. Add these widget to your services page using page builder http://prntscr.com/9c0lpg
  • Call to action button widget
  • image widget
  • text widget
  1. Upload your header image to the row of the page builder http://prntscr.com/9c0m24
  2. set the button/text with box to call to action button widget http://prntscr.com/9c0mbn
  3. Go to customize and remove your default header image http://prntscr.com/9c0ml0
  4. Add these css code to remove the white space:
.page-id-36 div#content, .page-id-36 .page-wrap .content-wrapper {
    padding-top: 0;
}
.page-id-36 header.entry-header {
    display: none;
}

please change this page id .page-id-36 using your own page id

  1. for the image of the service item, you can try the “medium-thumbnail”

Let me know if it works

Hi Awan,

I tried all what you told me (thank you for the clarity of your suggestions and the screenshots). You can see the result here: http://www.monespacetest.mjules.com/services-ter/

  1. The image stay under the nav bar instead of being behind. I can say according to my previous tests that it is because we removed the default header image.
  2. The button is ok, I can work on CSS to modify it.
  3. For the image of the service item, it’s still aligned on the left.

I am still looking for solutions on my side but I can’t achieve the result expected… :frowning:
I really appreciate the time you take on my case! If you have others suggestions, I will be happy to try them. If you don’t, I will change my expectations :wink:

Regards

Hey,

I solved the problem of the service item image by using the Features widget (the image is center by default). So stupid! I don’t know why I did not think about it before…

Hi,

Yeah I think that is a deficiency if using the page builder to cover the header image.

Hmm… why you did not try to put the text with box to the image? So, you just need to upload your image as header image?

Hi Awan,

I found a solution (by accident I have to admit)! I will share it here so it may help someone in the future.

To have a header image on a page with a title on it, follow these steps:

  • Go to customize (header area > header type) and set image for the site header type
  • Add a Headline Widget at the top of the page
  • Set a background image for the row
  • Adjust the padding to make it big

As simple as that :wink: Thank you for your help Awan!

Cool! thanks for sharing the solutions here :slight_smile:

Hello GG2345.
In your last message, you mentioned that you added a Headline widget. I would like to know how you did that as I can’t see any such widget in my list. Thank you.