Streaming live at 10am (PST)

Best suggestion for creating a holiday promo styling


#1

I just wanted to get some feedback on what you all think would be the best possible way to post this promo on my company's home page - other than just dropping in the image as a complete thing.

I think it best to break it apart into all its elements with different classes for styling, linking, etc. I designed this in photoshop and of course have the layered file.

Of course we'd want it to look great on all devices. Please keep that in mind.

Thank you.

Site link: https://preview.webflow.com/preview/clf-test?preview=7220fe6322592232a5cf417f896cc601


#2

Could you show a screenshot of the homepage and a screen shot of the homepage + promo block ? It's not evident to understand the context and the boundaries of your promo. Thanks!


#3

I would like this new promo above to replace the current "Pre-Holiday" promo on our home page.

http://www.customlightingfixtures.com


#4

Hi @sethregan, you can probably accomplish this with a little layering with z-index and using some relative/absolute positioning of elements.

I started looking in to how to style this and found a helpful article: https://coderwall.com/p/vwljzw/css-inverted-border-radius

I started putting together a quick example and somehow strayed from that path, but I did setup the structure with an outer frame and an inner frame, and then setup 4 divs for Left, Top, Right and Bottom and then postioned those absolutely within a parent div with relative position.

I gave each corner div a radius on different sides and a white border on one side.

Not sure if it will help, but if you want to take a look, see here: https://webflow.com/website/Inverted-Radius-on-Div-Effect

I hope this helps!


#5

Thanks Dave. I was actually thinking of using the entire image as a background image of a section. However, I would first remove all the image and text element leaving me with the background and the black area flattened as a jpg. Once that's in place, it is a matter of using a 2 column table inside a container and laying out the left wall light image in the left table cell and the right side text elements in the right side table cell, as different elements with dif classes stacked on top of each other. With me?

The issue is though on a smaller phone screen... the entire section will be too small when looking on phone in portrait position. I think it will be ok in landscape mode, meaning big enough to read and see the section.

Hope I'm being clear.

Thanks.


#6

Hi @sethregan, sure you can do that, just remember that the scaling of the background image, will be separate than the scaling of the content inside the element having the BG image. So the bg image might get cropped or zoomed, depending how large the background image is.

One suggestion, is to use z-index layering with all elements having an absolute position within the parent div, with the image having the lowest z-index and other elements layered on top using flexbox.

I hope this helps!


#7

What if I just drop in the entire image as a jpg. It will take a bit longer to load but not much.

Question while i have you... for the life of me I cannot remember how to get rid of an active Symbol. Can you advise me on that? If you look back at the site preview, you'll see I've started making some changes towards this new promo, but I am unable to remove the symbol currently there... "Sale Section symbol". I'd like to remove it and just have the section with no symbol.

Thanks.


#8

Hi @sethregan, sure you can do that also, the example I gave was only if you wanted to do everything without having to use a single image.

To unlink a symbol, right click on the symbol and choose the last option to unlink a symbol:

I hope this helps!


#9

Thanks Dave.

It seems to be ok as a single image but I'm having trouble with portrait and landscape in phone sizes. I'm getting black above and below the image on both those modes. Any thoughts?

Thx


#10

Maybe you should just hide landscape for phones and do a portrait version which shows only on mobile


#11

@zbrah https://forum.webflow.com/users/zbrah It's the opposite. It looks
ok on landscape on phone but there are still black spaces above and below
the image.

Thanks.


#12

No sorry i think you missed understood. I mean do another add but on portrait for phone.
Like this


#13

Oh I understand now. Thank you for taking the time :slight_smile:


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.