Free collection of pre-built blocks for GenerateBlocks

Hi everyone, this is a follow-up to my previous post. I finally got around to creating a page just for all the blocks that I created and use on my website.

Say hello to Creator Blocks (needed to give the collection a name). It’s a free collection of pre-built blocks created exclusively for GenerateBlocks.

No need to import anything. Copy, paste, modify anything you want, and enjoy!

I find myself always going back to other posts/pages hunting down a block I used previously, so I don’t need to spend a lot of my time recreating it. Especially adjusting for tablet and mobile views.

Having everything organized as a single collection where I can simply copy and paste is very useful for me. I hope it’s useful for you as well.

As I create more blocks for the website, I’ll keep adding to the collection.

Feedback is always welcomed.

9 Likes

This is great! Thanks for sharing! :raised_hands:

Dude, I loved your demo page, and thank you for making these available!

Thank you very much Fernando!

1 Like

Thank you Will! Glad to hear.

I know it takes a lot of time to create usable blocks from scratch. Hopefully it will save some time for people using this plugin.

Eo, thanks a lot for sharing!
I’ve linked your page in a post about GenerateBlocks on my blog

No problem at all. Thanks for linking the page.

Hi there! I’m actually on a similar process (building my layouts in a separate private website so I can easily copy and paste for future clients) and I have to say I loved some of your layouts. So thank you much for this.

One question tho, I LOVED the copy “button” (the one I’m pointing to in the picture) you use and that would help me a lot to speed up this copy and paste process in my own layouts, how did you do this?? would you mind sharing a little bit of code or hints on how to accomplish this?

Thanks in advance! Keep up the good work!!

Screenshot (1)|690x355

Hi eduardsans,

Thank you so much! As for the copy button…

  1. I wanted to originally include the block code, so I added Prism JS following the instructions from this site. You have the option to include a COPY button.

  2. In the editor, use the CODE block and add any code to it. Then when you go to Preview or Publish, the COPY button will appear on the top right-hand corner of the code (similar to here on Step 4).

  3. I used Elements to stylize the button (make it larger and change colour) and also hide the actual code. So all you see is the COPY button instead of the CODE block itself.

I hope that’s enough details to get you started.

It’s a bit of a hack job, but it serves its purpose for now.

Ooooh I see, I thought you found a way to automatically detect the code for the template so you could copy it without having to manually insert the code in another block and hide it.

Did I understand it right? (if not pls let me know)

I think it’s a great approach if your templates are not going to suffer changes (or very little) over time. In my case, I’m not so sure whether this is going to be the solution i was looking for, since I would have to edit the code behind the button for every little change I’d make (and I do make quite some changes).

Thanks for taking your time to explain things anyway :)!

Sadly, it’s not automatically detected. You are correct, it’s not an ideal solution, but I also don’t anticipate too many changes.

If I make changes to the block, I do have to manually copy and paste it into the CODE block. Otherwise, the changes won’t be captured. I’m including a markup showing what it looks like on the Editor Screen (see attachment). Hopefully this helps.

I’m not sure if this is a great approach for you but it works well for me. If there are any issues, I just need to make a quick update to the block, then copy and paste. It’s fairly quick to do.

Thanks again for taking your time to explain! I’ll definetely consider this solution :slight_smile:

hello , thanks for sharing this beautiful content! Can i ask where did you find all these svg icons?

Thanks in regards :slight_smile:

No problem @eduardsans

@tsolak94 The SVG icons are by Bootstrap Icons

@builtbymath thank you :wink:

Very beneficial and saves time at work. Could you please provide information on exactly how to make the link used in Hero # 1B? Hower underline animation, it’s very nice.
Thank you

Screenshot (1)

Hi Jan,

Sorry for the late response. Hi Jan,

You need to include the following in the CSS file. Then you can go to any link element (Advanced > Custom CSS Classes) and include “loud-link”.

@media (min-width: 768px)
.loud-link a:before {
content: “”;
position: absolute;
display: block;
bottom: -0.5em;
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}

.loud-link a:after {
content: ‘\21e2’;
margin-left: 5px;
}

Thank you for your help. :kissing_heart:
Jan