I’m posting this here not in the Blocs forum as it’s easier for me to ask questions like “How do I add something like a Section Pro to the top of page, set to a specific height, with an image back and some content over?” here than there, cus there everyone will first say “What’s Sections Pro”!
So, to the Blocs users out there…
How do I add something like a Section Pro to the top of page, set to a specific height, with an image back and some content over?
:-)
I can’t answer your question but I would love to see you post this on the official RapidWeaver Forum. (That’s assuming you’re not currently banned). 🙃
Whilst I enjoy living life in the fast lane, on the edge, swimming with sharks, sky diving, fast cars, loose woman and using recreational drugs to excess etc. My wild side doesn’t extend as far as that!
Every man has his limits.
Section Pro is remarkably versatile, so I think it might depend on what sort of content you wished to add, but if we assume it was a header image with text for example you could add a hero bloc, then use custom classes to make adjustments.
You could make freehand margin adjustments to the text & button for precise positioning at different breakpoints, then alter the background image or text colours via a custom class. There are various ways to alter text sizing at different breakpoints or indeed font selections.
There is a learning curve there for sure. It’s different, but you can do an awful lot and the trick is to really master those custom classes. @Norm is probably the one who can give you the best feedback. There is a lot coming with the new store opening next week.
The best advice I can give you is to throw yourself in and break stuff. Experiment wildly and if things don’t work delete them, but you’ll learn a lot along the way. You might be surprised how many RW users are on the Blocs forums. Some of them are well known RW developers.
EDIT: Project settings are for your base settings. The side panel has mostly basic settings and custom classes are hugely powerful. A really important tip is to name custom classes accurately. It may not matter on a 5 page website but on a 150 page site you want to make sure you only alter the intended areas.
Ya, I figured start simply: So add a full width image header with some text over. I figured to get going I’d replicate as much as poss this template of mine: https://samplesites.caffeineinjection.com/trades/Plumber/
I’d worked out to use a hero header, but couldn’t work out how to not have it full browser height, but a specified percentage or pixels. Guessing this is where these custom classes come in?
Got any links to some free demo projects? These are hand to deconstruct.
It’s obviously going to take a bit of time and it’s quite hard to let go of old habits when you’ve been working with RW for years. I’m currently building a site in Blocs that will be roughly 150 pages at time of launch. That’s a lot of work with any design app, but I have enough faith in Blocs at this point to undertake a project of that size.
I don’t know of any free demo projects, but I could probably send you something if that helps. You are not the first to make that request and it might be something Norm could consider making available.
You can do this many way but the one that comes to mind is to add any Bloc that has any or some of the type of content that you want and delete the content you don’t want. SO if there is a 2 col container change it to 1 col. Then add a class of sectionspro1 to the main container. Double click on the sectionspro1 label and the edit will appear and then set the height to a px or %vh setting.
This may sound contrived but actually you get used to it very quickly and you quickly realise that you can set the parameters for every single element on the page using just the class editor.
Giving it a try. Adding a hero then setting to 50%.
Once thing I am finding very disconcerting, is clicking anywhere appears to add a text area. Which is very annoying. Not sure if it’s something I’ve done to make this happen or a default.
AFAIK a Hero Bloc already has 100%vh applied to it so use a non Hero Bloc. Clicking on the screen will produce a result dependant on what you are clicking on. I expect what you are doing is wild random screen stabbing.
Of course. Isn’t that what everyone does when they first start playing with something?
I feel somewhat lost then! I’m not sure what type of bloc to add if not the hero bloc. I’ve tried adding a col, and setting the dimensions (100% width, 500px height, 500px min and 500px max) but I see no way to add a background image to it.
I’m sure what I’m trying to do is pretty common (essentially a not full height hero), but how to do it is eluding me!
EDIT: I think I see how to add a background image to a col, but it doesn’t seem to allow me to add an image in resources, only one from my hard drive.
If you add an image via custom class you currently have to navigate to the chosen resource on your hard drive and I’ve mentioned this to Norm. It’s due to undergo a change where these will be accessible via the asset manager, which is the obvious way to go and that would allow for remote assets as well.
You can see here how I’m using one image at LG and MD, then changing to SM I switch to a more appropriate image for mobile. You can change the breakpoints while the custom class window is open to make all the adjustments in one go.
What if the image is warehoused though?
This all seems a seriously long way to do something that is essentially already done with the hero, I just don’t want it full browser height. There must be a way to control the hero height, shirley?
If the image is warehoused it can be added via the asset manager quite normally. In this instance where I’m using separate images at different breakpoints they currently have to be added locally by custom class, but it’s on the to do list of Norm. Sometimes you make a request and it appears in the next beta of a point upgrade. Progress is rapid and with a lot of user input.
OK, I think. I’m still not getting this inability to have a hero bloc at a specified height. There must be a way to do it, I just can’t figure it out.
Just set the width or height in the box next to the image selection.
Alternatively you play with more flexible parameters in the dimensions tab that looks like a school compass. The image is contained within that area and therefore resized accordingly. I think this second way is far more powerful.
Load your images into the media manager first. They can be loaded from any remote URL if you want but they will be 'warehoused" in the RW sense if you just add local images to the manager. If you load the same image from the manager into multiple pages then it will retain its name and only one copy will loaded to the browser.
You are thinking too much like a weaver. I would suggest reading up on the basics because what you are trying to achieve would be like someone buying RW and then immediately trying to create a fixed height container with BG and content without realising you have to buy Stacks, a framework, download BWD stacks, learn how to use it all, etc…
I think he is just asking how to make a proportional height container with a CSS background image - the screenshots above seem to be referring to foreground responsive images.
why not just ask that on the Blocs forum.
I disagree. I’m really not thinking like a weaver, I’m thinking like someone trying to add an image to a webpage. I have the URL, I have added it to the resources and it’s there for me to add to something like a hero header. But, if I try to add an image as a background to a col, when you click the little image box it doesn’t open the resources popup but finder.
But, putting that aside, as I’m pretty sure it’s the wrong way to do what I’m trying to do, back to my original question: How do I make a hero NOT full browser height?
