The massive revamping that accompanied the release of Divi 2.4 set the stage for Elegant Theme’s newest version of this premium WordPress theme. Version 2.5 is yet another step forward in the authors’ quest to create a Divi plugin and put in place a Divi framework, and it is a giant step forward.
Several huge time-saving features have been included in Divi 2.5. Whereas Version 2.4 enabled you to create a website in a fraction of the time that it often would take in the past, Divi 2.5 will increase your productivity even more.
Divi 2.5’s Productivity Enhancing Features
When you first discover how the handful of new features that have been incorporated in Divi 2.5 increases your productivity by leaps and bounds, you may well wonder why someone didn’t think of them earlier. You may also wonder how you were ever able to get along without them. The answer is simple. Premium themes do not achieve perfection overnight. They evolve. User feedback often plays a role, as do sudden insights and instances of pure inspiration on the part of the authors.
Several features you somehow managed to do without you will now find in Divi 2.5. You will find their time-saving and productivity enhancing capabilities truly remarkable.
Right Click and Hotkey Options
Divi’s straightforward modular approach to site building could nevertheless become a bit cumbersome at times. The new right click/hotkey interface makes managing the process much easier. The modular design approach is not changed, but this new feature enables you to access Divi Builder’s existing and newly integrated settings much more rapidly, and with much greater ease.
It won’t take you long to discover how the ability to Copy, Save, Undo, and perform several other actions with a single click will be a real time saver.
The Ultimate Time-Saving Tool – Divi Live Preview
Count the hours where you would edit – save — review, edit – save — review, over and over again. Those were not hours wasted in the sense that you were performing work that had to be done, but they were hours wasted in terms of performing repetitive tasks that were, in hindsight, totally unnecessary. The Live Preview feature is a huge time saver, in that it eliminates the need for these repetitive and unnecessary page-building steps.
When you have completed a task, you can either save your work in the Library, or you can save and edit it if you wish to preview it first. This feature gives you much better control of your work while avoiding becoming caught up in the earlier time consuming process. Your productivity will improve even more as Live Preview is used in conjunction with Version 2.5’s new History, Undo, and Copy/Paste features.
Divi Undo/Redo/History – a Powerful New Tool
Instead of realizing you made a mistake and wishing you hadn’t, this powerful new features allow you to go back in time to the point where the mistake was made, and Undo it; or Redo it if appropriate. The History function keeps a record of your page-building activities. With that record in hand, you can go back to whatever point you wish to in order to review an action and change it if needed. You can eliminate a potential bug before it becomes a cause for embarrassment, or you can make something good even better. This feature is yet another time saver, and in certain situations it could prove to be a huge one.
Gain Greater Control with the Divi Role Editor
Even your best and most trustworthy clients are sometimes capable of making a mess of your website design if they are given the ability to do so. This is of course one of the hazards of sharing control. A client may need to have control over certain aspects of a website — changing products, content, etc., but there are certain design features that you would not want your client to change. The Role Editor is one of several UX improvements designed to help small design agencies and freelancers maintain better control over their work.
The Divi 2.5 Role Editor enables you to specify which website elements your client can edit and which your client cannot. You will be able to maintain full control over specific website features by locking them in. You can also set and assign editor, author, contributor, and administrator roles to avoid problems and/or misunderstandings down the road.
The number of Divi 2.5’s new features may seem relatively small, but their productivity enhancing and time-saving potential is awesome. The previous version did much to set the stage for this new version, which is yet another step towards the soon to be realized objectives of creating a Divi plugin and establishing a Divi baseline. In the meantime, Divi users can enjoy the benefits this latest version brings to the table, Give Divi 2.5 a closer look. You will like what you see.
The post The new Divi 2.5 – An Awesome Performer That Is Now Even Better appeared first on Web Resources Depot.
Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly!
This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here.
(Play with our code editor on Tutorialzine.com)
The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered:
<div class="container">
<!--// Any content in here will be centered.-->
<img src="fireworks.jpg" alt="fireworks">
</div>
You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page.
As we said earlier, we will be using only three lines of code. Here they are:
.container{
display: flex;
justify-content: center;
align-items: center;
}
Every flex container has two axis for positioning elements. The main axis is declared with the flex-direction property (can be row or column, see docs). By omitting this rule, we’ve left the flex direction to its default row value.
Now all that we need to do is center both axis. It couldn’t get any simpler:
flex, so that we activate flexbox mode.justify-content defines where flex items will align according to the main axis (horizontally in our case).align-items does the same with the axis perpendicular to the main one (vertically in our case).Now that we have set the rules for the vertical and the horizontal alignment to center, any element we add inside the container will be positioned perfectly in the middle. We don’t need to know its dimensions beforehand, the browser will do all the hard work!
There are lots of other techniques for centering content with CSS, but flexbox makes this a whole lot simpler and more elegant. If you wish to learn more about it, check out these resources: