Tips and Tricks - Apex Web Solutions https://apexweb.io Web Development and Design Fri, 30 Oct 2020 02:22:38 +0000 en-US hourly 1 https://wordpress.org/?v=5.8 https://apexweb.io/wp-content/uploads/2020/09/cropped-Favicon-1-32x32.png Tips and Tricks - Apex Web Solutions https://apexweb.io 32 32 Fixing The Gap Issue in Oxygen Builder https://apexweb.io/fix-white-gap-space-oxygen/ https://apexweb.io/fix-white-gap-space-oxygen/#respond Wed, 21 Oct 2020 03:07:14 +0000 https://apexweb.io/?p=312 Hey everyone! This is just a quick one today. You probably know what I'm talking about when I say the "gap issue". It's when you have a sometimes small, sometimes large, space on the side of your page (usually in the smaller viewports) created with Oxygen Builder.

The white space is almost always caused by one of your elements having a set width that is too high for the size of the screen. Browse through all your elements, especially ones you recently edited, and check for something width hard set in pixels. That's the most likely culprit. It can still happen if you're using percent widths and other units as well, but it happens a lot with specific pixel widths if you forget to set lower widths for smaller viewports.

If there are some elements stretched out into the white space you can generally safely assume that those elements are the ones you need to fix.

If it's not obvious what element is causing the gap, there is an easy strategy to make it a little bit easier to see. Go ahead and open up your web browser's dev tools then select the <head> tag. From there, add the following code to the *::before, *::after selector:

border:1px solid red
Oxygen Builder Gap Issue

This will add a red border around every element on the page to make it a little more obvious which elements are stretching over the edge. You can also accomplish the same by toggling the gridlines feature in Hoverify if you have that browser extension.

Thanks to Supamike for that idea!

I hope this helps some people!

]]> https://apexweb.io/fix-white-gap-space-oxygen/feed/ 0 My Favorite Cool JavaScript Libraries https://apexweb.io/my-favorite-cool-javascript-libraries/ https://apexweb.io/my-favorite-cool-javascript-libraries/#respond Sat, 03 Oct 2020 02:51:41 +0000 https://apexweb.io/?p=379 Hey everyone! Today I'm putting together a list of my favorite JavaScript libraries out there. For this post, I'm focusing on cool, small, design-focused libraries, not entire frameworks like React, Node, etc. Similarly to my post about my favorite design tools and generators, this list is in no particular order!

Table Of Contents
  1. Particles.js
  2. TypedJS
  3. Morphtext
  4. TwentyTwenty
  5. FullPage
  6. Masonry
  7. GreenSock
  8. Chart.js
  9. Tippy.js
  10. Lightbox

Particles.js

Particles.js is a library for generating cool, animated, and interactive particle effects. I've been using this one on my website's homepage for the last two years, so you can check it out there! There's a lot you can do with it if you're creative with the settings. I've written a guide for using this one in Oxygen Builder which you can find here.

TypedJS

TypedJS is for creating some animated text that looks like it's being typed on a keyboard. For reference, I am also using this one on my site right now in the top left corner and have been for the last two years!

Morphtext

Morphtext is another library for animating text. This one is based on the open-source animate.css that a lot of other libraries use and makes it easy to rotate some words in and out with nice animations.

TwentyTwenty

TwentyTwenty is my favorite before/after slider. It stacks the two images on top of each other then gives the user a slider bar that they can drag left and right to reveal/hide the other image. It looks great and works great!

FullPage

FullPage changes how scrolling works on your site. You basically turn the site into pages to scroll through rather than one solid page. One scroll down of the wheel will scroll you to the next page and so on. This one isn't free, but it isn't expensive either.

Masonry

Masonry is a grid layout library that automatically moves and resizes elements around optimally to fit the space they're in. This is a great way to show a list of blog posts or cards of some sort.

GreenSock

GreenSock is an exceedingly easy way to add staggered / scroll-driven animations to your site. It does a lot more than that in the world of animation as well, but I haven't explored farther than the staggered / scroll-triggered animations.

Chart.js

Chart.js is a cool and easy way to make a few different types of charts that can be interactive and animated.

Tippy.js

Tippy.js makes it super easy to add tooltips to any element on your site. You can have this set up in seconds.

Lightbox

