Here you can see that the image has been moved to a row above its original position. The blue line will help with finding a new location for the column. You can use this icon with six dots to drag-and-drop your columns to a different part of the screen. The arrows will move the row up and down. These controls consist of an up arrow, a down arrow, and an icon with dots. These controls only appears when mousing over them. To move rows and columns, you can use the controls on the left-hand side of the screen. This is how the new row will appear, over the top of the three columns below: You will see a + icon which allows you to add new block into that column.īut if you click on this + icon at the top of the row you can create a new row. When you’re mousing over the column areas, a blue border will appears around each column. So, because columns are blocks, you are essentially adding blocks inside blocks.Ĭlick inside the columns are and you’ll see that there are multiple + icons floating around: Gutenberg asks you to place blocks in these columns. ![]() How to add blocks inside Gutenberg columns After some clicking around, I was able to highlight this whole area and see that it was using 2 columns. There was no immediate indication as to many columns are in this “Columns” block. Visually, I did find this initial layout a little confusion. Open up the “Layout Elements” area and look for the three-column icon.Īfter clicking the three-column icon, you will get empty columns with some placeholder text in the center column. When you open the new WordPress editing screen, click the + icon to add a new block. This video, normally available only to OSTraining members, show how to use layout and column options in Gutenberg: ![]() In this tutorial, you will look at using columns in the WordPress core Gutenberg editor. If you find you need more layout options after reading this guide, check out the Advanced Gutenberg plugin. You can create columns and rows with a variety of different content in both.Īs can be expected with such a new release there are some limitations, but it still represents a great step forward. ![]() It lets you layout a page using columns, thus providing greater flexibility with the look of your page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |