WiziBlocks: Text with a background image

The Text with a background image WiziBlock will allow you to create illustrated text blocks.   

 

mceclip2.png

 

1. In the side menu, click on the Text with a background image WiziBlock :

 

mceclip0.png

2. Choose your layout :

 

mceclip1.png

 

WiziBlock configuration :

 

mceclip3.png

 

Click on the cogwheel in the top-left corner of the block. In the side menu, various options will allow you to set up the space before the following block, the maximum size* of the WiziBlock, whether the block is hidden** and other options specific to each block (background color, parallax effects, styles, etc.)

 

mceclip0.png

 

* The Maximum size of the WiziBlock is the maximum width your block will have. The Small size corresponds to a width of 1024 px, the Medium size to a width of 1440 px and the Large size to a width of 1920 px. The Full screen size will display your block in full width. Note, however, that depending on the viewer's screen resolution and the type of block, some exceptions may apply. For example, text blocks will not be displayed in full-screen mode. They will automatically be displayed in Large size. Similarly, on very large screens, it is possible that the Full screen size is not adapted, and your block will automatically be switched to Large size for ergonomic reasons.

** The Hide block option allows you to temporarily hide the block. You can continue to configure it when it is hidden, and then decide to display it on your page when it's ready.

 

Choose your background image directly in the block, and make sure you follow the recommended dimensions for an optimal display:

mceclip4.png


In the Element configuration, remember to add a Call-to-Action button if necessary:

 

mceclip5.png

In the side menu, you can also choose the background color and the block's height, and add a parallax effect:

 

mceclip6.png


N.B. : Parallax effect is an animation option for your block's background:

 

ezgif.com-gif-maker__4_.gif

 

Set the speed of your parallax effect, and enable or disable the reverse parallax so that your image scrolls in the opposite direction:

 

mceclip0.png


💬 Please contact your Business Coaches if you have any questions!