Special Offer: Buy All 10 Premium WordPress Themes for Just $55.99. Learn more

Zen in WordPress Theme Website Design

Zen in WordPress Theme Website Design - zentemplates

Zen is a design principle based on the Japanese Zen Buddhism, which emphasizes simplicity, minimalism, and naturalness. In WordPress theme website design, Zen can be applied by creating a clean, uncluttered layout, with a focus on simplicity and functionality.

One way to apply Zen in WordPress theme design is by using a minimal color palette, with a focus on neutral or earthy tones, and avoiding the use of too many bright or flashy colors. Another way is to use simple, clean typography, with a focus on legibility and readability.

Zen design also emphasizes the use of natural elements, such as images of nature, and the use of white space to create a sense of calm and tranquility. This can be incorporated in the design by using imagery of nature, such as mountains, water, or trees, and by using clean, uncluttered layouts to give the design a sense of spaciousness.

Additionally, Zen design can be applied by creating a responsive design, that adapts to different screen sizes, creating a seamless user experience.

Using Zen principles in WordPress theme design can help create a website that is both visually pleasing and easy to navigate, promoting a sense of calm and tranquility for the user.


How to Add Text Over Image Block

Our zen themes support the WordPress out-of-the-box blocks and include theme built-in Gutenberg blocks. In this article, we will look at the Text Over Image block.

The next step is to open for edit or create a new page or block with the WordPress editor.

First you’ll need the link of your image in the Image Library.

You can add in the Page some image block and with right click select “Edit as HTML” code to take the URL of the inserted image. After that Remove that block. (or if you have already added images in your Library, you can go to Media Library and see the Image URL you choose for you Text Over Image Block.

Here is HTML code you will need to customize for the new block:

<div style="display: grid;">
<div style="margin: auto; padding-left: 40px; ">
<div style="font-size: 40px; transform: translateY(170px); position: relative; z-index: 1; background: #8fd457; opacity: 0.8;" class="tish-animation-block-wrapper" data-animationtype="zoomIn" class="wp-block-tishonator-animation-block"><div class="tish-animation-block">
<span style="color:#fff;" class="has-inline-color"><strong>Animation Text</strong></span>


<div style="position:relative; z-index: 0; transform: translateY(-40px); transform: translateX(-40px); 
opacity: 0.7;" class="tish-animation-block-wrapper" data-animationtype="zoomIn" class="wp-block-tishonator-animation-block"><div class="tish-animation-block"><img class="wp-image-3035" style="width: 600px;" src="https://zentemplates.com/themepreview/zenmacramepro/wp-content/uploads/sites/14/2013/06/zen-templates-product-image-01.jpg" alt="zen templates"></div></div>

Add from the + icon one new Custom HTML block. Insert the code above, replacing the image link with yours (the purple text).

You can customize and change the color background behind the text (the red bolded text). Replace with your own preferred style.

Then update to publish and see the result.

Hope this is helpful.

zen templates


Partial Image Overlay Block

Our zen themes support the WordPress out-of-the-box blocks and include theme built-in Gutenberg blocks. In this article, we will look at the Partial Image Overlay block.

First, you need to have a premium theme by us.

If you use a free zen theme, it does not include the block. No other configuration or change is required, the block is built-in in our premium themes.

The next step is to open for edit or create a new page or block with the WordPress editor for the zen templates .

Click on the ‘+’ icon, and insert the ‘Partial Image Overlay’ block:

zen templates

Then select/upload Image and edit content below it:

zen templates
zen templates

By default the Image is displayed in Right and the Content in Left, but it want to display Image in Left and Content in Right, check the ‘Display Image in Left’ checkbox.

Then update to publish and see the result.

zen templates


Free lifetime updates for all premium themes

Once purchased our premium zen templates, the download links will NEVER expire. In this way, you will have free lifetime update for your theme.

zen templates

Also, you can use your premium zen theme for unlimited sites or domains without any restrictions or additional fees.


How to add Advanced Text Widget Guide

zen templates

To insert this widget with scrolling images – see the steps below:

Go to Appearance -> Widgets -> Drag widget “Advanced Text” to the right where you want to be, and in the Text insert this code:

<section style=”margin-top: 50px;”>
<div class=”container mt-5″>
<div class=”row”>
<div class=”col-lg-7 mb-3″>
<div id=”mainCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”https://images.unsplash.com/photo-1588706838478-acc49b5d9fcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80” alt=”zen templates” class=”d-block w-100″>
<div class=”carousel-item”>
<img src=”https://images.unsplash.com/photo-1557592722-a0a649c8c5c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80” alt=”zen templates” class=”d-block w-100″>
<div class=”carousel-item”>
<img src=”https://images.unsplash.com/photo-1540730820882-0812eb966b2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80” alt=”zen templates” class=”d-block w-100″>
<a href=”#mainCarousel” class=”carousel-control-prev” data-slide=”prev” role=”button”>
<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
<a href=”#mainCarousel” class=”carousel-control-next” data-slide=”next” role=”button”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
<div class=”col-lg-5″>
<p class=”lead”>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia harum debitis fugit!
Veritatis a vero in laborum vel, explicabo tenetur repudiandae modi at dolorum architecto rem sequi suscipit maxime
unde similique, est impedit vitae nihil exercitationem?</p>
<a href=””>See for yourself <i class=”fa fa-arrow-right”></i></a>

To change the images, you should insert your own image URLs. After that – Save. And That’s it.


New Footer Image Background Customizer option added for our premium wordpress themes

zen templates

We improved our premium zen themes with a small feature: a customizer option to insert an Image as Footer Background.

Here is how to add an image as a footer background:

  1. Login to your Admin Panel
  2. Navigate to Left Menu -> Appearance -> Customize
  3. Open ‘Colors’ Section
  4. In left, scroll down and upload or choose Media library image for ‘Footer Background Image’
  5. Save changes by clicking on ‘Publish’ button

A demo of the above, can be seen in our zengardenweddingpro wp theme demo: https://zentemplates.com/themepreview/zengardenweddingpro/


ZenEarth is now published at WordPress.org

We are happy to announce that our Free Multi-Purpose WordPress Theme ZenEarth is now published at WordPress.org


Best-selling Products:


Slippry Slider: Change Position of Slide Content

zen templates

If you use a theme with Slippry Slider (currently it’s added into our ZenLifePro premium theme), you have probably noticed that Slide content is displayed at bottom position of the Slider.

In some case, you may want to display that content above or even at the top of the slider. Here is a guide how to change the content position:

  1. Login to your WordPress Admin Panel
  2. Navigate to Left Menu -> Appearance -> Customize
  3. Open ‘Additional CSS’ section
  4. Insert the following code there:
    @media screen and (min-width: 600px) {
    .sy-caption-wrap {
    bottom: 400px;
    }Note: you can change the above value (marked in bold) to any other value i.e. ‘300px’ or ‘200px’ depending on preferred slide content position
  5. Save changes