Otter Blocks documentation

Otter is a powerful collection of page building blocks and templates for the WordPress block editor. The expanding library of page building blocks incorporates all of the necessary elements to build your own website. 

Combine the blocks with Otter, to build stunning pages and posts with the simplicity of designing.

  • 🧷 drag and drop efficiency 

  • 🖌️ customizable blocks


📩 Download and Install 

To download and install the Otter plugin, make sure you follow the steps below:

1

Navigate to the WordPress  Dashboard Plugins.

2
Click on the Add New button and type in the Search Bar " Otter".
3
When the plugin appears, click on the Install button, and then,  Activate the plugin, to start using it.

📝 Note: For further information about installing the plugin, check this dedicated doc.


🧰Using the blocks

One of the most outstanding features of the Otter Blocks is the easy way of functioning. In order to use the plugin, follow these steps:

1
Navigate to Posts / Pages and open the editor.
2
Once the editor is opened, click on the ➕ button, to add new blocks.
3

Scroll down, until the OTTER section and start adding the desired blocks.


📂Blocks Library

In order to access the Blocks Library, click on the  ➕ button from the top - left side of the page editor and scroll until the OTTER blocks.

Masonry
Accordion
Countdown
Icon
Form
Maps
Popup
Posts
Section
Slider
Pricing
Service
Testimonials
Tabs
Icon List
Plugin Card
About Author
Advanced Heading
Google Maps
Lottie Animation
Circle Counter
Progress Bar
Button Group
Product Review
Sharing Icons
Contact Form
Subscribe Form

 All the blocks are easily customizable and have different settings available once the ⚙️ icon is clicked.

There are some common settings available for all of them, such as:

  • Custom CSS - you can add media queries, change colors, and add borders all in one easy-to-follow area.
    • Add your custom CSS - in the textbox.

  • Animations - select an animation to enliven the content of the block.
    • Delay - the delay of the animation when a user enters the page.
    • Speed - decide how much the animation should last.

  • Advanced
    • Additional CSS class(es)

Out of the common settings, this article will present the  specific settings of each block.

🗄️Masonry

This block boasts the website's appearance by displaying multiple  images in a rich masonry layout.

To  add this componentscroll down into the blocks library and select the Masonry block.

The specific customizations available for this block cover three areas:

  • Masonry
    • Masonry Layout - enable the masonry layout, so that the posts on the next rows start where there is space.
    • Margin - adjust the space between photos.

  • Gallery settings
    • Columns - set the number of columns, maximum the number of photos.
    • Crop images - crop the thumbnails to ensure alignment.
    • Link to - attached page / media file / none.

  • Images
    • Add images from the gallery


🔽Accordion

The  accordion helps saving space on the website, collapsing the content, perfect for displaying FAQs.

To  add this componentscroll down into the blocks library and select the Accordion block.

The specific customizations available for this block cover one area:

  • Settings 
    • Initially open - enable to open the accordion while opening the page.


⏲️Countdown

As expected from the name, this block is perfect for keeping the evidence of the time until a certain date.

To  add this componentscroll down into the blocks library and select the Countdown block.

The specific customizations available for this block cover three areas:

  • Time - select the date for the countdown.
    • Select Date - opens a calendar to set time and date.

  • Settings 
    • Display Days / Hours / Minutes / Seconds / Separators - enable or disable one of these options.
    • Box Spacing - adjust the space between the boxes.
    • Box Height - customize the height of the boxes.
    • Box Width - customize the width of the boxes.
    • Border Width - set the borders of the boxes.
    • Time Value Font Size - increase / decrease the size of the Values' font.
    • Label Font Size - increase / decrease the size of the labels' font.
    • Border Radius - rounds the corners of the boxes.

  • Color - choose from the Global Colors or select a custom color for the following areas:
    • Background
    • Label
    • Value
    • Border


📦Icon

Something more suggestive than a text or a button is an icon, and with the Icon block, you can easily add it to your website.

To  add this componentscroll down into the blocks library and select the Icon block.

The specific customizations available for this block cover four areas:

  • Icon
    • Icon Library - pick the library you need from Font Awesome and ThemeIsle Icons.
    • Icon Picker - search the list and choose the suitable icon for your website.

  • Icon Sizes
    • Icon Size - adjust the size of your icon.
    • Padding - modify the padding of the icon.
    • Margin - adjust the margins of the icon.

  • Color - choose from the Global Colors or select a custom color, on normal or hover mode, for the following areas:
    • Background
    • Icon
    • Border

  • Border Settings
    • Border Size - add a border around the icon.
    • Border Radius - rounds the corners of the border.


