Advance Typography

Type Scale

A type scale is a range of font sizes that are used consistently throughout a design project to create visual hierarchy and balance. A typical type scale might include a range of font sizes, such as 10px, 12px, 14px, 16px, 18px, 20px, and so on, with each size being incrementally larger or smaller than the previous one. By using a consistent type scale, designers can ensure that the typography in their design is visually pleasing and easy to read and that different levels of content are appropriately emphasized.

Extra Font Size

WPAyyash offers extra font sizes referring to font sizes that fall outside the standard range of font sizes commonly used in the design, such as 12px, 14px, 16px, and so on. These font sizes are typically used for specific design purposes, such as emphasizing particular pieces of content or creating a unique visual aesthetic.

Typography Presets

Typography presets are pre-configured sets of font options for text and headings. With just a click, you can select the most appropriate fonts to enhance the user experience.

Google Fonts

With WPAyyash, you have the option to choose from over 500+ Google fonts, ensuring that you have access to the highest quality typography for your website.

Site Layouts

Full-width Layout

With Ayyash, you can showcase your primary content in a full-width layout, enabling you to utilize the entire width of the primary content section on your website.

Boxed Layouts

By default, Ayyash includes a boxed layout option, which allows you to separate the content on the page.

Fluid layout

Ayyash provides the option of a fluid layout, allowing you to expand your website to the edges of the screen.


Primary Color

Ayyash offers a range of options to manage the colors and background of the primary and secondary colors on your website, which can be adjusted separately for mobile and desktop versions.

Form Element Background Color

Ayyash’s form element background color is applied to the background of various form elements, such as text boxes, drop-down menus, and buttons, within a web form. This color can be customized to create a unique visual style or to match the branding of a website.

Form Element Text Color

Form element text color refers to the color of the text displayed within various form elements, such as text boxes, drop-down menus, and buttons, within a web form. This color can be customized to create a visually appealing and eye-catchy design.

Heading Color

With Ayyash, you have a range of options to manage the colors and background of the primary and secondary header on your website, which can be adjusted separately for both mobile and desktop versions.

Content Background Color

Ayyash’s well-chosen content background color can make it easier to read and interact with the content, create a more visually appealing design, and reinforce the branding and identity of a website.

Site Background Color

Site background color can be customized to create a unique visual style, to match the branding of a website, or to create a specific mood or atmosphere. Selecting the appropriate site background color is an important aspect of web design, as it can significantly impact the overall look and feel of a website.


Ayyash provides an easy way to customize the colors and background of your website’s sidebar using the colors and background settings available in the customizer. Whether you want to match your sidebar with your website’s branding or create a unique visual style, Ayyash makes it simple to make these customizations.


Ayyash offers a variety of options to manage the colors of your website’s footer. This allows you to create a consistent visual experience throughout your website, from the top of the page to the bottom.

Border Color

Ayyash border color is applied to the border or outline of an element on a webpage, such as a button, image, or text box.

Blog Layouts

Excerpt Count

You can easily fetch the respective excerpts for every post on your blog page. This feature allows you to customize the length of the excerpt by specifying the number of words or characters you want to display.

Highlight The First Post

You can highlight the first post in your list to ensure that users don’t miss it. This feature is particularly useful if you want to draw attention to a specific post or if you want to encourage users to start reading from the beginning.

Related Post

With Ayyash, you can easily display related posts on all single posts. This feature can help increase user engagement by providing them with additional content that they may be interested in reading.

Post Pagination

With Ayyash, you can add stylish pagination to your blog page, allowing you to distribute your blog posts across multiple pages.

Default Layout

Ayyash allows you to set up your blog page to display your blog posts in a list layout, where each post is arranged one after the other. This layout is a great way to present your blog content in a clear and organized manner, making it easier for your readers to browse and engage with your posts.

Medium Layout

Ayyash blog medium layout focus on the content and a clean, minimalist design. It typically features a centered content area with ample white space and simple typography, making it easy to read and navigate through the blog posts.

