Crypto Super Hero Design – Can It Be Done With Beaver Builder?

A super fun hero design inspired by a crypto website. Can it be done with Beaver Builder? Well, can it?

Let’s find out!

We continue our journey with https://thegraph.com/ and attempt to build the hero on the desktop size. It’s going to be CSS Flex mania.

Flexing?

We have to figure out how to make a grid that is 6×3 that also has a bit of text under the image. This grid also needs to sit in a parent column to put our skew CSS magic on it. It is challenging. But, with some CSS skills, we can do it!

Here is the full code:

.bro-flex-parent .fl-col-content {
	display: flex;
	align-items: flex-start;
	z-index: 0;
	transform-origin: right center;
	transform: perspective(140px) translateX(-2.9px) translateZ(0) rotateY(-3deg);
	will-change: -webkit-mask-position, transform;
}

.bro-flex-me .fl-photo-align-center {
	background-color: rgb(0, 0, 0);
	margin-right: 6px;
	border-radius: 3px;
}

.bro-flex-me .fl-photo-img {
	padding: 5px;
}

.bro-flex-me .fl-photo-caption-below {
	background-color: rgb(43, 41, 58);
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	margin-top: 10px;
	border-radius: 3px;
}

.bro-flex-top-col {
	width: 100%;
	display: inline-flex;
}

.bro-flex-me .fl-module-content:hover {
	border: 1px solid rgb(255, 255, 255);
	border-radius: 3px;
	transform: translateY(-4px);
}

.bro-flex-me .fl-module-content {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}

Text-Shadow Stacking?

You know, with each good design is a layer of fun beneath it. The text-shadow on the H1 is not just some one-layer color. That is for amateurs! The Graph stacks their text-shadows. So can you! It’s easy. Just write the CSS as you would usually, but add a comma and then add another code declaration. So good!

Here is the text shadow code:

.special-h1 {
	text-shadow: 0 0 80px rgb(192 219 255 / 48%), 0 0 32px rgb(65 120 255 / 24%);
}

Final Thoughts

I am still a bit shocked at how little Beaver Builder gives you in terms of tools—especially considering that it is much more expensive than other builders. The other builders easily give you double or triple the amount of valuable modules and options at your disposal. There has to be a time when the cry of “but it’s not bloated!” should be replaced with “It does underperform a bit!”. Beaver Builder is still an excellent tool, but you will need to learn to write some CSS and javascript to get anything Spicy achieved with it. Just my two cents.

Tools + Inspiration Sources We Used

Music Bumpin In The Background

Get New Episode Updates!

You are signing up to be put on our not so frequent email newsletter. We will never sell or give away your info, ever.

Hey, thanks for sharing!

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on tumblr
Tumblr
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on email
Email