Streaming live at 10am (PST)

How to make a symbol out of my website banner? Won't work


#1

Hi I’m creating a website banner which consists of a photo with background filter and overlaid is the navigation (on top of the photo) and some banner content (also on top of the photo). I will need this exact banner to appear on numerous web pages so am trying to create a symbol to re-use on other pages. It is not working for me and an error comes up saying it won’t allow nested symbols. I’ve tried saving each element as a symbol eg: banner, nav, logo etc but when I try and construct it on a new page, they just display underneath eachother instead of overlay on top of the photo.

This is what it looks like, it is on page called “Test”, there is another banner on the home page but that is the old one I don’t want to use.

Any help appreciated as to how I could set this up so I can re-use elements whether as one symbol or multiple symbols. Thanks.


Here is my public share link: https://preview.webflow.com/preview/holisticweb?preview=fb5b769e2c1615ebf97429520ced72b6


#2

Hi @Kulsha

I think I found the solution for you!

  • Go into the ‘navigator’ panel on the right (stay here for these steps)
  • Unlink the 3 symbols, by clicking on each green symbol - then CMD-SHIFT-A
  • Then drag the ‘container’ into the ‘header’ div, all elements now sit under the header div.
  • Now click on the header and create a new symbol - this includes all the elements in one symbol which you can re-use.
  • You may need to tweak how you achieve the blur/brightness you need, as it affects all elements - let me know if you need help with that…

Hope that helps

Stu


#3

Thanks Stu, problem is that I cannot apply the blur to the whole banner otherwise the logo, nav and search box will all be blurry. I was following a tutorial on the Webflow site on how to use the background filters so it does not affect the overlaid components. The tutorial I followed was here: https://www.youtube.com/watch?v=NiiiOFzCmGc

Trouble is then I cannot turn this section into a reusable block (or symbol as Webflow calls them) as it can’t nest the elements… would you have any other idea how I can achieve this without breaking the design? Thanks for your input.


#4

Hi @Kulsha

A nice way to achieve what you’re trying to do would be to unlink the symbols like @StuM mentioned. Then nesting the header and the container inside another div. You then should be able to create a symbol from the parent div.

Hope this helps.


#5

Nice work Alex! :+1:


#6

Thank you so much @AlexN and @StuM - I have it working now, the video was so helpful. Much appreciated.

Looks like I need to get my head around div blocks vs sections and when to use them.


#7

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