<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Reviews - Apex Web Solutions</title>
	<atom:link href="https://apexweb.io/category/reviews/feed/" rel="self" type="application/rss+xml" />
	<link>https://apexweb.io</link>
	<description>Web Development and Design</description>
	<lastBuildDate>Wed, 16 Dec 2020 19:02:50 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.7.1</generator>

<image>
	<url>https://apexweb.io/wp-content/uploads/2020/09/cropped-Favicon-1-32x32.png</url>
	<title>Reviews - Apex Web Solutions</title>
	<link>https://apexweb.io</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Dashboard Switcher Plugin Review</title>
		<link>https://apexweb.io/dashboard-switcher-plugin-review/</link>
					<comments>https://apexweb.io/dashboard-switcher-plugin-review/#respond</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Thu, 29 Oct 2020 20:37:35 +0000</pubDate>
				<category><![CDATA[Reviews]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=588</guid>

					<description><![CDATA[What is Dashboard Switcher? Dashboard Switcher is a WordPress plugin that allows you to quickly and easily swap out the main dashboard page in the WordPress admin area with a different page that you've created yourself as well as add additional pages to the admin area. Due to the simplicity of how the plugin works [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-0fa60651 " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
													<span class="uag-toc__collapsible-wrap">			<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
			</span>
												</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>What is Dashboard Switcher?</h2>



<p><a aria-label=" (opens in a new tab)" href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" rel="noopener" class="rank-math-link">Dashboard Switcher</a> is a <a aria-label="WordPress  (opens in a new tab)" href="https://wordpress.org/" target="_blank" rel="noopener" class="rank-math-link">WordPress</a> plugin that allows you to quickly and easily swap out the main dashboard page in the WordPress admin area with a different page that you've created yourself as well as add additional pages to the admin area.</p>



<p>Due to the simplicity of how the plugin works (which you'll learn more about below) you can use this with any page builder like <a aria-label="Oxygen  (opens in a new tab)" href="https://apexweb.io/oxygen-builder-review/" target="_blank" rel="noopener" class="rank-math-link">Oxygen</a> or by coding with scratch!</p>



<h2>How It Works</h2>



<p>The way <a href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">Dashboard Switcher</a> works is actually really simple. You basically just set a URL that you would like to display in place of the default dashboard (or "Welcome Screen") and/or for additional dashboard pages. These pages can exist on the same site or they can exist on another external site.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="932" height="260" src="https://apexweb.io/wp-content/uploads/2020/10/image-11.png" alt="Dashboard Switcher Welcome Screen UI" class="wp-image-590" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-11.png 932w, https://apexweb.io/wp-content/uploads/2020/10/image-11-300x84.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-11-768x214.png 768w" sizes="(max-width: 932px) 100vw, 932px" title="Dashboard Switcher Plugin Review 1"></figure>



<figure class="wp-block-image size-large"><img loading="lazy" width="797" height="599" src="https://apexweb.io/wp-content/uploads/2020/10/image-12.png" alt="image 12" class="wp-image-593" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-12.png 797w, https://apexweb.io/wp-content/uploads/2020/10/image-12-300x225.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-12-768x577.png 768w" sizes="(max-width: 797px) 100vw, 797px" title="Dashboard Switcher Plugin Review 2"></figure>



<p>One of the best examples is a contact page within the dashboard so your clients can contact you straight from their WordPress backend. Below is an example I made in Oxygen Builder and plan to use on my client sites from now on.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="500" src="https://apexweb.io/wp-content/uploads/2020/10/image-13-1024x500.png" alt="image 13" class="wp-image-594" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-13-1024x500.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-13-300x146.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-13-768x375.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-13-1536x750.png 1536w, https://apexweb.io/wp-content/uploads/2020/10/image-13.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" title="Dashboard Switcher Plugin Review 3"><figcaption>Ignore the double admin bar... That's there because I'm logged in on both websites. The client will never see that! (unless they're logged into your website for some reason)</figcaption></figure>



<p>When I first booted it up I thought "Wow, that's really all it does?", but the more I think about it the more I like that simplicity. The plugin is so simple in essence as it doesn't do that much on its own, but that simplicity allows you to do virtually anything you want with it. </p>



<p>Having a page like that contact page on your business' website allows you to add that contact page to any client's website in seconds. You don't need to remake the page or even copy and paste a template to the client's site. It will always be instantly accessible and always up-to-date on every client site without having to update it on every different website. </p>



<p>If you need something more catered to the specific client and/or with sensitive data on them you can make pages right on the site that are only accessible to admins or specific users then link to them in Dashboard Switcher.</p>



<h2>A Few Usage Ideas</h2>



<p>FAQ or tutorial pages to explain how to do things in the WordPress backend and any custom functionality you've made to make things easier for your clients.</p>



<p>Use it for upselling by advertising your additional services on the dashboard welcome screen.</p>



<p>Show your latest blog posts, announcements, etc to help maintain a customer relationship.</p>



<p>A contact page like I showed above to make it easy for your clients to contact you without ever having to look for your contact information.</p>



<h2>Pricing</h2>



<p>The pricing is very simple. There is only one option which is a lifetime license for $47.</p>



<figure class="wp-block-image size-large"><a href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" rel="noopener"><img loading="lazy" width="527" height="190" src="https://apexweb.io/wp-content/uploads/2020/10/image-14.png" alt="image 14" class="wp-image-602" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-14.png 527w, https://apexweb.io/wp-content/uploads/2020/10/image-14-300x108.png 300w" sizes="(max-width: 527px) 100vw, 527px" title="Dashboard Switcher Plugin Review 4"></a></figure>



<h2>Conclusion</h2>



<p><a aria-label="Dashboard Switcher (opens in a new tab)" href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" rel="noopener" class="rank-math-link">Dashboard Switcher</a> is a very simple plugin that doesn't do that much on its own, but it does those things very well. It's very easy to use and really opens up the WordPress dashboard area to allow you to easily add anything you want. The price is quite low and it's a lifetime license so it's a solid value in my opinion. I definitely plan to use this on my client's sites from now on!</p>



<h2>Affiliate Link</h2>



<p>I want to make it clear that I DO have an affiliate link for this product now. Each link to the <a href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">Dashboard Switcher</a> page on this review is an affiliate link. If you do decide to purchase Dashboard Switcher and use <a href="https://shop.uniqho.de/cart/lxq1cphj" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">my affiliate link</a> to support me I highly appreciate it. I do not write any of my content with the intention of making money. I simply include these affiliate links because I can and I might as well see if I can get a small amount of free money out of it. I hope with this in mind you are still able to trust my reviews, and I promise that my written opinions are always the honest truth and I would never attempt to lead my viewers into a purchase they might regret.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/dashboard-switcher-plugin-review/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>OxyMonster CSS Framework For Oxygen Builder Review</title>
		<link>https://apexweb.io/oxymonster-css-framework-for-oxygen-builder-review/</link>
					<comments>https://apexweb.io/oxymonster-css-framework-for-oxygen-builder-review/#comments</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Thu, 22 Oct 2020 03:55:47 +0000</pubDate>
				<category><![CDATA[Oxygen Builder]]></category>
		<category><![CDATA[Reviews]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=524</guid>

					<description><![CDATA[What is OxyMonster? OxyMonster is a plugin for Oxygen Builder that allows you to input part or all of a massive CSS utility class framework based on Tailwind into Oxygen quickly, easily, and modularly. This is similar to what OxyNinja does with its hybrid framework of UIkit and Tailwind. I was fortunate to have the [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-8162db3b " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
											</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>What is OxyMonster?</h2>



<p><a aria-label="OxyMonster  (opens in a new tab)" href="https://oxymonster.com/" target="_blank" rel="noopener" class="rank-math-link">OxyMonster </a>is a plugin for <a aria-label="Oxygen Builder (opens in a new tab)" href="https://apexweb.io/oxygen-builder-review/" target="_blank" rel="noopener" class="rank-math-link">Oxygen Builder</a> that allows you to input part or all of a massive CSS utility class framework based on <a href="https://tailwindcss.com/" target="_blank" aria-label="Tailwind (opens in a new tab)" rel="noopener" class="rank-math-link">Tailwind</a> into Oxygen quickly, easily, and modularly. This is similar to what <a aria-label="OxyNinja  (opens in a new tab)" href="https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/" target="_blank" rel="noopener" class="rank-math-link">OxyNinja </a>does with its hybrid framework of <a href="https://getuikit.com/" target="_blank" aria-label="UIkit (opens in a new tab)" rel="noopener" class="rank-math-link">UIkit</a> and Tailwind.</p>



<p>I was fortunate to have the privilege of testing OxyMonster a few days before release, and this review will be largely based on my experiences with the beta release, though I do now have the full release version. Thank you, OxyMonster, team for the free key and the opportunity to test before release and give feedback!</p>



<h2>Framework Basics</h2>



<p>So what is a <a href="https://en.wikipedia.org/wiki/CSS_framework" target="_blank" aria-label="CSS framework (opens in a new tab)" rel="noopener" class="rank-math-link">CSS framework</a> anyway? Basically, it's a huge list of CSS utility classes for efficient and consistent design. A utility class is a class meant to do one specific thing. You can sort of think of them like building blocks. You'll take a div for example, and add a class for padding, one for a shadow, one for rounded borders, and one for a background color and hey, suddenly you've got a card!</p>



<p>OxyMonster adds classes for pretty much anything you can think of. Anything from padding, margins, shadows, borders, colors, widths, fonts, alignments, Flexbox, CSS grid layouts, and so SO many more. Oxymonster is a super-comprehensive framework and you will seriously find classes for virtually everything. If you can think of something to make a utility class for there's a 99.999% chance that OxyMonster has already done it.</p>



<p>I recommend taking a look at the <a href="https://oxymonster.com/help/cheatsheet/" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">cheat sheet</a> if you'd like to see a full list of all the classes available broken down into categories. Since it is very heavily based on Tailwind you can also use <a aria-label="Tailwind&#039;s documentation (opens in a new tab)" href="https://tailwindcss.com/docs/installation" target="_blank" rel="noopener" class="rank-math-link">Tailwind's documentation</a> if you need a better understanding of anything as their documentation is quite thorough.</p>



<p><a href="https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/#core-framework" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">Just like in OxyNinja</a>, the classes for CSS grid layouts are extremely powerful and I highly recommend taking a look at <a href="https://tailwindcss.com/docs/grid-template-columns" target="_blank" aria-label="Tailwind&#039;s documentation on CSS grid layouts (opens in a new tab)" rel="noopener" class="rank-math-link">Tailwind's documentation on CSS grid layouts</a> to see what you can do with them. You won't regret it, I promise!</p>



<h2>Modular Framework</h2>



<p>OxyMonster does something interesting in that the framework comes in a modular form. There is a "base framework" which will do 99% of what you need to do, then the rest of the framework is broken down into many different subsections that you can add as you need them. </p>



<p>The base framework is just over 500 classes which is a lot on its own, but the full framework is almost <strong>1400 </strong>classes. This is basically the entirety of what you would expect if you were using the full Tailwind framework.</p>



<p>If you're like me, when testing the plugin you might be tempted to add the entire framework all at once. <strong>Don't do that.</strong> I learned the hard way that the full framework is so big that the Google Chrome browser can't handle loading them all in the Oxygen Builder editor. This issue is known by the OxyMonster team, but there isn't much they can do about it as it is out of their hands and is a browser limitation. The team has since added a big warning to the framework module installation page explaining this. If you're using Firefox it should be able to handle the additional classes, but I don't recommend it anyway.</p>



<p>Long story short, you should start with the base framework and only add things if and when you need them.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="806" height="1024" src="https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-806x1024.png" alt="OxyMonster Modular Framework Installation" class="wp-image-543" title="OxyMonster Modular Framework Installation" srcset="https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-806x1024.png 806w, https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-236x300.png 236w, https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-768x975.png 768w, https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-1209x1536.png 1209w, https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH-1613x2048.png 1613w, https://apexweb.io/wp-content/uploads/2020/10/Wb1K90o0WH.png 1737w" sizes="(max-width: 806px) 100vw, 806px" /></figure>



<h2>Bulk Class Merging</h2>



<p>I have to say, this feature is <strong>awesome</strong>. One of the biggest downsides to using a low-level utility framework like OxyMonster / Tailwind is that you sometimes end up with a <strong>ton </strong>of classes on a single element and often end up repeating that same massive list of classes across several elements. OxyMonster's class merging feature gives you a super easy solution to that.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="355" src="https://apexweb.io/wp-content/uploads/2020/10/chrome_4mMRejq5uv-1024x355.png" alt="OxyMonster Class Merging" class="wp-image-534" title="OxyMonster Class Merging" srcset="https://apexweb.io/wp-content/uploads/2020/10/chrome_4mMRejq5uv-1024x355.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/chrome_4mMRejq5uv-300x104.png 300w, https://apexweb.io/wp-content/uploads/2020/10/chrome_4mMRejq5uv-768x266.png 768w, https://apexweb.io/wp-content/uploads/2020/10/chrome_4mMRejq5uv.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>In three very short steps you can combine all of the classes on an element into one class with a new name. </p>



<p>In the above example, I was making a simple card entirely with utility classes and the list looked something like "p-5, bg-primary, color-tertiary, rounded-md, shadow-md". Previously I was dealing with this by quickly copying all my classes from one element to another using Hydrogen's Copy Styles feature, but that still adds a ton of redundant classes and isn't best practice.</p>



<p>Using OxyMonster's merging feature I was able to instantly merge all five of those classes into one class that I called "mycard". Now I can simply put that one class on all the rest of my cards instead of a list of five. It's very common to have elements with this many classes on them and you'll frequently find yourself having twice as many in some cases using any utility class framework, so this merging feature is actually really awesome in my opinion.</p>



<h2>Pros and Cons</h2>



<h3>Pros</h3>



<ul><li>Heavily based on Tailwind, and Tailwind is great</li><li><strong>Huge </strong>amount of classes</li><li>Classes can be installed modularly</li><li>Class merge feature is super useful and conducive to good design practices</li><li>Class options are extremely comprehensive<ul><li>There's something for everything</li></ul></li><li>Installing the base framework and subsequent modules is super quick and straightforward</li><li>Lifetime license deals</li></ul>



<h3>Cons</h3>



<ul><li>There are literally so many classes that you can break the Oxygen Editor in Chrome<ul><li>This is a Chrome limitation though. Not really OxyMonster's fault</li></ul></li><li>It can take a little bit of time to get comfortable using it while you're trying to learn the syntax<ul><li>Feels great once you've got it down though!</li></ul></li><li>It's a brand new product and there are always risks associated with that</li></ul>



<h2>Pricing</h2>



<p>The CSS Framework is currently available for $69.99 as a standalone or $199.99 bundled with OxyMonster's design sets. Both of these options are lifetime deals. Any users of OxyMade can get the OxyMonster CSS Framework for free via a coupon you should have received via email. </p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="478" src="https://apexweb.io/wp-content/uploads/2020/10/chrome_Yd69TrNHGR-1024x478.png" alt="OxyMonster Pricing" class="wp-image-547" title="OxyMonster Pricing" srcset="https://apexweb.io/wp-content/uploads/2020/10/chrome_Yd69TrNHGR-1024x478.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/chrome_Yd69TrNHGR-300x140.png 300w, https://apexweb.io/wp-content/uploads/2020/10/chrome_Yd69TrNHGR-768x359.png 768w, https://apexweb.io/wp-content/uploads/2020/10/chrome_Yd69TrNHGR.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Conclusion</h2>



<p>Ultimately, I think OxyMonster is great. The framework is basically Tailwind which is tried and true and highly acclaimed. It has pretty much any utility class you could ever need. I absolutely love the class merging feature, and even though it's perhaps one of the minor features of the plugin, I think it's one of the best things it adds to Oxygen.</p>



<p>The pricing is competitive and is currently in the form of a lifetime license which is always nice.</p>



<p>The big question I'm expecting to start seeing is "Should I use <a aria-label="OxyMonster  (opens in a new tab)" href="https://oxymonster.com/" target="_blank" rel="noopener" class="rank-math-link">OxyMonster </a>or <a aria-label="OxyNinja (opens in a new tab)" href="https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/" target="_blank" rel="noopener" class="rank-math-link">OxyNinja</a>", and that question is going to be tough to answer. I think if you're experienced with Tailwind then OxyMonster is a no-brainer as you're going to feel right at home. The same goes for if you're just looking for a full-fledged CSS framework. If CSS frameworks are a newer concept for you or you're looking for a more user-friendly one I think OxyNinja might be the better choice. I'll probably write a whole post comparing the two at some point, so stay tuned for that!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/oxymonster-css-framework-for-oxygen-builder-review/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>OxyNinja Core Plugin for Oxygen Review</title>
		<link>https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/</link>
					<comments>https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/#comments</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Sun, 18 Oct 2020 22:32:56 +0000</pubDate>
				<category><![CDATA[Oxygen Builder]]></category>
		<category><![CDATA[Reviews]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=349</guid>

					<description><![CDATA[What is OxyNinja Core? OxyNinja is an importable design set for Oxygen Builder with one major feature that sets it apart from the rest. On top of the usual pre-built sections that you're accustomed to finding in a design-set, you get the "OxyNinja Core Framework", which is a CSS framework that can completely change your [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-3223a6d2 " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
													<span class="uag-toc__collapsible-wrap">			<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
			</span>
												</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>What is OxyNinja Core?</h2>



<p><a href="https://oxyninja.com/core/" class="rank-math-link" target="_blank" rel="noopener">OxyNinja </a>is an importable design set for <a href="https://apexweb.io/oxygen-builder-review/" class="rank-math-link">Oxygen Builder</a> with one major feature that sets it apart from the rest. On top of the usual pre-built sections that you're accustomed to finding in a design-set, you get the "OxyNinja Core Framework", which is a CSS framework that can completely change your Oxygen workflow if you choose to take advantage of it.</p>



<h2>Core Framework</h2>



<p>OxyNinja's Core Framework is a CSS framework similar to something like <a aria-label=" (opens in a new tab)" rel="noopener" href="https://tailwindcss.com/" target="_blank" class="rank-math-link">Tailwind </a>and <a aria-label=" (opens in a new tab)" rel="noopener" href="https://getuikit.com/" target="_blank" class="rank-math-link">UIkit</a>. Basically, it gives you a whole bunch of <a aria-label=" (opens in a new tab)" rel="noopener" href="https://oxyninja.com/core/documentation/" target="_blank" class="rank-math-link">pre-made utility classes</a> to help you rapidly build your own designs. If you don't know what <a aria-label=" (opens in a new tab)" rel="noopener" href="https://css-irl.info/a-year-of-utility-classes/" target="_blank" class="rank-math-link">utility classes</a> are, they are CSS classes that generally do one thing. The classes in OxyNinja cover things like <a aria-label="CSS grid (opens in a new tab)" rel="noopener" href="https://learncssgrid.com/" target="_blank" class="rank-math-link">CSS grid</a> column layouts, padding, margins, colors, and more.<br><br>My favorite part of the Core Framework is the classes for making CSS grids. So, imagine you want a row of four columns. Instead of using Oxygen's flexbox column system, you can simply create a div to represent the row, then add three more divs inside to represent the columns. Add the class "c-columns-4" to the row div and instantly your three inner divs will become CSS grid columns. Want to add a medium-sized gap between all the columns? Add "c-columns-gap-m". Using classes like this is a great way to easily keep your designs consistent, which is one of the most important aspects of good design.<br><br>Let's take it up another notch. Say you want your columns to become rows of two columns on tablets and you want them to become rows of one column for phones. Add "c-columns-l-2" (large - 2 columns) and "c-columns-s-1" (small - 1 column). It's THAT easy. This is the kind of power you can get out of using any of the major CSS frameworks, but OxyNinja is currently the only way to get an awesome framework like this effortlessly imported into OxyGen.<br><br>Here's another quick example. Say you have two columns and you want the left column to be two parts and the right column to be three parts. Add "c-columns-2-3". Done.</p>



<figure class="wp-block-image size-large wplightbox"><img loading="lazy" width="1024" height="467" src="https://apexweb.io/wp-content/uploads/2020/10/image-5-1024x467.png" alt="OxyNinja Column Parts" class="wp-image-456" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-5-1024x467.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-5-300x137.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-5-768x350.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-5.png 1258w" sizes="(max-width: 1024px) 100vw, 1024px" title="OxyNinja Core Plugin for Oxygen Review 5"></figure>



<p>For anyone interested in the Core Framework I highly recommend watching this video from their product page. It's an example of how quickly you can throw together a design using the utility classes provided with OxyNinja, and it's what sold me on it.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="OxyNinja - Quick Designing in Core Framework" width="500" height="281" src="https://www.youtube.com/embed/VWEi8RZc0eM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<h2>Pre-built Sections</h2>



<p>There's only so much to say about pre-built sections, but what I can say is that they are nice looking, efficiently built, and easily modifiable.</p>



<h3>The Basics</h3>



<p>The designs are all very attractive and consistent. They are all built using OxyNinja's Core Framework which makes them super easy to modify by just swapping out CSS classes. For example, turning this section...</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="416" src="https://apexweb.io/wp-content/uploads/2020/10/image-6-1024x416.png" alt="image 6" class="wp-image-458" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-6-1024x416.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-6-300x122.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-6-768x312.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-6.png 1512w" sizes="(max-width: 1024px) 100vw, 1024px" title="OxyNinja Core Plugin for Oxygen Review 6"></figure>



<p>into this section that I'm using for a project...</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="488" src="https://apexweb.io/wp-content/uploads/2020/10/image-7-1024x488.png" alt="image 7" class="wp-image-459" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-7-1024x488.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-7-300x143.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-7-768x366.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-7.png 1536w" sizes="(max-width: 1024px) 100vw, 1024px" title="OxyNinja Core Plugin for Oxygen Review 7"></figure>



<p>only took a couple of minutes using the Core Framework classes.</p>



<h3>Import From Live Demo</h3>



<p>A really cool feature of OxyNinja's prebuilt sections is their unique live demo and import system. You can visit the <a aria-label="live demo page here (opens in a new tab)" href="https://core.oxyninja.com/demo/" target="_blank" rel="noopener" class="rank-math-link">live demo page here</a>, then click the copy button when previewing any section, and then click the OxyNinja button in your Oxygen editor and it will instantly add the section to your page in Oxygen Builder. In my opinion, this is a huge upgrade over the built-in design set system (which you can still use if you'd rather do that). It's hard to really tell what the sections are like from the small screenshots in the design set UI, so this makes it a lot easier to pick out the right section for the job.</p>



<figure class="wp-block-video"><video controls src="https://apexweb.io/wp-content/uploads/2020/10/J5ZXVJKiDV.mp4"></video></figure>



<h3>Mega Menus</h3>



<p>If you've ever tried to make a mega menu in Oxygen, you'll know that it's a bit of a pain to do. Fortunately, OxyNinja comes with a few different pre-built mega menus that you can import and easily customize for your sites.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="224" src="https://apexweb.io/wp-content/uploads/2020/10/image-9-1024x224.png" alt="OxyNinja Mega Menu 1" class="wp-image-480" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-9-1024x224.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-9-300x66.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-9-768x168.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-9-1536x336.png 1536w, https://apexweb.io/wp-content/uploads/2020/10/image-9.png 1919w" sizes="(max-width: 1024px) 100vw, 1024px" title="OxyNinja Core Plugin for Oxygen Review 8"></figure>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="295" src="https://apexweb.io/wp-content/uploads/2020/10/image-10-1024x295.png" alt="OxyNinja Mega Menu 2" class="wp-image-481" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-10-1024x295.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/image-10-300x86.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-10-768x221.png 768w, https://apexweb.io/wp-content/uploads/2020/10/image-10-1536x442.png 1536w, https://apexweb.io/wp-content/uploads/2020/10/image-10.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" title="OxyNinja Core Plugin for Oxygen Review 9"></figure>



<h2>Pricing</h2>



<p>OxyNinja Core has only one pricing option which is a lifetime, unlimited use license for $99.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="612" height="650" src="https://apexweb.io/wp-content/uploads/2020/10/image-8.png" alt="image 8" class="wp-image-472" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-8.png 612w, https://apexweb.io/wp-content/uploads/2020/10/image-8-282x300.png 282w" sizes="(max-width: 612px) 100vw, 612px" title="OxyNinja Core Plugin for Oxygen Review 10"></figure>



<h2>Things I'd like to see in the future</h2>



<ul><li>More sections for cool JS effects using various JS libraries<ul><li>Similar to some of the things offered by <a href="https://www.dezign4fun.com/downloads/unlimited-elements/" class="rank-math-link" target="_blank" rel="noopener">Design4Fun's Unlimited Elements pack</a></li></ul></li><li>Improved support response times<ul><li>This was once one of the strong points of OxyNinja, but they got a bit overwhelmed. According to the developer, solving this is their top priority right now</li></ul></li><li>Extensions to the Core Framework<ul><li>It already has all of the most important things, but I'd love to see it continue to be extended to include many of the additional things that frameworks like UIkit and Tailwind add.</li></ul></li></ul>



<h2>Conclusion</h2>



<p>I think OxyNinja is one of the best, if not THE best companion plugin for Oxygen Builder. The only other plugin that I find this essential to the Oxygen experience is <a aria-label="Hydrogen (opens in a new tab)" rel="noopener" href="https://apexweb.io/hydrogen-plugin-review/" target="_blank" class="rank-math-link">Hydrogen</a>. The pre-made sections are great, but for me, the real value comes in the CSS framework. It has become an absolutely integral part of my workflow and has made it possible for me to throw designs together so much faster. For a lifetime price of $99 I honestly can't see a reason not to get it if you have the money in your budget. It only has to save a few hours to pay for itself and it will save you a ton of time in the long run.</p>



<p>As a testament to how much I like OxyNinja, you might notice that this blog post single is actually based on one of the sections from the OxyNinja design set, and the utility classes are used widely across my site.</p>



<h3>Where's the Cons / Dislikes section?</h3>



<p>Simply put, there isn't really anything I dislike about OxyNinja Core Framework. There are things I'd like to see added in the future as I mentioned above, but nothing that's truly negative about the product in its current form. I think the pre-made designs are great and the framework is phenomenal. Note: There is no affiliate program for OxyNinja, so you can be sure that this is an entirely genuine opinion!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Hoverify Review</title>
		<link>https://apexweb.io/hoverify-review/</link>
					<comments>https://apexweb.io/hoverify-review/#respond</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Thu, 15 Oct 2020 20:17:27 +0000</pubDate>
				<category><![CDATA[Reviews]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=406</guid>

					<description><![CDATA[What is Hoverify? Hoverify is an extension for Chromium-based browsers that is a sort of upgrade to the standard dev tools. Hoverify has a few different major features so I'll split everything up in a way that makes sense. Features Inspect Tool This is the "bread and butter" of Hoverify. You can enable the inspector [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-530b4099 " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
													<span class="uag-toc__collapsible-wrap">			<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
			</span>
												</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>What is Hoverify?</h2>



<p><a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify</a> is an extension for <a href="https://www.chromium.org/" class="rank-math-link" target="_blank" rel="noopener">Chromium-based</a> browsers that is a sort of upgrade to the standard dev tools. Hoverify has a few different major features so I'll split everything up in a way that makes sense.</p>



<h2>Features</h2>



<h3>Inspect Tool</h3>



<p>This is the "bread and butter" of <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify</a>. You can enable the inspector by clicking on the extension icon and selecting it in the dropdown or by using the ctrl+shift+1 keybind. the inspector tool will display all of the relevant information about any element that you hover over in your browser such as attributes, properties, and selectors. If you click on the element it will select it and the context menu will become its own independent little window that you can drag around and work with. From there you can easily edit any of the attributes, properties, etc and you can even have multiple inspectors open at a time.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="917" height="812" src="https://apexweb.io/wp-content/uploads/2020/10/image.png" alt="Hoverify Inspect Tool" class="wp-image-415" srcset="https://apexweb.io/wp-content/uploads/2020/10/image.png 917w, https://apexweb.io/wp-content/uploads/2020/10/image-300x266.png 300w, https://apexweb.io/wp-content/uploads/2020/10/image-768x680.png 768w" sizes="(max-width: 917px) 100vw, 917px" title="Hoverify Review 11"></figure>



<h4>Guidelines</h4>



<p>Clicking the # button in the mini-menu that pops up when you're using the inspector will enable guidelines that help visualize the alignment of elements on your page.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="516" height="188" src="https://apexweb.io/wp-content/uploads/2020/10/image-1.png" alt="Hoverify Guidelines" class="wp-image-419" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-1.png 516w, https://apexweb.io/wp-content/uploads/2020/10/image-1-300x109.png 300w" sizes="(max-width: 516px) 100vw, 516px" title="Hoverify Review 12"></figure>



<h4>Grid View</h4>



<p>Toggling the grid will highlight the edges of every element on the screen. This is one of my favorite features of <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify </a>as it is super helpful in solving the "white gap" issue by making it much more obvious which elements are too wide.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="572" src="https://apexweb.io/wp-content/uploads/2020/10/chrome_vmXrozrU1L-1024x572.png" alt="chrome vmXrozrU1L" class="wp-image-444" srcset="https://apexweb.io/wp-content/uploads/2020/10/chrome_vmXrozrU1L-1024x572.png 1024w, https://apexweb.io/wp-content/uploads/2020/10/chrome_vmXrozrU1L-300x168.png 300w, https://apexweb.io/wp-content/uploads/2020/10/chrome_vmXrozrU1L-768x429.png 768w, https://apexweb.io/wp-content/uploads/2020/10/chrome_vmXrozrU1L.png 1234w" sizes="(max-width: 1024px) 100vw, 1024px" title="Hoverify Review 13"></figure>



<h4>Text Editor</h4>



<p>This simply allows you to quickly and easily edit the contents of any text elements on the screen. Nothing too special about this one, but it could be a nice way to preview the text you want to place somewhere without having to actually update the page.</p>



<h4>Search Elements</h4>



<p>Using the search bar in the <a class="rank-math-link" href="https://a.paddle.com/v2/click/53732/122256?link=2314" target="_blank" rel="noopener">Hoverify</a> mini-menu you can search any element ID or class to quickly select it.</p>



<h4>Hide and Delete</h4>



<p>Clicking the trash can icon enables the hide/delete mode which lets you click on elements to hide or delete them for debugging.</p>



<h4>Upload to Codepen</h4>



<p>This feature is honestly just really cool. If you click the <a href="https://codepen.io/" class="rank-math-link" target="_blank" rel="noopener">Codepen </a>logo icon in the inspector it will create a Codepen with all of the HTML and CSS necessary to create the element you have selected.</p>



<h3>Color Dropper</h3>



<p>This was one of the major selling points for me. I recently moved from Firefox to Chrome, and not having the color dropper from Firefox's dev tools was driving me insane. This adds that feature to chrome and can be quickly accessed from the extension menu or by the ctrl+shift+2 keybind.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="559" height="394" src="https://apexweb.io/wp-content/uploads/2020/10/image-3.png" alt="Hoverify Color Dropper" class="wp-image-424" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-3.png 559w, https://apexweb.io/wp-content/uploads/2020/10/image-3-300x211.png 300w" sizes="(max-width: 559px) 100vw, 559px" title="Hoverify Review 14"></figure>



<h3>Assets View</h3>



<p>The assets view gives you a nice view that lists all of the assets used on the page and is separated into images, SVGs, and videos. From there you can quickly and easily download individual files or the entire list.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="500" height="508" src="https://apexweb.io/wp-content/uploads/2020/10/image-4.png" alt="Hoverify Asset View" class="wp-image-425" srcset="https://apexweb.io/wp-content/uploads/2020/10/image-4.png 500w, https://apexweb.io/wp-content/uploads/2020/10/image-4-295x300.png 295w" sizes="(max-width: 500px) 100vw, 500px" title="Hoverify Review 15"></figure>



<h3>Responsive View</h3>



<p>When I bought <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify </a>I didn't even know this feature existed and it was a super pleasant surprise. This feature allows you to preview your site in many different viewport sizes all at the same time and lets you easily add any additional sizes you'd like to preview.</p>



<figure class="wp-block-video"><video controls src="https://apexweb.io/wp-content/uploads/2020/10/9L2P6uPdTR.mp4"></video></figure>



<h3>Built With View</h3>



<p>This one really suprised me. It does a really good job of finding almost everything used to make a site. It finds things like WordPress plugins / themes, JavaScript libraries, CDNs, hosting providers, SSL certificate sources, etc.</p>



<figure class="wp-block-video"><video controls src="https://apexweb.io/wp-content/uploads/2020/10/eFYsAZX3jY.mp4"></video></figure>



<h3>Screenshot Tool</h3>



<p>The screenshot tool simply takes a quick screenshot of the viewport in your current tab and can also quickly take a screenshot of each tab you have open.</p>



<h2>Pricing</h2>



<p>Hoverify's only price point is an <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">$18 lifetime</a> license. This license can be tied to up to 2 web browser accounts. If, for example, you use the same google account on several different computers it will work on all those computers. You will only run into the license cap if you're trying to use it on totally separate accounts.</p>



<p>We currently have a 30% off discount code (<strong>icp3Gl</strong>) courtesy of <a href="https://www.facebook.com/groups/wpdevdesign" class="rank-math-link" target="_blank" rel="noopener">Sridhar Katakam's Facebook group</a>!</p>



<h2>Likes</h2>



<ul><li>Nice UI</li><li>Everything is quick and easy</li><li>Everything feels very polished</li><li>Keybinds are useful</li><li>Makes up for some features I missed from Firefox</li><li>Really nice value for $18 lifetime</li></ul>



<h2>Dislikes</h2>



<ul><li>Technically you can get most, if not all, of these features for free through the standard dev tools and through a bunch of different free extensions</li><li>I would like to see intelli-sense added to the CSS editor</li><li>I've found the keybinds to be slightly finicky occasionally</li></ul>



<h2>Conclusion</h2>



<p>Ultimately <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify </a>doesn't give you much that you can't do with a combination of Chrome's dev tools and a bunch of free extensions; however, it does put all of these nice features in one easily and quickly accessible location and it does all of those things very well. If it were more expensive I might be a little more skeptical, but $18 for lifetime is dirt cheap and it feels like a great value to me.</p>



<h3>Affiliate Link</h3>



<p>I want to make it clear that I DO have an affiliate link for this product now. Each link to the <a href="https://a.paddle.com/v2/click/53732/122256?link=2314" class="rank-math-link" target="_blank" rel="noopener">Hoverify </a>page on this review is an affiliate link. If you do decide to purchase Hoverify and use&nbsp;<a aria-label=" (opens in a new tab)" rel="noopener" href="https://a.paddle.com/v2/click/53732/122256?link=2314" target="_blank" class="rank-math-link">my affiliate link</a>&nbsp;to support me I highly appreciate it. I do not write any of my content with the intention of making money. I simply include these affiliate links because I can and I might as well see if I can get a small amount of free money out of it. I hope with this in mind you are still able to trust my reviews, and I promise that my written opinions are always the honest truth and I would never attempt to lead my viewers into a purchase they might regret.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/hoverify-review/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Hydrogen Plugin for Oxygen Builder Review</title>
		<link>https://apexweb.io/hydrogen-plugin-review/</link>
					<comments>https://apexweb.io/hydrogen-plugin-review/#respond</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Wed, 30 Sep 2020 18:34:50 +0000</pubDate>
				<category><![CDATA[Oxygen Builder]]></category>
		<category><![CDATA[Reviews]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=347</guid>

					<description><![CDATA[What is Hydrogen? Hydrogen Pack by Clean Plugins is a pack of features for Oxygen Builder to improve quality of life and speed up your workflow. These are features to improve your life as the developer/designer, and not something the client or users will ever see. As Hydrogen is a pack of a bunch of [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-58af2111 " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
													<span class="uag-toc__collapsible-wrap">			<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
			</span>
												</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>What is Hydrogen?</h2>



<p><a href="https://r.freemius.com/5819/3619902/" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">Hydrogen Pack</a> by <a href="https://r.freemius.com/5819/3619902/" class="rank-math-link" target="_blank" rel="noopener">Clean Plugins</a> is a pack of features for <a href="https://oxygenbuilder.com/" class="rank-math-link" target="_blank" rel="noopener">Oxygen Builder</a> to improve quality of life and speed up your workflow. These are features to improve your life as the developer/designer, and not something the client or users will ever see. As Hydrogen is a pack of a bunch of smaller, mostly unrelated features, I am going to review each feature separately.</p>



<h2>Effects On Performance</h2>



<p>Hydrogen did not add any bloat to the front end at all and thus has no effect on the end-user. I did not notice any discernable difference in backend load times and performance either.</p>



<h2>Features</h2>



<h3>Sandbox Mode</h3>



<p>This is one of my favorite parts of Hydrogen. It adds a simple switch to toggle Sandbox mode. Once sandbox mode is enabled you can freely make changes to your site without any of the changes affecting the live site. Users will still be able to open the site and see it the way it is meant to be seen. If you decide you don't like the changes you made in sandbox mode you can safely wipe them and go back to live. If you're happy with your changes you can simply drag the slider to deploy your changes and everything will be instantly applied to the live site. You can even generate a link to the sandbox version to send to a client for approval before sending it to live.</p>



<p>This sounds like a risky aspect to entrust to a plugin, but I haven't run into any bugs or issues with it yet, and it has been extremely useful for publishing updates to my site after going live.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Hydrogen Pack - Sandbox mode" width="500" height="281" src="https://www.youtube.com/embed/g44i0WwWdJI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<h3>Copy Styles</h3>



<p>This allows you to copy both inline styles and CSS classes from one element to another using the right-click menu or key binds. I find this feature extremely useful and I used it a lot throughout the redesign of my website. I use a lot of utility classes, and this makes applying them to several elements insanely quick.</p>



<h3>Copy Elements</h3>



<p>This allows you to copy entire elements from one page to elsewhere on the page, another page, or even onto an entirely different website (using Oxygen of course). I found this equally as useful as I did the Copy Styles feature and didn't experience any issues with it.</p>



<h3>Keyboard Shortcuts</h3>



<p>This one is pretty self-explanatory. It adds key binds for just about all of the actions in Oxygen that would make sense to have a key bind for. The most common ones are set by default and the rest come unbound, but it comes with an easy interface to set up whatever binds you prefer. This pairs great with the Copy Styles and Copy Elements features.</p>



<h3>Right-Click Menu</h3>



<p>This adds a lot of the most commonly used buttons to a quickly and easily accessible right-click menu. It includes things like Copy, Paste, Duplicate, Wrap With Div, Add Conditions, etc. I used this a lot and found it very useful.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="580" height="438" src="https://apexweb.io/wp-content/uploads/2020/09/chrome_4zggibHHUC.png" alt="Hydrogen Plugin for Oxygen Builder Right-Click Menu" class="wp-image-354" title="Hydrogen Right-Click Menu" srcset="https://apexweb.io/wp-content/uploads/2020/09/chrome_4zggibHHUC.png 580w, https://apexweb.io/wp-content/uploads/2020/09/chrome_4zggibHHUC-300x227.png 300w" sizes="(max-width: 580px) 100vw, 580px" /></figure>



<h3>Structure Panel Width</h3>



<p>This allows you to adjust the width of Oxygen's Structure panel. I haven't felt the need to adjust it, but I tested it for the sake of testing and it works fine.</p>



<h3>Compact Mode</h3>



<p>Compact mode removes some space and padding from the structure panel to make it fit better in smaller screens. I leave it on all the time as it helps avoid the scroll bar when nesting several elements.</p>



<h3>Element Icons</h3>



<p>This simply adds icons for each element type in the structure panel. It's not a huge deal, but it is nice having the icons. </p>



<figure class="wp-block-image size-large"><img loading="lazy" width="297" height="183" src="https://apexweb.io/wp-content/uploads/2020/09/chrome_Z8GqeHkYTh.png" alt="Hydrogen Plugin for Oxygen Builder Element Icons" class="wp-image-353" title="Hydrogen Element Icons"/></figure>



<h3>Disable Edit Locking</h3>



<p>I recommend being careful with this one. I use it personally, but the edit locking feature is there for a reason. This removes the warning that prevents you from opening multiple Oxygen editors at the same time. Having multiple open at the same time can result in loss of work if you accidentally save the wrong one.</p>



<p>I turned this on because I was tired of Oxygen incorrectly thinking I already had another editor open and this feature allowed me to bypass that.</p>



<h2>Pricing</h2>



<p><a href="https://r.freemius.com/5819/3619902/" class="rank-math-link" target="_blank" rel="noopener">Pricing for Hydrogen</a> is pretty reasonable. All options are lifetime licenses. $29.99 for one site, $39.99 for five sites, and $59.99 for unlimited. If I were only planning to create one website I don't think I would personally find it worth it to buy a license unless that one site was going to be very large and need frequent updates. As someone who intends to use Oxygen for almost all client sites from now on, the unlimited license feels like a steal.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="502" src="https://apexweb.io/wp-content/uploads/2020/09/chrome_yx8sJ1zEiF-1024x502.png" alt="Hydrogen Plugin for Oxygen Builder Pricing" class="wp-image-356" title="Hydrogen Plugin Pricing" srcset="https://apexweb.io/wp-content/uploads/2020/09/chrome_yx8sJ1zEiF-1024x502.png 1024w, https://apexweb.io/wp-content/uploads/2020/09/chrome_yx8sJ1zEiF-300x147.png 300w, https://apexweb.io/wp-content/uploads/2020/09/chrome_yx8sJ1zEiF-768x376.png 768w, https://apexweb.io/wp-content/uploads/2020/09/chrome_yx8sJ1zEiF.png 1514w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>Concerns</h2>



<p>It's worth noting that most of these features could theoretically be added natively to Oxygen someday and I wouldn't be surprised if they are. Fortunately, the price is pretty low though so I won't really feel like I wasted my money considering how much value it is adding for now.</p>



<p>While I really enjoy the sandbox mode, the concept of entrusting something so crucial and potentially dangerous to a relatively young and inexpensive plugin can be a bit unnerving. The good news is, the developer of Hydrogen is actually a member of the official Oxygen Team and in the 3 months this feature has been live, an issue has never been reported. I trust it, but my recommendation is to make a quick backup before making changes in sandbox mode. It's always best to be careful!</p>



<h2>Conclusion</h2>



<p>I really enjoy <a href="https://r.freemius.com/5819/3619902/" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">Hydrogen </a>and I wholeheartedly recommend it! I really haven't had any negative experiences with it and it definitely improves my workflow. The sandbox mode and copy features are game-changing and I don't think I could ever stop using Hydrogen unless Oxygen added these features natively.</p>



<h3>Affiliate Link</h3>



<p>I want to make it clear that I DO have an affiliate link for this product now. Each link to the Hydrogen page on this review is an affiliate link. If you do decide to purchase Hydrogen and use <a aria-label=" (opens in a new tab)" href="https://r.freemius.com/5819/3619902/" target="_blank" rel="noopener" class="rank-math-link">my affiliate link</a> to support me I highly appreciate it. I do not write any of my content with the intention of making money. I simply include these affiliate links because I can and I might as well see if I can get a small amount of free money out of it. I hope with this in mind you are still able to trust my reviews, and I promise that my written opinions are always the honest truth and I would never attempt to lead my viewers into a purchase they might regret.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/hydrogen-plugin-review/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Oxygen Builder Review</title>
		<link>https://apexweb.io/oxygen-builder-review/</link>
					<comments>https://apexweb.io/oxygen-builder-review/#comments</comments>
		
		<dc:creator><![CDATA[Alec Gall]]></dc:creator>
		<pubDate>Tue, 29 Sep 2020 16:19:23 +0000</pubDate>
				<category><![CDATA[Oxygen Builder]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[oxygen]]></category>
		<category><![CDATA[review]]></category>
		<guid isPermaLink="false">https://apexweb.io/?p=258</guid>

					<description><![CDATA[Hey everyone! I have been heavily using Oxygen Builder for over a month now and I think it's time to share my opinions. The Basics Oxygen builder is forever tied in with other names like Elementor, Beaver Builder, Divi, etc. but it really isn't the same thing. Oxygen feels a lot more like coding with [&#8230;]]]></description>
										<content:encoded><![CDATA[<div class="uag-toc__entry-content"></div>
<p>Hey everyone! I have been heavily using <a href="https://oxygenbuilder.com" target="_blank" aria-label="Oxygen Builder (opens in a new tab)" rel="noopener" class="rank-math-link">Oxygen Builder</a> for over a month now and I think it's time to share my opinions.</p>


				<div class="wp-block-uagb-table-of-contents  uagb-toc__align-left uagb-toc__columns-1   uagb-block-c6661a5c " 
					data-scroll= "1"
					data-offset= "30"
					data-delay= "800"
				>
				<div class="uagb-toc__wrap">
					<div class="uagb-toc__title-wrap">
						<div class="uagb-toc__title">
						Table Of Contents						</div>
													<span class="uag-toc__collapsible-wrap">			<svg xmlns="https://www.w3.org/2000/svg" viewBox= "0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg>
			</span>
												</div>
					<div class="uagb-toc__list-wrap"></div>
					<p class='uagb_table-of-contents-placeholder'></p>
				</div>
			</div>
			


<h2>The Basics</h2>



<p>Oxygen builder is forever tied in with other names like <a href="https://elementor.com/" target="_blank" rel="noopener">Elementor</a>, <a href="https://www.wpbeaverbuilder.com/" target="_blank" rel="noopener">Beaver Builder</a>, <a href="https://www.elegantthemes.com/gallery/divi/" target="_blank" rel="noopener">Divi</a>, etc. but it really isn't the same thing. Oxygen feels a lot more like coding with a GUI than using a conventional page builder. The amount of control you have over everything is so much better than with any other builder. Other builders give you a lot of drag and drop components to create the content you want. These components are usually filled with lots of baked-in features and options, but it can be a bit tricky to change them in a way that the builder developers didn't intend. Oxygen is a bit different in that it gives you all the tools you need to make that component instead. Using the tools they give you, you can build it exactly the way you want it. This allows you to make the perfect design rather than one that's just close enough.</p>



<h2>How It Works</h2>



<p>Oxygen gives you some <a href="https://www.youtube.com/watch?v=zEIEdWdLrGc" target="_blank" rel="noopener">very basic drag and drop components</a> such as sections, divs, columns, text, images, etc. They also provide a few of what they call "helpers". These are a little bit more like what you see in a lot of page builders, but they are less feature-filled and much more flexible. These include things like a <a href="https://www.youtube.com/watch?v=fmnj05G-_tc" target="_blank" rel="noopener">header-builder</a>, <a href="https://www.youtube.com/watch?v=FNxCFeD4oBs" target="_blank" rel="noopener">slider</a>, <a href="https://www.youtube.com/watch?v=DHX-Q9EDF_0" target="_blank" rel="noopener">tabs</a>, and a <a href="https://www.youtube.com/watch?v=uf2pnSdbV2M" target="_blank" rel="noopener">repeater</a>.</p>



<p>The way you create your pages (and templates) is much more similar to the way that you would do so manually with code. Rather than inserting made-up builder lingo modules, we use divs. Just like we would if we were coding from scratch, we start by building a sort of framework out of divs then add our content inside. From there you can adjust every little thing about each element easily from the interface. If there's something less typical that you want to do, you can easily add custom CSS to the element as well.</p>



<p>Continuing with the more realistic development practices, Oxygen allows you to very easily <a href="https://oxygenbuilder.com/documentation/styling-options/classes/" target="_blank" rel="noopener">create CSS classes and then assign them to various elements.</a> You can even edit the properties of a class in different states such as :hover: which you'll find yourself using a lot.</p>



<p>One of the most unique things about Oxygen is that it actually disables and replaces the default WordPress theme system entirely. Oxygen essentially <strong>is </strong>your theme. In Oxygen, you can <a rel="noopener" href="https://oxygenbuilder.com/documentation/templating/templating-overview/" target="_blank">create templates</a> for everything that you'd normally make a template PHP file for in a theme such as a header/footer, archives, singles, special page types, etc. This aspect of Oxygen is similar to what Beaver Builder's <a rel="noopener" href="https://www.wpbeaverbuilder.com/beaver-themer/" target="_blank">Beaver Themer</a> plugin adds.</p>



<p>This video is a showcase for a plugin called <a href="https://apexweb.io/oxyninja-core-plugin-for-oxygen-review/" target="_blank" aria-label=" (opens in a new tab)" rel="noopener" class="rank-math-link">OxyNinja Core Framework</a> which is basically a <a rel="noopener" href="https://en.wikipedia.org/wiki/CSS_framework" target="_blank">CSS framework</a> you can import into Oxygen, but I think it's a great example of what a good workflow in Oxygen looks like if you are using CSS classes right. With or without OxyNinja, this is what building a page should look like once you've established some of your common <a rel="noopener" href="https://www.youtube.com/watch?v=EUhn-uJOTck" target="_blank">CSS utility classes</a> and such.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="OxyNinja - Quick Designing in Core Framework" width="500" height="281" src="https://www.youtube.com/embed/VWEi8RZc0eM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<h2>Pros and Cons</h2>



<h3>Pros</h3>



<ul><li>Stylish and intuitive interface</li><li>No made-up builder lingo<ul><li>Uses real terminology instead (ex: div, class)</li></ul></li><li>The way things are built using divs and classes is much closer to a real developer workflow than other builders</li><li>Creates clean code with <a href="https://www.youtube.com/watch?v=KDGwVfj1jr4" target="_blank" rel="noopener">no divception</a></li><li>Doesn't add a bunch <a href="https://www.youtube.com/watch?v=qMzJzbNlf44" target="_blank" rel="noopener">bloat</a> that slows down the site<ul><li>Oxygen only imports what is absolutely necessary on every page</li></ul></li><li>Structure panel makes it easy to find the correct elements to edit</li><li>Freedom to do virtually anything<ul><li>Unlike other builders, using Oxygen doesn't make me feel limited or constricted to the capabilities of the builder.</li></ul></li><li>Can easily make a page editable in Gutenberg for clients to edit content without breaking formatting<ul><li>There is also an "Edit Mode" coming soon in 3.6 that will allow clients to do the same in the Oxygen editor.</li></ul></li></ul>



<h3>Cons</h3>



<ul><li>Drag and drop is very clunky<ul><li>Both in the main editor window and the structure panel</li></ul></li><li>I think the header-builder could be fleshed out a bit more. I would like to see more options<ul><li>For example, there is no way to make the typical standard accordion-like menu for mobile</li></ul></li><li>Since Oxygen disables the theme system, I think they should have some sort of native interface for enqueueing resources<ul><li>Fortunately, it's not too hard to <a rel="noopener" href="https://apexweb.io/enqueue-scripts-css-oxygen-builder/" target="_blank">make your own plugin to enqueue resources</a></li></ul></li><li>Steep learning curve for people unfamiliar with more traditional web development practices</li></ul>



<h2>Pricing</h2>



<p>Oxygen's <a href="https://oxygenbuilder.com/pricing/" target="_blank" rel="noopener">current price model</a> is, in my opinion, an insanely good value. I expect they will change to a yearly subscription model at some point when they own a larger percentage of the page builder market share, but for right now they only offer lifetime licenses and those lifetime licenses are a similar price to the yearly cost for other builders. $99 gets you a lifetime license, $149 gets you a lifetime license plus including the <a href="https://oxygenbuilder.com/tour/woocommerce/" target="_blank" rel="noopener">WooCommerce Integration</a>, and $169 gets you a lifetime license plus the <a href="https://oxygenbuilder.com/tour/gutenberg/" target="_blank" rel="noopener">Gutenberg Block Builder</a> and all future additions.</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="568" src="https://apexweb.io/wp-content/uploads/2020/09/chrome_RLE0FGqWDG-1024x568.png" alt="chrome RLE0FGqWDG" class="wp-image-289" srcset="https://apexweb.io/wp-content/uploads/2020/09/chrome_RLE0FGqWDG-1024x568.png 1024w, https://apexweb.io/wp-content/uploads/2020/09/chrome_RLE0FGqWDG-300x166.png 300w, https://apexweb.io/wp-content/uploads/2020/09/chrome_RLE0FGqWDG-768x426.png 768w, https://apexweb.io/wp-content/uploads/2020/09/chrome_RLE0FGqWDG.png 1166w" sizes="(max-width: 1024px) 100vw, 1024px" title="Oxygen Builder Review 16"></figure>



<h2>Is Oxygen Builder For Me?</h2>



<p>If you are a developer who is comfortable writing HTML and CSS and perhaps a bit of JavaScript and PHP, absolutely yes! Equipped with the knowledge of the above languages there is virtually nothing you can't do with Oxygen. If you are looking to speed up your design process but don't want to fight with typical page builders to make more unique functionality or slow down your site with extra files you don't need, Oxygen is probably the choice for you. In my opinion, Oxygen is the perfect middle-ground between coding from scratch and using a builder.</p>



<p>If you don't really know how HTML and CSS work you might have some trouble getting started with Oxygen Builder. With that said, I think with the right attitude and effort anyone can learn to build with Oxygen. There will be a steep learning curve, but you will become a much better and more versatile developer/designer for it. </p>



<p>If you have no desire to learn the more intricate parts of web development/design and just want to click and drag to make decent designs I don't recommend Oxygen for you. For this group of people, I recommend something like <a aria-label=" (opens in a new tab)" rel="noopener" href="https://www.wpbeaverbuilder.com/?fla=4131" target="_blank" class="rank-math-link">Beaver Builder</a>  <strong>(Disclaimer: THIS IS AN AFFILIATE LINK)</strong> instead. Beaver Builder offers decent performance in terms of page speed,  tons of features, and an easy to use drag and drop interface.</p>



<h2>Conclusion</h2>



<p>I love Oxygen Builder and I plan to use it for a long time. I think it's the perfect middle-ground between coding from scratch and using a typical page builder. Using Oxygen doesn't make me feel limited in what I can do at all. Workflows in Oxygen closely mirror that of a coding from scratch approach and promotes doing things the right way, rather than throwing something together with a bunch of drag and drop modules and bloating your site with random garbage you don't need. Creating a site takes a bit longer in Oxygen than with other builders, but that's mostly because, if you're anything like me, you end up spending an inordinate amount of time nitpicking every little thing until it's perfect, which other builders just don't really let you do.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://apexweb.io/oxygen-builder-review/feed/</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
			</item>
	</channel>
</rss>
