Each and every week, we give you new and unfastened Divi format packs which you’ll be able to use in your subsequent challenge. For one of the crucial format packs, we additionally proportion a use case that’ll can help you take your website online to the following stage.
This week, as a part of our ongoing Divi design initiative, we’re going to turn you methods to create an interactive query card grid in your subsequent about web page with Divi. We’ll be the usage of the Web Carrier Supplier Format Pack’s about web page however you’ll be able to use the way on any web page you’re running on. It provides a special consumer enjoy to guests and lets you engage with them at the knowledge you’re sharing. When you get the way, you’ll be able to create selection query card grid designs of your selection through taking part in round with Divi’s integrated choices.
Let’s get to it!
Preview
Prior to we dive into the educational, let’s take a snappy take a look at the query card grid we’ll be recreating from scratch.
Desktop
Cellular
Let’s Get started Developing!
Create New Web page The usage of The ISP Format Pack’s About Web page
To create the design we’ve proven above, we’re going to make use of the Web Carrier Supplier Format Pack’s about web page so pass forward and create a brand new web page the usage of this format. As same old, you’ll be able to to find it to your premade layouts.
Delete All Sections Between Hero Phase & Footer
We’ll exchange the entire present content material with a query grid card. To try this, we’ll first wish to take away all sections in between the hero phase and footer.
Upload New Phase in Between
The query card grid we’ll be developing can comprise any more or less corporate questions you need to respond to. You’ll be able to additionally use the grid to show off ceaselessly requested questions. Proceed through including a brand new common phase in between the hero phase and footer of the web page.
Upload New Row
Column Construction
With out making any adjustments to the phase settings, upload a brand new row the usage of the next column construction:
Sizing
We’re going to take away the entire default area between columns. Open the row settings and make some adjustments to the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
We’ll nonetheless want some area between columns to have a nice-looking design. Move to the spacing settings and upload some customized padding values.
- Best Padding: 10px
- Backside Padding: 10px
- Column 1 Left Padding: 10px (Desktop), 5px (Pill & Telephone)
- Column 1 Proper Padding: 5px
- Column 2 Left Padding: 5px
- Column 2 Proper Padding: 5px
- Column 3 Left Padding: 5px
- Column 3 Proper Padding: 10px (Desktop), 5px (Pill & Telephone)
Upload New Blurb Module to Column 1
Upload Content material
To create the hover impact, the one module we’ll be wanting is a Blurb Module. We’ll get started through developing one and clone it afterwards to create all of the result. Upload a Blurb Module to column one. Upload the query you need to respond to to the identify box and the solution to the content material field.
Make a selection Icon
Then, make a selection a becoming icon within the symbol & icon settings. This icon will assist your guests keep in mind that they have got to hover the query card to look the solution.
Default Icon Settings
Proceed through converting the icon settings within the design tab.
- Icon Colour: #aaaaaa
- Icon Placement: Best
- Use Icon Font Measurement: Sure
- Icon Font Measurement: 40px
Hover Icon Settings
And alter the icon colour on hover. We’re the usage of a wholly clear colour on hover to make the icon disappear on hover.
- Icon Colour: rgba(255,255,255,0)
Textual content Settings
Subsequent, alternate the textual content orientation within the textual content settings.
- Textual content Orientation: Middle
Default Name Textual content Settings
Make some adjustments to the identify textual content settings as smartly.
- Name Font: Poppins
- Name Font Weight: Daring
- Name Textual content Colour: #333333
- Name Textual content Measurement: 40px
- Name Letter Spacing: -3px
Hover Name Textual content Settings
And alter the identify textual content colour on hover. We’re, once more, the usage of a wholly clear colour to verify the query doesn’t display up as soon as any individual hovers the Blurb Module.
- Name Textual content Colour: rgba(255,255,255,0)
Default Frame Textual content Settings
Proceed through converting the frame textual content settings.
- Frame Font: Open Sans
- Frame Font Weight: Gentle
- Frame Textual content Colour: rgba(255,255,255,0)
- Frame Textual content Measurement: 25px
- Frame Letter Spacing: -2px
- Frame Line Peak: 1.6em
Hover Frame Textual content Settings
And alter the frame textual content colour on hover.
- Frame Textual content Colour: #000000
Spacing
To form our module right into a sq., we’ll upload some customized padding values.
- Best Padding: 9vw
- Backside Padding: 9vw
- Left Padding: 50px
- Proper Padding: 50px
Default Rounded Corners
We’re additionally giving our module ’30px’ of rounded corners.
Hover Rounded Corners
We’re casting off those rounded corners on hover.
Default Border
And we’ll upload a backside border.
- Backside Border Width: 0px
- Backside Border Colour: #0fffeb
Hover Border
Exchange the ground border width on hover for it to look.
- Backside Border Width: 10px
Field Shadow
So as to add some intensity, we’ll use a field shadow as smartly.
- Shadow Colour: rgba(0,0,0,0.05)
Transitions
Closing however no longer least, we’ll cut back the transition period within the complex tab.
- Transition Period: 250ms
Clone Blurb Module Two times & Position in Ultimate Columns
Now that your first Blurb Module is completed, you’ll be able to save time through cloning it and striking the duplicates within the two closing columns.
Exchange Content material
Make sure to alternate the content material of every one of the crucial duplicates.
Exchange Backside Border Colours
Along side the ground border colour.
Clone Whole Row Two times
You’ll be able to create the query card grid through cloning the row as much as as time and again as you need.
Exchange Content material & Backside Colours For Each and every Merchandise For my part
However don’t disregard to switch the content material and backside colours to make every one of the crucial query playing cards distinctive!
Preview
Now that we’ve long past via the entire steps, let’s take a last take a look at the result on other display sizes.
Desktop
Cellular
Ultimate Ideas
On this submit, we’ve proven you methods to create an interactive query card grid the usage of Divi’s Web Carrier Supplier Format Pack. Even though we’ve made positive the design fits the format pack’s taste, you’ll be able to use this option to grow to be any about web page into one who’s interactive as smartly. When you have any questions or tips, make sure to go away a remark within the remark phase beneath!
The submit Creating an Interactive Question Card Grid for Your Next About Page with Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design