How to build a site like the new RapidWeaver7 site

http://test.bigwhiteduck.com/sections-hover/

4 Likes

AH, never mind, you are in good hands with sections pro!! Get that instead!

1 Like

tav thanks, not quite what I was after

I used sections pro originally had it doing the same thing as your example, but I really wanted the images to be dark (darker overlay) initially and when you hover go to normal brightness, tried other stacks I already have, but couldn’t get them to go full screen, in my example above the opacity makes the image whiter and not darker, it is using sections pro

I suppose I could darken the photos and have them swap, just more overhead

again missing a certain stack to make the total section linkable to a modal

You can do that too - give me a minute, it just means changing the darken effect around the other way. There are actually several ways you can do it, this one was just the quickest and doesn’t require an overlay layer to be used.

1 Like

Have you tried the monochrome to full colour mode? I know that’s not exactly your idea either but might work

Do you mean like this then?
http://test.bigwhiteduck.com/sections-hover/dk-to-light/

1 Like

@upssjw Sections pro will do what you want. In fact, SectionsPro will do everything you want in all the colour and zoom. blur, darken, lighten, etc, etc. Layer after layer after layer.

must be missing something I tried lots of ways

sorted all works now easy when u no how

In SectionsPro you have essentially 4 layers to play with which are the background, the content, the fixed position content and then an overlay on top. Each layer can be animated to reveal what is below or to obscure what is below. So for example you could put an overlay solid colour on top of a content layer and make the overlay go transparent and reveal the content on hover. The content could be made to darken or lighten or go B&W on hover too. Have a look at my Template3 animations where I do a lot of this stuff. E.g. I use a fixed overlay opacity and then a slow zoom, blur and an autoscaled text that follows a path on hover. You have the full range of CSS effects to play with on all 3 layers and don’t forget you also have the Stacks3 BG settings too. To say the options are limitless is a huge understatement. Ken Burns animations, video layers, auto blurring background based on content, etc, etc… SectionsPro is unbounded in its capability.

1 Like

Just a reminder to all, download demos if available for both themes and stacks, I am guilty, should have went through BWD Sections Pro demo, would have saved me and tav time.

The Sections Pro demo does demonstrate all the functionality you need to replicate/build

As I said above easy once you know how, I must have tried about 10 stacks and multiple setups, it was all there in the one stack, should have looked at the demo

Saves time for developers and support staff, give them time to develop and release other themes and stacks

2 Likes

That’s a good reminder. The BWD SectionsPro site and the documentation as well as the demo project files are about as good as it gets. Well worth digesting them and also checking them regularly because they are constantly being updated too.

Hi Dan,

I was initially distracted by considering how I could provide my solution for free. However, I would never have been happy creating a copy or accurate duplicate of another site and whether it would be provided free or otherwise, made no difference whatsoever. As I made clear in my first post, my intention was never to copy or duplicate and then distribute anything, and was just to show the power of my solution and how quickly it could be put together. Also my solution does of course include 3rd party add-on’s that are bread & butter products from other developers and as we all need to eat, shoe the children, buy coffee, etc. they are not free. A free based Add-on community can’t be sustained and can’t provide the level of excellence that the current community does for RW.

The fact that some people along the way though I had lifted the RM site code or used the stacks used, I take as a compliment of the accuracy of my demo site.

So, I will create a Realmac layout “style” RapidTemplate, but remove all Realmac icons, images, text, colours etc., and commit to create it all for the low price of $20, which when you consider is less than a single month of RM Community Gold membership, is indeed great value. That price will include the entire PADDY stacks for “free”. Just add Stacks to RW and users will have the solution.

That’s what RW is all about and the good news is very soon users can learn how to build an RM “style” site with an off the shelf, fully working, low cost solution. Win Win Win.

Thanks, Gary

2 Likes

Very nice! But don’t forget to add “http://” to your link of PADDY stacks on the demo page because it links wrong :slight_smile:

Thanks. Only a demo though.

I will be releasing RapidTemplate4 very shortly. RapidTemplate4 is the development that this original exercise spawned. All content, icons, images, text and colours have been removed or changed. I have made a number of significant changes that showcase some great new stacks and it has been considerably enhanced. Template4 will be a different site but still retains some of the style of the RM site in the interests of those who want to be able to build a similar style site. It is fundamentally a single page site but could easily be adapted to a multi-page site with Top Bar type navigation.

As a reminder, it will follow the format of other RapidTemplates in that it only needs Stacks3 and a free blank theme and some free “donation ware” stacks. Included in the demo is an optional S4S StackSlider used for the Slider shown in the original demo. Everyone should have the S4S StackSlider as it is a great slider anyway.

1 Like

The original demo site has now been replaced with the new RapidTemlate4 demo site at www.webdeersign.com/templates/tp4demo1.

Is that still the slider from the RMS site? Just curious. Haven’t had a look at the code yet.

Never mind, just took a peek at it. Looks like you’re using bxSlider. Used that one before. Good piece of code. :slight_smile:

Yes, the S4S StackSlider is a great simple easy to modify slider that everyone should have.