Wednesday , December 11 2019
Home / Uncategorized / How to transform Divi Layout into reusable wireframes

How to transform Divi Layout into reusable wireframes



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!

Preview

Before diving, let's have a look at the final result we will create.

wireframe

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.

wireframe

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.

wireframe

wireframe

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.

wireframe

wireframe

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.

wireframe

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".

wireframe

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.

wireframe

wireframe

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.

wireframe

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.

wireframe

wireframe

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.

wireframe

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.

wireframe

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.

wireframe

Open the images used individually

Open each of the images that are included on your page separately.

wireframe

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.

wireframe

Create placeholders with dimensions

Open Photoshop

It's time to create placemarks! Open Photoshop or any other image editing software.

wireframe

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

wireframe

Choose gray color

Choose "# e7e8ed" as a color.

wireframe

Unlock the background

Also unlock your background level.

wireframe

Select the Bucket tool and Add color to layer

So, use the Bucket tool to color your gray canvas.

wireframe

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.

wireframe

Save for Web

When finished, save the image placeholder for the web.

wireframe

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.

wireframe

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.

wireframe

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.

wireframe

wireframe

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.

wireframe

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.

wireframe

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.

wireframe

Change character

Change the font that is used in your page with another and you have a new wireframe!

wireframe

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.

wireframe

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.

wireframe

Preview

Now that we have followed all the steps, let's have a last look at the final result.

wireframe

Final thoughts

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!


Source link

Leave a Reply

Your email address will not be published.