I want to type text on top of an image

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Is there any way to add text ON TOP of an image? I know I could just do it in Photoshop but wondered if it can be done in Yola so that I could swap out the image easily if needed.

Thanks in advance
Photo of Amy Cook

Amy Cook

  • 19 Posts
  • 0 Reply Likes
  • curious

Posted 9 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Amy,

You cannot write directly on images in the Yola editor; however, you can add text to your pictures using Picnik which is an image editing tool that Yola has integrated with. Here is something you can try:

1. Upload the picture you want to use and in the File Manager, click "Edit".
2. The Picnik image editor will load with your picture inside it.
3. When it is finished loading, click the "Create" tab.
4. Below the "Create" tab, click the second button from the left - which will give you the option to add text to your picture.
5. When you have added your text click the yellow "Save to Yola" button in the top right hand corner of the Picnik dialog box.

You will then have an image with text on it in your File Manager and you can add it to your site.

Hope this helps!

Emmy
Photo of Amy Cook

Amy Cook

  • 19 Posts
  • 0 Reply Likes
Thanks, Emmy!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Yola should make an option for text to appear on top of an image. It would be done in the same tools as right text, left text, or center text that is currently available for images in a text widget.
Photo of Amy Cook

Amy Cook

  • 19 Posts
  • 0 Reply Likes
I agree w/ Donald
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Here is a bit of code from Littleus that creates a box but you could get rid of the border and add a background image

<!--
<div style="border: 1px solid black; padding: 10px; background-color: #f5f5e2; text-align: center;"><font size="3"><b>About Me<br></b></font></div>

The following you can adjust to your liking:
The border size (1px)
The border look (solid) - it can be dashed
The border color (black) - you can also hex number [e.g. #54c4d3] or rgb [e.g. rgb(12, 130,15)]

padding (10px) - refers to the amount of space between the text and border edge

background-color (rgb(93, 196, 211))

* if you want a background image, then replace background-color with background: url(YOUR IMAGE URL);

text-align (center) - can be left, right

font-size (3) - number ranges from 1-5 (i think)

ABOUT ME - replace with your own text.
-->
Photo of Amy Cook

Amy Cook

  • 19 Posts
  • 0 Reply Likes
Thank you so much for your help!! I will try this out.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, I suppose that would work!?