Starter Templates – Patterns

Wireframing the structure of any website before beginning the design process is very important. It increases work efficiency, makes the workflow more effortless, and helps you get the final website design ready in less time.

Now you can create your page or website mockup faster than ever with Starter Templates AI Patterns.

This document will help you to understand how patterns work and what benefits they bring. 

What Are the Patterns?

Patterns are the dedicated sections designed for different parts of web pages. You can add patterns to your own design or use different ones to create a unique page.

In the Design library, you will find patterns designed for the following sections –

• About
• Call To Action
• Clients
• Contact
• FAQ
• Features
• Heading
• Hero sections
• Portfolio
• Statistics
• Services
• Team
• Testimonial

You will see more patterns gradually with new updates.

Patterns can be imported between pages. They serve the needs of any section on the page. You can quickly import the required pattern and go ahead with your page design.

For example – Let’s say you have a sales page where you wish to add a FAQ section for your product. FAQs are a great way to address user’s last-minute queries and encourage them to complete the purchase.

You can import the FAQ section from Patterns and add your content. This way you can quickly create an FAQ section saving your time and effort.

Similarly, you can use different patterns anywhere on the page or post.

How To Use the Patterns?

The patterns can be accessed through the page/post editor. You can add an unlimited number of patterns and create the whole page or post structure in no time.

We’ll show you an example of how you can add a pattern to your page/post.

Step 1 – Navigate to Dashboard > Pages > Add New. In the top menu of the page editor, click on the “Design Library” button. This will open the Starter Templates Library;

Step 2 – In the top menu of the Library, click on the “Patterns” tab. Here you can find all available patterns.

Step 3 – Here, you can filter the blocks by color and category and import the pattern to your page. You can do this by hovering over the block you need and clicking on the “Insert” button.

Step 4 – Repeat steps 2 and 3 until you import all the blocks you need;

Step 5 – Once imported, you can reposition and modify blocks as you wish. Once your pattern design is done, click on the “Publish” button to save your changes.

Now you’re ready to review and share your mockup with whomever you want. 

After importing the pattern, here are a few things to note –

Once you import a pattern you might see some different colors and typography than previewed content. This is because your customizer settings will automatically be inherited to page/pattern design.

Similarly, typography will be inherited from the customizer. All headings and content will have typography set from the customizer.

In case, the pattern you importing has a form, the required plugin will be automatically installed and activated.

We hope this document has been helpful in explaining Spectra’s AI Patterns. If you have any questions or require further assistance, feel free to leave a comment below.