> For the complete documentation index, see [llms.txt](https://docs.divitemp.com/divitemp-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.divitemp.com/divitemp-doc/divitemps-layouts/divimade/installation.md).

# Installation

## Welcome To The DiviMade Documentation:

Hi , this is Muhammad Talha from Divi Temp & I'm going to tell you 'How You Can Import the DiviMade Sections in your Website.'

{% embed url="<https://youtu.be/AicybLBL3Ow>" fullWidth="true" %}

And I'm assuming that you've already Installed the Divi Theme or Divi Builder. So Let's Get Started.

### Step 01:

Once you purchase the Product, you'll get a File to Download. Just download both (Product & Supplementary) File.

### Step 02:

Open Supplementary Folder & Copy that Custom CSS Code. *Or you can copy from below.*

```css
@media (min-width: 767px) {
	/*set the width of the button*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 165px !important;
	}
	/*set the width of the input field minus the width of the button*/
	.et_pb_newsletter_form .et_pb_newsletter_field {
		flex-basis: calc(100% - 165px) !important;
	}
}

.custom-opt p.et_pb_newsletter_field {
    min-width: 100%;
}
.custom-opt p.et_pb_newsletter_button_wrap {
    min-width: 100%;
}
```

{% hint style="info" %}
**Note:** This is just for Email Optin Module. If you'd like to use the section which has Email Optin Module then use this CSS, otherwise leave it.
{% endhint %}

### Step 03:

Login to your WordPress Dashboard & Hover Divi Tab, then Click "Theme Option".

<figure><img src="/files/hdUMGpU3PGt6qQxvfuMi" alt=""><figcaption></figcaption></figure>

### Step 04:

Scroll to the Bottom & Paste that Custom CSS Code right here. That's It!

<figure><img src="/files/n4QpWqAzb8FTsokzfvCz" alt=""><figcaption></figcaption></figure>

### Step 05:

Hover Divi Tab, then Click "Divi Library".

<figure><img src="/files/0D1MKg5Sl9x6JMeSNyK6" alt=""><figcaption></figcaption></figure>

### Step 06:

Now Click "Import & Export" then Click "Choose File".

<figure><img src="/files/ZelUjmge10tj7j0zvbcc" alt=""><figcaption></figcaption></figure>

### Step 07:

Unzip the folder & open it. Then you've to select the file you'd like to import. For more info, please take a look at our [***'File Structure Document'.***](/divitemp-doc/divitemps-layouts/divimade/file-structure.md)

{% hint style="info" %}
Do the same thing for "All Sections 02/03". This will import all the 880+ Layouts.
{% endhint %}

<figure><img src="/files/SLEAgZiIwZo73gsbC3FV" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Note: It will take time (2-3 min) to Import the Templates depending on your Internet Speed or server speed.&#x20;
{% endhint %}

{% hint style="danger" %}
You need to Install Divi Supreme Extension (Free Version) for Business Hours Sections. First install then Import all the 'Business Hours' Templates. [Download Here](https://wordpress.org/plugins/supreme-modules-for-divi/) <mark style="color:blue;">></mark>
{% endhint %}

### Step 09:

Create A New Page. Give it a name & Click 'Use Divi Builder.'

<figure><img src="/files/BzkTcqBQ5o4K6b3J4WR7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/EcioQxN3UXCyy6AyRxlP" alt=""><figcaption></figcaption></figure>

### Step 10:

Once you've created a Page. Its time to import the layouts from the library. Click "Plus Sign" - then Click "Your Saved Layouts". From here you can select the Layouts you'd like to use. Then click 'Use This Layout.'r

<figure><img src="/files/twHA20ZLmFOPo5Zbexdl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ylizcmf2XHzCgxDfOtaj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Jx8XbUrGzGTwzK7XWVdR" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Layouts/Modules/Section Previews Are Now Available - Please Download Supplementary File From Your Account.
{% endhint %}

{% hint style="danger" %}
Due to copyright issues, we've removed images. But you can upload your own within a given size for better result.
{% endhint %}

&#x20;**That's It**! **You're Done 😎**