Help with adding buttons on picture -...

User 3156750 Photo


Guest
103 posts

Hi y'all. I've already made my mockups on a different designer, and now I'm looking to add buttons to the photos I have.

Is there a way to add buttons on the photos? or do I have to deconstruct my entire mockup into svg/png in order to add the buttons to the pages?

*Note, this is my first time using site designer. I've been watching the videos but need a bit more insight. Any help is appreciated, thanks:cool:
User 2699991 Photo


Registered User
5,077 posts
Online Now

Zoe wrote:
Hi y'all. I've already made my mockups on a different designer, and now I'm looking to add buttons to the photos I have.

Is there a way to add buttons on the photos? or do I have to deconstruct my entire mockup into svg/png in order to add the buttons to the pages?

*Note, this is my first time using site designer. I've been watching the videos but need a bit more insight. Any help is appreciated, thanks:cool:


Each of your images need to be in a container, your image needs to be set to position=relative,, you insert the button into the same container as the image, you place the button as the first child of the parent container, you set the button position = absolute,, the button no overlays the image, and you can adjust its position using the top/bottom/left/right margins as to where you want the button to be positioned over the image.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 3156750 Photo


Guest
103 posts

Hi! thanks for answering. what if i've made my own buttons, will it still work?
User 2699991 Photo


Registered User
5,077 posts
Online Now

Doesn't matter as long as the positioning is as I described anything can be overlaid over anything in a parent container
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 3156750 Photo


Guest
103 posts

Thank you so much!!!
User 2088758 Photo


Senior Advisor
3,105 posts

Another way you can do this is by creating a container and adding a background image to it. Then you can place whatever you want in the container as you normally would.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2924830 Photo


Registered User
167 posts

I have a similar question - I want to place a play button as overlay over a link picture. This link picture leads to another page - the play button only shall show, that there is a Video ...

However this link picture is in a container with as Heading text over the picture and a heading text under the picture. When I use Ingers method the link picture and the play button picture in their seperate containers both change position - even if only one is relative - the link picture is going upstairs while the picture (placeholder) with the play button goes downstairs. I think that is because the picture link is in a wrapper that has some more container for header and subtitle...
Isn't there a different way ? The idea of Steve I couldn't reproduce - if this were a way please what is the "backgroiund image" - is it the picture placeholder ? And how can I put it as overlay over the picture link ?
User 122279 Photo


Senior Advisor
14,547 posts

Michael, eh... which method is it that you are referring to as 'Inger's method'? I don't recall having a 'method' with a 'link picture' and a play button over it (do you mean on top of or above?) that makes the link picture turn into a video.

I have seen this conversation, but lack of time and computer problems have kept me from taking part in it.

If you need help, you have to explain this better, as I really don't understand what you're after.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
5,077 posts
Online Now

Inger wrote:
Michael, eh... which method is it that you are referring to as 'Inger's method'? I don't recall having a 'method' with a 'link picture' and a play button over it (do you mean on top of or above?) that makes the link picture turn into a video.

I have seen this conversation, but lack of time and computer problems have kept me from taking part in it.

If you need help, you have to explain this better, as I really don't understand what you're after.


I think he has an image link set to relative inside a container (also set to position relative)
with 2 headers as overlays )which should be set to Absolute !! he wants to add a font icon play and put it inbetween the two headers seems to me he is not setting the font icon to position absolute and then placing it betweeen the two headers,,

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2924830 Photo


Registered User
167 posts

Sorry - Ingers method is Wayans method - and yes Wayan is right - I have a graphic triangle that I want to place over a picture. This picture is linked to another page - where the Video can be played. So the triangle only shall show that with the picture a Video is meant.
So far all containers position is absolute.
Now I put the image (picture link) into a container together with the headcer and the subtitle. It stays absolute.
I make another container - inside a picture placeholder which is per element linked to the local triangle. (relative)
The Triangle is now above the container with image/header/sunbtitle. It is set to Relative. Ifg I change the settings like the image is relative and the triangle is absolute the triangle will disappear behind the image.

When I now give margin minus 200 downwards to the Triangle container it is moving downards over the image
The image is moving upwards since there is now more space. But it is moving much higher - outside the main content section container....wrapper ... I cannot get the triangle where I want it.
I think I haave to put the triangle per photoshop direcly into the image - that's it... But I've learned some things about relative and absolut...

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.