Some questions before buying

Hi There. I’m very close to buying Blocs. Coming over from Muse then Sparkle. I’ve played a bit with the trial but I keep running up against trial limitations. I have a couple of questions on whether things are possible in Blocs, mainly relating to porting over existing sites. Here’s a recent Sparkle site:
On the homepage I’d like to have a fading image ‘carousel’ like you can see, that has text over the top. I cannot seem to be able to create this in Blocs, even with custom classes… Is there a way to do this? There seems to be no z-index support in Blocs??
Another thing that’s a doddle in Sparkle is adding and styling social media feeds. Other than going to the developers part of the media site (for eg Facebook), is there a simple way (ie no coding) of getting FB/Twitter feeds into Blocs that will work for each device size?

I also wonder if it’s possible to make a Masonry gallery with text captions for each image, other than having to photoshop the text in each time? (Makes it a tad difficult to edit). And, can I specify more than three elements across for Masonry? (this is because I imagine there’s no way to make galleries like on the kentlogs site (take a look at the ‘hardwoods for sale’ page)??

I’m hoping that these things can be achieved in Blocs as I love the UI and how fast it is at creating responsive elements with ease. I realise not everything will be as simple to achieve in other packages but that the output code with be nicer however hopefully there’s always another way to crack a nut!

Thanks for any help.

Hmmm. I’ve struggled a bit more and I’m going to postpone buying Blocs for now. I can’t even get an image to fill a container and keep its proportions! The container resizes to fit the image and if I resize the container the image stretches! How daft is that!

I feel you…I was a Muser for years, and likely like you, needed to find a new home when Adobe decided to end Muse, and so I explored many many options, including Sparkle.

Blocs finally became my choice, but it was a very heavy lift in learning a new tool, requiring a new way of thinking & working, but now that I’ve done the hard work, I’m happy with it, as it does what I need, and I would say in some ways easier then Muse (which I loved), but not necessarily in the same ways…in fact, not at all in the same ways.

Here’s my blocs built site:

You will see some share buttons, which are incorporated using a free service called AddThis and entering a bit of code AddThis provides in the page settings.

I don’t use the carousel, but I’m sure someone here will reply…not sure if your example is feasible or not…but in my experience what I thought wasn’t feasible at first, turned out to be mostly because having worked with Muse taught me to work in a particular way, and so I was confounded and frustrated when I began to work with Blocs. Ultimalty, what I needed to do was feasible, and done with Blocs.

But…that said, building websites is always a bit frustrating no matter what program you use and no matter what particular tool set or pieces each one offers or doesn’t…

That said, I couldn’t have made the transition without this forum’s help, and most importantly without beginning with this:

@Eldar provides the necessary lessons to learn how to use this tool, and offers a free course to get you started.

Good luck…

In answer to your question about carousels, one of the standard transition options in Blocs is fading from one image to the next. You can also turn off the left and right arrow indicators to create a carousel just like the one on your current page.

The issue you’re having with images is understandable seeing as you have been working in a Sparkle environment. In Blocs, your images will always be sized to fit the width of the column in which you place an image bric. This is for good reason as the the columns of your site will rearrange themselves to suit different device widths. In Sparkle, you’re probably more used to drawing out your image to any size you want, regardless of the underlying column structure. As such, you have other options that allow you to shrink or enlarge your images to fit and change the proportions of your image and have the underlying image placed at top, centre or bottom of the image placeholder. Blocs doesn’t do this. Therefore, before you place an image you should ensure that it’s sized and proportioned to how you want it to appear on the page (again, another good design practice).

If you attempt to resize the image on screen, you will distort it and you will lose the responsiveness of the image. So, the first rule in using images in Blocs is to make sure they are pre-cropped and optimised before placing them. They can be larger images than the placeholders, but when placed they will be scaled to fit the width of the containing column. So, if you want smaller images, use narrower columns, if you want larger images use wider columns. In any event, the height of your image when placed will be dependent upon the proportions of the image you’re using.

The above also relates to your other question about masonry galleries. The standard gallery Bric is quite nice, but it doesn’t provide a great deal of flexibility. However, you can create your own masonry gallery with a standard bloc. Just start with a two, three or four column bloc and add image placeholder brics into each column. Stack the brics as required to create the masonry bloc. At this point, all the placeholders will be the same size and won’t look much like a masonry gallery. Now start adding images to the placeholders, ensuring that each image is of the correct proportions. As I said before, all placed images will take on the width of the column, but the height of the image will be dependent upon the proportions. So, a portrait image in the first column will be perfectly sized to fit the column. A second landscape image placed in the second column will also fit the width of the column but will be shorter than the first image. You can keep adding images of differing proportions in subsequent rows and columns to create the masonry effect. You will probably find that the final row of images may be uneven (especially if you did’t proportion them accurately before importing them). However, you can use the class editor to add additional margin space to your images, thereby allowing you to align them all correctly.

The standard masonry gallery doesn’t provide a way to add text overlays, but the manual version does. Essentially you would place a text bric underneath each image and then create custom classes to apply a negative top margin to the text containers. This will have the effect of moving the text up and over the image.

The problem with Sparkle (which I actually do like) is the fact that it is an adaptive tool in which you have to manually layout and resize elements for each device variant. Whilst this does offer a less disciplined approach to design, it does entail extra work. In many respects, that extra work is of little importance to the user who is visiting your web page. They just want to see a clean, well laid out site that responds to different device sizes. They don’t really care if one of your images has been specifically laid out to create a 50 px margin to one side. Personally, I think Blocs imposes good web design disciplines. Custom classes can be deployed to add a great deal of flexibility in the visual look of the site, but in so doing, you’re taking a step back to adaptive website thinking which will involve you in extra, and largely, unnecessary work.

Finally, adding social media streams can be achieved by grabbing code from your social media provider and adding it to an HTML bric. This is no longer as popular as it once was because of the implications of GDPR compliance, however, it is still possible to achieve. As for styling, these options would be set up in the HTML code provided by the social media platforms. Many will give you a number of styling options before generating the code.

Give Blocs another run and try making a site that uses just the standard features it provides. The end result will look perfect and will be completed much faster than in apps like Sparkle. Whilst Blocs isn’t a graphic design tool, it does create great websites that simply work. However, it does require a little work on your part to ensure that website assets are correctly prepared before adding them to your project.

1 Like

Hi Guys, Thanks for your help. I have watched all of Eldars free courses and they have been very helpful. I think my problem is that I’ve been a bit spoiled with Sparkle. Being an illustrator as opposed to a coder I find it more intuitive and much easier to make a site look the way I want rather than having to fit a preconfigured design ‘template’ or set of rules.

A lot of the sites I build aren’t designed by me but by designers and they don’t know a thing about best practice or Bootstrap. They just want the site to look pretty! I can understand how a coder would get frustrated by this as it doesn’t sit well with ‘function over form’ but then I also understand why my designer clients don’t give a fig for how it ‘should’ be done, they just want to see their designs work (bearing in mind a lot of them come from a print background).

I am trying to find a package that will allow me to build sites that don’t look the same as the millions of template based sites out there and I guess for me, Blocs isn’t it. To be honest I don’t think there is a package that ticks all the boxes. Like you say, Sparkle is great for one device, but when you have to make simple edits and that breaks all the other size layouts its a major pita. I do love they way it automatically spits out optimised images though, in all the retina sizes and everything… I guess that saves tons of time I’d have to spend prepping them for Blocs…

It did occur to me that I can use both or at least integrate other packages with Blocs. I use Hype a lot and so I can easily build HTML5 elements and integrate them into a Blocs site where it won’t do it itself.
I could even (and I know this sounds daft) quickly drop a few images into a Sparkle page and size to taste, then publish it to disk and get all the output sizes for Blocs generated for me! :slight_smile:

I’ll give myself a bit more time with the trial and see if I can live with it…

Thanks for the Masonry tip @hendon52 great idea!


Good to define what you’re needing and your process.

By the way, and just to clarify, I don’t code and am not a designer either, only needed a tool for one site, and blocs worked, that is once I learned how it works.

And this did require a different process than what I was familiar with in Muse (and GoLive prior to that) which was frustrating to learn as I had to shed old practices.

To do so, I replicated my old Muse built site in Blocs, with improvements I think, though needed to drop one thing not yet available in Blocs which was a blog widget made by QooQee, and instead simulated one with columns; and then I built a brand new site which I have now. It’s fairly simple, and I dropped using a couple of Tabs which I had before, and changed them to Modals, and this made things super easy for responsiveness.

And as I recall with Muse, there were frustrations learning that as well, and throughout using it.

That said, I’m sure you’ll find something that works enough for you somewhere, lots of choices out there, none perfect as you recognized.

Best to you!

1 Like

Nicely explained here: Optimizing image backgrounds for different breakpoints [VIDEO]

Also, thought I would add this as a possible carousel option, not precisely what you described but perhaps intriguing enough to be aware of:

Hi @DanielF Wow! I’d forgotten all about Rapidweaver. I used to use it years ago and gave it up due to having to use themes but now it looks like there are tons of ‘widgets’ (if that’s the right word) to really extend it. Hmmmm. I wonder just ho good it is… Cheers.

re the image optimising. It’s cool, but very time consuming. He spent a good few minutes on one image… In Sparkle I can drag and drop tons of images onto a page and just change the scale/position within the image box as I work. Sparkle then handles all the optimising at export time (and makes all the retina screen variants too) I recently had to do a site with 80 images on 1 page. It too about 10 minutes to get them all looking ok. Can’t imagine how long that would take using Blocs… :slightly_frowning_face:

Wonderful…sounds like Sparkle is your tool, then. But in case you’re still looking, Rapidweaver is one many folks on this forum have had much to say about (which you could search), and then there is Webflow to look at as well, and Design with/out Code is another option, if you haven’t already taken a look, though both of those are browser based tools, which may or many not be preferable for you. Best of luck in your journey to find what will work best for you!

It honestly wouldn’t take long to work with that amount images in blocs. We batch resize all of our images with preview before dropping to blocs. Once you get the hang of it, it’s really really simple.

I came from Rapidweaver, never going back :rofl:


I know Rapidweaver well. Been there, done that, spent a fortune and wasted a lot of time waiting for page previews. I didn’t even get a t-shirt. #Blocsrocks


Optimising images outside of Blocs can be done pretty easily and quickly with a graphic design tool, you would know coming from that background. Think of Blocs as the tool to pull all the parts together once they are prepped. Blocs currently doesn’t offer image optimisation tools but it does offer a proper responsive web design tool set. IMO that should be the number one priority of any web design tool in 2019.


Well said Norm.

The issue here, in my opinion, and which was my experience as well, is that folks coming to Blocs who are not designers or developers, or may be designers, and who really do rely on ‘non-coding’ website builders, and who learned to make websites with tools like Muse or Sparkle or other ‘free form’ and ‘non-coding’ tools have a familiar way of doing so, a way that is not compatible with a more structured method, and so feel handcuffed when trying to work with Blocs at first.

This is not a fault with Blocs, but about the intersection between former ways of working (wether or not that former way of working is considered optimal or not) and then engaging working with Blocs.

This is a real hurdle a person in this category must face, and decide to work-through, in order to gain an appreciation or at least control over their website building experience using blocs or another tool that is built on a different eco-system & methodology then what they are familiar with. Learning is tough, and that is what this category of folks (like me) must do. And, then there is also what could be done in the former tool of choice, that may not yet be done (with out more advanced coding skills) in blocs, too.

Umm… I want one.:star_struck:

Already in the post.

1 Like

Thanks for the replies guys! You’re obviously all very passionate about Blocs. I’ve learned a lot doing research over the last few days. I do appreciate that a bunch of images can be optimised in Photoshop et al (I’m an Adobe suite subscriber) so that’s not a deal breaker but just a sweetener some other packages have. I’m making a sort of list in my head of what I would need to be able to do if I had to rebuild all the sites I’ve built over the years in Muse and Sparkle. Then when I get the most ticked boxes for an app I’ll go with that. I’m really liking the Blocs interface and ability to granularly adjust everything with custom classes! That’s a really nice feature (although I still haven’t worked out how to get a fixed header to sit over a fading image slider!)… I like masonry and sparkle can’t do that. I love the responsiveness of Bootstrap and again Sparkle loses out to Blocs on that one. Over the weekend I’m going to trial Rapidweaver and it’s Stacks system as that seem to be offering a way to implement just about anything! Sounds too good to be true but we’ll see. Blocs doesn’t have quite as many ‘Brics’ yet but I guess that will improve with time. I like the WYSIWYG of Blocs too and RW certainly isn’t that!

I’m going to give it until Monday then make my decision… I do like the look of those T-shirts though!!

Thanks again folks!

But don’t forget, Blocs does have a lot already built in. Im not sure RW offers that.

Honestly, if you have time, take longer. It’s a big decision if you intent to build a lot fo sites. Good luck on your quest to find the right tool for you. :grinning:

The slider in Blocs has text overlays included as standard. The caption (or heading) can be aligned to the top, middle or bottom of the slider. Typically, the text you add would be different on each slider, but you could have fixed text that appears on every slide by simply adding the same text to each slide.

hendon52 - Thanks for pointing this out, and the work around of repeating the same text for each slide.

that said, I do understand rojharris’s interest in wanting the text to stay visible through the transitions of each slide, and so your work around is an option, but it is not quite the same thing, and sometimes details like this do matter…

The ability to have a background carousel or video playing with fixed text on top, and placed in any location desired (within column responsiveness limits), and with any styling desired…would be a nice ‘non-coding’ feature to add, that is if it isn’t already in Blocs.

1 Like

My suggestion of using the same text on every slide was specifically relating to the cross-fade transition slider. The change in text will not be visible as the slide transitions from one to the other - it will appear to be static.

if someone wanted static text over a slide-in-out carousel. It would be best to add a bloc immediately below the bloc containing the carousel, Add a text or heading bric and style as required. Then, create a custom class on the text with a negative top margin to position the text over the slider. This will then remain on-screen as the slider transitions from one slide to another.

1 Like