Image Box

The Sample Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum leo augue, mollis venenatis dui cursus eget. Suspendisse porttitor mauris lacus, sit amet sollicitudin lectus lobortise

The Sample Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum leo augue, mollis venenatis dui cursus eget.

The Sample Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum leo augue, mollis venenatis dui cursus eget. Suspendisse porttitor mauris lacus, sit amet sollicitudin lectus lobortise

The Sample Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum leo augue, mollis venenatis dui cursus eget.

Image Settings

This section will help you set up the block’s image. Let’s check out the available options.

  1. Image Alignment: Pick the alignment of the image, allows you to position the image to the left, right or over the text.
  2. Source Size: Set the size of the source image among the available image sizes of your WordPress Installation.
  3. Image Width: Set a fixed width for the image.
  4. Margin: Set the margin for just the image.

Notice that the Image Width and Margin options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Content Settings

This section will help you set up the block’s content. Let’s check out the available options.

  1. Alignment: Set the text alignment.
  2. Heading Element: Set the level of the content’s heading.
  3. Heading Font Size: Control the font size of the heading either via a drop down of preset values or by setting an exact pixel value in the input.
  4. Heading Bottom Margin: Controls the spacing between the heading and the text below it.
  5. Text Font Size: Control the font size of the text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

  1. Title Color: This option allows you to set the color of the content heading.
  2. Content Text Color: This option controls the color of the content text.
  3. Block Background Color: This option controls the block’s background color.
  4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  5. Border Radius: This option allows you to round the block’s corners.
  6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  7. Padding: With this option you can control the padding on each side of the block individually or all at once.
  8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.

Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.