Lightbox is exactly what you think it is. It's the original lightbox script for adding a lightbox effect to an image. If you don't know what lightbox means, basically, when you click on the image it will open up a bigger version of the image for the user to look at.

]]> https://apexweb.io/my-favorite-cool-javascript-libraries/feed/ 0 How to Enqueue Scripts and CSS in Oxygen (The Right Way) https://apexweb.io/enqueue-scripts-css-oxygen-builder/ https://apexweb.io/enqueue-scripts-css-oxygen-builder/#comments Sun, 27 Sep 2020 22:33:30 +0000 https://apexweb.io/?p=193 Hey everyone! Today I'm going to walk you through the "correct" way to import resources in WordPress for sites using Oxygen. Normally we would enqueue our resources in the functions.php file of our theme. As you likely know, Oxygen completely disables the normal WordPress theme system, so we need to be a little more creative. The solution is to create your own very basic plugin that just enqueues your resource files. This is very simple to do and I'll give you all the code and examples you need to get the job done!

Table Of Contents
  1. 1. Create the Files and Directories
  2. 2. Add Resources to Your Directories
  3. 3. Add the Basic Code For plugin.php
  4. 4. Add Your Enqueues
  5. 5. Install Your Plugin
  6. How to Edit the Plugin to Add More Later

1. Create the Files and Directories

First things first, let's create the files and directory structure that we'll need. Create a folder on your desktop (or wherever you prefer) and name it something like "resource-enqueuer". Inside that folder, create a file called "plugin.php" and another folder called "assets". Inside the assets folder, I recommend creating some more sub-directories like "css", "js", etc. depending on what kind of resources you are working with. It's not totally necessary if you only have a few files, but it's best practice to keep things organized.

Create files for Resource Enqueue plugin

2. Add Resources to Your Directories

Simply place the JS and CSS files you need in their respective directories in the plugin folder.

Place resources inside resource enqueue plugin sub-directories

3. Add the Basic Code For plugin.php

Alrighty, if you've never coded anything before this will be the trickiest part, but trust me it's very simple! I'm going to lay everything out as simply as possible. First, copy and paste the code below into your new plugin.php.

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps prevent people from directly executing your code.
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here



	//Put your JS enqueues under here


}

4. Add Your Enqueues

Next, we're going to add our enqueues to the plugin.php file. This is where you're going to need to pay attention a little more, as everyone's case is slightly different and you need to insert the correct names of your files. Below I've written out a few examples of what your enqueue calls should look like for CSS / JS files and if you have your files locally saved or on a CDN.

//CSS enqueue from directory
wp_enqueue_style( 'YourCssSheetName', plugin_dir_url( __FILE__ ) . 'assets/css/yourfilename.css' );

//CSS enqueue from CDN link
wp_enqueue_style( 'YourCssSheetName', 'https://yourcdnlink.com/yourfile.css' );

//JS enqueue from directory
wp_enqueue_script( 'YourJsScriptName', plugin_dir_url( __FILE__ ) . 'assets/js/yourfilename.js', '', '', true );

//JS enqueue from CDN link
wp_enqueue_script( 'YourJsScriptName', 'https://yourcdnlink.com/yourfile.css', '', '', true );

Additionally, you might want to enqueue some resources only on specific pages. Below I've provided some examples of some conditional statements to help you do that! Simply place your enqueues inside the necessary conditionals to make your resources load only on the pages you need them on. There are MANY more conditionals available in WordPress and I've only listed some of the most common scenarios. If you'd like to learn more or have a different use-case, check out this link.

//On the front page ONLY
if ( is_front_page() ){

	//insert enqueues here

}
	
//On every page EXCEPT the front page
if ( ! is_front_page() ) {

	//insert enqueues here
		 
}

//On specified page (based on slug or ID)
if ( is_page('your-page-slug-or-id') ){

	//insert enqueues here

}

//On several specified pages (based on slugs or IDs)
if ( is_page( array('first-slug', 'second-slug', 'etc...') ) ){

	//insert enqueues here

}

//On all posts of a specified type
if ( get_post_type() == 'yourposttype' ){

	//insert enqueues here

}

Don't forget to save your file!

Here's an example of what a simple completed plugin.php might look like (note: you can add additional enqueues easily any time and I'll talk about that more later)

<?php
/*
Plugin Name:	Resource Enqueuer
Description:	Enqueues Resource Files
*/

//You can ignore this, but don't forget to include it. 
//It helps keep your plugin safe from being tampered with!
if ( ! defined( 'WPINC' ) ) {
	die;
}

