Designer’s Corner

Designer's
Corner

Other Videos

How to Build a Mega Menu with Elementor

Elementor now has a built in feature that allows you to custom build out a mega menu. It is really easy!

Make Any Container Clickable

Containers in Elementor do not have the typical way of turning them into a clickable link. This video shows you where it is. Skip to 3:25 in the video. The first part of the video is about getting the new update to elementor set up and converting old sections and columns to containers.

Other Documentation on the subject: View

Elementor Grid & Flex Box Basics

Dive deep into the fundamentals of containers and grids in web development. In this video, we’ll guide you through the essential concepts of using, adjusting, and customizing the Flexbox container to enhance your web design capabilities. Also, we will compare Flexbox and Grid to show you how they differ, and how you can combine them for creative results.

Using Grid with Elementor

In this Elementor WordPress tutorial, I teach you How to Use Grid Container in Elementor. This new feature of Elementor Grid Container has just arrived in version 3.14 of both Elementor Free and Elementor Pro. Now, with the Grid Container Elementor, it’s much easier to create websites using Elementor and WordPress. In short, learn how to use Grid in Elementor and create sites with more ease and effectiveness.

How to freeze a hover element for styling

Customize Elementor sticky headers with CSS

Make Something Grow or Shrink CSS

W3 School

All around great resource for most css needs. Has interactive examples.

It also has resources for HTML, JavaScript, SQL, PHP, Java, and Python.

Flex Box

CSS-Trick.com

This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).

Flexbox Froogy

Flexbox Froggy, a game where you help Froggy and friends get to their lily pads by writing CSS code!

Flexbox Defence

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

Grid

CSS-Trick.com

Comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

Grid Garden

Grid Garden, where you write CSS code to grow your carrot garden! The goal is to use grid to water your garden and poison the weeds.

Button With Pulsing Ring

Advanced Custom Fields

Needs creds to download

This plugin allows you to create archives and post with customs fields.

Modern Event Calendar

No creds needed for free version

Very dynaimc tool for displaying events of all kinds and can be linked up with e-commerce plugins to sell tickets and such.

View Features

PowerPack Addons for Elementor

Needs creds to download

70+ Unique, Creative, and Premium Elementor addons & professionally designed templates for your WordPress sites.

View Widgets

Ultimate Elementor Addons

Needs creds to download

50+ Widgets & Extensions. 100+ Website Templates. 200+ Section Blocks.

Has great gallery layout options

View Widgets

How to Build a Mega Menu with Elementor

Elementor now has a built in feature that allows you to custom build out a mega menu. It is really easy!

Link Validator

This will check to make sure that no links are broken or missing. It will not, however, know if a link is directing to the wrong page.

Windows PowerToys Measurement Tool

This tool is great for quickly measuring pixels. Once you’ve installed PowerToys, you can access this tool by holding down the windows key + the shift key + the letter m. Here’s some info on installing PowerToys: https://learn.microsoft.com/en-us/windows/powertoys/install.

Windows PowerToys Color Picker

I like this color picker the best because it can be used anywhere on your screen, not just within the web browser. Once you install PowerToys on your computer, the shortcut to access the color picker is the windows key + the shift key + the letter c.

How to Batch Resize Photos in Photoshop

This video shows you how to resize as many images as you’d like in an automated process using Photoshop.

Picking Fonts that Go Well Together

This tool shows you google prepared google fonts and give suggestions for other google fonts.

Tips, Tricks and Best Practice for Images

Image Dimensions

Full width images are best at 2800px wide and no smaller that 1800px wide.

Images Contained in default width single column will best display at 1200px wide.

Gallery images are best at 900-1200px. Would recommend sizing down to 1200. Images small than the 900 are fine if the client wants them on the site.

Other images should be sized for the spaces they take up on a page viewed in desktop. Example: I have an image that will take up half the column which is typically 1100px wide. I would save the image no smaller than 600px wide.

Image File Sizes

In General Images should be 350kb or less if possible.

Hero Banner and Full Width Images will tend to be larger images. Best practice is to try to keep them 600kb or under, and no more than 1MB. The only time to do this would be at clients request. 1MB images will load pretty slow.

Photo Resources

Free Stock Photos

Free SVG/ Vectors

Member Stock Photos

Free Online Editing Tools

TinyPNG.com

This tools optimizes images by compressing the file size so they load faster on websites.

Birme.net

Use for resizing a bulk amount of images or just one.

Remove.bg

Quickly remove background from images. Free version allows you download up to 600px wide, so crop down as much as possilbe if you need a larger image.