Ray wrote:
Hello all,
This is probally a very simple question BUT if I add a Hero Image to a Index page do I have to change it to a different name such as Hero Image-1 or can it it be done using Symbols or copy and paste.
Sorry to bother you all again.
Ray
Hello all,
This is probally a very simple question BUT if I add a Hero Image to a Index page do I have to change it to a different name such as Hero Image-1 or can it it be done using Symbols or copy and paste.
Sorry to bother you all again.
Ray
I've used symbols for my 1920x600px hero's on my Valveco project. Here's how I did this:
Structure of the hero
-
- hero-row (auto width)
- - hero-column (auto height)
- - - hero-container (auto width, max-width of 1920px, height 31,25vw (divide height by width, multiplied by 100), max-height of 600px, margin 0 auto 0 auto)
Now assign the images
-
- Assign the first hero-image as background-image to the hero-container (As soon as you do this, a class is created, like 'container-1')
- Remove the name of this class by hitting the 'x' and immediately type your custom class-name like 'hero-1'.
- Select the row and add this to your list of symbols.
http://coffeecup.rvanheukelum.com/valveco-hero-symbols.png
Now, when adding these hero-symbols to your selection of pages you can change the hero images easily:
Create different hero's using just the one hero symbol using classes
-
- Select the hero container
- Apply a different background-image (don't de-select the container yet)
- Immediately delete the current class-name and type your desired unique custom class-name like'hero-2', 'hero-3' and so on.
Just make sure your hero images already are 'ready for use'. Mine already are 1920x600px by 72dpi (I currently don't care for retina-ready images yet). Here's the live project ...
– Richard
Living in Zevenbergen, the Netherlands
13" MacBook Air M1 + 2x LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS 14.3 Sonoma
13" MacBook Air M1 + 2x LG 24" IPS QHD / 8GB RAM / 500GB SSD / macOS 14.3 Sonoma