place text, photos, and more anywhere on the page.

  • 2
  • Idea
  • Updated 7 years ago
How about we place things such as text or photos anywhere we want instead of just the columns of boxes and stuff.
Photo of Parker Green

Parker Green

  • 38 Posts
  • 0 Reply Likes
  • curious

Posted 9 years ago

  • 2
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Parker,

This has already been suggested and is under consideration.

Once you learn how to use the 2 column widgets well you can place anything you like anywhere you like.

Remember you can add 2 column widgets inside each other and create 3,4 ,5,6,etc. columns.

If you look at this page for exapmple it is built like this, The header (Yola) to the search field is 2 columns, then the rest of the page is 3 columns, all sites are built around box's and columns (except flash sites)

But your not the first person to mention this and Yola always listen to their users, so you never know what they will come out with.

Thanks for posting.

Lee.
Photo of knapperture

knapperture

  • 13 Posts
  • 0 Reply Likes
I have just started using Yola and I must say I'm a bit disappointed this post is a year old and still no tool exists to layer page elements.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello knapperature,
Thanks for your feedback concerning this element of the Yola sitebuilder. As Lee said, it is possible to do quite a bit with the Column Divider Widget, I hope you will be able to find a way to arrange your page to your liking.

Emmy
Photo of knapperture

knapperture

  • 13 Posts
  • 0 Reply Likes
Just as a bad example of what I'm trying to get at. I want to place text over top of an image, otherwise I am pretty satisfied with the layout options. If I upgrade to silver, I think I would like this even more. Over all I am Satisfied, just would like more bells and whistles.

Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
u can do it by HTML code.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Yola allows you to do most things that are possible with HTML. What you are trying to achieve would normally be done witha image editor (like photo shop or something and then applied to the web page as an image)

However it can be achieved by setting the background of a div with the image and applying the text as html.

Add the image you want to use to a post on here and I'll make you a div that will work.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
No need to use anything but the margin settings of a text or two-column widget.

1) Add your image to your site.
2) Add a text widget just after and directly under the image.
3) Adjust the top margin setting of the text widget to a negative value (usually less than the height in pixels of the image that you wish to overlay.
4) Then place a positive value in the bottom margin box to ensure that the content of your page below does not migrate upwards as well.

Set the left and right margin setting to further the placement of your text overlay.

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of knapperture

knapperture

  • 13 Posts
  • 0 Reply Likes
Thanks Duke.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
<div style="background: url(resources/membership-tab2.jpg) no-repeat scroll 0% 0% rgb(0, 0, 0); width: 500px; height: 500px;">
<br>
</div>
-->

The code above presumes you have a file called 'membership-tab2.jpg' in your resources folder.

All you do now is add a text widget to your page and then add the above code through the text widgets html editor. After that you can just click in the box and use it like a normal text widget.

The codes really simple I'll explain it to you can change it to fit your site.

The url(resources/membership-tab2.jpg) is the path to your image.

You see the two 0%'s those control where the image goes, for example Top Left = 0% 0% Top Right = 100% 0% Bottom Left 0% 100% Bottom Right 100% 100%

The rgb(0, 0, 0) is the background colour of the div (black)

The width and height are the width and height of the entire div. Change them to fit.

Lee.
Photo of knapperture

knapperture

  • 13 Posts
  • 0 Reply Likes
Awesome. Thanks a bunch