Newspaper Theme: New Flexibility Features for Rows and Columns

With Newspaper Theme 10.3.5 comes a whole bunch of new features for arranging your page or template’s layout. More mobility, ease of access, and faster options to move, align, and order your elements in your rows or columns. If the old school way to make advanced customizations was via the CSS box, now it’s possible to tweak those aspects by clicking some icons. Let’s learn what the new flexible rows and columns do.

Layout Choices

First of all, make sure you’re up-to-date with the Newspaper Theme version. If you’re new to updating your WordPress Theme, take a look at our tutorial on automatic updates. Now, navigate to a page or template that you want to edit. Open the tagDiv Composer, our front-end pagebuilder. New to using the drag-and-drop editor? Discover how to move and arrange elements with tagDiv Composer first. 

Either drag-and-drop a new row into the page or just click on an already-existing one. Split the row into 2-4 different columns. Go to General and choose between the predefined column choices. You might have noticed a new tab called “Layout.” Click it to explore a whole new set of adjustments.

The first row contains three options:

• – if you leave it on OFF, you deactivate the feature for the row you’re on.
• – keeps the layout of the row arranged in columns vertically.
• – each column gets aligned horizontally.

Right below those, you get a checkbox to rearrange the columns in reverse order. The second option lets elements wrap inside the column, just like a text. Once you activate an option, you can see the changes happening live on the page and how your new layout looks. 

Horizontal Alignment

The next few settings refer to the placement of the items inside a row or column. So let’s say that you have a column with an item shorter than the total width of the column. How would you move it to the left or right side of it? You might try to add paddings or margins to the CSS settings of it. However, there’s a straightforward solution now. 

Click on the column you would like to modify. Now turn on the column settings ( ). Right next to “Horizontal Align” are these available options: 

• – is turned ON by default and arranges all elements to the left side of the column.
• – moves components to the center of the column.
• – aligns the item on the right side of the column.
• – works only with multiple items that are displayed on the same row and column. It distributes them to the left and right sides of the column.
• – just like the previous option, it only works when there are multiple elements on the same row and column. It creates an even distance between the items.

Vertical Alignment

Do you want elements to align in the center of your row without adding unnecessary amounts of CSS? With the Vertical Alignment options, each row or column can be moved to the center, bottom, or even to the top. 

Just like with the horizontal alignment icons, there are a few icons for the vertical alignment:

• – is turned ON by default and arranges the elements starting from the top.
• – aligns the objects to the middle of the row.
• – moves the items to the bottom of the row.
• – the objects align on a horizontal line so that the text’s baseline sits on top of it.
• – this option, when turned ON on the row, makes every column equal in height to the tallest one. This is a great option to vertically align items within their columns and even to create proportionate colored backgrounds within the columns.

More Options, More Accessibility!

The last two features for flexible rows and columns in the Layout tab are the Order and Width boxes. They allow you to control the way your content sits on the page and rearrange items differently on various devices.

Order

By default, it’s set on Auto, which means the columns appear one after the other exactly as you see them on the page. If you have multiple columns, at the very least 2, you can easily switch to a tablet or mobile view through the    device bar and have the columns show up in a different order. 

How do you do this? Click on the column you want to show up first and input a number. It can be any number, but for simplicity’s sake, write down 1. Now go to the second column and write down a number that’s higher than the first one; in our case, we can go from 2 to ∞. The columns should now show up with the “1” before the “2” column.

This is absolutely fantastic when you move to smaller devices and want your content to be the centerpiece of the website. 

Width

This feature works brilliantly on both the flexible rows and columns if you want to increase or decrease the amount of space they take up on the page.

Put in any measurement in the box, and it will increase the content accordingly. You can use pixels, percentages, points or anything as long as it is marked by the correct shortening. View a full list of measurements here. So, if you want that column or row to increase its size, just input it in the box. 

Flexibility at Your Fingertips

Let’s say you’ve decreased one column’s width, what happens to the rest of the columns? Most likely, they will stay at their existing width if you haven’t increased it. To make it easier, we’ve created a set of options that automatically calculate the remaining space in the row and adjust the column’s width accordingly. Let’s explore the options next to the “Occupy remaining space in row” option:

• – it is turned ON by default. It lets each column remain at the size they were when you first created the row.
• – if you turn the option ON, it will adjust the column’s width to fill the rest of the row.
• – turns the option OFF.

Remember that this icon    needs to be turned ON on the row for this feature to work properly.

Conclusions

As with every new feature, the best part about it is implementing it creatively on your Newspaper website. With so many options and combinations, there’s plenty to explore and discover. Moreover, there’s much to be done with the new flexible rows and columns: widening columns, stretching background colors, arranging items, and organizing your site in a simple manner! 

Show us what you’ve created with these brand new features in the comment box below.