# 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="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FzvYYPfQgZeJa5BsCRN7M%2FDivi%20Theme%20Option.png?alt=media&#x26;token=845b7f9c-bab9-4ddd-9ff3-c2fda4db33a1" alt=""><figcaption></figcaption></figure>

### Step 04:

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

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FJLK48o3TwhwmIvMzUww3%2FTheme%20Option%20Code%20Paste.png?alt=media&#x26;token=684f9347-291c-4d7f-8971-dbe13bd3f4da" alt=""><figcaption></figcaption></figure>

### Step 05:

Hover Divi Tab, then Click "Divi Library".

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FjCSUQEMXcCtVLI1jHoHA%2FDivi%20Library.png?alt=media&#x26;token=0ab91a68-8bf4-4fb4-af50-a3f7462be35b" alt=""><figcaption></figcaption></figure>

### Step 06:

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

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FGsEBhxz8XfwlkLfJfK4G%2FDivi%20Import-Export.png?alt=media&#x26;token=f271b100-114e-44e9-ba52-b06aaf747724" 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'.***](https://docs.divitemp.com/divitemp-doc/divitemps-layouts/divimade/file-structure)

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

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2F8O5SLlLRcAXDjQps02D7%2FTemplate%20Imports.png?alt=media&#x26;token=be7c5eb3-61c2-4d50-a4cb-163e2042aca2" 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="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FXnSSmy9Szp2H1zQ5qshd%2FAdd%20New%20Page.png?alt=media&#x26;token=0df3e822-441f-4c57-a7bd-b373a48586ce" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FVN5ZFSRP1ugYphXZTGw3%2FPage%20Name%20%26%20Use%20Divi%20Builder.png?alt=media&#x26;token=8d11b018-18c9-4a2b-8ee6-0345fe0dacce" 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="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FVmrIhTRMHJ274KsL8Vyv%2FSections.png?alt=media&#x26;token=8318a532-7e66-454a-827a-f049989dc964" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2Fd0bqfusxJmx2FDFdS7E3%2FImport%20Section%20from%20Library.png?alt=media&#x26;token=5cc9842f-156c-4b37-94b1-2ebd5a9f966e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2983048595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FloLV6qYISx0A96VEdCHV%2Fuploads%2FcrAF2d3ITJqUTnG6mtlL%2FLayout%20Done.png?alt=media&#x26;token=7f412cef-cf11-4ff7-b026-030cdba4fe70" 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 😎**