Sampo
documentation

Image with text

General 

In most sections of the theme, you can customize various settings to match your design needs. In the Image with text section you can:

  • Select a suitable color scheme.
  • Choose the position of the content for desktop.
  • Choose the media width Large / Medium / Small.
  • Adjust text alignment for both desktop and mobile views.
  • Select the vertical position of the image.
  • Choose full width buttons to be used in desktop and/or mobile view.

These options provide flexibility to create a cohesive and visually appealing layout tailored to your store's style.

Special Background

With the background block, you can enhance the section's background with various styling options to create depth and visual interest.

Note: By default, this block inherits its settings from Theme settings > Aesthetics > Special Background. However, you can customize these settings individually for each block using the block settings.

In the block settings you can: 

  • Select and adjust Background gradient.

  • Choose from a variety of Graphics for the background

    • None
    • Tilted
    • Convex
    • Concave
    • Curve
    • Wave
    • Waves & Lines
    • Tilted ripple
  • Enable Effects:
    • Add vignette
    • Add grain

  • Edit Graphic settings:
    • Flip horizontal 
    • Flip vertical 
    • Two tone graphics

  • Adjust the height for desktop and mobile views.

 

Image or Video

In the Image or Video block settings, you can:

  • Choose the media type (Image or Video).
  • Select the aspect ratio for the chosen media.
  • Add image and video files.
  • Enable autoplay for the video, if needed.
  • Enable video controls so users can control playback.

 

Headings, Text, and Buttons

Add headings and text content next to the image by adding Heading and Text blocks. You can also include buttons with links by adding Button blocks.

Customization options include:

  • Defining different sizes for headings and buttons for desktop and mobile views.
  • Adjusting the top margins of headings and buttons.
  • Selecting a button style that complements your section and overall design.

 

Custom Spacing

By using the custom spacing block you can easily adjust the top padding, top margin and bottom padding of any section to suit your design needs.

Note: Values set in the custom spacing block will override those defined in the general theme settings, applying locally only to this specific section.

Steps

  1. Open the theme editor and select the section you want to edit.
  2. Click the section name to open its settings, then find and click "Add block."
  3. Select "Custom Spacing" and define padding top, margin top and padding bottom values for the section.
  4. The values you set will override the general settings in the theme.