Grid Layout

Grid layouts can display all your blog posts in a visually appealing grid layout on your blog page. The grid layout is particularly useful for websites with a large number of blog posts, as it allows visitors to quickly scan through the content and find what they’re looking for.

Page and Post OptionPro

You can apply individual page setting for any specific page. Scroll down to a page to find the page settings options. From the page settings options, you can enable or disable the following settings -

  • Main Header
  • Secondary Header
  • Title Bar
  • Page Title
  • Main Footer
  • Secondary Footer
  • Credit Section

You can also set the section height as -

  • Top None
  • Bottom None
  • Top Bottom None

Set the site layout as boxed or full-width. After that, you can set the content layout as -

  • Right Sidebar
  • Left Sidebar
  • Non-Sidebar

These settings will only apply to a specific page. No other page on your website won’t be affected by these settings.


Single Product

For a single product, you will have the following options -

  • Single product
  • Sidebar Position ( left, right, or none )
  • Single Product Sidebar
  • Up-Sells Count
  • Related Item Count
  • Related Products Column

Single ProductPro

For a single product, you will have the following options -

  • Product Attribute Style
  • Show Reviews Note
  • Reviews Note Label
  • Reviews Note
  • Add to Cart Button Type
  • Add to Cart Button Radius
  • Show Buy Now button?
  • Buy now Button Radius
  • Buy Button Type
  • Show Store Info
  • Store Info Label
  • Store Info
  • Product Stock
  • Stock Position


Here on the checkout page, you will have the following options -

  • Company name field
  • Address line 2 field
  • Phone field
  • Highlight required fields with an asterisk
  • Privacy policy page
  • Terms and conditions page
  • Privacy policy
  • Show Breadcrumb
  • Cart Sidebar Position
  • Checkout Sidebar

Off-canvas CartPro

Ayyash’s Off-canvas cart allows the shopping cart to slide in and out of the viewport, making it more accessible and user-friendly for customers while browsing an online store.


Here from the archive page, you can do the following things -

  • Show Breadcrumb
  • Show Shop Title
  • Shop Posts Per Page
  • Sidebar Position
  • Shop Sidebar ( select registered sidebar dropdown )
  • Shop Column ( product column )
  • Show Shop Sort
  • Show Shop Result Count


Here from the archive page, you can do the following things -

  • Show Product Price?
  • Show Product Rating?
  • Show Product Rating Count?
  • Show Product Category?
  • Grid Gap ( between the gap of the product no gap or gap )
  • Grid Gap in px
  • Product Action Position
  • Product Action Style
  • Product Label Type
  • Product Label Style
  • Product Label Top Position
  • Product Label Left Position
  • Show Discount badge
  • Show Featured badge
  • Show Stock badge
  • Show Product badge
  • Yith Wishlist Button text
  • Yith Quick View Button text

Share Product

Ayyash provides different social platforms to share features. To enable social share features you need to provide the platform’s app ID.

Store NoticePro

You can enable the store notice option and add store notice text.


Here from the cart page, you can enable the breadcrumb and set the cart sidebar position, cross-sell count, and cross-sell column.

Quick View

With Ayyash users can utilize the quick view feature using the YITH Quick View plugin to get a closer look at a product without having to open it on a new page. Also, icon support is provided for the plugin.

Product Galleries

On your Shop page, you can showcase all of your products in a product gallery that can be customized to display as a grid or list layout and further personalized.


Well Documented

Ayyash is very well documented and every feature and functionality is well explained. Whenever we introduce a new feature, we ensure that there is an article available that provides a thorough explanation.

24*7 Support

We have a dedicated team in place to ensure that you’re never left feeling alone. If you require assistance, don’t hesitate to reach out to us via email!

Ready to get started?

Download your copy of Ayyash today and create your next website faster than ever. All pre-built websites with all features are included.

Download Now
Goto Top