add_action( 'wp_enqueue_scripts', 'resource_enqueuer' );

function resource_enqueuer() {

	//Put your CSS enqueues under here

	//Enqueues morphtext.css everywhere
	wp_enqueue_style( 'morphtext', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css' );


	//Put your JS enqueues under here

	//Enqueues particles.js on the front page only
	if (is_front_page()){
		wp_enqueue_script( 'particlesjs', 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js', '', '', true );
	}

	//Enqueues morphtext.js everywhere
	wp_enqueue_script( 'morphtextjs', 'https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js', '', '', true );

}

5. Install Your Plugin

We're finally ready to see some results! Next, go ahead and right-click on your plugin folder and select Send to > Compressed (zipped) folder.

Compress Resource Enqueue Plugin

Now we just need to upload and activate the plugin like we would any other plugin! Go to Plugins > Add New > Upload Plugin then select and upload your new zip file. Once that's done, activate the plugin.

We're done! Congrats! You've created your very own plugin to enqueue your resource files (and maybe your first plugin in general)!

How to Edit the Plugin to Add More Later

You can easily add additional enqueues any time by editing the files for your plugin on the server. If you need help with that just follow the steps below!

First, we need to connect to our server with FTP / SFTP. If for some reason you're unable to do that or you aren't familiar with how to use those, you can use the plugin WP File Manager to do so, but please deactivate and delete it after you're done using it for security purposes. Once you're successfully browsing your server you should be able to find the plugin at /public_html/wp-content/plugins/your-plugin-name. From there, simply add the resources to the assets folder and edit your plugins.php file with the new enqueues you'd like to add.

]]> https://apexweb.io/enqueue-scripts-css-oxygen-builder/feed/ 5 How to Add Particle Backgrounds in Oxygen with Particles.js https://apexweb.io/adding-particle-backgrounds-in-oxygen-with-particles-js/ https://apexweb.io/adding-particle-backgrounds-in-oxygen-with-particles-js/#comments Sat, 26 Sep 2020 03:03:17 +0000 https://apexweb.io/?p=161 Hey everyone! Today I'm going to walk you through adding a particle background like the one on my home page to a div in Oxygen Builder with one of my favorite open-source JavaScript libraries, particles.js.

Table Of Contents
  1. 1. Create your particle config
  2. 2. Import particles.js
  3. 3. Add an ID to the div
  4. 4. Call the particlesJS() function
  5. 5. CSS Fixes

1. Create your particle config

First lets head to particles.js to create our config. Vincent Garraeu lets you configure just about everything super easily through a visual editor on the website. Adjust the speed, the number of particles, lines, etc, and when you're happy with what you have, go ahead and click "Download current config". This will give you a JSON file that we'll use in a few minutes.

chrome dimynX6GW0

2. Import particles.js

There are a few ways to do this. The most correct way is to enqueue it with WordPress' wp_enqueue_script function; however, Oxygen makes enqueueing a little weird because we no longer have access to the theme files where we'd normally do that. If you want to enqueue the script you can create a custom plugin to do so, and I highly recommend doing that method. You can follow my guide here to learn how to do that! Alternatively, if you're not up for that at the moment you can just use a typical HTML script tag in the footer.

Create a code block in oxygen at the bottom of your footer, then add the following to the HTML:

<!-- Import particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

3. Add an ID to the div

Next, we just need to add an ID to the div we want to contain the particles inside, or you can just make note of the ID automatically given to it by Oxygen.

Note: The position of this div needs to be set to relative.

4. Call the particlesJS() function

Now it's time to finally start seeing some visual progress. There are two ways we can proceed from here. The first option is to upload your particles.json config file to your server somewhere, then feed the file path into the particlesJS() function:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
    /* particlesJS(@dom-id, @path-json)); */
    particlesJS('InsertYourDivIdHere', 'yourpath/particles.json');
});

If you don't want to deal with that you can actually just paste the contents of your particles.json file inside some curly braces where the file path would normally go like so:

//Wait until the document is loaded
document.addEventListener("DOMContentLoaded", function(){
  /*particlesJS.load(@dom-id, @path-json);*/
  particlesJS('InsertYourDivIdHere', {
      //Paste the entire contents of your particles.json here
  });
});

You should be able to see some particles now! (note: they may not be visible in the Oxygen backend, so be sure to view the frontend) Depending on how your page is setup, there's a good chance that the particles canvas is being displayed below the div you wanted it to be in, so I'll show you what I did to fix that next.

