Badge on hero image

I am trying to post a badge/link on top of my main image and can't figure out how to get it done properly. I am still very new at this so bear with me please! I'm not sure where I should place the image in relation to the code for the rest of it, and still not sure if I am naming my CSS identifier properly to identify what I want.
   <div id="hero"><article id="hero">Up to
   60 month same as cash financing!</article>
   <img src="Images/BlueControl2.jpg" alt=""/>
</div>
Now I have been placing a div then an imc src after the article close, but it throws off my main picture and moves it all down. I then name my CSS selector #SSA (thats what I name the div) and no changes I make seem to effect it. Any pointers to get me moving in the right direction would be greatly appreciated. Sorry for the newbie question!
-Chase

Hello chase,
use design mode
click into your image
look at the bottom of your DW
click into one of the forms you want to use: rectangles, circles or freely chosen surfaces
a cross appears in your image
use it to find the place and to draw your shape
you will be asked for an "alt"
insert your wished link >Hyperlink (German DW) > see screenshot, where I used a circle:
Done!
Good luck!
Hans-Günter

Similar Messages

How do I set the default Hero image in a Muse slideshow widget when using Free Form Thumbnails?

Hello,
I am trying to find out how to set the default Hero image when using a Muse slideshow widget and in the Layout section I have the "Free Form Thumbnails"
box checked.
In other words, when the page loads I want to define which image displays as the first Hero image.
If I do not select the "Free Form Thumbnails" option, the top left Thumbnail image always displays first. This is fine.
But when I select the Free Form Thumbnails" checkbox I don't know how to define which image shows first as the Hero image.
I have a short video at this link where I illustrate the question:
http://amson.org/misc/default-hero-image-1.mp4
I have added a WMV video file at the link below:
http://amson.org/misc/default-hero-image-1.wmv
Okay… I think I've worked out how to do it!
[1] First have the "Free Form Thumbnails" box UNCHECKED.
[2] Organize the Thumbnails and place the image that you want to be the first Hero image when the page loads in the top left corner of the Thumbnails group.
[3] When you "Preview Site In Browser" the Thumbnail image in the top left corner will always display as the first Hero image.
[4] If you want "Free Form Thumbnails" go ahead now and SELECT that checkbox.
[5] Whichever image was in the top left of the Thumbnail group before you checked "Free Form Thumbnails" will still show up as the first Hero image when the page loads, regardless of where that thumbnail image is located within the Thumbnail images group.
Thanks very much.
Chris.

Hi,
The sequence of operation you are doing to set the home page for public users is correct. You are getting the login screen as the "custom page group" selected as "home page" has not been granted to public.
Also, while logging-out, it is normal behaviour to get the screen where it shows the list of partner applications from where user has been logged-out. When you click on "Return" button, you will get to the "home page" set above.
Hope it clarifies the things.
Regards,
Ved

How do I link to a specific Hero Image in from another page?

How do I link to a specific Hero Image from another page?

Hi Laura,
I am afraid that this is not possible in Muse at this stage, I will recommend that you post this on our ideas section over here, https://forums.adobe.com/community/muse/ideas, and let our devs team know of this requirement.
As a work around I will suggest that you create a dedicated page with this panel opened when you publish and link that page with the text that you want. Let me know if you need more clarification on this.
- Abhishek Maurya

Slideshow vertical hero image aligns left

Using the slideshow widget with a vertical image sometimes results in the hero image randomly aligning to the left instead of centered. All the hero images are positioned in the center of the content area. The slideshow frame is the full width of the content area so that each image slides in from right to left (due to the Horizontal setting for Transition). The Y coordinate is 10 for the slideshow content (and the hero image container). Horizontal images have not shown a shift to the left. Not all vertical images exibit the behaviour (one slideshow with 20 images, 5 of them vertical, had 4 which shifted left, one displayed properly centered).
I have only seen this on my Phone layout, not on the Tablet or Desktop layouts. The problem shows when in Preview mode, Preview Page in Browser and on an iPhone 4s.
NOTE: After further troubleshooting I found something that seems to resolve the issue. If I move the Y coordinate of the image to 11 (slideshow content is at Y: 10) the image stops shifting to the far left and aligns properly to the center. It doesn't make sense, since other horizontal images are set at Y: 10 and even a few pixels taller but have not exibited the problem.

I noticed when I add a drop shadow to the hero image in the slide show, the hero image when viewed in browser or preview, then aligns left, when I remove the drop shadow from the hero image, then the content is properly aligned.

