Page builder - position adjustment

Hi,

Would like to ask how can I adjust the position of the text on the visual editor.
I want to place this on the lower part of the photo.

Refer here.

Similar to this link.

Thanks,

Dear Gabriel,

So you want to achieve something like this http://www.awesomescreenshot.com/image/1661912/c95e6369d8dbdc690e9395d098e84474? Please advise. The link to your about page is being password-protected, which prevents me to see your setup over there. Would you mind disable it?

Regards,
Kharis

I already made it public, and yes you are correct similar to the one you’ve sent.

Dear Gabriel,

To build such that object, you can use the Simple Image Widget plugin. While you are inserting the image widget into the page builder column, insert the following code into the “Text” option.


<div class="the-image-caption">
<h2>About Us</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>

To position the text into the bottom part of the image, apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.


.widget_simpleimage{
  position: relative;
}

.the-image-caption{
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  padding: 20px 15%;
  color: #fff;
}

.widget_simpleimage .simple-image{
  margin-bottom: 0;
}

.widget_simpleimage h2{
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0;
}

Regards,
Kharis

Please see this screenshot for better understanding https://cloudup.com/c_mCEktgR8h.

Regards,
Kharis

Hi Kharis,

Thank you for your immediate reply.
The only concern I have is when I activate the simple image widget, its not appearing in my widget list…
I’m using Google Chrome, would there be any issues?

Hello there,

Have you done this https://cloudup.com/cSTc4Nr5dkp?

Regards,
Kharis