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.
hello,
i,m using newspaper themes 12v, there is by default themes look short width so i wish to increase width , so please can you tell me the solution how can i increase it easily ??
Hi,
Some demos have the default width, some are wider. The width can be increased with the option provided for the rows in the composer -> https://prnt.sc/_ksUYvkJifkr Please try it. And please let us know via the support forum or by email if we can help with something else.
Thank you!
Hello everybody. I’m trying to change the order of the columns of the first row in the mobile version, but assigning the order number inside the column options nothing changes. Have you ever been through this problem before?
* when I use the order options in the rows it works. It is in the column options where it does not work.
Thank you very much and greetings
Hi,
Sorry for the delay, we provide support by email or by forum mostly. I have tried the column order settings, they seem to work. For example in a row with 3 columns, with a custom order set for mobile https://prnt.sc/vgrhp0 -> https://prnt.sc/vgri6i Be sure to activate this setting for that respective row on mobile https://prnt.sc/vgrj33 It should work the same for you. If there is a problem, you can contact us by email at contact@tagdiv.com and provide a link to the website and admin login.
Thank you!
Thanks so much for your help. I had not enabled the option (https://prnt.sc/vgrj33). Everything works correctly now.
Have a great day!!! Thanks!!
How do you change the breakpoints for mobile? I have four columns right now that are still appearing as four columns in portrait, and I’d like them to collapse to two columns at that point. Please advise – thanks!
Hi,
Unfortunately, the theme does not have any such an option that allows you to change the breakpoints of the layout but please note that you can add some additional custom CSS to customize the page as you wish. You should add the code here -> http://prntscr.com/unnqyj If you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to help you.
All the best!
Buenos días, quisiera saber que Theme para mobile recomiendan que sea compatible con Newspaper ??
Saludos
Hi! Thank you for your interest in our product. The Newspaper theme comes bundled with a mobile theme. Please check out our Mobile Theme: Automatic Optimization for Mobile with Newspaper Theme article to find more information about this. If you have more questions, please send us an email to contact@tagdiv.com. Thank you! Have a lovely day 🙂
Thank you sooo much, I really like this flexibility features and I am using Newspaper theme for my blogs.
Thank you! We’re glad to hear you’re happy using Newspaper theme on your beautiful blogs <3
Great theme for WordPress. Lot of plug and play options.
Hi,
We are glad you’ve accomplished that!
All the best!
Yes sir
I did this theme is very cool and seo friendly theme
Hi,
Please accept my thanks for your kind thoughts. We really appreciate them!
All the best!
Queria consultar por el Theme Mobile, cuando tendrá una actualización???
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!
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,
We deeply appreciate your beautiful words!
Thank you!
All the best!
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.
Hi,
Thank you for your feedback!
Best regards!
Interestingly, will there be integration with Woocommerce too?
Hello,
Please note that improvements have been made for the ROW and COLUMN settings. Further, you can use any WooCommerce elements on these Rows/Columns. -> https://www.screencast.com/t/vjmYhPhAuKF
All the best!