Hero image shakes when scrolling

The hero image shakes when scrolling in Safari and IE. Any solutions?
Many thanks.

http://gregbareselgolf.businesscatalyst.com/index.html
Thanks Aish

Multiple hero images from one thumb?

Hello all, I have been trying to figure this out for a while and it's driving me crazy (In Muse). Normally when I click on a thumb in a slideshow it shows just one hero image of the thumb (which makes sense). But I really want to have it so that if you click on a thumb then you are able to click through a number of hero images from the same thumb. For example, I have a pic of a car as the hero image, I then want to be able to click on the hero image and click through a number of images showing the cars interior. Is this possible? If not are there work-arounds?
thank you so much

This is, why I like Muse so much: A well sorted set of features, which fully unfolds, when you combine them. This produces much more creativity then drowning the users in countless switches, buttons and dialog boxes for a contextless flood of incoherent features.

Link image properties to both thumbnail and hero image in slideshow?

Would it be possible to have it that when you change the properties of the thumbnail in a slideshow, it automatically populates the hero image, and vice-versa? This would be a huge time-saver!
Thanks.

Thanks for the link.
When you style a background-image to an element in a Spry Menu, here is what happens:
If you style the a element, as in ul.MenuBarHorizontal a, you are styling ALL the a elements in the menu. Remember the cascade.
If you want to UN-style submenu a elements, you need to reiterate the styling thus: ul.MenuBarHorizontal ul a, which basically says "any a element in a submenu should take on this new styling."
ul.MenuBarHorizontal a {
background-image: [image path here];
ul.MenuBarHorizontal ul a {
background-image: none;
The order of these rules is important. If you were to reverse the order of the two rules I show, you would begin by turning off the background on the submenus and turning it back on (and leaving it turned on) on all a elements.
The trick in the MenuBar css stylesheet is to find the appropriate rules to style. You will have to ADD the second rule that turns off the submenu styling. Read the comments and the style selectors in the css stylesheet carefully. It is not difficult, once you get used to reading the code.
Beth

Trying to post an animated slideshow as my hero image, but having compatibility issues.

I'm trying to upload an animated hero image on my front page. Someone had told me flash wouldn't be a good idea because not all people have flash and won't be able to view it on the website. I created my material on Edge Animate and that is not compatible. What would be the best way to get it onto the website via contribute? Remake everything, convert the file, screen capture, or something else? I'm not too sure what direction would work the best.

Yes, I have one made just like that. It scrolls through different images. Only difference is mine has animated slides. For example, the elements in one slide such as the text and background photo transition into the slide some how whether it be fading or sliding in. Anyways, I made it on Edge Animate and would like to post it on contribute. I don't want to lose the function of my back and forth arrow buttons though. I was going to attempt to screen record the actions and post it, but I also had difficulty with formatting.

Hyperlink to slideshow hero image

hi,
how can I hyperlink to the slideshow hero image?
please help me..

Hi
You can select the Hero Image and from Hyperlink drop down you can link the image, so that when users click on image will be redirected to link that you setup in Muse.
Thanks,
Sanjit

"Thumbnail" image need to be the same image as the "Hero Image?"

When using the slide show widget does the "Thumbnail" image need to be the same image as the "Hero Image?"
I would like to keep my "Hero Image" I load into the widget, but would like to change its corresponding "Thumbnail" image to a different icon. Is it possible to use live type in MUSE as the icon and put it over the "Hero Image?" Thanks for the help!
-t

Thank you very much for the help. This works great! As I'm diving in deeper and messing with the Composition Widget I had few more questions...
I have figure out how to put in a different image into the thumbnail, but how do I replace it with a text box instead of an image. I would like to use websafe fonts as the thumbnail that triggers the Hero picture. Is this possible?
I attached an quick 3 frame storyboard as reference to show you what I am trying to do.
Thanks in advance!
-t

How do I hide the stacks badge overlays on images in the browser?

In View > Metadata Display > Show metadata is off, but the badge (with the number in the stack) is still visible.

On
http://documentation.apple.com/en/aperture/usermanual/index.html#chapter=11%26se ction=9%26tasks=true
is explained how to show them;
To display badge overlays on images in the Browser in grid view
Do one of the following:The Browser & Viewer Metadata dialog appears.
Choose View > Metadata Display > Customize (or press Command-J).
In the tool strip, choose Edit from the Metadata Overlays pop-up menu.
Choose a Browser Grid View metadata overlay view from the View pop-up menu.
In the Metadata Fields column, click the Aperture disclosure triangle to reveal the metadata fields below it, then select the Badges checkbox.
Click OK.
Make sure both Show Metadata and the metadata overlay view you just modified are selected for the Browser in the Metadata Overlays pop-up menu in the tool strip.
Badge overlays are now visible in the Browser.
You can turn off the display of badge overlays in the Browser by turning off the display of metadata. For more information, see Turning the Display of Metadata On or Off.
But I don't understand; In the tool strip, choose Edit from the Metadata Overlays pop-up menu.

Muse Lightbox slideshow: Hero images are undersize & cropped, can't select to change them

Mac, Mavericks, & Muse: First website: Building Lightbox slideshow. When a thumbnail is clicked in Preview mode, Hero image is undersized and cropped (placed jpgs are max 600 pixels x smaller). Back in Design mode, I can't select the Hero to resize it. Both thumbnails and Hero images are set to Fit Content Proportionally.
Any help greatly appreciated!, Thanks!

I've had a similar-ish issue to you, minus cropping. Two key things:
1) To edit the position or size of the hero image double-click it
2) If the original image is smaller or larger or differently sized than the target Hero frame this (above) will happen. What I did was to
scale the frame for the Hero image to the intended area, then get the dimensions of that area using a rectangle. Copy the vaues to make a new Photoshop document and
manually import the images individually and save the resulting JPEGs which will have the additional space around the image to fill it for the Hero (ideally scale the image to fill the target space by losing any necessary empty space).
Essentially the original images you're using must be the same as the resulting frame which is no good if they're all different sizes. Yeah, it's a pain.
Hope this helps. Look at my website homepage as an example: http://www.goodwinsanimations.com/