🗹Form

The forms are really helpful for having evidence of the information. 

To  add this component, scroll down into the blocks library and select the Form block. From that moment, you can choose the Contact form or the Subscribe form.

📝 Note: If you choose to skip, by default, the Contact form will be added.

The details about each form will be described in the dedicated sections:


🗺️Maps

As expected from the name, this block generates a map on your website.

To  add this component, scroll down into the blocks library and select the Maps block.

The specific customizations available for this block cover four areas:

  • Location
    • Location - type the location that you want to see on the map and press Enter.
    • Latitude - after pressing Enter, the value will be added here.
    • Longitude - after pressing Enter, the value will be added here.

  • Positioning & Zooming
    • Map Zoom Level - adjust the zoom level.
    • Map Height - adjust the height of the map.

  • Controls
    • Draggable Map - if disabled, the user will not be able to move the map.
    • Zoom Control - if disabled, the user will not be able to zoom in or out the map, the controls will disappear.

  • Markers
    • Add Marker - can be added by clicking on the 📌 icon.
      • Add a title 
      • Location Details


The popup is a notice that appears suddenly on the screen, over another window or display.

To add this component, scroll down into the blocks library and select the Popup block.

The specific customizations available for this block cover two areas:

  • Settings
    • Open Trigger
      • On Load - appears when the page is loaded.
        • Wait Time - choose how much time to wait before showing the popup.
          • if it's left empty, it will open instantly.

    • Show Close Button - enable / disable the ❌ button.

    • Close on Click Outside - the popup will close if the user clicks outside the box.
  • Style - this menu is responsible for the appearance of the popup.
    • Minimum Width - establishes the width of the popup window.
    • Background - choose the color of the background.
    • Close Button - choose the color of the close button.
    • Overlay - select the color that appears while the popup is opened.
    • Overlay Opacity - decide how transparent the color of the overlay should be.


🗞️Posts

You can make the posts of your website even more accessible with the Posts block.

To  add this component, scroll down into the blocks library and select the Posts block.

The specific customizations available for this block cover four areas:

  • Styles
    • Grid - display the posts one next to the other.
    • List - display the posts one by one, in a list.

  • Post Types 
    • Post Type - select the types of posts: Post / Page / Wp_template / Product.

  • Settings
    • Columns - insert the number of columns.
    • Order By - select the order of the posts to be displayed: Newest to oldest / Oldest to newest / A - Z / Z - A.
    • Categories - insert the categories of the posts, separated with commas or Enter key.
    • Number of items - choose the number of items to be displayed.
    • Offset - number of posts to displace or pass over.

  • Design & Layout
    • Customize the Image / Category / Title / Meta / Description
    • Visibility - control the visibility of the elements by clicking on the 👁️ icon.
    • Reorder the elements with a drag and drop movement.


📔Section

The section block is a very important feature of this plugin because it allows creating more pleasing content, by combining different blocks in multiple columns.

To  add this component, scroll down into the blocks library and select the Section block.

The first step is to select a layout to start with ( from the 7 available ones ) or to create one.

You can choose from the Template Library an already made section.

The specific customizations available for this block are divided into three tabs:

  • Layout
    • Columns & Layout
      • Columns - select the number of columns that you want to be displayed.
      • Layout - three options for the layout.
      • Columns Gap - select the suitable gap dimensions for the section.
    • Spacing
      • Padding - you have the possibility to modify all the values at the same time, by clicking on the 🔗 button, and adjusting the dimensions according to the desired device ( Desktop | Tablet | Mobile ).
      • Margin - only the top and the bottom options are enabled for this feature, with the 🔗 button to connect the values and the adjustment according to the desired device ( Desktop | Tablet | Mobile ).
    • Section Structure
      • Maximum Content Width - adjust the content width by selecting the maximum value.
      • Horizontal Align - left / center / right.
      • Minimum Height - Default / Fit to screen / Custom.
  • Style
    • Background Settings
      • Background Type - color / image / gradient.
        • each of the options comes with specific settings.
    • Background Overlay
      • Overlay Type - color / image / gradient.
      • Overlay Opacity - use the slider to control the opacity.
      • CSS Filters - adjust the filters to obtain a proper overlay.
      • Blend Mode - pick a mode from the list.
    • Border
      • Border Width - control the width of the borders.
      • Border Color - insert color for the section border.
      • Border Radius - rounds the corners of the section according to the inserted values.
      • Box Shadow - add a shadow around the section block.
    • Shape Divider - attaches a shape before or after the section block.
      • Orientation - Top / Bottom.
      • Type - select one of the types from the list.
      • Color - choose from the Global Colors or add a custom one.
      • Width - control the width of the shape.
      • Height - control the height of the shape.
      • Invert Shape Divider 
  • Advanced
    • Hide this section on Desktop devices?
    • Hide this section on Tablet devices?
    • Hide this section on Mobile devices?
    • Section Settings
      • HTML Tag - select the tag from the list.


