Each week, we come up with new and loose Divi structure packs which you’ll use on your subsequent challenge. For one of the crucial structure packs, we additionally proportion a use case that’ll can help you take your site to the following degree. This week, as a part of our ongoing Divi design initiative, we’re going to turn you how you can create a groovy sport scoreboard the use of Divi’s Soccer Club Layout Pack. We’ll create this newest sport scoreboard the use of Divi’s integrated choices most effective so let’s get to it!
Preview
Prior to we dive into the educational, let’s take a handy guide a rough take a look at the outcome on other display sizes.
Add the Football Membership Format Pack’s Format Pack
To create this instructional, we’ll use the Football Membership Format Pack’s touchdown web page so cross forward and upload a brand new web page the use of this structure.
Upload New Segment
Then, upload a brand new phase proper right here:
Background Colour
Open the phase settings and upload a background colour subsequent.
- Background Colour: #f4f4f4
Spacing
Mess around with the spacing values as neatly.
- Most sensible Padding: 55px
- Backside Padding: 140px
Clone Row & Position in Segment
Find Row & Create Clone
To save lots of time, we’re going to clone the name row within the subsequent phase.
Position in New Segment
Exchange Textual content
Exchange the replica of the Textual content Module within the row to compare the brand new phase.
Upload Row #2
Column Construction
Proper beneath the former row, cross forward and upload a brand new row the use of the next column construction:
Background Colour
Open the row settings and alter the background colour.
- Background Colour: #ffffff
Column 1 Background Colour
Upload a column 1 background colour as neatly.
- Column 1 Background Colour: #fcfcfc
Column 3 Background Colour
Repeat the similar step for column 3.
- Column 3 Background Colour: #fcfcfc
Sizing
Exchange the sizing settings too.
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Peak: Sure
Spacing
Take away all default padding subsequent.
- Most sensible Padding: 0px
- Backside Padding: 0px
Border
To compare the structure pack, upload a most sensible and backside border to the row.
- Backside Border Width: 8px
- Backside Border Colour: #00aaff
Field Shadow
Finally, upload a delicate field shadow to create intensity at the web page.
- Field Shadow Vertical Place: 20px
- Field Shadow Blur Power: 80px
- Field Shadow Unfold Power: -20px
- Shadow Colour: rgba(0,0,0,0.56)
Upload Textual content Module #1 to Column 1
Upload Content material
Time to start out including modules! Get started with a Textual content Module in column 1 and upload some content material.
Background Colour
Exchange the background colour subsequent.
- Background Colour: #E8E8E8
Textual content Settings
Proceed by means of enjoying round with the textual content settings.
- Textual content Font: Squada One
- Textual content Font Taste: Uppercase
- Textual content Colour: #333333
- Textual content Dimension: 20px
- Textual content Orientation: Heart
Spacing
Then, upload some customized spacing values.
- Most sensible Padding: 10px
- Backside Padding: 10px
- Left Padding: 10px
- Proper Padding: 10px
Upload Textual content Module #2 to Column 1
Upload Content material
Upload a brand new Textual content Module proper beneath the former Textual content Module in column 1. When you do, upload content material to the content material field.
Textual content Settings
Exchange the textual content settings subsequent.
- Textual content Font: Open Sans
- Textual content Font Weight: Daring
- Textual content Colour: #333333
- Textual content Dimension: 18px
- Textual content Orientation: Heart
Spacing
Mess around with the spacing values as neatly.
- Most sensible Padding: 20px
- Backside Padding: 20px
Upload Symbol Module to Column 1
Add Membership Brand
The remaining module wanted in column 1 is an Symbol Module containing the membership emblem of one of the crucial groups competing.
Sizing
When you’ve uploaded the membership emblem symbol, cross to the sizing settings and make some adjustments.
- Width: 45% (Desktop), 16% (Pill), 28% (Telephone)
- Module Alignment: Heart
Spacing
Proceed by means of including customized margin values within the spacing settings.
- Most sensible Margin: 20px
- Backside Margin: 50px
Clone Modules & Position Duplicates in Column 3
When you’re completed with all 3 modules in column 1, you’ll clone them and position the duplicates within the 3rd column.
Exchange Content material
In fact, you’ll wish to alternate the content material of each and every cloned module.
Upload Textual content Module #1 to Column 2
Upload Content material
In the second one column, we’ll position the date and finish ranking. Get started by means of including a Textual content Module with a date.
Background Colour
Upload a background colour that fits the structure pack subsequent.
- Background Colour: #00aaff
Textual content Settings
Exchange the textual content settings as neatly.
- Textual content Font: Squada One
- Textual content Font Taste: Uppercase
- Textual content Colour: #FFFFFF
- Textual content Dimension: 42px
- Textual content Orientation: Heart
Spacing
Then, cross to the spacing settings and provides the module some extra padding.
- Most sensible Padding: 30px
- Backside Padding: 30px
Visibility
Finally, disable the module on telephone and pill.
Upload Textual content Module #2 to Column 2
Upload Content material
The second one Textual content Module in column 2 must comprise the sport ranking.
Textual content Settings
After including the content material, alternate the textual content settings.
- Textual content Font: Squada One
- Textual content Colour: #333333
- Textual content Dimension: 150px
- Textual content Line Peak: 1em
- Textual content Orientation: Heart
Spacing
Proceed by means of editing the spacing values.
- Most sensible Margin: 40px (Desktop), 20px (Pill & Telephone)
- Backside Margin: 20px (Pill & Telephone)
- Left Padding: 10px
- Proper Padding: 10px
Visibility
Cover this module on telephone and pill as neatly. Within the subsequent section, we’re going to create the other for smaller display sizes.
Clone Each Modules & Position in Column 1
Clone each modules you’ll in finding in column 2 and position the duplicates within the first column above the opposite modules.
Exchange Visibility
We’re the use of each those modules to have a greater result on pill and get in touch with. To ensure those modules display up on smaller display sizes most effective, disable them on desktop.
Upload Row #3
Column Construction
Within the subsequent row, we’re going to show the other targets on desktop. Use the next column construction:
Background Colour
With out including any modules but, open the row settings and alter the background colour.
- Background Colour: #FFFFFF
Column 2 Background Colour
Exchange the column 2 background colour as neatly.
- Column 2 Background Colour: #f7f7f7
Sizing
Take away all area between columns within the sizing settings subsequent.
- Use Customized Gutter Width: Sure
- Gutter Width: 0
- Equalize Column Peak: Sure
Spacing
Upload customized spacing values too.
- Most sensible Padding: 0px
- Backside Padding: 0px
- Column 1 Backside Padding: 100px
- Column 1 Proper Padding: 10px
- Column 3 Left Padding: 10px
Border
Then, upload a delicate backside border to the row.
- Backside Border Width: 8px
- Backside Border Colour: #00aaff
Field Shadow
To create intensity to the web page, upload a row field shadow.
- Field Shadow Vertical Place: 20px
- Field Shadow Blur Power: 80px
- Field Shadow Unfold Power: -20px
- Shadow Colour: rgba(0,0,0,0.56)
Visibility
As discussed sooner than, we’re the use of this row to show targets on desktop most effective so cross forward and disable the row on telephone and pill. Later at the submit, we’ll create a pill and get in touch with choice.
Upload Textual content Module #1 to Column 1
Upload Content material
Upload a brand new Textual content Module to the primary column containing the primary objective main points.
Textual content Settings
Exchange the textual content settings subsequent.
- Textual content Font: Squada One
- Textual content Font Taste: Uppercase
- Textual content Colour: #333333
- Textual content Dimension: 27px
- Textual content Orientation: Proper
Spacing
Mess around with the spacing values as neatly.
- Most sensible Margin: 100px
- Backside Padding: 20px
Border
Proceed by means of including a delicate backside border.
- Backside Border Width: 1px
- Backside Border Colour: #333333
Clone Textual content Module Two times
Exchange Spacing of Duplicates
Clone the Textual content Module you’ve simply created two times and alter the spacing values of each duplicates.
- Most sensible Margin: 200px
- Backside Padding: 20px
Clone Textual content Module #1 & Position Replica in Column 3
Exchange Textual content Settings
Clone the primary Textual content Module in column 1 as soon as once more and position the replica in column 3. Continue by means of alternate the textual content orientation.
- Textual content Orientation: Left
Exchange Spacing
The highest margin must be larger as neatly.
- Most sensible Margin: 200px
Clone Textual content Module in Column 3
You’ll now clone this Textual content Module as soon as once more.
Upload Row #4
Column Construction
Time so as to add the remaining row! Select the next column construction:
Background Colour
Exchange the background colour of the row.
- Background Colour: #FFFFFF
Sizing
Take away the entire area between columns subsequent.
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Upload some additional most sensible and backside padding.
- Most sensible Padding: 100px
- Backside Padding: 100px
Border
We’ll desire a delicate backside border for this row as neatly.
- Backside Border Width: 8px
- Backside Border Colour: #00aaff
Field Shadow
Subsequent, upload a field shadow to the row.
- Field Shadow Vertical Place: 20px
- Field Shadow Blur Power: 80px
- Field Shadow Unfold Power: -20px
- Shadow Colour: rgba(0,0,0,0.56)
Visibility
Finally, conceal the row on desktop.
Upload Textual content Module #1
Upload Content material
Upload a brand new Textual content Module to the column of the row and upload the objective main points.
Textual content Settings
Exchange the textual content settings subsequent.
- Textual content Font: Squada One
- Textual content Font Taste: Uppercase
- Textual content Dimension: 27px
- Textual content Orientation: Proper
Spacing
Use customized spacing values subsequent.
- Proper Marign: 150px
- Backside Padding: 20px
Border
We’re including a delicate backside border as neatly.
- Backside Border Width: 1px
- Backside Border Colour: #333333
Clone Textual content Module
Exchange Textual content Settings
Clone the Textual content Module you created and alter the textual content orientation of the replica.
- Textual content Orientation: Left
Spacing
Adjust the spacing values as neatly.
- Most sensible Marign: 200px
- Left Margin: 150px
Clone Each Textual content Modules as Many Occasions as Wanted
You’ll now clone those modules as time and again as you need to turn all other targets.
Preview
Now that we’ve long past via all steps, let’s take a last take a look at the outcome on other display sizes.
Ultimate Ideas
On this submit, we’ve proven you how you can create a sport scoreboard the use of Divi’s Soccer Club Layout Pack. It is a good way so as to add extra incentives in your site and fix together with your target audience. In case you have any questions or ideas, make sure to go away a remark within the remark phase beneath!
The submit How to Create a Game Scoreboard with Divi’s Soccer Club Layout Pack seemed first on Elegant Themes Blog.
WordPress Web Design