# Welcome

We are team of web professionals who share a passion of exceptional design and high standard of WordPress development. Each member of the NeboTheme team puts their heart and soul into all that we do… and it shows! We are here to help you in having WordPress websites that you can be really proud of🥰

![](/files/-Mc9px07fh63H0VQXXMA)


# 👨‍🔧 Help and Support

A Theme license purchase comes with 6 months of technical support available via the [**NeboTheme Support Center**](http://support.nebotheme.com/) so we can help you get the center up and run easily! We address all the support tickets 7 days a week and within 24 hours. Your coverage can be expanded or replaced at all times, even though it has expired.

Make sure to read Envato post [**Support Policy**](https://themeforest.net/page/item_support_policy) and [**Extending and Renewing Item Support**](https://help.market.envato.com/hc/en-us/articles/207886473-Extending-and-Renewing-Item-Support) articles for additional important information.


# Translation Theme

One of the easiest way to translate NeboTheme into your native language is to use the Loco Translate plugin.

Loco Translate provides in-browser editing of WordPress translation files and integration with automatic translation services.

Then follow these steps to add translation to:

1. Install and activate [**Loco Translate**](https://wordpress.org/plugins/loco-translate/) plugi&#x6E;**.**
2. Click **Loco Translate** in the side menu in your admin dashboard.
3. Select **Your Theme** from the **Active theme** section.
4. Click on **New language** to start translating the theme now.
5. Select a language you want to translate into by choosing one in the **Choose a language** section.
6. In **Choose a location** you need to select **Custom** as **languages/loco/themes/theme-name-{locale}.po**, and then click on **Start Translating**. ([example](https://i.imgur.com/CZ04mTw.png))
7. Now on the translation screen, select any of the strings you would like to to translate by selecting them in **Source text** list.
8. If you can’t find a string, use the search tool **Filter translation** to find the text you need to translate.
9. Scroll down and type the translated version into **translation** area.
10. Click **Save**. That’s it, you’ve translated your first text string using Loco Translate.

To see the results live go to **Settings** → **General** and make sure you change the **Site Language** to the language, that you were translating into.

&#x20;For more information please visit our [plugin page](https://localise.biz/wordpress/plugin).  Also, read the [documentation](https://localise.biz/wordpress/plugin/beginners#setup).

{% embed url="<https://wordpress.org/plugins/loco-translate/>" %}


# Updating Theme

We also update the themes to resolve any bug fixes and add more features.

{% hint style="info" %}
There are 3 methods for installing your WordPress theme: **Easiest**, **Envato Market** or via **FTP**
{% endhint %}

## Envato Market (recommend)

Envato has released a plugin named **Envato Market** that can be used from your WordPress dashboard to manage all of your themes and plugins purchased from ThemeForest and Codecanyon.

![](/files/-MI_azfi-DGKl45mpYAS)

## Easiest

First download the latest version of the theme by going to your ThemeForest account, the **Downloads** section. Locate the theme, click on **Download** button and select the “**Installable WordPress file only**” option.

Navigate to **Appearance** → **Themes** and click the **Add New** button. Then click **Upload Theme**.

Select the downloaded theme archive on your hard drive and click **Install Now**.

## FTP

1. Download the `theme-name.zip` from ThemeForest and unzip it
2. Use **FTP** or **SFTP** to access your domain (if you're not sure how your webhost would typically provide guidance on their site)
3. Browse to `wp-content/themes/theme-name`
4. Delete and override the un-zipped `theme-name` folder

{% hint style="warning" %}
Please be aware that we are not responsible for any loss of content, errors, and the leaks that may occur if your WordPress theme update is  installed incorrectly!
{% endhint %}


# Yaffo

Thank you very much for purchasing [**Yaffo**](https://nebotheme.com/yaffo/)! We're sure confident you'll love its flexibility and options.\
Your Yaffo license purchase entitles you to free lifetime theme updates + exceptional technical support.

Please reference this documentation for any questions or issues you may be experiencing. You’ll likely find the answer to your query here.  If at any point you need our help or a quick tip, feel free to contact our team via our [**NeboTheme Support Site**](/helpers/support-coverage)!

Your feedback on our theme is much appreciated. We would love to make our product even better, so please feel free to get in touch with any suggestions for improvement. Thanks again for your support. We value you!

If you like our work, please rate it. If you are going to rate it with less than 5 stars, please let us know the reason first and we will do our best to improve the theme.

### [Let's get started!](/themes/yaffo/getting-started)


# Getting Started

## Read Requirements

Make sure your hosting provider is running the following software.

* WordPress 4.9 or higher.
* [PHP](https://secure.php.net/) version 7.0 or greater.
* [MySQL](https://www.mysql.com/) version 5.6 or greater or [MariaDB](https://mariadb.org/) version 10.1 or greater.

### Recommended PHP Limits

Low limitations on PHP configuration can cause problems when importing pages. The alternative is to lift caps on PHP. You can do so on your own, or you can contact your web host and ask them to through the restrictions.

{% code title="php.ini" %}

```fsharp
max_execution_time = 120
memory_limit = 128M
post_max_size = 64M
upload_max_filesize = 64M
max_input_time = 60
max_input_vars = 3000
```

{% endcode %}

We recommend updating to the [latest version](https://www.php.net/releases/) of PHP, the newer the better.

## Installation

There are 2 methods for installing your WordPress theme: the normal method or via FTP. We recommend using the normal method.

{% tabs %}
{% tab title="Normal Installation" %}
The normal installation method is done via your WordPress Dashboard area.

1. On your [**ThemeForest Downloads Screen**](https://themeforest.net/downloads), click the **Download** button next to Yaffo. Select **All files & documentation**.
2. After that, unzip the package you've just downloaded on your computer. Within, you'll find a file titled **"yaffo.zip"**. This is the theme file.
3. In your WordPress Dashboard, navigate to **Appearance > Themes**.
4. Click the **Add New** button and then click the **Upload** button.
5. Select the "Yaffo.zip" file and click **Upload**.
6. Once you've installed Yaffo, click the **Activate** button.
   {% endtab %}

{% tab title="FTP Installation" %}
FTP stands for "File Transfer Protocol" and can be done via any number of FTP applications, such as [**FileZilla**](https://filezilla-project.org/).

1. On your [**ThemeForest Downloads Screen**](https://themeforest.net/downloads), click the **Download** button next to Yaffo. Select **All files & documentation**.
2. After that, unzip the package you've just downloaded on your computer. Within, you'll find a file titled **"yaffo.zip"**. This is the theme file.
3. Extract the "yaffo" folder from the zipped "yaffo.zip" folder.
4. If unsure of your site's FTP login credentials, ask your web hosting customer support team.
5. Browse to **wp-content > themes**.
6. Copy the unzipped "yaffo" folder and paste it into your **themes** folder.
7. In your WP Dashboard, navigate to **Appearance > Themes** and **Activate** the Yaffo theme.
   {% endtab %}
   {% endtabs %}

## Demo Content

Once your theme is activated and you see the following window click on the **Run Quick Setup** button.

![](/files/-MZP0fAmGG8hEXsjMsBD)

Once you click on the **Run Quick Setup** button, you will see the following window, and then just follow the instructions of the  **Setup Wizard**.

![](/files/-MIZwpqfmOrdFOeid9rO)

After the demo import is complete, If you intend to use the **MC4WP: MailChimp for WordPress** newsletter form, please reference our guide: [📧 MailChimp Newsletter](/themes/yaffo/mailchimp-newsletter).

{% hint style="info" %}
If you wish to use **WooCommerce**, please refer to our guide: [🛒Shop with WooCommerce](/themes/yaffo/creating-a-shop-woocommerce)
{% endhint %}

{% hint style="info" %}
If you wish to use **Instagram**, please refer to our guide: [📷 Instagram](/themes/yaffo/instagram-feed)
{% endhint %}


# Homepage

## Homepage Displays

You can choose what’s displayed on the homepage of your site. It can be posts in reverse chronological order (classic blog), or a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

Navigate to **Settings > Reading > Homepage displays** and choose either option.

![](/files/-MWnMFrhnE6PNIY-UJ47)

## Homepage Layout Settings

Your homepage is the first page visitors will see when they visit your site. You can customize it via **Appearance > Customize > Homepage Settings**.

Under the various drop-down tabs on the left of this screen, you'll find a lot of ways to customize your homepage & website in general. Here, you can enable/disable the Display Newsletter, choose your preferred post feed layout, and more.

![](/files/-MIZwBBqpUu2ZWcdoxEA)

## Featured Images

Go to **Appearance > Customize > Homepage Settings > Featured Image Settings.**

To enable the Featured Images, toggle the option titled **Enable Featured Area**

The 3 boxes below the slider on Yaffo demo site are called Featured Images. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

![](/files/-MIZwBBrCJG4LT60mbO6)

## Slider Settings

Yaffo slider displays any number of posts of your choosing in a full-width element toward the top of the homepage.

To enable your featured area slider, you can navigate to **WP Dashboard > Appearance > Customize > Slider Settings** **>** and enable the element here.

Please ensure your posts have a featured image assigned to them.

Within **Appearance > Customize > Slider Settings**, you have 4 options for choosing which posts appear in your Slider Settings.

Besides that, you may choose to sort by category and number of slides per page.

![](/files/-MLF3CttU-Tje0aXh71a)


# Header

Header settings are located in **Appearance** → **Customise** → **Header Settings**.

### Sticky Menu

Activating the **Make the navigation bar sticky** option will make navigation bar visible when scrolling.

By activating the **Enable the smart sticky feature** navigation bar will be revealed when scrolling up and hidden when scrolling down. The feature allows you to save viewport space when viewing your website.

![](/files/-MI_SapfFH2IdFro9vJZ)

### Header Top and Main height

You may change the height of the Header Main  for desktop and mobile versions. You may also adjust the height of the Header Top.


# Navigation Menus

Navigation Menus are customizable menus in your theme. They allow users to add Pages, Posts, Categories, and URLs to the menu.

1. Go to `Appearance`→`Menus`
2. Give your menu a name and click the `Create Menu` button
3. Add a few simple links from `Links` tab
4. Save your menu
5. Navigate to `Manage Locations` tab (at the top of the screen)
6. Choose your new menu as `Main Navigation`
7. Click `Save Menu`

It is important that you then assign your menus to their intended location. For the main navigation menu, check the box at the bottom of the screen titled **Primary menu**. If you create a separate Footer menu, please be sure to check the box titled **Footer Menu**.

Switch between menus you've created by choosing them from the **Select a menu to edit** drop-down. Click **Select**.

![](/files/-MIZwBBtVsWrg93uuovQ)


# Post Settings

The Post Options section of your post edit screen provides a lot of ways to customize the look and content of each post. It's located below your post body content area.

Yaffo has the possibility to create 3 different types of posts: standard, gallery and video.

To create a new post, go to **WP Dashboard** → **Posts** → **Add New**.&#x20;

## **Post Layout**

Select your desired post heading layout. Below, choose whether to include the **Sidebar** element, have the content displayed on the **Left**, **Right** or on the **Full-width**.

Enable or disable display Post Header and choose Custom Sidebar.&#x20;

![](/files/-MLF0k7E4pW4uttt04Zi)


# Page Settings

The Page Options section of your page edit screen offers lots of ways to customize the look and content of each page. It's located below your page body content area.

To create a new page, navigate to **Pages** → **Add New**

## **Page Layout**

Select your desired post heading layout. Below, choose whether to include the **Sidebar** element, have the content displayed on the **Left**, **Right,** or in the **Full-width.**

Enable or disable display Post Header and choose Custom Sidebar.

## Blog Settings

Each page can display a blog feed. Enable or disable Blog on this page, select your desired blog layout, post count, etc.

![](/files/-MIZwBBv0PER2cIiCPYA)

## Slider Settings

You may enable the Slider. Toggle the **Enable Slider** option on and configure it how you'd like.

![](/files/-MIZwBBw6HroMlmKu14U)

## Featured Images

To add Featured Images to a page, enable the option via the Featured Images Settings tab. Choose your preferred images, label and URL.

![](/files/-MIZwBC34CsP1pptiQrj)

## Newsletter

You May enable Newsletter Before and After Content.

![](/files/-MIZwBBxLf004Q0xeVRe)


# Setting Up a Logo

To add your preferred logo image, navigate to **WP Dashboard > Appearance > Customize > Logos** and upload your desired logo image here. It will automatically replace Yaffo demo logo with your own.

<div align="left"><img src="/files/-MIZwBBzeTbXwaRFrZ59" alt=""></div>


# Sidebar & Widgets

A sidebar is a vertical content area that displays to the right of your main content/post area. You customize your sidebar by stacking up different widgets that display a variety of things.

To add in your preferred sidebar, navigate to **WP Dashboard > Appearance > Customize > Layouts**

Below, choose whether to include the Sidebar element, have the content displayed on the left or right, or on the Full-width.

<div align="center"><img src="/files/-MIZwBC-kv5ce0Nusr7J" alt=""></div>

## **Adding Widgets to Your Sidebar**

To add, remove, or edit your sidebar widgets, navigate to **WP Dashboard > Appearance > Widgets**\
On the left, you will see a list of the **available widgets** to choose from. \
On the right, you will see **the widget areas** in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area.

![](/files/-MIZwBC1PxGYs7T05yJV)

## Custom nebotheme widgets

Yaffo includes several custom nebotheme widgets that you can add to your sidebar.&#x20;

![](/files/-MJ74tlaFkuHO_GWMM-n)


# Customizing Appearance

## **Changing Typography Options**

The different theme typography sections noted here allow you to change Yaffo default fonts to your choice of nearly 1000 [**Google Fonts**](https://fonts.google.com/).

You may Customize typography

![](/files/-MWnQSrzc__tmEFPyzC-)

&#x20;To customize your site color, simply navigate to **Appearance** → **Customize** → **Colors**.

<div align="center"><img src="/files/-MIbyjctZm7cYrwfhTlc" alt=""></div>


# Social Icons

Social icons link your visitors to your chosen social media accounts. To set up your social icons, navigate to **Appearance** → **Customize** → **Social Media Settings** → **Social Profile Icons**.

For each social media account, you wish to link visitors to, enter your account's full URL into the related field.

<div align="center"><img src="/files/-MI__OrVX2eJFDF_RZDI" alt=""></div>


# 🛒Shop with WooCommerce

WooCommerce is the world’s most popular open-source eCommerce solution.

Once you activate the WooCommerce plugin for the first time, you are invited to set up your shop using the WooCommerce setup wizard. It is pretty intuitive and allows you to get your shop running in no time.

![](/files/-MZvnQLyzLY2U7DziD7v)

Nothing can describe getting started with WooCommerce better than its original documentation. Here are links to help you get started:

* [Start with WooCommerce in 5 Steps](https://docs.woocommerce.com/document/start-with-woocommerce-in-5-steps/);
* [WooCommerce Setup Wizard](https://docs.woocommerce.com/document/woocommerce-setup-wizard/).

If you want to get started manually, or skip the [setup wizard](/themes/yaffo/getting-started#demo-content), then you need to get a set of shop pages.

Here is what you need to do:

* From the dashboard go to **WooCommerce → Status → Tools**;
* Find the **Create default WooCommerce pages** option;
* Hint the **Create pages** button on the right.

![](/files/-MIbxSjZ7jc9fgCBhJir)

Now you should have a set of standard shop pages and are ready to work with WooCommerce.

{% embed url="<https://wordpress.org/plugins/woocommerce/>" %}


# Instagram Feed

Your photos from Instagram are now on your website

Please make you've installed the plugin called  [**Smash Balloon Instagram Feed**](https://ru.wordpress.org/plugins/instagram-feed/). After you would need to connect your Instagram account via **Instagram Feed > All Feeds > Add New**.

<div align="left"><img src="/files/GzaKTUEFgOlw5QxFTHSv" alt=""></div>

![](/files/MjeLTrIjgiZMLNxOHbRn)

![](/files/hPmp2DHY5gDEE6y5dPth)

![](/files/Mon7MMzn9dEMtv6sGS4x)

![](/files/K2mOnSIobamOEFbT9WU3)

{% embed url="<https://wordpress.org/plugins/instagram-feed/>" %}


# MailChimp Newsletter

Allowing your visitors to subscribe to your newsletter should be easy.

This allows you to add a newsletter sign-up form to your widget areas. When a guest adds their email via the form, it will be added to the mailing list / audience. You will then use the easy-to-use MailChimp app to create and send customized newsletters to your fan hoards.

## Follow the instruction:

1. Install & activate the **MC4WP: MailChimp for WordPress** recommended plugin.
2. Sign up and create an account with [**MailChimp**](https://mailchimp.com/).
3. Create a new **Audience** (mailing list) via **Audience** → **Current audience → View audiences** → **Create Audience** and fill in the necessary information.
4. Generate a MailChimp API key via **Your Account Page** → **Extras** → **API Keys** → **Create a key**. Copy this API key.
5. Paste your API key into the **MC4WP** plugin settings screen. **Save changes**.
6. Go to **MC4WP** → **Form** and paste the following HTML code into the form code box to make the form look like a sample form:

{% tabs %}
{% tab title="Normal" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="email" name="EMAIL" placeholder="Enter Your E-mail..." required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
		</div>
	</div>
</div>
```

{% endtab %}

{% tab title="With agree to terms" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="email" name="EMAIL" placeholder="Enter Your E-mail..." required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
			<div class="nebotheme-newsletter-terms">
				<input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> 
				<label>
					<a href="#" target="_blank">I have read and agree to the terms &amp; conditions</a>
				</label>
			</div>
		</div>
	</div>
</div>
```

{% endtab %}

{% tab title="With Name Field" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="text" name="FNAME" placeholder="Your Name" required class="nebotheme-newsletter__fname" />
			<input type="email" name="EMAIL" placeholder="Your E-mail" required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
		</div>
	</div>
</div>
```

{% endtab %}
{% endtabs %}

## **Y**ou can add such subscription forms:

### Widget Mailchimp Sign-Up Form

<div align="center"><img src="/files/-MIdG5lErkkKxB7eEc3z" alt="go to Appearance → Widgets add Mailchimp Sign-Up Form widget to any sidebar."></div>

### Po-pup

![go to Appearance → Customize → Newsletter Popup](/files/-MIdG9PiKymH6AnSGnSZ)

### Full-Width

![go to Appearance → Customize → Homepage](/files/-MIdGBD5zkWf_2fN7P8j)

### Full-Width for single post

![](/files/-MaK0a8NB792ofZXiVqH)


# 📈Additional Content (Google AdSense)

You can put content or ads on your website anywhere with Additional Content. Different places are available for each form of website, so you can position your content either before or after the site.

Under **Appearance** → **Customize** → **Additional Content**. you can find extra content areas.&#x20;

This could be personalized ads, shortcodes, basic HTML content or something else!

### How to turn on [**Google AdSense**](https://www.google.com/adsense)

go to **Appearance** → **Customize** → **Additional Content** → **Google AdSense**

<div align="left"><img src="/files/-MIc8O6ckNNudaTBv-VU" alt=""></div>

### Examples of using additional content

{% tabs %}
{% tab title="Google AdSense" %}

```markup
<div class="grid-container pb-5 pt-5">
     <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-123456789"
          data-ad-slot="123456789"
          data-ad-format="auto"></ins>
</div>
```

{% endtab %}

{% tab title="Banner" %}

```markup
<div class="grid-container pb-5 pt-5">
    <a href="https://1.envato.market/nebotheme">
        <img src="https://via.placeholder.com/1200x300" alt="Banner">
    </a>
</div>
```

{% endtab %}
{% endtabs %}


# Craftype

Thank you very much for purchasing **Craftype!** We're sure confident you'll love its flexibility and options.\
Your Yaffo license purchase entitles you to free lifetime theme updates + exceptional technical support.

Please reference this documentation for any questions or issues you may be experiencing. You’ll likely find the answer to your query here.  If at any point you need our help or a quick tip, feel free to contact our team via our [**NeboTheme Support Site**](/helpers/support-coverage)!

Your feedback on our theme is much appreciated. We would love to make our product even better, so please feel free to get in touch with any suggestions for improvement. Thanks again for your support. We value you!

If you like our work, please rate it. If you are going to rate it with less than 5 stars, please let us know the reason first and we will do our best to improve the theme.

### [Let's get started!](/themes/yaffo/getting-started)


# Getting Started

## Read Requirements

Make sure your hosting provider is running the following software.

* WordPress 4.9 or higher.
* [PHP](https://secure.php.net/) version 7.0 or greater.
* [MySQL](https://www.mysql.com/) version 5.6 or greater or [MariaDB](https://mariadb.org/) version 10.1 or greater.

### Recommended PHP Limits

Low limitations on PHP configuration can cause problems when importing pages. The alternative is to lift caps on PHP. You can do so on your own, or you can contact your web host and ask them to through the restrictions.

{% code title="php.ini" %}

```fsharp
max_execution_time = 120
memory_limit = 128M
post_max_size = 64M
upload_max_filesize = 64M
max_input_time = 60
max_input_vars = 3000
```

{% endcode %}

We recommend updating to the [latest version](https://www.php.net/releases/) of PHP, the newer the better.

## Installation

There are 2 methods for installing your WordPress theme: the normal method or via FTP. We recommend using the normal method.

{% tabs %}
{% tab title="Normal Installation" %}
The normal installation method is done via your WordPress Dashboard area.

1. On your [**ThemeForest Downloads Screen**](https://themeforest.net/downloads), click the **Download** button next to Yaffo. Select **All files & documentation**.
2. After that, unzip the package you've just downloaded on your computer. Within, you'll find a file titled **"Craftype.zip"**. This is the theme file.
3. In your WordPress Dashboard, navigate to **Appearance > Themes**.
4. Click the **Add New** button and then click the **Upload** button.
5. Select the "Craftype.zip" file and click **Upload**.
6. Once you've installed Yaffo, click the **Activate** button.
   {% endtab %}

{% tab title="FTP Installation" %}
FTP stands for "File Transfer Protocol" and can be done via any number of FTP applications, such as [**FileZilla**](https://filezilla-project.org/).

1. On your [**ThemeForest Downloads Screen**](https://themeforest.net/downloads), click the **Download** button next to Yaffo. Select **All files & documentation**.
2. After that, unzip the package you've just downloaded on your computer. Within, you'll find a file titled **"yaffo.zip"**. This is the theme file.
3. Extract the "yaffo" folder from the zipped "yaffo.zip" folder.
4. If unsure of your site's FTP login credentials, ask your web hosting customer support team.
5. Browse to **wp-content > themes**.
6. Copy the unzipped "yaffo" folder and paste it into your **themes** folder.
7. In your WP Dashboard, navigate to **Appearance > Themes** and **Activate** the Yaffo theme.
   {% endtab %}
   {% endtabs %}

## Demo Content

Once your theme is activated and you see the following window click on the **Run Quick Setup** button.

![](/files/-MZP0fAmGG8hEXsjMsBD)

Once you click on the **Run Quick Setup** button, you will see the following window, and then just follow the instructions of the  **Setup Wizard**.

![](/files/-MIZwpqfmOrdFOeid9rO)

After the demo import is complete, If you intend to use the **MC4WP: MailChimp for WordPress** newsletter form, please reference our guide: [📧 MailChimp Newsletter](/themes/yaffo/mailchimp-newsletter).

{% hint style="info" %}
If you wish to use **WooCommerce**, please refer to our guide: [🛒Shop with WooCommerce](/themes/yaffo/creating-a-shop-woocommerce)
{% endhint %}

{% hint style="info" %}
If you wish to use **Instagram**, please refer to our guide: [📷 Instagram](/themes/yaffo/instagram-feed)
{% endhint %}


# Homepage

## Homepage Displays

You can choose what’s displayed on the homepage of your site. It can be posted in reverse chronological order (classic blog), or on a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

Navigate to **Settings > Reading > Homepage displays** and choose either option.

![](/files/-MWnMFrhnE6PNIY-UJ47)

## Homepage Layout Settings

Your homepage is the first page visitors will see when they visit your site. You can customize it via **Appearance > Customize > Homepage Settings**.

Under the various drop-down tabs on the left of this screen, you'll find a lot of ways to customize your homepage & website in general. Here, you can enable/disable the Display Newsletter, choose your preferred post feed layout, and more.\ <br>

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

## Featured Images

Go to **Appearance > Customize > Homepage Settings > Featured Image Settings.**

To enable the Featured Images, toggle the option titled **Enable Featured Area**

The 4 boxes below the slider on Craftype demo site are called Featured Images. These boxes allow you to draw special attention to any post, page, or general URL you'd like.

<figure><img src="/files/3RRDuvV6ytRoe660rk74" alt=""><figcaption></figcaption></figure>

## Slider Settings

Craftype slider displays any number of posts of your choosing in a full-width element toward the top of the homepage.

To enable your featured area slider, you can navigate to **WP Dashboard > Appearance > Customize > Slider Settings** **>** and enable the element here.

Please ensure your posts have a featured image assigned to them.

Within **Appearance > Customize > Slider Settings**, you have 6 options for choosing which posts appear in your Slider Settings.

Besides that, you may choose to sort by category and number of slides per page.\
\
You can also choose to display posts or products.&#x20;

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

## Display Heading

To enable Display Heading, toggle the option and type your title and subtitle.

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


# Header

Header settings are located in **Appearance** → **Customise** → **Header Settings**.

## Layout

You can choose one of three header options: **Center Big, Center, Side**

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

## Sticky Menu

Activating the **Make the navigation bar sticky** option will make the navigation bar visible when scrolling.

By activating the **Enable the smart sticky feature** navigation bar will be revealed when scrolling up and hidden when scrolling down. The feature allows you to save viewport space when viewing your website.

![](/files/-MI_SapfFH2IdFro9vJZ)

## Header Top and Main height

You may change the height of the Header Main for desktop and mobile versions. You may also adjust the height of the Header Top.

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


# Navigation Menus

Navigation Menus are customizable menus in your theme. They allow users to add Pages, Posts, Categories, and URLs to the menu.

1. Go to `Appearance`→`Menus`
2. Give your menu a name and click the `Create Menu` button
3. Add a few simple links from `Links` tab
4. Save your menu
5. Navigate to `Manage Locations` tab (at the top of the screen)
6. Choose your new menu as `Main Navigation`
7. Click `Save Menu`

It is important that you then assign your menus to their intended location. For the main navigation menu, check the box at the bottom of the screen titled **Primary menu**. If you create a separate Footer menu, please be sure to check the box titled **Footer Menu**.

Switch between menus you've created by choosing them from the **Select a menu to edit** drop-down. Click **Select**.

![](/files/-MIZwBBtVsWrg93uuovQ)


# Post Settings

The Post Options section of your post edit screen provides a lot of ways to customize the look and content of each post. It's located below your post body content area.

Craftype has the possibility to create 3 different types of posts: standard, gallery, and video.

To create a new post, go to **WP Dashboard** → **Posts** → **Add New**.&#x20;

## **Post Layout**

Select your desired post heading layout. Below, choose whether to include the **Sidebar** element, and have the content displayed on the **Left**, **Right,** or on the **Full-width**.

Enable or disable display Post Header and choose Custom Sidebar.&#x20;

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

## Video background

Enable or disable display Video Background and choose Locations for your video URL.&#x20;

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

## Newsletter

You may also enable or disable display Post Newsletter

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


# Page Settings

The Page Options section of your page edit screen offers lots of ways to customize the look and content of each page. It's located below your page body content area.

To create a new page, navigate to **Pages** → **Add New**

## **Page Layout**

Select your desired post heading layout. Below, choose whether to include the **Sidebar** element, and have the content displayed on the **Left**, **Right,** or in the **Full-width.**

Enable or disable display Post Header and choose Custom Sidebar.

## Blog Settings

Each page can display a blog feed. Enable or disable Blog on this page, select your desired blog layout, heading, filter, post count, etc.

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

## Slider Settings

You may enable the Slider. Toggle the **Enable Slider** option on and configure it how you'd like.

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

## Featured Images

To add Featured Images to a page, enable the option via the Featured Images Settings tab. Choose your preferred images, label, and URL.

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

## Newsletter

You May enable Newsletter Before and After Content.

<figure><img src="/files/3Y1iyjgzAPH1bO0dEA7b" alt=""><figcaption></figcaption></figure>


# Setting Up a Logo

To add your preferred logo image, navigate to **WP Dashboard > Appearance > Customize > Logos** and upload your desired logo image here. It will automatically replace Craftype demo logo with your own.

<figure><img src="/files/3ncTQvtGLH4GuRl6ivAt" alt=""><figcaption></figcaption></figure>


# Sidebar & Widgets

A sidebar is a vertical content area that displays to the right of your main content/post area. You customize your sidebar by stacking up different widgets that display a variety of things.

To add in your preferred sidebar, navigate to **WP Dashboard > Appearance > Customize > Layouts**

Select your desired Page width in the General tab.&#x20;

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

Below, choose whether to include the Sidebar element, have the content displayed on the left or right, or on the Full-width.

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

## **Adding Widgets to Your Sidebar**

To add, remove, or edit your sidebar widgets, navigate to **WP Dashboard > Appearance > Widgets**\
On the left, you will see a list of the **available widgets** to choose from. \
On the right, you will see **the widget areas** in the theme.

To add a widget to your sidebar, simply drag & drop a widget on the left into the widget area.

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

## Custom nebotheme widgets

Craftype includes several custom nebotheme widgets that you can add to your sidebar.&#x20;

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


# Customizing Appearance

The various sections listed here offer loads of options for changing the colors, font-sizing, letter-spacing, and more for nearly all of Craftype's theme elements.

## **Colors**

Add your own colors to the existing palette for quick & easy implementation in General, Header, Off-canvas tabs.<br>

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

## **Typography**

The different theme typography sections noted here allow you to change Craftype default fonts to your choice of nearly 1000 [**Google Fonts**](https://fonts.google.com/).

You may Customize typography in the different typography sections

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

## Skins

Select your favorite design style from the existing skins list.

<figure><img src="/files/5zghtcEeXkIahXkw1P1P" alt=""><figcaption></figcaption></figure>

## Light/Dark Mode

You can switch Default/Dark mode and adjust your color scheme. Dark Mode is a look that's easy on your eyes and helps you focus on the content. and helps you focus on the content. It uses a dark color scheme and is activated automatically based on the browser's preferred settings or manually with a toggle.

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


# Social Icons

Social icons link your visitors to your chosen social media accounts. To set up your social icons, navigate to **Appearance** → **Customizing** → **Social Icons**.

For each social media account, you wish to link visitors to, enter your account's full URL into the related field.

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


# 🛒Shop with WooCommerce

WooCommerce is the world’s most popular open-source eCommerce solution.

Once you activate the WooCommerce plugin for the first time, you are invited to set up your shop using the WooCommerce setup wizard. It is pretty intuitive and allows you to get your shop running in no time.

![](/files/-MZvnQLyzLY2U7DziD7v)

Nothing can describe getting started with WooCommerce better than its original documentation. Here are links to help you get started:

* [Start with WooCommerce in 5 Steps](https://docs.woocommerce.com/document/start-with-woocommerce-in-5-steps/);
* [WooCommerce Setup Wizard](https://docs.woocommerce.com/document/woocommerce-setup-wizard/).

If you want to get started manually, or skip the [setup wizard](/themes/yaffo/getting-started#demo-content), then you need to get a set of shop pages.

Here is what you need to do:

* From the dashboard go to **WooCommerce → Status → Tools**;
* Find the **Create default WooCommerce pages** option;
* Hint the **Create pages** button on the right.

![](/files/-MIbxSjZ7jc9fgCBhJir)

Now you should have a set of standard shop pages and are ready to work with WooCommerce.

{% embed url="<https://wordpress.org/plugins/woocommerce/>" %}


# Instagram Feed

Your photos from Instagram are now on your website

Please make you've installed the plugin called  [**Smash Balloon Instagram Feed**](https://ru.wordpress.org/plugins/instagram-feed/). After you would need to connect your Instagram account via **Instagram Feed > All Feeds > Add New**.

<div align="left"><img src="/files/GzaKTUEFgOlw5QxFTHSv" alt=""></div>

![](/files/MjeLTrIjgiZMLNxOHbRn)

![](/files/hPmp2DHY5gDEE6y5dPth)

![](/files/Mon7MMzn9dEMtv6sGS4x)

![](/files/K2mOnSIobamOEFbT9WU3)

{% embed url="<https://wordpress.org/plugins/instagram-feed/>" %}


# MailChimp Newsletter

Allowing your visitors to subscribe to your newsletter should be easy.

This allows you to add a newsletter sign-up form to your widget areas. When a guest adds their email via the form, it will be added to the mailing list / audience. You will then use the easy-to-use MailChimp app to create and send customized newsletters to your fan hoards.

## Follow the instruction:

1. Install & activate the **MC4WP: MailChimp for WordPress** recommended plugin.
2. Sign up and create an account with [**MailChimp**](https://mailchimp.com/).
3. Create a new **Audience** (mailing list) via **Audience** → **Current audience → View audiences** → **Create Audience** and fill in the necessary information.
4. Generate a MailChimp API key via **Your Account Page** → **Extras** → **API Keys** → **Create a key**. Copy this API key.
5. Paste your API key into the **MC4WP** plugin settings screen. **Save changes**.
6. Go to **MC4WP** → **Form** and paste the following HTML code into the form code box to make the form look like a sample form:

{% tabs %}
{% tab title="Normal" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="email" name="EMAIL" placeholder="Enter Your E-mail..." required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
		</div>
	</div>
</div>
```

{% endtab %}

{% tab title="With agree to terms" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="email" name="EMAIL" placeholder="Enter Your E-mail..." required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
			<div class="nebotheme-newsletter-terms">
				<input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> 
				<label>
					<a href="#" target="_blank">I have read and agree to the terms &amp; conditions</a>
				</label>
			</div>
		</div>
	</div>
</div>
```

{% endtab %}

{% tab title="With Name Field" %}

```markup
<div class="nebotheme-newsletter">
	<div class="nebotheme-newsletter__text">
		<h2 class="nebotheme-newsletter__title">Join Our Newsletter</h2>
		<p>Enter your email and we'll keep you posted with news and updates!</p>
	</div>
	<div class="nebotheme-newsletter__elements">
		<div class="nebotheme-newsletter__elements__inner">
			<input type="text" name="FNAME" placeholder="Your Name" required class="nebotheme-newsletter__fname" />
			<input type="email" name="EMAIL" placeholder="Your E-mail" required class="nebotheme-newsletter__email" />
			<button class="nebotheme-newsletter__submit">Subscribe</button>
		</div>
	</div>
</div>
```

{% endtab %}
{% endtabs %}

## **Y**ou can add such subscription forms:

### Widget Mailchimp Sign-Up Form

<figure><img src="/files/f2q8r23KTR8nMVr9dpn8" alt=""><figcaption><p>go to Appearance → Widgets<br>Sign-Up Form widget to any sidebar.  </p></figcaption></figure>

### Po-pup

<figure><img src="/files/TxvRPpL1XXZ8Ka4u3dFb" alt=""><figcaption><p>go to Appearance → Customize → Newsletter Popup</p></figcaption></figure>

### Full-Width

<figure><img src="/files/Ujc9sJXaGAFDpyJxya2p" alt=""><figcaption><p>go to Appearance → Customize → Newsletter Popup</p></figcaption></figure>


# 📈Additional Content (Google AdSense)

You can put content or ads on your website anywhere with Additional Content. Different places are available for each form of website, so you can position your content either before or after the site.

Under **Appearance** → **Customize** → **Additional Content**. you can find extra content areas.&#x20;

This could be personalized ads, shortcodes, basic HTML content or something else!

### How to turn on [**Google AdSense**](https://www.google.com/adsense)

go to **Appearance** → **Customize** → **Additional Content** → **Google AdSense**

<div align="left"><img src="/files/-MIc8O6ckNNudaTBv-VU" alt=""></div>

### Examples of using additional content

{% tabs %}
{% tab title="Google AdSense" %}

```markup
<div class="grid-container pb-5 pt-5">
     <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-123456789"
          data-ad-slot="123456789"
          data-ad-format="auto"></ins>
</div>
```

{% endtab %}

{% tab title="Banner" %}

```markup
<div class="grid-container pb-5 pt-5">
    <a href="https://1.envato.market/nebotheme">
        <img src="https://via.placeholder.com/1200x300" alt="Banner">
    </a>
</div>
```

{% endtab %}
{% endtabs %}


