When do I use a content box?

Hi, this is Sandra from GREYD. Today I’d like to show you the features of our content box block. Content boxes are ideal if you want to highlight certain content sections, link them or have a background or effect. To some extent content boxes do the same as the group block, but they offer you a lot more options. After placing a content box on your page, you can fill it with any content. So let’s just fill it with like a heading and some text.

If you want to link your box or trigger an event with it, the trigger picker is available to this block. If you want to learn more about that, we have a dedicated tutorial video in our Helpcenter. But now let’s have a look at the content box settings on the right. At first you can define colors for the text and a background. You can select from your global colors or also work with any individual color of your choice.

For the background you can also set a gradient. Therefore you can place as many color points as you like and you can also create hard edges by placing two color points on top of each other.

For linear gradients you can also individually adapt the angle or switch to the radial one. For the color settings and also several other options that we will cover later in this video, you can also activate an hover effect by clicking here, so the appearance will change when the user hovers over the box. And you will find the same options as before a second time for the hover state. Next it’s spaces. You can define paddings and margins, thus an inner space between a border and the content, as well as a space around for each side and with different units and also individually for each breakpoint. Under size you can set a minimum height, which can also be varied per breakpoint.

With the border radius you can round the box corners again individually for all four corners. For the border itself, you will find different styles as well as controls for the width, color, hover effect and again all four sides individually.

You can also add a drop shadow easily and define it horizontally and vertically, define how big it should be, how much you want it to stretch or blur, how much opacity you want and where it should be positioned.

Independently from whether your content box has a background color, you can also add an image, video or animation and will find different settings including scroll behavior and parallax effects. Should you not see the animation settings here, please have a look at your GREYD.SUITE settings – you may need to activate Lottie Library there.

Under behavior you can also define the hover effect in detail in terms of pace and the type of animation.

Content boxes can also be used for trigger events. If you want to learn more about that we have a dedicated tutorial video for you in our Helpcenter.

And last but not least you will find usual anchor and CSS settings down here. Before we finish, let’s have a look again at the frontend, where I have prepared some content box examples.

Up here I have a classic box with a background color and border radius and a hover effect so color and border change on hover and there’s different content in my box.

In the next example I have placed two content boxes on top of each other, one with a background color gradient with low opacity and one with a background image and I have also made the text transparent in the normal state and white on hover state which creates really nice hover effect.

And down here I have a variant with a gradient and very small paddings. But there’s actually even more. A while ago we have added some variations to the content box block that you can select up here. So we have the regular content box as discussed earlier and then we have sticky box, pinned box and floating box. Let’s have a look at some examples in the frontend to see what’s the difference. So, nothing beautiful, I just wanted to show you what the differences are. Sticky box as the name already indicates remains sticky at the top of the page as soon as it reaches it.

If you want to, you can define an offset, so for example if you don’t want it sticky right on the top but maybe below the header you can add an offset here. The other options are exactly the same as we’ve just seen for regular content boxes. Then we have the pinned box, which is sticky at a certain point of your website in the visible section, so it always stays here and you can define exactly where you want it to stay and can also make that breakpoint individual. The pinned box is also very important for example if you want to create sticky headers. If you want to learn more about how to make a sticky header with the pinned box, just have a look at our navigation tutorial in the Helpcenter. And the last option is the floating box which remains fixed within a certain section for example here, we have a floating box that lies within a cover block and it always remains in that position within that cover block and the options are exactly the same we have the positioning here with the possibility to make that breakpoint individual. For more videos and information please visit our Helpcenter.