Viola Documentation
Submit a TicketLiveChat
  • Webibazaar Support
  • Shopify Viola
  • Header
    • Announcement bar
    • Header section
    • Mega menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Theme Settings
    • Colors
    • Typography
    • Layout
    • Buttons
    • Variant pills
    • Inputs
    • Cards
    • Product card review
    • Content containers
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social media
    • Search behavior
    • Favicon
    • Currency format
    • Cart
    • Checkout
    • Custom CSS
  • Sections
    • Rich text
    • Video
    • Page
    • FAQ
    • Image gallery
    • Custom Liquid
    • Contact form
    • Collapsible content
    • Multicolumn
    • Email signup
    • Collage
    • Slideshow
    • Scrolling bar
    • Collection list
    • Featured collection
    • Image Banner
    • Featured Product
    • Countdown with product
    • Tab Products
    • Countdown
    • Video with text
    • Image with text
    • Product with image
    • Text with icons
    • Lookbook
    • Testimonials
    • Blog Posts
    • Logo list
    • Social media gallery
    • Image comparison
  • Footer
  • Age verification popup
  • Product page
    • Product tab
    • Quick order list
    • Recently viewed product
  • Color swatches
  • Collection Page
    • Collection banner
    • Meta collection list
    • Product Grid
  • Pages
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 2.0.0
    • Version 1.0.13
    • Version 1.0.12
    • Version 1.0.11
    • Version 1.0.10
    • Version 1.0.9
    • Version 1.0.8
    • Version 1.0.7
    • Version 1.0.6
    • Version 1.0.5
    • Version 1.0.4
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  1. Sections

Image with text

PreviousVideo with textNextProduct with image

Last updated 1 month ago

Add an image with a title, description, and Button. Choose the size of your image and upload ita.

Setting
Description

Layout

Customization of layout in image with text section is as follows:

  • Grid

  • Full width from left

  • Full width from right

Color scheme

In this section, you can change the background color of the session using the color scheme:

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Image

Use "Image" to add the image to the section.

Second image

Use this settings to add the second image in section.

Animated svg

Use this settings to add animated image to the section.

Image position

Customization of "image position" in the section is as follows:

  • Start

  • Center

  • End

Image width

Below is the Image size customizations in the section:

  • 25%

  • 50%

  • 65%

  • 100%

Equal image zigzag

Use this settings to show images in zigzag view. This setting works only when image width is set to 50% and second image is selected form the settings.

Desktop image position

The desktop Image customization section is as follows:

  • Left

  • Right

Image layout

Customization of image layout in image with text section is as follows:

  • No overlap

  • Overlap

Vertical alignment on desktop

Vertical alignment customization of the text in the section is as follows:

  • Top

  • Middle

  • Bottom

Content background gradient

Customize the content background gradient to apply in the text content.

Image ratio

In the section, Image size customization is as follows:

  • Adapt to image

  • Small

  • Medium

  • Large

Desktop alignment

Customization of text alignment in desktop devices is as follows:

  • Left

  • Center

  • Right

Mobile alignment

Customization of text alignment in mobile devices is as follows:

  • Left

  • Center

  • Right

Add block

To add blocks to the Image with text section, click on the 'Add block'. There are many options available , as you can see in the below points and screenshot.

Block
Description

Heading

Click on the "Add block" and select the Heading. And enter text to display as a title on the section.

Heading size

Customization of the "Heading size" in the image with text section is as follows:

  • Small

  • Medium

  • Large

Heading text link color

Use this settings to change heading color of this section.

Caption

Click on the "Add block" and select Caption. And enter text to display as a Caption on the section.

Button label

Click on the "Add block" and select the Button. Use "Button label" to add a label to the Button in the section.

Button link

Click on the "Add block" and select the Button. Use "Button link" to add a link to the Button in the section.

Button style

Customization of the "Button style" in the image with text section is as follows:

  • Link

  • Outline button

  • Solid button

Desktop button size

Customization of the "Button size" in the image with text section is as follows:

  • Default

  • Medium

  • Large

End date

The end date must be set to a future date and include the following format: YYYY/MM/DD Example: 2024/10/05.

Timer complete message

When completed your timer after apply Timer message

Live Chat Support | Webibazaar Template
Logo