Moving the caption around on the hero image ...

Hi All,
Is there a particular slide show or composition I can use to allow me to move wording, or a caption around on the hero image so that for instance on image #1 the wording appears on the image in the upper left of the image, then on image #2 the wording appears on the lower right of the image, etc.
In other words I'd like the headline (or wording) associated with each particular image to appear where I want it to appear (where I place it) rather than in the same location on each different image in the slideshow.
Thanks!
Gary

Really with any of the slideshows you should be able to just go to each slide and move the objects around. Here is a quick sample ... I just did this really really fast using part a musegrid.com widget (www.musegrid.com)
http://slider10.auroratec.ca/

Hero Images Revert to Original Size After Being Resized

Hi,
I have read many forum questions about resizing hero images in slideshows, but I'm having a slightly different problem:
In order to have larger images in my slideshow I have been resizing the hero images to 500px height one by one (as I can't seem to find a way to edit all hero images together).
But now I am finding that images I have already made larger have reverted back to their original size. This is without exiting the program or even changing windows.
This is already a time consuming process as I'm working on an artist's site and there are multiple slideshows with dozens of images each.
Does anyone have a solution to this problem?
Thanks!
- Véronique

Hi,
I have read many forum questions about resizing hero images in slideshows, but I'm having a slightly different problem:
In order to have larger images in my slideshow I have been resizing the hero images to 500px height one by one (as I can't seem to find a way to edit all hero images together).
But now I am finding that images I have already made larger have reverted back to their original size. This is without exiting the program or even changing windows.
This is already a time consuming process as I'm working on an artist's site and there are multiple slideshows with dozens of images each.
Does anyone have a solution to this problem?
Thanks!
- Véronique

Pinterest in lightbox hero image

Lightbox questions. I want to embed a pinterst "Pin It" link into my lightbox hero image. I found out how to make it work with the thumbnail, but cant figure out how to do it to the lightbox hero image.
I added a few into this section of my site as a reference to the thumbnail, but the hero image is giving me problems...
is this even possible?!
http://www.rigandkeel.com/wedding-i.html

Hello,
Looking at your page code, it seems that you have used the Lighbox Widget which is under Slideshow Category of Widget. And you have placed Pin it buttons separately over the Thumbnails.
I would like to suggest you to use Lighbox widget which is under Composition Category. In this widget it will allow you to put not just images but other content in thumbnail and in Target container as well.
However, you need to add your images and the "Pin it" HTML code in both Thumbnails and the target containers separately. Reason being in composition widgets (unlike Slideshow widgets) the content in thumbnails is not automatically duplicated in Target containers.
Hope this helps.
Regards,
Sachin

Badge on hero image

Similar Messages

Maybe you are looking for