5. CSS Fixes

If you have a custom stylesheet started, go ahead and open that and insert the following CSS. If not, create a new one and do the same:

.particles-js-canvas-el{
    position: absolute;
    top: 0;
    z-index: -1; //You will likely need to play around with this
}

On my site, there is nothing behind the div that I attached my particles to, and I set my background color via that div. If yours is any different you may need to adjust the z-index of the particles canvas among other things to get everything layered properly. It's important to make sure your text and buttons have a higher index than your particles canvas or else users won't be able to interact with them.

That's it! I hope this helped you add a cool effect to your sites!

]]> https://apexweb.io/adding-particle-backgrounds-in-oxygen-with-particles-js/feed/ 6 My Favorite Design Tools and Generators https://apexweb.io/my-favorite-design-tools-and-generators/ https://apexweb.io/my-favorite-design-tools-and-generators/#comments Fri, 25 Sep 2020 03:19:59 +0000 https://apexweb.io/?p=147 Hey everyone! I've been building up a small bookmark folder of tools and generators for web design. I thought I'd go ahead and list them all for others. If you know of some more little tools like this please share! I'd love to add more to my list. This list is in no particular order and they are all great! I will keep adding to this list as I find more.

Table Of Contents
  1. FontPair
  2. Canva
  3. Type Scale
  4. Brumm
  5. PALX
  6. Coolors
  7. uiGradients
  8. Gradient Animator
  9. Bob Ross Lipsum
  10. Techsini
  11. SizyMyImage
  12. ShapeDivider
  13. SVG Backgrounds
  14. ConvertICO

FontPair

FontPair lists tons of good options for font pairings (Heading and Text). It's especially great if you know what you want to use for one of your fonts but aren't sure about the other. You can search "Montserrat" for example and it will show you a bunch of good pairings to go along with it.

Canva

Canva is also a tool for finding font pairs. Just insert the font you're working with and it will give you options to go with it.

Type Scale

Type Scale helps you decide the appropriate sizes for your text and headings. You can select your font, base font size, and the scaling ratio you'd like to use then it will automatically generate all your heading sizes in em units based on your selections.

Brumm

Brumm is a tool for generating beautiful multilayer shadows. These shadows look much more natural than the standard one layer box-shadow and can really step up the design of a web page.

PALX

PALX helps you generate a color palette based off of a single color. Basically, if you have one color picked, you can input that and it will give you a bunch of colors that go well with it. Select a few and you've got your pallet!

Coolors

Coolors is a color palette generator as well, but generates random color palettes instead.

uiGradients

uiGradients is exactly what it sounds like. It's basically a big list of colors that go well together mashed up into gradients. Most of them are two colors but some go as high as four colors.

Gradient Animator

Gradient Animator is pretty self-explanatory as well. Based on a few settings and some colors it will generate all the CSS you need for a beautiful animated gradient.

Bob Ross Lipsum

Bob Ross Lipsum is a fun little twist on the usual Lorem Ipsum. It's basically just Lorem Ipsum but with Bob Ross-isms. It's fun to change it up sometimes!

Techsini

Techsini has a few other tools on their site, but my favorite is the Multi-Device Website Mockup Generator. It creates those mockups you see on a ton of web design pages that show a website or app on a bunch of different screens like a pc monitor, tablet, phone, etc. You just input the URL of a site and it loads up iframes of the site in a mockup that you can screenshot and use on your site!

SizyMyImage

SizeMyImage is an all-in-one image scaler, compressor, and file converter that can process several images at a time. It's a nice simple website with a nice design and great UX.

ShapeDivider

ShapeDivider is an awesome tool for easily creating SVG shape dividers of several types. You can choose from types like waves, curves, triangles, arrows, etc then adjust some sliders to get them exactly how you want them. Super easy way to make something that's normally quite complicated!

SVG Backgrounds

SVG Backgrounds is another pretty self-explanatory one. It's a tool for generating some cool SVG backgrounds. They are a premium service, but they do offer quite a few free options as well so it's still worth checking out if you're not looking to spend anything!

ConvertICO

ConvertICO converts PNG files into ICO files which you can use for the favicon of your website.

Thanks for reading and please let me know if you know of any other little tools worthy of this list! I'd absolutely love to add more to my bookmark collection.

]]> https://apexweb.io/my-favorite-design-tools-and-generators/feed/ 6