Now Loading:
Crypto Super Hero Design - Can It Be Done With Beaver Builder?

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

Info:
Posted March 19, 2021
, by tickyboom
A super fun hero design inspired by a crypto website. Can it be done with Beaver Builder? Well, can it? Let's find out!
🦁 Sections

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 6x3 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

Thanks for reading, wanna share with your friends?

Get infrequent design email updates!