Webflow Workshop - Beyond basics: Advanced components customization

Ever wanted to get extra creative with sliders, nav bars, dynamic embeds, and other more advanced Webflow components? Join me as I walk through the best approaches for customizing these handy — and powerful — Webflow components.

Tuesday, September 13th at 10am (pacific)

http://webflow.com/workshops

11 Likes

bumping for obvious reasons :wink: tomorrow’s stream is going to be fun.

4 Likes

Can’t wait!! Wish we could just go ahead and do it now haha

Do we have to sign up for it? Visit a specific URL?

You can either go to the link in the original post or go to their YouTube channel and subscribe.

1 Like

I’ll be going over 4 things tomorrow:

  • Simple Preloader
  • Chaining events
  • Navbar component fixed on the left
  • Dynamic Gallery Lightbox + dynamic embeds
3 Likes

Awesome stuff! I can’t wait for this.

This topic is now a banner. It will appear at the top of every page until it is dismissed by the user.

This topic is no longer a banner. It will no longer appear at the top of every page.

thanks to @Anna_Kelian for the awesome gallery of tricks :slight_smile:

https://preview.webflow.com/preview/components-and-elements?preview=3b154932ded3b59038a81dbd3d0019d9


Dynamic Embed code for the dynamic lightbox gallery:

<div style="display:none;">
  <span class="full-photo">(photo dynamic field goes here)</span>
  <span class="photo-caption">(caption dynamic field goes here)</span>
</div>

<script>

	var fullPhoto = "",
  		fullCaption = ""; 

	$('.photo-thumb').on('click', function(){
  	$('body').addClass('modalOpen');
  	fullPhoto = $(this).find('.full-photo').text()
    fullCaption = $(this).find('.photo-caption').text()
    $('.gallery-modal-photo').attr('src',fullPhoto);
    $('.full-caption').text(fullCaption);
  	$('.gallery-modal').fadeIn();
  })
  
  $('.close-modal').on('click', function() {
  	$('.gallery-modal').fadeOut();
    $('body').removeClass('modalOpen');
  });

</script>
2 Likes

Here is the link to the Windows 95 link I posted in the live chat during today’s workshop. This is a never ending project so I’ll be adding to it little by little.

Turn those speakers up @PixelGeek for that sweet splash screen sound!

Made 100% in Webflow, with a sprinkle of Jquery :wink:

LINK: http://windows-95.webflow.io/2

Constructive feedback is always welcome to help improve and evolve the project!!

Welcome @PixelGeek
I hope I can find more time to add new stuff soon