ZeGuten — a collection of blocks for Gutenberg Get for $15.00

Image comparison for WordPress from ZeGuten collection

ABOUT THE AUTHOR

SEO copywriter at Gutenix Team

WordPress Carousel block from ZeGuten collection
Prew post
  • Apr 30, 2020
  • 3 min read
  • 150

Image comparison for WordPress from ZeGuten collection

There is an amazing decision for companies to showcase the results of their work on their own websites. It attracts clients and helps them to check how professional your projects are. Image comparison for WordPress will help you to display before and after in the most engaging way. 

The visitors can move the divider and see how the image has changed after you worked with it. Choose two photos, customize the borders, and enjoy the result you get. It is a very interactive block which is liked by many people. 

Check the number of settings and options that this image comparison for WordPress includes. You are free to enter titles and descriptions you want, set borders and spacing, drop shadow, choose the background color and arrows size, etc. Stylize your block according to your needs and make it suit your website design.

Add image comparison for WordPress on the page

To add the image comparison block to your page you should open the needed page in Gutenberg editor, click on the + button and find the comparison block. 

You can enter the block name in the search field of the appeared window or simply type /image comparison in your working space.

When you find the necessary block click on it to paste it to the working field.

add a block

Once you have added the block you will see its settings in the right sidebar. First, you should do, is to set the image before. You can upload it from your PC or add it from the existing media library. 

Then write the title and description (if there is a need). In our case, we didn’t use descriptions. You can also change the typography and text color, align the content, set paddings, etc.

before settings

Then repeat the actions from the step above with the After Settings tab. It is recommended to use the same options for the before and after blocks for the better design.

After Settings

In the General Settings tab, we will change the dividing line width and color to make it more fit our image. Handle settings will be also changed according to your tastes. 

We didn’t use borders, so we miss these fields. Cross to the handle arrows to improve their look. Change their size and color too.

General Settings

Block Background tab of our image comparison for WordPress allows you to set the background color and borders for the whole block. You can also choose the style of the borders from several pre-made layouts. Drop shadow if you want to add more uniqueness to the block.

Block Background

The Block spacing tab is for changing the block space. You can attune it if you want.

Block spacing

In addition, if you want to add your own style class you can use the Advanced tab. Choose the needed CSS class and enter it in the special field in this section.

Advanced tab

Let’s check the result we got. Our image comparison for WordPress looks great, isn’t it? The colors fit together and create a good combination. Try your own comparison and impress the visitors with the functionality of your website.

the result
2
Appreciate
How to create responsive post carousel in Gutenberg using ZeGuten block
Next post
WordPress Carousel block from ZeGuten collection
Prew post
How to create responsive post carousel in Gutenberg using ZeGuten block
Next post
Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for a on opportunity to make work with it easier for everyone.
Give us a Call: +1.347.342.0463
Email: [email protected]
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.