I have struggled to find on Blocs a feature that is massively used on other website building software and that is a slider/carousel feature which can be used multiple ways other than just a banner.
Slide shows for images, text, references, logos etc…but I have been told the best way is to use carousel and disguise it by using a png image behind it and then over lay the text over it.
I have done this, but it looks great on desk top view…but its non responsive with the text…so im guessing this needs to be for each view!!?..
Also i would like to add an icon at the start and end of the text but I can’t seem to edit the icon when its used on carousel.
I am sure there must be a simpler way to make text work on a slider ???
You need to set the styles for the breakpoints.
You can add all those things to the built in Carousel Bric. To be fair this Bric is just a generic Bootstrap Carousel.
Personally I use Swiper.js these days, its quick and easy to add. I even use Div brics to set up the swiper container and pagination so you can add slides without coding and visually style them.
eg.
1 Like
thanks again @PeteSharp - ill have a look!!! not sure if I know how to do any of it !!!
I think with Blocs it can do anything…but I will be honest, im finding i need more code to make basic things than I have ever done before using other web builders !!!
I will get there…im determined!!!
Also, does swiper work like a Bloc or Bric?
Blocs can do a lot without code. Check out the videos that @Eldar has made - he does it all without additional coding and makes some excellent templates.
https://blocsmaster.com
One of the biggest hurdles I see with people coming from another platform is they try and do things the way it was done with their old software. Blocs uses the Bootstrap 4 framework. Generally once that clicks you can build anything.
Very true.
I think the way to come into Blocs is to have a clear mind and try not to do things like other platforms I guess.
Its just simple things like a slider/carousel - why have it purely for banners…this should be implemented for multiple use. And the fade in and title which you coded (and thank you for that !) is found everywhere, but blocs does not have it.
So many people have asked for a carousel/slider effect on these forums for testimonials, company logos etc and seems very hard work to make something so simple done.
I am trying to make my menu change colour on hover…i know this can work !! but again doesn’t seem to want to.
I will keep playing…
Are you using custom classes?
You can add the Nav link classes through the class manager using the sub class feature. or just add these two classes. The first one is the standard nav bar links, the second one is for the collapsed menu. Make sure you select to preserve spaces.
navbar-nav li a
blocsapp-special-menu blocsnav li a
Of course there is different ways to achieve this, @Eldar has a video on menus, I would suggest you go through his free videos.
To make a testimonial carousel that incorporates images is relatively simple. You just have to prepare your slide images in advance. For example, to create slides with a circular photo of someone, just create the slides with their images in any half-decent graphics app. Create the images with a transparent backgound and export to PNG’s This is what the images should look like:
Now use the images as slides in your carousel and add individual testimonial text to the caption area of each slide. The end result looks something like this:
All you then have to do is to create custom classes for each breakpoint to position and size the text on different devices.
1 Like
Hi ya,
thanks for your reply, yes I have custom classes.
I have tried this, and just wont work…i know im doing something, somewhere wrong as its not working.
I have looked at several of the videos from @Eldar but couldn’t see specifically that part on the menus.
Why not under the navigation/list bloc where it says colour, why don’t they just do a hover colour on that and keep it simple!? hope all simple additions like this can be applied. It’s like a giant escape room puzzle game, trying to unlock the code to get things to work!
thanks @hendon52 good post. I will try the image part, once i’ve mastered how to get the text to work!!! Its a bit messy at the moment and to be honest after spending a few hrs on it today, its starting to make me realise sliders/carousels aren’t intended for text etc on blocs.
I jumped back onto rapidweaver for 5 mins and to get a slider to work with anything is just so so simple !!! But blocs wins in so many other ways…i might have to ditch a slider for my testimonials if this is proving to be a problem.
I am working my mind to think that just use the tools in blocs and then panic after !
Straight out of the box, Blocs will create navigation automatically by classifying it as a PRIMARY MENU. This enables the nav bar to be based on your site pages - add more pages and you end up with more links in the nav-bar. The drawback of this is that styling options are limited. Therefore, its often better to create your own menu that puts you back in control of styling. Here is an example:
Add a navigation bloc to your page, like so:
You now have full control over the styling options. Now select the actual list item:
Create a custom class called nav-links (or whatever name you like) and set the options and colours you want for both the normal and hover states: Here is an example:
Preview your site and try hovering over the link - you should see the styling options you’ve applied.
The rest of the menu is now simplicity itself. Select the List Item as shown below:
Right Click and duplicate - as many time as you want. Your nav-bar should now look like this:
You now edit the text on each link to reflect the page names:
The good thing about working this way is by duplicating the items, they automatically carry the custom class on each duplicate. Here is what the final menu looks like with one of the items highlighted:
2 Likes
Hi @hendon52 - thank you for the detailed information, this is greatly appreciated.
I have tried this way but on mine is locked? there must be a simple work around to unlock !!! but i am yet to find. I have attached a pic.
I have tried a 2 page site as a tester and even that is locked and I can’t change the colour of the menu on hover…very strange.
It’s locked because the menu is still associated with the PRIMARY MENU. Select the Item named LIST (two items up) and change the source to None. This will unlock everything.
1 Like
BRILLIANT !!!
Thats @hendon52 - perfect for the Hover ! managed to get them to all go in my colour on hover.
One last thing, when I select that page - I wanted that menu to stay in that colour? I have also selected as well as Hover in that colour, to also stay in that colour when Active, but this does not show…is there another area for that?
1 Like
There is an option in the project settings where you can specify a class for Active Links. It looks like this:
Start by opening up the class manager window and create a new class - I named my example activemenu. When the class has been created, select it from the list and click the edit icon as shown below:
This will open the class editor where you can specify the styling you want for your active links. This will be used for all Active Links in your menu.
Finally, set the class in the Project Settings as the Active Link class (as shown in the first illustration above).
1 Like
@hendon52 thank you so so much !!!
That is some work around to get the end result !!! I would have never ever have worked that!!
The menu should 100% be much simpler to get the end result than have to do it like that, but thank you.
@Norm is this is how it will always be to do the menu in Blocs as i have seen many people comment on the way to get this result a long winded way?
Also Norm, will there be any new sliders/carousel coming out which will do a slide show/carousel on blocs and brics? I think this will be a great thing, can do small image slides, text box slides, clients logo slides, offer slides etc…be great if this could be done simply?
