Docs

[unforgettablegoods]

Hello,
I am very new to this, and I tried to search the forums for an explanation of how to do this, but what I found wasn’t totally clear.
I would like to be able to create text over an image, and also smaller images as well, essentially turning the image I have into another background, which would sit on top of the background I have already set for the page. You can see what I have so far at http://606.c22.myftpupload.com/our_story

Please let me know what I can do. Thanks!

[Jade]

Hi there,

Try using the image as a background image of the sections and add a text element inside it.

Hope this helps.

[unforgettablegoods]

I have a background already set for the section. Is it possible to have another background just for a single column within a row?

[Nico]

Hi There,

You could add a custom CSS in the style box of the column.

For example:

add this code in your style box,

background:url(yourbackground.jpg);

Hope it helps.

Let us know how it goes.

Thanks.

[unforgettablegoods]

This did not work. Maybe I am not explaining what I am trying to accomplish…I have a a background png already on my page. It looks like a hardwood floor. Now I want to put a png of handmade paper down, so that I can type copy onto it, add photos onto it and then even have clickable links on it. But once I add that piece of paper (as the png), then I cant put text onto it, or photos (like layering)…so I wanted to basically make the paper like another background image…do you have a suggestion?

[Friech]

Hi There,

This is the image that you want to be the background, layering above the wooden background right?

Then we could use that as the columns background. Columns has a STYLE field where you can paste the css code below.

background-image: url('IMAGE URL HERE');

Then you can add your text elements on that column.

Hope it helps, Cheers!

[unforgettablegoods]

I got it working! thank you for your help! I still have more to figure out, which means I will probably be back with more questions! THANKS!!

[Nico]

No worries.

Feel free to ask us again.

Thanks.

[unforgettablegoods]

ok, another question….this is on the our story page…if you can see, we have 2 people’s bios written, and they are both on that one paper backer. Now I need to add small icons for their person email, LinkedIn, etc under their bios AND then after that I need to, centered under the bios, put a Contact Us font then the icons for the business email, facebook, instagram, linkedin, etc. all of the icons will need to have clickable links to them, and they need to be in one line, side by side. Is there a way to “freeform” place images into the column? Once I try to place an image, it only allows me a new spot directly in the center below the last image. But I need to be able to place small icons and move them around more within the column. Can that be done?? so this is a few things I need to do:

ALL WITHIN THE SAME COLUMN
free form place small, clickable images under the bios
add centered text below the bios
add clickable icons for social media, side by side under the words CONTACT US

can this be accomplished? and if so, how? if not, whats the next best suggestion?

[unforgettablegoods]

oops, I meant the team page…NOT the our story page! sorry!!please see above…sorry!!!!

[Friech]

Hi There,

So you need two sets of social icons for each bio right? This will be more tricky than it should because you added your content as one big image.

Anyways please add another ROW below that image, then make that ROW a 1/2 + 1/2. Each of that 1/2 column place a RAW Content elemenet and paste the code below on it.

<h6 class="man center-text">CONTACT US</h6>
<ul class="custom-social-icons">
	<li><a href="#" target="_blank">[x_icon type="linkedin-square"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="facebook-square"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="twitter-square"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="google-plus-square"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="instagram"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="youtube-play"]</a></li>
	<li><a href="#" target="_blank">[x_icon type="envelope"]</a></li>
</ul>

That is the social media links code, so replace all the # with the actual profile URL. You can remove the icons that is not necessary.

Then add this on your custom CSS on Customizer:

ul.custom-social-icons {
    margin-left: 0;
    list-style: none;
    text-align: center;
}
ul.custom-social-icons li {
	display: inline-block;
    font-size: 1.5em;
    padding-left: 5px;
    padding-right: 5px;
}

This will style your icons the way you want it.

Hope it helps, Cheers!

[unforgettablegoods]

thanks! ok..ready for another? so when my site is being viewed on a mobile device, the menu tabs appear vertically (stacked)..so we set them to hide (not visable in lo res)….we would like to have the option of a menu tab in the upper corner (maybe something that looks like 3 bars or 3 dots, that drops down to put these menu tabs into for low res displays or mobile device viewing. Is that possible? if so, how? THANK YOU!!!!

[unforgettablegoods]

we setup our giving back page and noticed the background image (wood) looked very zoomed in…we checked all the settings to be sure they were the same as the other pages. and they were. so we decided to try to delete each image we have placed on the page one by one. and when we do the background image gets more and more zoomed out. can you help explain why this is happening and how to fix this?

[Friech]

Hi There,

You have that background on your section right? Please add this on the STYLE field of your section.

background-size: 100% 100%;

Regarding your menu, regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.

[unforgettablegoods]

Hello, and thank you for your continued support. So something strange has happened with the welcome page. The background image suddenly started getting cut off at the bottom, and showing a lot of white beneath it, which it was never doing before. The same background image works fine on the other pages, and we have even used one of the working pages to create a template, and then applied that template to the welcome page, but it is still doing the same thing. We’ve tried modifying the image in the library that we use for the background, it doesn’t seem to help. We have pattern and parallax both on, and it appears to be fine in the preview window, but just does not display properly in any browser. We’ve tried it on several different devices, and are seeing the same problem on all of them.
You can see the page here: http://606.c22.myftpupload.com/welcome/
Thank you!

[Author]

Posts