How to Create a 3D Sign Post with Hover Effects in Divi

Last Updated on September 18, 2022 by 15 Comments

How to Create a 3D Sign Post with Hover Effects in Divi
Blog / Divi Resources / How to Create a 3D Sign Post with Hover Effects in Divi
Play Button

We all know that a good website makes it easy for visitors to find what they are looking for quickly and efficiently. And, it always helps if you can make your content more engaging. In this tutorial, Iโ€™m going to show you how to design a 3D sign post that will engage users and make it easy for them to find what they are looking for in a unique way. To do this, weโ€™ll be using Diviโ€™s transform options and the perspective css property on multiple blurb modules to create the 3D effect of signs rotated on a post.

Letโ€™s get started!

Sneak Peek

divi 3D sign post

divi 3D sign post

divi 3D sign post

Download the 3D Sign Post Layout for FREE

To lay your hands on the 3D Sign Post design from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youโ€™re already on the list, simply enter your email address below and click download. You will not be โ€œresubscribedโ€ or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Letโ€™s get to the tutorial shall we?

Subscribe To Our Youtube Channel

What You Need to Get Started

To get started, You will need the following:

  1. Make sure you have the Divi Theme installed and active on your WordPress site.
  2. If you want to create your own post image, you will need a photo editor like Photoshop, Gimp, or Sketch. Or you can use the image provided in the free layout download for this design above.
  3. Other than that, we will be building everything from scratch on the front end of the Divi Builder.

Creating the Image for the Sign Post

The easiest way to create a sign post for this design is to create a small repeatable image block that we can add as a background image that repeats vertically down the section or row of the page. If you want to skip this step, you can import the json layout included in the free download above to get started. But if you want to create your own with a custom color of your choice, here is how to do it.

For this example, Iโ€™m going to use Photoshop, but the process is very similar for other popular photo editors as well.

In Photoshop, click to create a new document with a custom height and width of 25px.

divi 3D sign post

