Special Offer: Buy All 13 Premium WordPress Customizable Themes for Just $53.99. Learn more

How to Add Text Over Image Block

Our customizable 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></div> 

<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="hhttps://customizablethemes.com/themepreview/weddingeventpro/wp-content/uploads/sites/8/2014/06/love-3194477_1280.jpg" alt="customizable themes"></div></div>
</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.

Partial Image Overlay Block

Our customizable 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 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.

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

customizable themes

Then select/upload Image and edit content below it:

customizable themes
customizable themes

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.

customizable themes

Then update to publish and see the result.

customizable themes
customizable themes

Free lifetime updates for all premium themes

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

customizable themes

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

How to add Advanced Text Widget Guide

To insert this image gallery into our customizable themes – 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>
<div class=”container text-center mt-5″>
<h3>ART GALLERY IMAGES</h3>
<h5 class=”text-primary”>#ARTGALLERY</h5>
<div class=”row mt-4″>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1552252662-5645195d14d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80” alt=”” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1536236155319-1edab471917c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80” alt=”” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80” alt=”” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1492097631548-189753426f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1059&q=80” alt=”” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80” alt=”” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1449247613801-ab06418e2861?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80″ alt=”customizable themes” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80″ alt=”customizable themes” class=”img-fluid”>
</div>
<div class=”col-6 col-lg-3 mb-4″>
<img src=”https://images.unsplash.com/photo-1519643381401-22c77e60520e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80″ alt=”customizable themes” class=”img-fluid”>
</div>
</div>
</div>
</section>

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

customizable themes

We improved our premium customizable 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 designstudiopro wp theme demo: https://customizablethemes.com/themepreview/designstudiopro/

MotoSpeedPro Theme: Auto Rotate Slider Images

By default slider images in MotoSpeedPro Theme will not rotate until user clicks on prev/next arrows or play button.

In some cases you may want to make them auto rotate by default. It will require a small code change, here are all of the necessary steps: Read More…

How to Change Theme Text Direction to Right to Left

customizable themes

By default text direction in our customizable themes is Left to Right. However, if your website is written in Hebrew or Arabic text, then you probably will have to change text direction to Right to Left.

It will require a small code change. Here are all of the necessary steps: Read More…

MultiSport is now published at WordPress.org

We are happy to announce that our Free Sport WordPress Theme MultiSport is now published at WordPress.org

MultiSport


Best-selling Products:

Read More…

Fix JavaScript Issues with Speed Booster Plugin

customizable themes fix js issues with speed booster

If you use the Speed Booster Pack plugin, there could be issues with JavaScript our our themes. As a result, the Homepage slider could stop working.

Here is a how to resolve the issue if you use the Speed Booster plugin:

  1. Login to your Admin Panel
  2. Navigate to Left Menu -> Speed Booster
  3. Check the ‘Defer parsing of javascript files’ checkbox
  4. Save Changes

Best-selling Products:

Read More…