This article applies to all Thryv website plans, including the AI Website Builder and Thryv Managed Website.
This article covers how rows, columns, inner rows, and widgets work in the Thryv® Website Builder, including how to add and delete each element and important considerations for mobile layout. This article does not cover editing the design or style of individual widgets. For help editing widget design, see how to edit widgets in the Thryv Website Builder.
Why Understanding Rows, Columns, and Widgets Helps You Build a Better Website
A confusing or cluttered website drives visitors away before they find what they are looking for. The Thryv Website Builder is built on a responsive grid system of rows and columns that gives you complete control over the visual layout and content flow of every page. Rows organize large horizontal sections of content such as a Services section or a Testimonials strip. Columns divide rows into vertical containers so multiple widgets can sit side by side — for example, an image next to a text block. Inner rows add another layer of design flexibility inside columns for more complex arrangements. Understanding how these elements work together makes it faster to build a professional, high-converting website without needing to write any code.
How the Thryv Website Builder Structure Works
Every page in the Thryv Website Builder is built from a header, a footer, rows, and columns. Every widget added to a page is placed inside one of these structural elements. The header and footer appear on every page of the website automatically. Rows and columns make up the editable content area between the header and footer, and widgets are placed inside columns within those rows.
How to Add and Delete Rows in the Thryv Website Builder
Rows are the horizontal sections of a website page. All widgets and columns added to the page are placed inside rows. To add a new row, drag a widget to a position between two existing rows or to an empty area of the page — a new row is created automatically when the widget is dropped in that position.
The screenshot above shows the row structure of a website page in the Thryv Website Builder. Each horizontal section of the page is a row. Rows stack vertically on the page and each row contains at least one column.
The screenshot above shows a widget being dragged between two rows in the Thryv Website Builder. A highlighted drop zone appears between the rows indicating where the new row will be created. Dropping the widget in the highlighted zone creates a new row containing the dragged widget.
To delete a row, use one of the following methods:
Right-click method — Right-click anywhere on the row to open the context menu, then select Delete.
Row button method — Select the Row button at the top left corner of the row, then select Delete.
The screenshot above shows the right-click context menu on a row in the Thryv Website Builder with the Delete option visible. The context menu appears when right-clicking anywhere on the row. Selecting Delete removes the row and all content within it from the page.
The screenshot above shows the Row button at the top left corner of a selected row in the Thryv Website Builder. Selecting the Row button opens a dropdown menu with row management options including Delete.
How to Add and Delete Columns in the Thryv Website Builder
Every row contains at least one column. Columns hold all the widgets in a row and control how they are arranged horizontally. Each row can contain a maximum of four columns. When a new column is added to a row, it appears alongside the existing columns in that row.
The screenshot above shows a row in the Thryv Website Builder divided into multiple columns. Each column contains a widget. Columns within a row sit side by side horizontally and can hold different types of widgets independently.
The screenshot above shows a row in the Thryv Website Builder with a new column added alongside an existing column. The row now contains two columns side by side. Additional columns can be added up to a maximum of four columns per row.
To delete a column, use one of the following methods:
Right-click method — Right-click anywhere on the column to open the context menu, then select Delete.
Red X method — Select the red X at the top right corner of the column.
The screenshot above shows a column in the Thryv Website Builder with the red X button visible at the top right corner. Selecting the red X removes the column and its contents from the row. The right-click context menu Delete option is also available as an alternative method.
How to Add and Manage Inner Rows in the Thryv Website Builder
Inner rows allow additional design flexibility by enabling rows to be added inside columns. Inner rows can have their own background and spacing settings, be divided into up to four columns, and have their column order changed on mobile — the same as regular rows. Widgets can be placed in any column within an inner row. However, inner rows cannot be added inside the columns of another inner row.
To add an inner row to a column, use one of the following methods:
Right-click the row and select Add Inner Row. If the row contains multiple columns, select which column to add the inner row to.
Right-click the column and select Add Inner Row.
Right-click an existing inner row and select Add Row to place a new inner row directly below the current one.
The screenshot above shows the right-click context menu on a column in the Thryv Website Builder with the Add Inner Row option visible. Selecting Add Inner Row inserts a new row inside the selected column directly below any existing content in that column.
The following limitations apply when working with inner rows:
The order switching arrows can only be used to switch the order between inner rows. To change the order of widgets and inner rows within the same column, drag and drop the widgets manually above or below the inner row.
Multi-column widgets (2-column, 3-column, and 4-column widgets) cannot be placed inside inner rows. To add a column inside an inner row, right-click the inner row and select Add Column.
Inner rows cannot be copied and pasted. Only regular rows support the copy and paste function.
How to Add and Delete Widgets in the Thryv Website Builder
Widgets contain the text, images, buttons, and other content displayed on a website page. To add a widget, select Widgets in the left-hand menu of the Thryv Website Builder. Search for the widget by name or browse the available widget categories. Drag and drop the widget from the left-hand menu onto the page to place it in the desired column and row.
The screenshot above shows the Widgets panel in the Thryv Website Builder left-hand menu. The panel displays a searchable list of available widgets. Widgets are added to the page by dragging them from this panel and dropping them into the desired position on the page.
To delete a widget, use one of the following methods:
Right-click method — Right-click anywhere on the widget to open the context menu, then select Delete.
Red X method — Select the red X at the top right corner of the widget.
The screenshot above shows a widget in the Thryv Website Builder with the red X button visible at the top right corner. Selecting the red X permanently removes the widget from the page. The right-click context menu Delete option is also available as an alternative method.
Mobile Layout Considerations for Rows and Columns
Desktop and tablet views support up to four columns in a single row. Mobile view supports a maximum of two columns in a row. Columns added in desktop or tablet view will display at full page width when switched to mobile view. To create a two-column layout in mobile view, switch to mobile view first and then add a two-column widget directly in mobile view. Layout changes made in mobile view do not affect the desktop or tablet view of the page.
Frequently Asked Questions
What does this article cover?
This article covers how rows, columns, inner rows, and widgets work in the Thryv Website Builder, including how to add and delete each element and important considerations for mobile layout. This article does not cover editing the design or style of individual widgets. For help editing widget design, see how to edit widgets in the Thryv Website Builder.
How do I place two widgets side by side on the same row?
To place two widgets side by side, use one of the following methods. First method: drag a widget onto the page, then add a column to the row where the widget was placed, and drag a second widget into the new column. Second method: drag a two-column widget onto the page and then drag a separate widget into each of the two columns.
How do I select a column or row when a widget fills the entire space?
When a widget fills the full size of a column or row, right-click the widget to open the context menu. Hover over Select Container and then select either Column or Row to select the container element rather than the widget itself.
How do I delete the last column in a row?
An empty column does not display on the live website — it is only visible in the Website Builder editor. To remove the last column from a row, delete the entire row that contains it. Deleting the row removes both the row and the empty column.
Can I change how columns are displayed in mobile view?
Yes. To change the order in which columns are displayed in mobile view, enable the Reverse Column Order option in the row design settings. The Reverse Column Order setting applies per row and only affects the mobile view — the desktop and tablet column order is not changed.
Comments
0 comments