⏭️Slider

Enhance your website's appearance with a minimal image slider to showcase beautiful images.

To  add this component, scroll down into the blocks library and select the Slider block.

In this block, you can upload images and add captions to them.

The  specific customizations available for this block cover two areas:

  • Images
    • Add images

  • Settings
    • Slides per page - number of visible slides.
    • Gap - space between slides.
    • Peek - the value of the future slides visible in the current slide.
    • Height - adjust slider height in pixels.
    • Autoplay - autoplay slider in the front.
    • Delay - delay in slide change, in seconds.
    • Hide Arrows
    • Hide Bullets


💰Pricing

For an online shop, the pricing tables are a critical part of showcasing your services, products, and other details.

To  add this component, scroll down into the blocks library and select the Pricing block.

This block does not have  specific customizations, but the appearance can be changed, by clicking on each element ( name, price, button, details).


☑️Service

This block is very useful when it comes to showcasing services that your website offers.

To  add this component, scroll down into the blocks library and select the Service block.

The customizations available for this block are inherited from the global settings. The elements from this block can be adjusted by clicking on each of them.


💬Testimonials

As expected from the name, this block presents impressions from the customers, that can be visible on your website.

To  add this component, scroll down into the blocks library and select the Testimonials block.

The customizations available for this block are inherited from the global settings. The elements from this block can be adjusted by clicking on each of them. Moreover, a photo can be added here, to boost credibility.


▶️Tabs

Using tabs optimizes navigation between groups of content.

To  add this component, scroll down into the blocks library and select the Tabs block.

The specific customizations available for this block cover three areas:

  • Tabs Management
    • Rearrange the components
    • Add titles to the tabs

  • Settings
    • Border Width - adjust the width of the block.

  • Color - change the colors for the following areas:
    • Active Title Color
    • Background
    • Border Color

Effect:


📌Icon List

Create an interesting layout for the icons, using the Icon List block.

To  add this component, scroll down into the blocks library and select the Icon List block.

The specific customizations available for this block cover two areas:

  • Styles
    • Vertical  - display the list in a vertical way.
    • Horizontal - display the list in a horizontal way.
    • Default Style - pick one of the options above.

  • Settings
    • Icon Library - choose one of the available libraries.
    • Icon Picker - select one of the available icons.
    • Font Size - adjust the size of the icon.
    • Gap - adjust the space between items.
    • Content Color - pick a color for the content.
    • Icon Color - pick a color for the icon.

After adding the icons, you can change their alignment ( left / center / right ): 


🧩Plugin Card

The Plugin Card block allows you to display plugin data on the blog posts.

To  add this component, scroll down into the blocks library and select the Plugin Card block.

In order to use the block follow these steps:

  • Step 1: Insert the name of the desired plugin.
  • Step 2: Click on enter and select the plugin.


📰About Author

As expected from the name, this block showcases the author's biography.

To  add this component, scroll down into the blocks library and select the About Author block.

This is the easiest way to insert the author's details below the post.


📑Advanced Heading

Advanced Heading gives a spin to the editor's Heading block with much-needed customization options

To  add this component, scroll down into the blocks library and select the Advanced Heading block.

