{"id":"64174004bba30fd5daa4bb66","title":"Text Rows","path":"how-to/committee/editing-content/existing-pages/text-rows","contentMarkdown":"# Editing an existing page structured with Text Rows\n- A good example of a page that uses a **Text** row structure is [walks/walk-gradings](https://ngx-ramblers.org.uk/walks/walk-gradings). To open this in a new tab without losing this page, hold down the control key and click [here](https://ngx-ramblers.org.uk/walks/walk-gradings).\n- You should see the page as is shown below with a breadcrumb:   Home  / Walks /  **Walk Gradings** along the top. It's been outlined in a red border so you can tell the difference between this article and the page we are describing.\n- However, when you toggle **edit site** from the website header, the page content will then be exposed and editable as shown in the example below outlined in a red border:\n\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/e871b774-cea2-4c71-a6e6-feda2297bfcd.jpg)\n\n## Text Row Structure\n  - The first line you will see is the page content title **Page content for walks/walk-grading (3 rows)**.\n  -  Next, a row of buttons are displayed that allow you to **Save page changes** or **Revert page changes**. These buttons are repeated at the bottom of the page as well for your convenience.\n  - Next, the editable **Content Path** field is displayed. This refers to the url relative to the website home page that you would have to visit on the website in order to see this page.\n  -  The 3 rows are then then listed in sequence with a border drawn around the contents of each row so you can see where each starts and finishes.  \n## Editing a Row\n- When you initially view a row in edit mode, the first line you see is the **Row Type** which will contain _Text_, **Margin Top**,  **Margin Bottom** and an **Actions** dropdown button\n- Below this initial line you will then see as many green **edit** buttons as there are columns in the row. In the example above, you will only see one as the Row has one column - see row title **Row 1 (1 column)**)\n- The column content will initially be shown in its display format, but if you click the edit button, or the content itself, you will enter edit mode for the column.\nA Row can contain between 1 and 12 columns \n\n\n- However, when you toggle **edit site** from the website header, the page content will then be exposed and editable as shown in the example below outlined in a red border:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/7da73669-b007-46be-9d83-316bae623a1b.jpg)","contentHtml":"<h1>Editing an existing page structured with Text Rows</h1>\n<ul>\n<li>A good example of a page that uses a <strong>Text</strong> row structure is <a href=\"https://ngx-ramblers.org.uk/walks/walk-gradings\">walks/walk-gradings</a>. To open this in a new tab without losing this page, hold down the control key and click <a href=\"https://ngx-ramblers.org.uk/walks/walk-gradings\">here</a>.</li>\n<li>You should see the page as is shown below with a breadcrumb:   Home  / Walks /  <strong>Walk Gradings</strong> along the top. It&#39;s been outlined in a red border so you can tell the difference between this article and the page we are describing.</li>\n<li>However, when you toggle <strong>edit site</strong> from the website header, the page content will then be exposed and editable as shown in the example below outlined in a red border:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/e871b774-cea2-4c71-a6e6-feda2297bfcd.jpg\" alt=\"\"></p>\n<h2>Text Row Structure</h2>\n<ul>\n<li>The first line you will see is the page content title <strong>Page content for walks/walk-grading (3 rows)</strong>.</li>\n<li>Next, a row of buttons are displayed that allow you to <strong>Save page changes</strong> or <strong>Revert page changes</strong>. These buttons are repeated at the bottom of the page as well for your convenience.</li>\n<li>Next, the editable <strong>Content Path</strong> field is displayed. This refers to the url relative to the website home page that you would have to visit on the website in order to see this page.</li>\n<li>The 3 rows are then then listed in sequence with a border drawn around the contents of each row so you can see where each starts and finishes.</li>\n</ul>\n<h2>Editing a Row</h2>\n<ul>\n<li><p>When you initially view a row in edit mode, the first line you see is the <strong>Row Type</strong> which will contain <em>Text</em>, <strong>Margin Top</strong>,  <strong>Margin Bottom</strong> and an <strong>Actions</strong> dropdown button</p>\n</li>\n<li><p>Below this initial line you will then see as many green <strong>edit</strong> buttons as there are columns in the row. In the example above, you will only see one as the Row has one column - see row title <strong>Row 1 (1 column)</strong>)</p>\n</li>\n<li><p>The column content will initially be shown in its display format, but if you click the edit button, or the content itself, you will enter edit mode for the column.\nA Row can contain between 1 and 12 columns </p>\n</li>\n<li><p>However, when you toggle <strong>edit site</strong> from the website header, the page content will then be exposed and editable as shown in the example below outlined in a red border:</p>\n</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/7da73669-b007-46be-9d83-316bae623a1b.jpg\" alt=\"\"></p>\n"}