Set the foreground color to black (#000000) or whatever color you want.

Then select the paint bucket tool and click inside the empty square layer to paint the square black.

divi 3D sign post

Then save your image as a jpeg to your computer. This is the image we will use in the design to create the post for our 3D sign post design.

Implementing the 3D Sign Post Design in Divi

Once you are ready, make sure to create a new page, give you page a title, and deploy the Divi Builder on the front end. Select the option โ€œBuild From Scratchโ€.

Your blank canvas awaits!

Now create a new regular section with a one-column row.

Customizing the Row

Before we add a module, open the row settings and update the following:

Background Image: [insert custom square image for post]
Background Image Size: Actual Size
Background Image Repeat: Repeat Y (vertically)

divi 3D sign post

Then update the following:

Gutter Width: 1
Max Width: 980px
Custom Padding: 2vw top, 2vw bottom

Then we need to add the following custom CSS to the Column Main Element as follows:

perspective: 1000px;

This perspective css property is necessary to get the 3D effect of the sign (or blurb) whenever we rotate it with the transform options.

divi 3D sign post

For more info on this, check out how perspective works with Diviโ€™s transform options.

Creating a Sign with a Blurb Module

To create our first sign on our 3D sign post, we will use a blurb module. Go ahead and add a blurb module to the row.

divi 3D sign post

Then open the blurb settings and update the content of the blurb as follows:

Decrease the mock content to include only a couple of lines of text.

Use Icon: YES
Icon: left arrow (see screenshot)

divi 3D sign post

Background Color: #1a233f

Icon Color: #9eb3c2
Image/Icon Placement: Left
Use Icon Font Size: YES
Icon Font Size: 80px

divi 3D sign post

Text Orientation: center
Title Font: Playfair Display
Title Text Color: #9eb3c2
Title Text Size: 38px (desktop), 26px (phone)
Max Width: 600px
Module Alignment: Center
Custom Padding: 5% top, 5% bottom, 5% left, 5% right

divi 3D sign post

Rounded Corners: 20px

Border Width: 3px
Border Color: #21335e

divi 3D sign post

That takes care of the styling of our blurb module, but to get our 3D effect, we need to use the transform options to rotate our blurb module. To do this update the following:

Transform Rotate X Axis: 20deg

divi 3D sign post

Duplicate the Row for More Signs

Now that we have one of our sign designs completed, we can duplicate the row to make more. Each time we duplicate the row, we will simply need to update the transform rotation so that the signs rotate at different degrees around the post.

Go ahead and duplicate the row and update the blurb module in the new row as follows:

Transform Rotate X Axis: -30deg

divi 3D sign post

Duplicate the row to create a third sign and update the blurb module in that new row as follows:

Transform Rotate X Axis: 40deg

divi 3D sign post

Changing the Direction of the Second Sign

Right now all of the arrows are pointing in the same direction. To change the direction from left to right, we need to update the blurb module settings a bit.

Open the settings of the blurb module in the second row (the middle one) and update the following:

Icon: right arrow (see screenshot)

divi 3D sign post

Text Orientation: Left

divi 3D sign post

We can flip the order of the blurb content so that the text is on the left and the icon is on the right. To do this we need to add a single line of custom CSS to the Main Element as follows:

direction: rtl;

divi 3D sign post

Now the blurb content is reversed and you have a sign pointing in a new direction!

Rotate the Signs back to Original State on Hover

One of the cool things about this setup is that you can easily add a hover state to bring the rotated module back to the original (0deg) rotation. This allows the user to engage with the content and have a clear view of the text when hovering over the module.

Since we want to add the same hover state to all three blurb modules, use multiselect to select all three blurb modules and open the settings of one of the modules to bring up the element settings modal. Then update the following:

Transform Rotate X Axis (hover): 0deg

divi 3D sign post

Save settings and thatโ€™s it!

Now Check out the design and functionality so far.

divi 3D sign post

Customizing our Section with a Background Image

For our last step, we can add a new background image to our section. This is optional of course, but the right image can look really cool especially if you use the parallax effect.

Open the section and add a new background image. (Iโ€™m using an image from our Agency Layout Pack)

Then update the following:

Use Parallax Effect: YES
Custom Padding: 0px top, 0px bottom

divi 3D sign post

Final Result

divi 3D sign post

divi 3D sign post

divi 3D sign post

Final Thoughts

Creating a 3D sign post really does add a creative and engaging design element to your site that can really make your content pop out (literally). And the hover effect allows the user to view the content without the 3D effect for a nice fallback. Donโ€™t forget you can easily add a link URL to the blurb module so that it can serve as a clickable navigation element if you want. Anyway, I hope this gives you some inspiration for your next project.

I look forward to hearing from you in the comments.

Cheers!

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Posted on March 18, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack thatโ€™ll help you get your next Modeling...

View Full Post
Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Packโ€จโ€จIt’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack thatโ€™ll help you get your next Art Therapist...

View Full Post

15 Comments

  1. This is such an original section layout. Great work

  2. Good Creative work Jason!?

  3. This is great! Thanks

  4. Thanks! really liked this one.

  5. This is one of the best tutorials yet!

    Your tutorial style is the best I’ve seen anywhere… so easy to follow each step, and the descriptions that go along with them.

    Now I need to find an appropriate place to use this on one of my own or clients’ websites!

    Go DIVI!

    • Thanks, Stephen. Appreciate the comment and support. Glad you like it!

  6. Wow!!
    I am Going To try This now
    Thumps Up

  7. Super! Thank you!

  8. Good stuff!!!
    just one question…..
    I did set on one of the signs one anchor link pointing to the footer (#main-footer) and when i click the sign it jumps right to the footer, no smooth scroll.
    Every other anchor link on the website behaves correctly…….any clue?
    Thanks

    Angelo

    • Angelo,

      I’ll make the dev team aware of the issue. In the meantime, you may need to reach out to support for a solution. Nothing comes to mind. Sorry about that.

  9. Looks great. But when I go to upload the json file into the DIVI Builder, it says ‘This file should not be imported in this context’. I’m trying to import it into my DIVI Library. Is there some other way I’m supposed to be importing it? Thanks.

    • Thanks, Amalia. This json file should be imported from the Divi Builder portability option. Or you can simply drag the file into the divi builder. Once the layout is loaded, you can then save it to the Divi Library if you want. Sorry for the confusion.

  10. This is really cool – going to try this out now…

  11. Beatiful and free. Thanks

  12. Great
    Thanks once again.
    Thumbs up

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today