The specific customizations available for this block are divided into two panels:

  • Style
    • General Settings
      • Heading Color - pick from the global colors of Neve or choose a custom color.
      • Font Size - adjust the size of the font, for Desktop | Tablet | Mobile. You can also reset the changes.
      • Alignment - left / center / right, can be set differently for Desktop | Tablet | Mobile.
    • Typography Settings
      • Font Family - select from the list the Font Family that suits your needs.
      • Font Style - pick the desired style from the available options: Regular / Italic.
      • Font Transform - Lowecase / Uppercase / Capitalize / Default.
      • Line Height - adjust the height of the font.
      • Letter Spacing - modify the space between letters.
      • Shadow Properties - adds a shadow for the heading, with certain colors.

📝Note: The Advanced Heading block inherits the Typographic styling defined in the Customizer.

  • Advanced
    • Highlight Color - pick a suitable color for the following areas:
      • Highlight Color
      • Highlight Background
    • Spacing
      • Padding - you have the possibility to modify all the values at the same time, by clicking on the 🔗 button, and adjusting the dimensions according to the desired device ( Desktop | Tablet | Mobile ).
      • Margin - only the top and the bottom options are enabled for this feature, with the 🔗 button to connect the values and the adjustment according to the desired device ( Desktop | Tablet | Mobile ).

📍Google Maps

Create a more interactive website using Google Maps.

To  add this component, scroll down into the blocks library and select the Google Maps block.

In order to use this block follow these steps:

  • Step 1: Insert a Google Maps API Key.
    • check the link from the block.
  • Step 2: Click on Save.

⏩Lottie Animation

As expected from the name, this block is perfect for having the evidence of the time until a certain date.

To  add this component, scroll down into the blocks library and select the Lottie Animation block.

The specific customizations available for this block cover one area:

  • Settings
    • Trigger - appears only on the front-end: scroll / hover / click.
    • Loop - display the animation in a loop.
    • Speed - adjust the animation speed.
    • Reverse - change the direction of the animation.
    • Width - adjust the container width in pixels.

  • Edit
    • The Edit button allows the user to change the animation very easily.

📝 Note: In order to insert a Lottie Animation, you can paste the URL of it or to upload a JSON file.


🧮Circle Counter

As expected from the name, this block highlights the progress through an animated circle counter.

To  add this component, scroll down into the blocks library and select the Circle Counter block.

The specific customizations available for this block cover two areas:

  • Settings
    • Percentage - shows the value of the counter.
    • Duration - establish the duration of the animation.
    • Title Style - Default / Hide / Bottom.

  • Style
    • Height - adjust the height of the circle counter.
    • Circle Thickness - change the thickness (stroke width) of the circle.
    • Font Size Title - change the font size of the title.
    • Font Size Percent - change the font size of the inner text.
    • Title / Progress / Background Color - pick one from the Global Colors or choose a custom one.


✅Progress Bar

Similar to the Circle Counter block, this one also showcases the progress within a beautifully animated progress bar.

To  add this component, scroll down into the blocks library and select the Progress Bar block.

The specific customizations available for this block cover two areas:

  • Settings
    • Title - add a title to the progress bar.
    • Percentage - shows the value of the counter.
    • Duration - establish the duration of the animation.
    • Title Style - Default / Highlight / Outer.
    • Show Percentage - Default / Append / Tooltip / Outer / Hide.

  • Style
    • Height - adjust the height of the circle counter.
    • Circle Thickness - change the thickness (stroke width) of the circle.
    • Font Size Title - change the font size of the title.
    • Font Size Percent - change the font size of the inner text.
    • Title / Progress / Background Color - pick one from the Global Colors or choose a custom one.


🔘Button Group

Enhance your website's interaction, prompting visitors to take action with a button group.

To  add this component, scroll down into the blocks library and select the Button Group block.

The specific customizations available for this block cover four areas:

  • Styles - there are two options available for the appearance:
    • Fill
    • Outline
    • Default Style - select one of the styles above to be the default one.

  • Color - available on normal and on hover mode.
    • Color - select one of the global colors or add a custom one.
    • Background - choose a background, solid / gradient.

  • Border & Box Shadow - available on normal and on hover mode.
    • Border - pick one of the global colors or a custom one.
    • Border Width - adjust the width of the border.
    • Border Radius - rounds the corners of the border.
    • Box Shadow - add a shadow around the button.

  • Icon Settings
    • Icon Position - No Icon / Left / Right / Icon Only.
    • Icon Library - select a library from the list.
    • Icon Picker - pick the desired icon.


🛍️Product Review

Transform your posts into ingenious reviews with ratings and generate edges with a fulfilling product review block.

To  add this component, scroll down into the blocks library and select the Product Review block.

