Newspaper Theme: New Flexibility Features for Rows and Columns

Home

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:

  • off-png – if you leave it on OFF, you deactivate the feature for the row you’re on.
  • vertical columns – keeps the layout of the row arranged in columns vertically.
  • row columns – 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 ( vertical columns ). Right next to “Horizontal Align” are these available options: 

  • left align – is turned ON by default and arranges all elements to the left side of the column.
  • mid align – moves components to the center of the column.
  • right align – aligns the item on the right side of the column.
  • space evenly – 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.
  • dustribute evenly – 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:

  • top align – is turned ON by default and arranges the elements starting from the top.
  • center align – aligns the objects to the middle of the row.
  • bottom align – moves the items to the bottom of the row.
  • baseline align – the objects align on a horizontal line so that the text’s baseline sits on top of it.
  • stretch columns – 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  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:

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

Remember that this icon  vertical columns  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.

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Alexandra I.
Alexandra I.
As an artist and designer, I aim to create something brilliant daily. Eager to learn more, I use my free time to get better at what interests me, whether it's photography, painting, or even something entirely new.

16 COMMENTS

  1. Everything great. Im using it and hoping to get the improvement on mobile theme version in regards to the core web vitals. Also text to code ratio issue is a bit problem. Take a note for next update.

  2. This is a really great feature- I still wish tho you would add classified ad functionality to the newspaper themes to make it work like a real newspaper

    • Hi,

      At the moment, the mobile theme does not have any updates. Probably soon but we don’t know the exact period.

      All the best!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Stories