Every week we provide you with new free Divi layout packages that you can use for your next project. For one of the layout packages, we also share a use case that will help you take your website to the next level.
This week, as part of our ongoing Divi design initiative, we'll show you how to turn layouts into reusable wireframes using the Divi & # 39; s Food Catering Layout Pack. Wireframes are great for the initial process of building a website . They help you decide on the general structure and design style of a website. They can also help you get a customer's opinion on a design style without having to adapt everything in advance.
We're going now!
Before diving, let's have a look at the final result we will create.
Turn the layout into wireframe
Open Landing Catering Landing Page with Visual Builder
Go ahead and open the landing page you created using the Divi & # 39; s Food Catering Layout Pack.
Remove the section and background images of the full width header, background colors, and gradient backgrounds
The first step in creating a wireframe is the removal of all background images, gradient backgrounds and background colors of the sections on the page and the Fullwidth header form in the hero section.
Instead give the alternating sections a gray background color
To help determine the different sections in the page design, go ahead and assign each of the alternating sections a background color "# f9f9fb". Later, when using a wireframe to create a page, you can use the Find and Replace function to add the color palette to the page without interruption.
Remove all color in design elements using the Modified Styles filter
Enable modified styles filter on the button module
We will also get rid of the color palette that is used. In this way, we will not be influenced by it when building a page. Open one of the Button Modules on your page and activate the Modified Styles filter to see all the current settings.
Give Button Module Dark background and border color
Change both the background color of the button and the border color of the button to "# 2b2b2b".
Copy button styles and apply to other buttons
Continue by copying button styles by right-clicking on button settings and clicking "Copy button styles". Then, add the button styles to each of the remaining Button modules on the page.
Remove extra drawing settings (like Box Shadow)
Remove shadow box button
We are also removing additional items, such as Box Shadow. Open the same button module you were working on and completely remove the shadow of the box.
Copy button Settings box shadow form
Copy the shadow box styles of this button module and add it to the remaining button modules as well.
Remove the Shadow Box manually in the Hero & Contact section
The only two buttons that require manual removal of Box Shadow are those included in the Fullwidth header form and in the contact form. These buttons are part of a module with different design elements, which is why you need to remove them manually.
Give the highlighted section same background color as CTA
Then scroll down until you find the "highlighted" section. Here, use the background color of the "# 2b2b2b" section. The same color was used for CTAs.
Determines the size of the image
Go to the media library
To completely remove the layout topic of our layout, we will replace all image modules with placeholders containing the required image sizes. To find these dimensions, go to your media library.
Open the images used individually
Open each of the images that are included on your page separately.
Write down the different image sizes on the page
Once done, you will be able to see the dimensions of that particular image. Keep track of all the dimensions you need on your page by writing them somewhere before moving on to the next step.
Create placeholders with dimensions
It's time to create placemarks! Open Photoshop or any other image editing software.
Create new projects for dimensions
Create a new project for each set of dimensions you have on your page. In our case, we will need a separate project for each of the following dimensions:
- 800 x 1029
- 400 x 400
- 48 x 48
Choose gray color
Choose "# e7e8ed" as a color.
Unlock the background
Also unlock your background level.
Select the Bucket tool and Add color to layer
So, use the Bucket tool to color your gray canvas.
Add text with dimensions
To help you keep track of image size, you can also add dimensions to the center of your placemark. In this way, you will know the size of the image needed for your page after editing the images with which you will replace them.
Save for Web
When finished, save the image placeholder for the web.
Repeat for each of the image dimensions on the page
Repeat these steps for each of the size series on your page. For this page, you will need three different sets in total:
- 800 x 1029 (about us section
- 400 x 400 (gallery section)
- 48 x 48 (icons)
Replace images with placeholders
Once you have exported all image placeholders, go ahead and replace the images.
Make the wireframe easily reusable
Create a wireframe map on your computer
After you finish creating a wireframe, we recommend saving it somewhere. Create a new folder somewhere on your computer.
Screen capture and local saving layout
So, use the add-on screen capture or the extension of choice to scan your page. In the images below, we used the FireShot add-on for Mozilla Firefox. Make sure that when you save the screenshot, you give it an appropriate name.
Save the layout in the library with the same name
Use the same name you used for the screenshot to save the wireframe layout in your Divi library. This allows you to take a look at the wireframe on your computer before uploading it to one of your pages.
Change the design settings for custom Wireframed
Add section dividers
You are not limited to creating a wireframe per page. You can easily change design settings to create new wireframes. You can play with section dividers, for example, to create unique designs.
Play with typography
Enable Find and replace on the header character
Or you can even play with typography. Open the Fullwidth header form in your hero section and right-click on the title character. Continue activating the Find and Replace feature.
Change the font that is used in your page with another and you have a new wireframe!
Save separate design elements using categories
Click on the "Add to library" icon
One other thing you can do is to save particular design elements separately on your page. For example, if you want to create a collection of hero sections, you can easily add your hero section to your Divi library.
Add a new category and assign a name to a design element
To get a more organized structure, keep adding a new category of sections called "Hero Sections" so you can easily find the Heroes section of your choice and explore all the designs you have in store.
Now that we have followed all the steps, let's have a last look at the final result.
In this blog post use case, we showed you how to turn Divi layouts into reusable wireframes. Turning layouts into wireframes helps you keep the general view of how you want a website structure to look. They are also excellent for informing a customer's design style in the first phase of the website building process. If you have any questions or suggestions, be sure to leave a comment in the comments section!