The specific customizations available for this block cover seven areas:

  • Styles - there are two options available for the appearance:
    • Fill
    • Outline
    • Default Style - select one of the styles above to be the default one.

  • Product Details - insert the information for the following fields:
    • Product Name
    • Currency
    • Price
    • Discounted Price
    • Product Image

  • Product Features - insert the features of the product.

  • Pros - add the strength points of the product.

  • Cons - add the weak points of the product.

  • Links - insert the links of the selling platforms.
    • Label - type a label for the button.
    • Link - paste the URL.
    • Is this Sponsored - enable / disable.

  • Color - change the colors of the following areas:
    • Primary
    • Background
    • Text
    • Button Text


↪️Sharing Icons

Ensure your website's popularity by using share buttons with a suitable social sharing service.

To  add this component, scroll down into the blocks library and select the Sharing Icons block.

The specific customizations available for this block cover one area:

  • Styles - there are two options available for the appearance:
    • Fill
    • Outline
    • Default Style - select one of the styles above to be the default one.

You can control the sharing icons that appear on your website by enabling the specific icon:


📝Contact Form

Make sure that your visitors remain up to date using a contact form that makes them agree with receiving email communication.

To  add this component, scroll down into the blocks library and select the Contact Form block.

The specific customizations available for this block cover two areas:

  • Form Settings
    • Email Subject - customize the email title by adding an email subject.
    • Email To - send form data to another email ( Admin is the default ).
    • Add captcha checkbox - for protection against bots.

  • Fields Settings
    • Field Type -  select what type of information you want to be added there ( Text / Email / Date / Number ).
    • Label - insert the label for the specific field.
    • Placeholder - type the desired placeholder for the specific field ( can be the same with the label or different ).
    • Is this field required - enable or disable this option.

📝 Note: You can customize each field from the form, by clicking on the name.

  • Integration - add your client email to a Digital Marketing provider.


🔔Subscribe Form

Allow your visitors remain up to date using a subscribe form that ensures their engagement.

To add this component, scroll down into the blocks library and select the Subscribe Form block.

The specific customizations available for this block cover two areas:

  • Form Settings
    • Email Subject - customize the email title by adding an email subject.
    • Email To - send form data to another email ( Admin is the default ).
    • Add captcha checkbox - for protection against bots.

  • Fields Settings
    • Field Type -  select what type of information you want to be added there ( Text / Email / Date / Number ).
    • Label - insert the label for the specific field.
    • Placeholder - type the desired placeholder for the specific field ( can be the same with the label or different ).
    • Is this field required - enable or disable this option.

📝Note: You can customize each field from the form, by clicking on the name.

  • Integration - add your client email to a Digital Marketing provider.


🌐Global Settings

The Global Settings contain the  default options of the blocks, that can be set site-wide

These settings become  accessible when clicking on the otter icon, right next to the ⚙️ icon.

📝 Note: The shortcut can be eliminated when the ⭐ button is disabled.

The options available here are:

  • Make Section block your default block for Pages? - if enabled, the section block will become the default.

Global Defaults - when the options below are clicked, a panel with settings will become available.

  • Advanced Heading - contains all the customizations available for the headings.
    • General Settings
      • HTML Tag - select the tag from the list.
      • Heading Color - choose from the Global Colors or add a custom one.
      • Font Size - adjust the font size according to your needs. Check the Responsive settings too.
    • Typography Settings
      • Font Family - select from the list the Font Family that suits your needs.
      • Font Style - pick the desired style from the available options: Regular / Italic.
      • Font Transform - Lowecase / Uppercase / Capitalize / Default.
      • Line Height - adjust the height of the font.
      • Letter Spacing - modify the space between letters.
    • Spacing
      • Padding - you have the possibility to modify all the values at the same time, by clicking on the 🔗 button, and adjusting the dimensions according to the desired device ( Desktop | Tablet | Mobile ).
      • Margin - only the top and the bottom options are enabled for this feature, with the 🔗 button to connect the values and the adjustment according to the desired device ( Desktop | Tablet | Mobile ).

In order to use the Advanced Heading block, follow these steps:

Step 1: Save the settings that you have done to the component and then, close the settings window.

Step 2: Click on the ➕ button to add a new component, search for the Advanced Heading, and insert it.

Step 3: Insert the content into the new block and enjoy the special Advanced Heading.

📝 Note: The heading that appears in the GIF has the following options: Tag - Heading 2, Color - Neve Extra Color 2, Font size 157, Font Family - Abel, Font Style - Italic.


  • Button Group
    • Spacing
      • Button Padding - adjust the padding of the button, according to your needs, only for the top and for the bottom. These values are linked.
      • Group Spacing - modify the spacing of the group with the slider.
      • Collapse On - Desktop / Tablet / Mobile.
    • Typography Settings
      • Font Family - select from the list the Font Family that suits your needs.
      • Font Style - pick the desired style from the available options: Regular / Italic.
      • Font Transform - Lowecase / Uppercase / Capitalize / Default.
      • Line Height - adjust the height of the font.

In order to use the  Button Group block, follow these steps:

Step 1: Save the settings that you have done to the component and then, close the settings window.

Step 2: Click on the ➕ button to add a new component, search for the Button Group, and insert it.

Step 3: Insert the content into the new block and enjoy the special Button Group.

📝 Note: The buttons that appear in the GIF have the following options: Button Padding - 5, Group Spacing - 15, Collapse On - Desktop, Font Family - Alata.


  • Button
    • Color - color settings are available for both normal and hover mode.

      • ( Hover ) Color - choose from the Global Colors or add a custom one.
      • ( Hover ) Background - choose from the Global Colors or add a custom one.
    • Border & Box Shadow - these settings are available for both normal and hover mode.

      • Border - select one of the Global colors or pick one custom color. 
      • Border Width - adjust the width of the borders.
      • Border Radius - rounds the corners of the button.

In order to use the Button block, follow these steps:

Step 1Save the settings that you have done to the component and then, close the settings window.

Step 2: Click on the ➕ button to add new component, search for the Button Group, and insert it.

Step 3: Insert the content into the new block and enjoy the special Button appearance.

📝 Note: The options made to the Button block are linked to the Button Group. This means that here you customize the buttons that appear in the Button Group block.


  • Icon
    • Sizing
      • Icon Size - adjust the size of the icon, according to your needs.
      • Padding - change the padding, using the slider.
      • Margin - set the margin, using the slider.
    • Color
      • ( Hover ) Color - choose from the Global Colors or add a custom one.
      • ( Hover ) Background - choose from the Global Colors or add a custom one.

In order to use the Icon block, follow these steps:

Step 1Save the settings that you have done to the component and then, close the settings window.

Step 2: Click on the ➕ button to add new component, search for the Icon block, and insert it.

Step 3: Enjoy your new special ThemeIsle Icon ( you can change it from the dedicated block's settings ). 


  • Section
    • Sizing
      • Columns Gap - Default / No Gap / Narrow / Extended / Wide / Wider.
      • Padding - you have the possibility to modify all the values at the same time, by clicking on the 🔗 button, and adjusting the dimensions according to the desired device ( Desktop | Tablet | Mobile ).
      • Margin - only the top and the bottom options are enabled for this feature, with the 🔗 button to connect the values and the adjustment according to the desired device ( Desktop | Tablet | Mobile ).
    • Section Structure
      • HTML Tag - select the desired tag from the list: header / footer / article / main / section /  Default (div).
      • Maximum Content Width - adjust the content width by selecting the maximum value.
      • Minimum Height - Default / Fit to screen / Custom.
      • Vertical Align - top / center / bottom.
    • Responsive
      • Hide this section on Desktop devices?
      • Hide this section on Tablet devices?
      • Hide this section on Mobile devices?

In order to use the  Section block, follow these steps:

Step 1Save the settings that you have done to the component and then, close the settings window.

Step 2: Click on the ➕ button to add new component, search for the Section block, and insert it.

Step 3: Select the Layout and start using the block. 


  • Section Column
    • Sizing
      • Padding - you have the possibility to modify all the values at the same time, by clicking on the 🔗 button, and adjusting the dimensions according to the desired device ( Desktop | Tablet | Mobile ).
      • Margin - only the top and the bottom options are enabled for this feature, with the 🔗 button to connect the values and the adjustment according to the desired device ( Desktop | Tablet | Mobile ).
    • Section Settings
      • HTML Tag - select the desired tag from the list: header / footer / article / main / section /  Default (div).

📝 Note: The settings applied here are linked to the Section Block. The structure will be changed here, so to see the changes, you need to add a new Section Block. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.