November 8, 2024

Ten tips for reducing ecommerce fulfillment costs

Control fulfillment costs by using 3PL services, rethinking packaging materials, using scalable warehouse space, and automating processes.

November 8, 2024

Creating a Pixel Desktop App with ChatGPT in Just 20 Minutes

Turning ideas into executable code has never been easier. This is the story of how I created a small program that turns your photos into pixel art in less than half an hour with a little help from my AI assistant.

The program is called PixelPotion, and you can download it here (13 MB). Its functionality is simple: you select an image from your computer (.jpg, .png, .webp, etc.), choose the pixelation level (5-100%), and convert it to 8-bit style (a new file will appear next to the input file).

Our dog, Naid, volunteered as a test subject. Heres a shot of him at 20%, 50%, and 100% pixelation:

Before you wonder: Yes, I know this is absolutely useless software (who wants to lower the quality of their images, anyway?), and I dont expect Adobe to buy me out anytime soon. I also dont expect you to be wowed by the capabilities of PixelPotion the interesting part is how the program was created. It was written in Python, turned into an executable, fitted with an icon, troubleshot, and beta-tested, all within 20-30 minutes. The next part of this article explains in more detail how this was possible. Also, for what its worth, I like pixel art so lets just roll with it for the sake of an example xD

AI Assisted Coding The Story of PixelPotion

First, I am not an experienced coder. I learned some programming languages as a teen, but since then, I've mainly been involved in projects from a coordination standpoint. Aside from the occasional Python script to make my life easier, Ive hardly written any code myself in the past 20 years. Much like any other language, programming felt like a use it or lose it skill to me after years without touching a compiler, the thought of starting a new coding project seemed daunting. Even just selecting the right libraries and creating a simple user interface that meets todays standards would take me days, if not weeks, of catching up through endless message boards. So, before the rise of LLMs, creating a program like PixelPotion "just for fun" would have never crossed my mind.

Since my professional focus is on Search Engine Optimization, Ive mostly been exploring AI tools for technical SEO. As it turns out, ChatGPT is incredibly helpful for troubleshooting many issues, and I use it frequently to find quick, elegant fixes for bugs that could lower a sites ranking. Coders, too, have been praising AIs capabilities in assisting with programming tasks for years now. So, I figured I'd give it a shot and asked ChatGPT to create PixelPotion with me. Even as an experienced LLM user, I was surprised by how quickly we turned my idea into an actual program, and I think anyone who knows how to distinguish between file extensions could do the same.

Heres how it went:

I started a new chat with ChatGPT-4o and shared my basic idea: a Windows program that converts images to an 8-bit pixel art style.
ChatGPT asked me to choose a programming language (C# or Python), specify whether I wanted a user interface, and suggested additional features like drag-and-drop support.
I chose Python for its simplicity and said I wanted a user interface with drag-and-drop. ChatGPT gave me a list of the necessary steps, which we then elaborated on in detail.
Since I already had Python and Git installed, I just needed to install the required libraries (ChatGPT provided a list) and create a new project folder.
We ironed out the details of the conversion process, including a reduced color palette, downscaling, contrast adjustments, and a color filter for a "retro" effect.
ChatGPT wrote the initial Python code, which ran correctly on the first test. We adjusted a few details to ensure the file paths were dynamic (allowing the program to run on other computers, too).
I realized that the pixelation level depended entirely on the original resolution of the input image, so I thought it would be better if users could choose the pixelation strength. We updated the code to include a "Pixelation Level" slider in the user interface.
Once the .py file did everything I wanted, we compiled it into a standalone executable. This step required some troubleshooting because an issue with the icon path caused an error message. This is the kind of issue that might have cost me half a day on a message board, but with ChatGPT, I identified the error and found a solution in about two minutes.

My assistant took care of several other details too: It designed the icon (which I only had to edit slightly and convert to .ico format), wrote the README.txt, suggested a list of names, and helped me pick one. As this exercise was just an experiment, I left it at that. But it would be easy to improve the program and add features like customizable filters, preview images, and an option to select the output folder.

The Bottom Line

Your offbeat app idea has never been as feasible as it is today. As experienced entrepreneurs know, ideas are the easy part of any project. While AI tools wont find you investors or build your user base, taking your ideas from concept to prototype has become a lot easier.

Yes, PixelPotion is useless software, but creating an executable program from scratch in less than half an hour on just one cup of coffee is pretty mind-blowing to me. It literally took me longer to write this article so I hope you enjoyed the read!

November 8, 2024

10 Tips for Designing Logos That Don’t Suck

So you’re designing a logo. It sounds like an easy enough task, right? Draw a circle, type in the company name and you’re done (I’ve literally heard a designer suggest that very process). Unfortunately, if you’re really worth the money the client is paying you, there’s a lot more to it than that.

There are a million people in the logo design industry today dishing out crappy logos in bulk for crowdsourcing sites. How do you as a serious professional stand out from the crowd and produce quality logos that don’t suck? Read on to find out.

Are you in the middle of a logo design project? Don’t forget to check out our in-depth guide on how to design a logo!

Pro Tip: Logo Templates & Logo Makers

If you’re looking for a quick start with a logo design, experimenting with a logo template can be a great initial step. It can help give you a starting point for your logo design, on which you can build and adapt.

Envato Elements has a collection of over 6,000 logo templates that you can access for a low monthly price of $17 (as well as icons, photos, graphic templates, and more). Here are a few of our favorites!

You could also experiment using a logo maker tool—an online app that asks you a few questions about your business, and suggests logo ideas and concepts that fit your brand.

1. Use a Visual Double Entendre

Some of my favorite logos in the world utilize a technique that I like to call a visual double entendre, which is an overly fancy way to say that it has two pictures wrapped into one through clever interpretation of a concept or idea.

The WinePlace logo below is a perfect example.

This logo takes on the shape of a thumbtack, which suggests “location” or “place,” but it also clearly looks like an upside down wine glass. Logo designs that use this technique come off as clever and memorable. Viewers love the little mind game that you’re playing and are more prone to appreciate a design because of it.

In the past, we’ve put together a post of clever negative space logos like the one below. Check it out if you love this type of logo design as much as I do!

2. Color is Vitally Important

One of the most important considerations for logo design is the color palette. This is not a superficial decision, color carries meanings and communicates ideas.

Sometimes you’re pegged to the colors of a brand, but other times you’ll have the freedom to explore. I love the rich palette used in the Zion logo below.

The colors here grab you and pull you in, they bring life to the illustration and give further context to the shape of the landscape. That being said, remember that a good logo is versatile and will still function well in grayscale:

Beyond a grayscale version, I like to also provide clients with a true single color version, using only black and negative space. This would be a little tricky with the logo above, but definitely possible.

Always consider what it is that the logo will be used for and whether or not the various use cases require different versions.

3. Avoid the Cliché

Every few years or so, some new fads come along in logo design. I personally love to study design trends and you might even find me suggesting jumping onto a few bandwagons to keep up with the times, but with logos, I just hate it when a bunch of designers use the same idea over and over.

Should you know about the latest logo design trends and understand what’s good and bad about them? Absolutely. Should you follow them to the letter? Absolutely not.

The basic archetype above is being used again and again in logo design right now and it’s getting old fast. Why not use a design that you actually thought up yourself rather than ripping off what everyone else is doing?

We have an entire article dedicated to showcasing logo design clichés, be sure to check it out to make sure you’re not guilty of uninspired logo design.

4. Make it Ownable

I don’t believe that “ownable” is a real word, but you nevertheless hear it quite a bit in marketing (marketers love to make up words). The concept is definitely an important one that ties closely to the previous tip.

Rather than following the herd and using a cliché design, you should instead strive for something that is uniquely recognizable. I’ve always appreciated the Evernote logo in this regard:

It’s really just an elephant head, which doesn’t sound like a very unique concept. However, the way it’s drawn with the curled trunk and page fold in the ear makes it instantly recognizable.

As you’re designing logos, consider whether or not your design is generic or unique. Is it likely that others will produce something similar? Remember, your first idea is typically your most generic (it’s also everyone else’s first idea). Try filling a notebook page or two with some rough sketches before choosing which ideas to pursue further.

5. Everybody Loves Custom Type

While we’re on the subject of being unique, there’s almost nothing that can give your logo a unique feel quite like some awesome custom lettering.

Too often we see logo design as simply a trip to the font menu to see which typeface makes the company name look best. If someone is paying you to “design” their logo, they probably expect you to put a little more effort into it.

Too often we see logo design as simply a trip to the font menu.

Custom type helps to ensure that your unique logo will stay that way. Lowlife designers will rip off your work in a heartbeat if they discover which typeface you’re using, but it takes some real skill to mimic custom hand-drawn type!

Keep in mind though that if your logo is famous enough, people will always try to rip it off. This certainly holds true for my favorite script logo:

The awesome Coca-Cola script has been stolen countless times in awkward parodies throughout the last few decades.

6. Keep it Simple Stupid

Let’s face it, not everyone can bust out a beautiful, hand-drawn script on a whim. Just because you’re a designer doesn’t mean you’re an awesome illustrator or typographer (though it helps). If you fit this description, fear not, there’s nothing preventing you from making awesome logos.

In this situation, remember these four powerful words: keep it simple stupid! Simple but powerful logos permeate the business world and always prove to be the best icons for standing the test of time.

In considering how to construct one of these types of logos, let’s discuss the Apple logo. The silhouette of an apple is nothing special or memorable:

It’s that missing bite that takes it to the next level. It gives the logo character, makes it unique, and drives the meaning deeper (computers and bytes, get it?). Without the bite, the apple is boring, with it, the apple is suddenly iconic.

Always think about how you can go that extra mile and turn your boring logos into unmistakable brand marks.

7. Consider Proportion & Symmetry

Some people can get carried away with discussions of proportion and symmetry (see the new Pepsi logo pitch), but if we strip out the crazy, there’s still some important lessons here. Consider the new Twitter logo as an example:

Here circles aren’t used to convince you of some strange cosmic tale that makes no sense, they’re simply used as a guide to create a well balanced logo with consistent curves and arcs.

Despite the fact that the bite seems to violate the symmetry of the Apple logo above, if we dig deeper we can see that there was still a lot of through put into proportion and symmetry here (image source):

8. Think About Negative Space

Along the same vein as a double entendre is the age-old trick of utilizing the negative space in a logo in some clever way. The industry standard example of this technique is the FedEx logo and its hidden arrow.

Don’t see it yet? Keep looking, it’s there. That’s what I love about this logo, the use of negative space is so subtle. Most people in the U.S. see the FedEx logo daily or weekly for years as it drives by on the side of countless trucks and they never even notice the arrow.

Logopond is chock full of great logo designs that utilize negative space in a cool way. Check out the example below, which blends together the idea of bull horns and a wine glass.

9. Passive vs. Active

One interesting facet of logo design that I’ve been considering a lot lately is the concept of instilling motion or a sense of activity into a logo. This isn’t always appropriate (such as with the Apple logo), but sometimes it can really give a logo the boost it needs, both from a visual and conceptual standpoint.

As an example, let’s look again to the Twitter logo. Way back in the early days, the bird went from sitting perched and passive to becoming active and taking flight.

In the most recent iteration, they took this concept even further by pointing the bird in an upward direction to indicate that it’s climbing into the air rather than floating along the same old trajectory.

A sense of motion is especially important when it comes to logos with mascots. The image of the marlin below doesn’t depict the fish merely lying still, instead, it’s leaping into the air in a victorious pose.

This concept even extends to typically inanimate objects. Consider how much better the logo below portrays the concept of “rough house” by instilling a sense of motion.

10. Know What it Means

It’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them.

Every good logo has a story. Far beyond simply a pretty sketch, strong logos are filled with meaning, both obvious and hidden. We discussed this in several cases above. The FedEx logo’s arrow indicates moving forward and making deliveries, the Apple logo has a “byte” missing, and the Twitter bird is flying in an upward trajectory.

Half the time I wonder if logo designers don’t come up with the meaning after the logo is already produced, but regardless, it’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them.

Clients might think that all they want is something fresh and cool, but if you instead provide a logo that ties into the company’s core values and mission, you’ll blow their minds and they’ll love you for it.

If you’re into hidden logo meanings, check out our post titled “Five Fascinating Things You Didn’t Know About Famous Car Logos.”

Do Your Logos Suck?

Now that you’ve read our tips for designing logos that don’t suck, leave a comment below and let us know what you think of your own work in this area.

Are you an awesome logo designer or is it something that you struggle with? Which of the tips above are useful to you and what tips can you offer to other designers?

November 8, 2024

The Different (and Modern) Ways to Toggle Content

If all you have is a hammer, everything looks like a nail.
Abraham Maslow

It’s easy to default to what you know. When it comes to toggling content, that might be reaching for display: none or opacity: 0 with some JavaScript sprinkled in. But the web is more “modern” today, so perhaps now is the right time to get a birds-eye view of the different ways to toggle content — which native APIs are actually supported now, their pros and cons, and some things about them that you might not know (such as any pseudo-elements and other non-obvious stuff).

So, let’s spend some time looking at disclosures (<details> and <summary>), the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.

Disclosures (`<details>` and `<summary>`)

Use case: Accessibly summarizing content while making the content details togglable independently, or as an accordion.

Going in release order, disclosures — known by their elements as <details> and <summary> — marked the first time we were able to toggle content without JavaScript or weird checkbox hacks. But lack of web browser support obviously holds new features back at first, and this one in particular came without keyboard accessibility. So I’d understand if you haven’t used it since it came to Chrome 12 way back in 2011. Out of sight, out of mind, right?

Here’s the low-down:

It’s functional without JavaScript (without any compromises).
It’s fully stylable without appearance: none or the like.
You can hide the marker without non-standard pseudo-selectors.
You can connect multiple disclosures to create an accordion.
Aaaand… it’s fully animatable, as of 2024.

Marking up disclosures

What you’re looking for is this:

<details>
  <summary>Content summary (always visible)</summary>
  Content (visibility is toggled when summary is clicked on)
</details>

Behind the scenes, the content’s wrapped in a pseudo-element that as of 2024 we can select using ::details-content. To add to this, there’s a ::marker pseudo-element that indicates whether the disclosure’s open or closed, which we can customize.

With that in mind, disclosures actually look like this under the hood:

<details>
  <summary><::marker></::marker>Content summary (always visible)</summary>
  <::details-content>
      Content (visibility is toggled when summary is clicked on)
  </::details-content>
</details>

To have the disclosure open by default, give <details> the open attribute, which is what happens behind the scenes when disclosures are opened anyway.

<details open> ... </details>

Styling disclosures

Let’s be real: you probably just want to lose that annoying marker. Well, you can do that by setting the display property of <summary> to anything but list-item:

summary {
  display: block; /* Or anything else that isn't list-item */
}

Alternatively, you can modify the marker. In fact, the example below utilizes Font Awesome to replace it with another icon, but keep in mind that ::marker doesn’t support many properties. The most flexible workaround is to wrap the content of <summary> in an element and select it in CSS.

<details>
  <summary><span>Content summary</span></summary>
  Content
</details>

details {
  
  /* The marker */
  summary::marker {
    content: "\f150";
    font-family: "Font Awesome 6 Free";
  }

  /* The marker when <details> is open */
  &[open] summary::marker {
    content: "\f151";
  }
  
  /* Because ::marker doesn’t support many properties */
  summary span {
    margin-left: 1ch;
    display: inline-block;
  }
  
}

Creating an accordion with multiple disclosures

To create an accordion, name multiple disclosures (they don’t even have to be siblings) with a name attribute and a matching value (similar to how you’d implement <input type="radio">):

<details name="starWars" open>
  <summary>Prequels</summary>
  <ul>
    <li>Episode I: The Phantom Menace</li>
    <li>Episode II: Attack of the Clones</li>
    <li>Episode III: Revenge of the Sith</li>
  </ul>
</details>

<details name="starWars">
  <summary>Originals</summary>
  <ul>
    <li>Episode IV: A New Hope</li>
    <li>Episode V: The Empire Strikes Back</li>
    <li>Episode VI: Return of the Jedi</li>
  </ul>
</details>

<details name="starWars">
  <summary>Sequels</summary>
  <ul>
    <li>Episode VII: The Force Awakens</li>
    <li>Episode VIII: The Last Jedi</li>
    <li>Episode IX: The Rise of Skywalker</li>
  </ul>
</details>

Using a wrapper, we can even turn these into horizontal tabs:

<div> <!-- Flex wrapper -->
  <details name="starWars" open> ... </details>
  <details name="starWars"> ... </details>
  <details name="starWars"> ... </details>
</div>

div {
  gap: 1ch;
  display: flex;
  position: relative;

  details {
    min-height: 106px; /* Prevents content shift */
      
    &[open] summary,
    &[open]::details-content {
      background: #eee;
    }

    &[open]::details-content {
      left: 0;
      position: absolute;
    } 
  }
}

…or, using 2024’s Anchor Positioning API, vertical tabs (same HTML):

div {
  
  display: inline-grid;
  anchor-name: --wrapper;

  details[open] {
      
    summary,
    &::details-content {
      background: #eee;
    }

    &::details-content {
      position: absolute;
      position-anchor: --wrapper;
      top: anchor(top);
      left: anchor(right);
    } 
  }
}

If you’re looking for some wild ideas on what we can do with the Popover API in CSS, check out John Rhea’s article in which he makes an interactive game solely out of disclosures!

Adding JavaScript functionality

Want to add some JavaScript functionality?

// Optional: select and loop multiple disclosures
document.querySelectorAll("details").forEach(details => {
  details.addEventListener("toggle", () => {
    // The disclosure was toggled
    if (details.open) {
      // The disclosure was opened
    } else {
      // The disclosure was closed
    }
  });    
});

Creating accessible disclosures

Disclosures are accessible as long as you follow a few rules. For example, <summary> is basically a <label>, meaning that its content is announced by screen readers when in focus. If there isn’t a <summary> or <summary> isn’t a direct child of <details> then the user agent will create a label for you that normally says “Details” both visually and in assistive tech. Older web browsers might insist that it be the first child, so it’s best to make it so.

To add to this, <summary> has the role of button, so whatever’s invalid inside a <button> is also invalid inside a <summary>. This includes headings, so you can style a <summary> as a heading, but you can’t actually insert a heading into a <summary>.

The Dialog element (`<dialog>`)

Use case: Modals

Now that we have the Popover API for non-modal overlays, I think it’s best if we start to think of dialogs as modals even though the show() method does allow for non-modal dialogs. The advantage that the popover attribute has over the <dialog> element is that you can use it to create non-modal overlays without JavaScript, so in my opinion there’s no benefit to non-modal dialogs anymore, which do require JavaScript. For clarity, a modal is an overlay that makes the main document inert, whereas with non-modal overlays the main document remains interactive. There are a few other features that modal dialogs have out-of-the-box as well, including:

a stylable backdrop,
an autofocus onto the first focusable element within the <dialog> (or, as a backup, the <dialog> itself — include an aria-label in this case),
a focus trap (as a result of the main document’s inertia),
the esc key closes the dialog, and
both the dialog and the backdrop are animatable.Marking up and activating dialogs

Start with the <dialog> element:

<dialog> ... </dialog>

It’s hidden by default and, similar to <details>, we can have it open when the page loads, although it isn’t modal in this scenario since it does not contain interactive content because it doesn’t opened with showModal().

<dialog open> ... </dialog>

I can’t say that I’ve ever needed this functionality. Instead, you’ll likely want to reveal the dialog upon some kind of interaction, such as the click of a button — so here’s that button:

<button data-dialog="dialogA">Open dialogA</button>

Wait, why are we using data attributes? Well, because we might want to hand over an identifier that tells the JavaScript which dialog to open, enabling us to add the dialog functionality to all dialogs in one snippet, like this:

// Select and loop all elements with that data attribute
document.querySelectorAll("[data-dialog]").forEach(button => {
  // Listen for interaction (click)
  button.addEventListener("click", () => {
    // Select the corresponding dialog
    const dialog = document.querySelector(`#${ button.dataset.dialog }`);
    // Open dialog
    dialog.showModal();      
    // Close dialog
    dialog.querySelector(".closeDialog").addEventListener("click", () => dialog.close());
  });
});

Don’t forget to add a matching id to the <dialog> so it’s associated with the <button> that shows it:

<dialog id="dialogA"> <!-- id and data-dialog = dialogA --> ... </dialog>

And, lastly, include the “close” button:

<dialog id="dialogA">
  <button class="closeDialog">Close dialogA</button>
</dialog>

Note: <form method="dialog"> (that has a <button>) or <button formmethod="dialog"> (wrapped in a <form>) also closes the dialog.

How to prevent scrolling when the dialog is open

Prevent scrolling while the modal’s open, with one line of CSS:

body:has(dialog:modal) { overflow: hidden; }

Styling the dialog’s backdrop

And finally, we have the backdrop to reduce distraction from what’s underneath the top layer (this applies to modals only). Its styles can be overwritten, like this:

::backdrop {
  background: hsl(0 0 0 / 90%);
  backdrop-filter: blur(3px); /* A fun property just for backdrops! */
}

On that note, the <dialog> itself comes with a border, a background, and some padding, which you might want to reset. Actually, popovers behave the same way.

To implement a non-modal dialog, use:

show() instead of showModal()
dialog[open] (targets both) instead of dialog:modal

Although, as I said before, the Popover API doesn’t require JavaScript, so for non-modal overlays I think it’s best to use that.

The Popover API (`<element popover>`)

Use case: Non-modal overlays

Popups, basically. Suitable use cases include tooltips (or toggletips — it’s important to know the difference), onboarding walkthroughs, notifications, togglable navigations, and other non-modal overlays where you don’t want to lose access to the main document. Obviously these use cases are different to those of dialogs, but nonetheless popovers are extremely awesome. Functionally they’re just like just dialogs, but not modal and don’t require JavaScript.

Marking up popovers

To begin, the popover needs an id as well as the popover attribute with the manual value (which means clicking outside of the popover doesn’t close it), the auto value (clicking outside of the popover does close it), or no value (which means the same thing). To be semantic, the popover can be a <dialog>.

<dialog id="tooltipA" popover> ... </dialog>

Next, add the popovertarget attribute to the <button> or <input type="button"> that we want to toggle the popover’s visibility, with a value matching the popover’s id attribute (this is optional since clicking outside of the popover will close it anyway, unless popover is set to manual):

<dialog id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

Place another one of those buttons in your main document, so that you can show the popover. That’s right, popovertarget is actually a toggle (unless you specify otherwise with the popovertargetaction attribute that accepts show, hide, or toggle as its value — more on that later).

Styling popovers

By default, popovers are centered within the top layer (like dialogs), but you probably don’t want them there as they’re not modals, after all.

<main>
  <button popovertarget="tooltipA">Show tooltipA</button>
</main>

<dialog id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

You can easily pull them into a corner using fixed positioning, but for a tooltip-style popover you’d want it to be relative to the trigger that opens it. CSS Anchor Positioning makes this super easy:

main [popovertarget] {
  anchor-name: --trigger;
}

[popover] {
  margin: 0;
  position-anchor: --trigger;
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;
}

/* This also works but isn’t needed
unless you’re using the display property
[popover]:popover-open {
    ...
}
*/

The problem though is that you have to name all of these anchors, which is fine for a tabbed component but overkill for a website with quite a few tooltips. Luckily, we can match an id attribute on the button to an anchor attribute on the popover, which isn’t well-supported as of November 2024 but will do for this demo:

<main>
  <!-- The id should match the anchor attribute -->
  <button id="anchorA" popovertarget="tooltipA">Show tooltipA</button>
  <button id="anchorB" popovertarget="tooltipB">Show tooltipB</button>
</main>

<dialog anchor="anchorA" id="tooltipA" popover>
  <button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>

<dialog anchor="anchorB" id="tooltipB" popover>
  <button popovertarget="tooltipB">Hide tooltipB</button>
</dialog>

main [popovertarget] { anchor-name: --anchorA; } /* No longer needed */

[popover] {
  margin: 0;
  position-anchor: --anchorA; /* No longer needed */
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;
}

The next issue is that we expect tooltips to show on hover and this doesn’t do that, which means that we need to use JavaScript. While this seems complicated considering that we can create tooltips much more easily using ::before/::after/content:, popovers allow HTML content (in which case our tooltips are actually toggletips by the way) whereas content: only accepts text.

Adding JavaScript functionality

Which leads us to this…

Okay, so let’s take a look at what’s happening here. First, we’re using anchor attributes to avoid writing a CSS block for each anchor element. Popovers are very HTML-focused, so let’s use anchor positioning in the same way. Secondly, we’re using JavaScript to show the popovers (showPopover()) on mouseover. And lastly, we’re using JavaScript to hide the popovers (hidePopover()) on mouseout, but not if they contain a link as obviously we want them to be clickable (in this scenario, we also don’t hide the button that hides the popover).

<main>
  <button id="anchorLink" popovertarget="tooltipLink">Open tooltipLink</button>
  <button id="anchorNoLink" popovertarget="tooltipNoLink">Open tooltipNoLink</button>
</main>

<dialog anchor="anchorLink" id="tooltipLink" popover>Has <a href="#">a link</a>, so we can’t hide it on mouseout
  <button popovertarget="tooltipLink">Hide tooltipLink manually</button>
</dialog>

<dialog anchor="anchorNoLink" id="tooltipNoLink" popover>Doesn’t have a link, so it’s fine to hide it on mouseout automatically
  <button popovertarget="tooltipNoLink">Hide tooltipNoLink</button>
</dialog>

[popover] {
  
  margin: 0;
  top: calc(anchor(bottom) + 10px);
  justify-self: anchor-center;

  /* No link? No button needed */
  &:not(:has(a)) [popovertarget] {
    display: none;
  }
}

/* Select and loop all popover triggers */
document.querySelectorAll("main [popovertarget]").forEach((popovertarget) => {
  
  /* Select the corresponding popover */
  const popover = document.querySelector(`#${popovertarget.getAttribute("popovertarget")}`);
  
  /* Show popover on trigger mouseover */
  popovertarget.addEventListener("mouseover", () => {
    popover.showPopover();
  });

  /* Hide popover on trigger mouseout, but not if it has a link */
  if (popover.matches(":not(:has(a))")) {
    popovertarget.addEventListener("mouseout", () => {
      popover.hidePopover();
    });
  }
});

Implementing timed backdrops (and sequenced popovers)

At first, I was sure that popovers having backdrops was an oversight, the argument being that they shouldn’t obscure a focusable main document. But maybe it’s okay for a couple of seconds as long as we can resume what we were doing without being forced to close anything? At least, I think this works well for a set of onboarding tips:

<!-- Re-showing ‘A’ rolls the onboarding back to that step -->
<button popovertarget="onboardingTipA" popovertargetaction="show">Restart onboarding</button>
<!-- Hiding ‘A’ also hides subsequent tips as long as the popover attribute equates to auto -->
<button popovertarget="onboardingTipA" popovertargetaction="hide">Cancel onboarding</button>

<ul>
  <li id="toolA">Tool A</li>
  <li id="toolB">Tool B</li>
  <li id="toolC">Another tool, “C”</li>
  <li id="toolD">Another tool — let’s call this one “D”</li>
</ul>

<!-- onboardingTipA’s button triggers onboardingTipB -->
<dialog anchor="toolA" id="onboardingTipA" popover>
  onboardingTipA <button popovertarget="onboardingTipB" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipB’s button triggers onboardingTipC -->
<dialog anchor="toolB" id="onboardingTipB" popover>
  onboardingTipB <button popovertarget="onboardingTipC" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipC’s button triggers onboardingTipD -->
<dialog anchor="toolC" id="onboardingTipC" popover>
  onboardingTipC <button popovertarget="onboardingTipD" popovertargetaction="show">Next tip</button>
</dialog>

<!-- onboardingTipD’s button hides onboardingTipA, which in-turn hides all tips -->
<dialog anchor="toolD" id="onboardingTipD" popover>
  onboardingTipD <button popovertarget="onboardingTipA" popovertargetaction="hide">Finish onboarding</button>
</dialog>

::backdrop {
  animation: 2s fadeInOut;
}

[popover] {
  margin: 0;
  align-self: anchor-center;
  left: calc(anchor(right) + 10px);
}

/*
After users have had a couple of
seconds to breathe, start the onboarding
*/
setTimeout(() => {
  document.querySelector("#onboardingTipA").showPopover();
}, 2000);

Again, let’s unpack. Firstly, setTimeout() shows the first onboarding tip after two seconds. Secondly, a simple fade-in-fade-out background animation runs on the backdrop and all subsequent backdrops. The main document isn’t made inert and the backdrop doesn’t persist, so attention is diverted to the onboarding tips while not feeling invasive.

Thirdly, each popover has a button that triggers the next onboarding tip, which triggers another, and so on, chaining them to create a fully HTML onboarding flow. Typically, showing a popover closes other popovers, but this doesn’t appear to be the case if it’s triggered from within another popover. Also, re-showing a visible popover rolls the onboarding back to that step, and, hiding a popover hides it and all subsequent popovers — although that only appears to work when popover equates to auto. I don’t fully understand it but it’s enabled me to create “restart onboarding” and “cancel onboarding” buttons.

With just HTML. And you can cycle through the tips using esc and return.

Hear me out. If you like the HTML-ness of popover but the semantic value of <dialog>, this JavaScript one-liner can make the main document inert, therefore making your popovers modal:

document.querySelectorAll("dialog[popover]").forEach(dialog => dialog.addEventListener("toggle", () => document.body.toggleAttribute("inert")));

However, the popovers must come after the main document; otherwise they’ll also become inert. Personally, this is what I’m doing for modals anyway, as they aren’t a part of the page’s content.

<body>
  <!-- All of this will become inert -->
</body>

<!-- Therefore, the modals must come after -->
<dialog popover> ... </dialog>

Aaaand… breathe

Yeah, that was a lot. But…I think it’s important to look at all of these APIs together now that they’re starting to mature, in order to really understand what they can, can’t, should, and shouldn’t be used for. As a parting gift, I’ll leave you with a transition-enabled version of each API:

Sliding disclosures
Popping dialog (with fading backdrop)
Sliding popover (hamburger nav, because why not?)

The Different (and Modern) Ways to Toggle Content originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

November 8, 2024

What’s a Blog (& Why I’d Consider Starting One)

If you’re not sure what a blog is, you’ve definitely come across one at some point. Perhaps you’ve stumbled across a blog when you’ve searched “healthy dinner recipes.” Maybe you don’t know it, but you’re on a blog now.

I love blogging. I created my first blog in 2010 but stopped writing it just as I got my first-ever comment. Knowing what I know now, that was my biggest blogging mistake.

Now, I have my own blog — a blog about cycle touring. My blog has one goal: to help people get into cycle touring and travel the world. It’s what you’d call an affiliate blog.

I also write blogs for HubSpot, and as an SEO I work with businesses on their blog strategy to generate traffic and leads for their website.

One of my clients generates 64% of their traffic via the blog. Thanks to analytics, we also know that $30,000 to $50,000 per month is generated from people who also viewed the blog.

A blog is not just a page you stumble across, and it’s not reserved for personal anecdotes; a blog can help you develop an online presence, prove yourself an expert in an industry, and attract more quality leads to all pages of your site.

I’m not the only one to think so — 76% of B2B marketers rate blogs as an effective tool for lead generation.

Professional blogs are sometimes called “news” or “knowledge centers” or “articles.” Many of these are, at their core, blogs.

If you're contemplating creating a blog for your business or want to know what one is, keep reading.

Table of Contents

What is a blog?
What is a blog used for?
How To Blog
Blog vs. Website
Why You Need a Blog
How to Promote Your Blog

A brief history — in 1994, Swarthmore College student Justin Hall is credited with the creation of the first blog, Links.net. At the time, however, it wasn't considered a blog … just a personal homepage.

In 1997, Jorn Barger, blogger for Robot Wisdom, coined the term “weblog,” which was meant to describe his process for “logging the web” as he surfed the internet. The term “weblog” was shortened to “blog” in 1999 by programmer Peter Merholz.

In the early stages, a blog was a personal web log or journal in which someone could share information or their opinion on a variety of topics. The information was posted reverse chronologically, so the most recent post would appear first.

Nowadays, a blog is a regularly updated website or web page, and can either be used for personal use or to fulfill a business need.

For instance, HubSpot blogs about various topics concerning marketing, sales, and service because HubSpot sells products related to those three subjects — so, more than likely, the type of readers HubSpot’s blog attracts are going to be similar to HubSpot’s core buyer persona.

My blog, Road to Frame, is a blog that documents my 24,000-mile bike ride across the world. It’s loaded with personal stories, travel tips, guides, kit lists, reviews, hotel recommendations, and more.

My blog doesn’t serve a larger company, it’s ‘just’ my passion: a blog written for an adventurous community who want to travel by bike.

Although my blog isn’t a business blog, it is still a monetized blog that makes a passive income month after month. Through my blog, I make money on ads, affiliate links, and product recommendations.

What is a blog post?

A blog post is an individual web page on your website that dives into a particular sub-topic of your blog.

For instance, let's say you start a fashion blog on your retail website. One blog post might be titled, “The Best Fall Shoes for 2024.”

The post ties back to your overall blog topic as a whole (fashion), but it also addresses a very particular sub-topic (fall shoes).

Blog posts allow you to rank on search engines for a variety of keywords. In the above example, your blog post could enable your business to rank on Google for “fall shoes.”

When someone searches for fall shoes and comes across your blog post, they can access the rest of your company's website. They might click “Products” after they read your post and take a look at the clothing items your company sells.

A blog post links back to your overall blog site. For instance, right now, you're on blog.hubspot.com/marketing/what-is-a-blog. The “what-is-a-blog” section of the URL is tied back to /marketing/, which is the blog.

If you need help creating a blog post, you can use HubSpot’s AI Blog Writer to do so.

What are the benefits of a blog?

There are many benefits of blogging, but here are the top three reasons to have a blog, in my opinion.

Audience Engagement

Your blog is a tool that allows you to engage more with an audience. On my blog, readers can comment on blog posts. A blog is more like a two-way conversation compared to the rest of a website.

The image below is taken from the comment section of one of my blog posts. This was a proud moment for me as a blogger.

There was an engaged commentary on the blog, but what stood out to me was that other readers were helping each other in the comments. The conversation was extending to a community, not just me and one reader. I loved it.

I’ve seen comments like this on business blogs, too. For my client in the retail space, we sometimes get comments asking for elaboration on topics or related queries. The comment section inspires new blog posts and helps us understand our audience even more.

Pro tip: Make sure you reply to comments to encourage others to leave them. You can also invite people to comment within the content of the article.

Content Generation and Repurposing

Blogs are generally longer-form content. Once you’ve created a blog post, you’ve got content that can be repurposed and shared across your marketing channels, such as social media.

If you set up the right analytics, you can also share and analyze data about user interaction. For example, you can monitor how many readers share your blog posts on social, how much time people spend on a blog post, and how far a user scrolls.

All of this data can help with your business and marketing more generally. If the number of shares are high and users scroll to the bottom, then you can bet you’ve got a good blog that’s of high interest to your audience.

Pro tip: If you repurpose content onto visual platforms like Instagram or Pinterest, you’ll likely create an image, or maybe a video. If you do, embed the asset into the blog, too! Repurposing works both ways.

Traffic Generation

If you add a blog (or a news section) to your website, and start writing strategically, considering SEO, you are likely going to start ranking for a lot of keywords. Your blog will likely be home to the majority of keywords. Therefore, your blog drives traffic to your website.

It enables you to better convert that traffic into leads, it allows your business to establish authority in an industry, and it continues to help your business grow and attract new customers months and even years after publication.

Pro tip: Blogs can generate traffic long after they're written; that’s the great thing about a blog. One blog post has compounding benefits for years.

Blog vs. Website

A blog is typically a section of your business's website. HubSpot’s website is a good example of a business website that has a blog as part of it.

The screenshot below shows that the blog is a section of the website and is navigable via the main menu.

Your blog differs from your website pages.

Generally your website is quite static. You create pages with purposes (eg. homepages, service pages, product pages, about pages, contact us pages etc.).

These pages make up the website. Your services likely don’t change much and remain static until you make a (probably minor) update.

Blogs, on the other hand, are expected to be updated frequently. You might use your blog to write about industry trends, educational pieces to teach your audience something or showcase your expertise.

For businesses, I often think of the blog as a section of the website that supports the most important pages (e.g., the money-generating pages: products and services).

A blog can also be an entire website, and often, it is if the blog is for personal use alone — for instance, a travel blog or a recipe blog.

If you're starting from scratch and anxious about your first post, check out our step-by-step guide to writing a blog post.

What is the difference between a wiki and a blog?

A wiki is a collaborative space where anyone who visits the site can edit, share, or publish content — Wikipedia is one of the most popular examples of this.

On the other hand, there is typically only one person, or a team of people, with admin permissions to edit, share, or publish to a blog. Website visitors who come across the blog can potentially leave comments at the bottom of the blog post, but they cannot publish to the site or edit the posted material.

1. To help your company rank on search engines.

Typically, a business will use a blog to help the business's website rank on search engines. You can absolutely employ paid ads, to help your company homepage rank on page one of Google — but a more effective, long-term solution is blogging.

Often, blogging is synonymous with content strategy and SEO. If you want a successful blog that actually gets visitors, you need to think seriously about SEO.

Or, you need to share the content far and wide in other areas of marketing, social media and emails, for example.

To consider how your company can rank on search engines via a blog, I’ll start with an example — let’s say you work for a web design start-up with very little online presence.

You decide to spend the first year writing and posting regular blog content that strongly relates to web design. Over time, your traffic increases and other companies link to your site for information regarding web design.

When this happens, Google recognizes your company as a legitimate source for web design information. Eventually (with a lot of trial and error), your blog posts begin ranking on page one of Google for terms like “web design,” “website builder,” and “ecommerce website.”

Then, one day, you search “web design companies in X city” and find your company is now on page one. This is likely due, in large part, to your consistent blogging efforts.

Take a look at How HubSpot Uses Blogging to Rank #1 on Google to learn more about specific strategies you can implement to rank on search engines.

2. To share information about a given topic and become an expert in an industry.

In 2006, Boston-native Matt Kepnes quit his job and began traveling the world. He documented his travels in his now-infamous blog, NomadicMatt.com.

After about a year, thanks to tireless blogging efforts and SEO strategies that enabled him to rank on Google, he began pulling in $60,000. Matt also created ebooks, and used sponsorships and affiliate marketing to make money.

Additionally, he wrote a New York Times best-seller, “How to Travel the World on $50 a Day.”

Now, Matt's blog attracts 1.5 million visitors a month and grosses about $750,000 a year — and he's become a well-known expert in the travel space.

If you want to become known as an expert in a topic that interests you, from fashion to blogging to fitness, you can — and, oftentimes, it starts with a blog.

3. To attract visitors to your site and turn those visitors into leads.

There’s only so much traffic you can get from the homepage or About Us page of your company’s website. Of course, those pages are critical for leads who are already interested in your products — but they often won’t attract traffic from top-of-the-funnel. That’s where your blog comes into play.

Your blog can be a general resource to help your website visitors even before those visitors are ready to purchase from you.

For instance, let’s say you sell products for ecommerce stores. You might attract some ecommerce owners who are already searching online for your products, but in most cases, the ecommerce owner isn’t going to be ready to buy right out of the gate.

Alternatively, if you begin blogging about tips to help the retail owner who is just starting out — like “How to start a retail website,” or “Benefits of ecommerce vs. physical store” — you’ll slowly attract an audience who enjoys your content and finds it useful.

Then, when those site visitors’ ecommerce stores begin growing (thanks, in part, to your blog), they'll already know about your brand and already trust it as a helpful source. That's when they'll check out your product pages.

Here’s an example from ASOS showing how they attract leads via the blog. The screenshot below is taken from their blog “Every Shoe You’ll be Wearing This Autumn.” Within the blog they share an image, a styling tip, and, of course, a link to the product.

Image Source

4. To cultivate an online community and engage with an audience.

At the very least, you might create a blog to engage with an online community of readers with similar interests. Maybe you start a food blog and ask readers to share their own recipes with you.

Alternatively, perhaps you start a blog that focuses on DIY projects. You post the fun, DIY projects you've completed in your own home, and you ask your readers to share their own DIY tips in exchange.

Why You Need a Blog

For businesses, a blog is a valuable tool to have in your marketing strategy. It’s a great way to get the word out about your brand and build rapport with your audience and potential customers.

Use it to provide your audience with useful industry-related information, share company news, and product updates. Blog content is also easy to repurpose for email marketing needs and across social channels.

Without one, you’re missing out on opportunities to promote your brand.

Creating engaging blog content may seem like a heavy lift at first. Luckily there are free tools like HubSpot’s AI Content Writer to help you write better content faster.

1. Choose your target audience.

When you're starting your own blog, it’s important to think of your target audience. Who are you creating the blog for? And who do you want reading your blog posts? Before you can get started, you have to consider the niche you’re writing about and what topics you'll cover and why.

Brainstorming your target audience is similar to creating a buyer persona for your company. Plus, this will give you an idea on what kind of content you want to produce.

2. Brainstorm content ideas frequently based on your market segment.

Once you’ve started a blog, you’ll want to churn out high-quality, consistent content on a regular basis. This isn't always easy. Creating content is a time-consuming task. You want to ensure your content is something your readers would be interested in and hopefully can help with your SEO — more on that in a minute.

To begin brainstorming content, consider what your competitors are doing. Look for gaps in their content that you can fulfill.

Additionally, you should also do SEO research to verify that users are searching for and interested in the topic you want to write about. Tools like SEMrush, Google Keyword Planner, and Answer The Public can help.

You'll want to brainstorm content frequently so you always have ideas that you can execute. Having content ideas in the pipeline is an easy hack that removes the need to think on the fly. Using a Blog Ideas Generator will help you to fill your pipeline with content ideas that are relevant and helpful to your target audience.

Image Source

3. Research and review a content management system (CMS).

In order to create your blog, you'll most likely use a CMS. A CMS is a tool you can use to design, manage, and publish on your website. You’ve probably heard of examples like WordPress or Wix. I wrote a post on the best blogging platforms to help businesses and bloggers find the best platform for them.

If you don’t have a website yet, you’ll want to choose a CMS that has the ability to host a blog. If you already have a site, check if it has blogging options built in. If not, you may need to find a CMS that integrates with your site or choose an entirely new CMS altogether.

There are tons of options in the CMS world, including HubSpot. (You can try out our CMS here.)

HubSpot’s free blog maker provides everything you need, including free hosting and security tools. It’s easy to get started, with hundreds of free themes to choose from, and a simple visual editor.

4. Create a blog strategy and editorial calendar.

Just like creating a business, you can't create a blog without a strategy in mind. Your strategy should answer questions like:

Who are you targeting?
What type of content will you produce?
When will you post?
Where will you promote your content?

Overall, you should have a mission, vision, and goals for your blog.

Then, create an editorial calendar to keep you organized and on track. A calendar will help you track what posts are coming up, ensure writers are meeting deadlines, and assure you have enough content ideas for the foreseeable future.

5. Pay attention to article structure.

When you're writing your blog posts, it's important to consider the article structure. For instance, are you using subheads to break up the post so it's easy to digest? Are you using bullet points and images that make the post easy to scan? These are important factors that will help keep your reader on the page.

Additionally, you‘ll want to make sure that you’re using calls-to-action (CTAs), that will guide the reader on what you want them to do next. This is how you can start making money and generating leads from your blog.

6. Become an expert in marketing and promoting your blog.

Another element of blogging is marketing and promoting your blog posts. It's like the age-old adage, “When a tree falls in the woods and there is no one there to hear it, does it make a sound?”

Consequently, if you write a blog post but nobody reads it, will it have a positive impact on your company or brand? Probably not. That‘s why you’ll have to market your posts. You can use social media, SEO, your website, or your email newsletter to reach current and potential customers.

7. Learn about SEO.

Like I mentioned above, you want people to read your blog posts. One way to do that is to get organic traffic through SEO. If you want your blog to be successful, learn how to research keywords, how to rank in search engines, and how to build an SEO strategy.

I actually learned all about SEO through my blog. I started writing a blog, realized that I wanted people to read it, so I needed to learn SEO. I started employing SEO best practices from the few Google ranking factors that I knew at the time.

Before I knew it I had my first page one rank one for a long tail keyword and I was hooked!

My first page one blog rank is pictured below. The keyword is “cycling in Azerbaijan.” Pretty niche! Since not many people are doing it, it was, relatively speaking, easy for me to achieve.

If you’re starting in SEO, that’s what I’d recommend. Pick a long-tail, easy-to-rank-for keyword, even if it’s not ideal for business, just try and get something ranking and practice SEO.

8. Use a variety of blog post styles.

Your blog posts should be interesting to everyone who reads them, and especially for customers who read every single post.

For those that are active followers and ambassadors of your blog, you should use a variety of blog post styles so your blog doesn't get stale. Consider using how-to posts, list-based posts, or thought leadership.

9. Repurpose old content.

Producing blog content consistently can be hard. But you don't have to reinvent the wheel every time you write a blog post.

You can update old blog posts to keep them accurate and comprehensive.

Additionally, you can use other content of yours, perhaps a YouTube video or a podcast, and repurpose the content into a blog post.

Get started with HubSpot's Free AI Blog Writer

To freshen up old content, you can leverage HubSpot's Free AI Blog Writer — the software can help you generate ideas and write copy.

10. Perform a competitive analysis.

To understand your audience, run a competitive analysis on your top blog competitors. This will help you identify trends, uncover gaps in the content in your industry, and give you ideas on topics and ways to promote your blog.

Running a competitive analysis will help you build and iterate on your own blog strategy.

How to Promote Your Blog

If you’ve got your SEO sorted, visitors will largely find your blog through Google, but as mentioned earlier, a blog is an excellent channel to build awareness and promote your brand.

Here’s how to do it:

1. Link from your website.

This may seem obvious, but you should make your blog easy to find on your website. Consider using an attention-grabbing CTA or making it easily accessible from a dedicated spot on your homepage.

2. Repurpose blog content.

As previously mentioned, repurposing content will save you loads of time when creating content, but it also allows you to promote your brand across multiple channels whether through video, podcasts, email, or social.

3. Utilize internal linking.

Once you’ve started generating a significant amount of posts on your blog, it can be helpful to link to other posts or related topic pages within your blog.

This is good for SEO, but it will also help your readers find pertinent information on a topic they are interested in.

4. Promote on social media.

With the help of eye catching video or images, you can also leverage your social media channels to drive traffic to your blog. Additionally, consider placing a link to your blog on all of your social accounts.

5. Consider guest blogging.

Guest posting on another industry-related blog gives your brand the opportunity to introduce itself to new customers who may not have heard of you.

It’s also a great opportunity to network with other industry professionals and provide cross-promotion opportunities.

6. Leverage influencers.

Influencer marketing is a powerful tool you can use to give your brand some social proof credibility.

Similar to guest blogging, you’ll be able to tap into that person’s audience and introduce your brand to a new audience. Be sure to work on cultivating a relationship first before reaching out for a favor.

7. Explore paid options.

If you have the budget to do so, paid content promotion is another route you can take to get eyes on your content. Running ads or a boosted post on Facebook is a good entry point to paid promotion.

If you're officially ready to get started with your own blog, take a look at our guide to creating a successful blog strategy.

Blogging is beneficial for business.

With a blog, the sky’s the limit — and so are the benefits for your business, as I’ve seen with the many blogs I have created or written for myself. When new content is published regularly, engaging, and helpful to your audience, it’s an invaluable tool to have in your marketing kit.

Editor's note: This post was originally published in February 2019 and has been updated for comprehensiveness.

November 8, 2024

Google My Business Guide: Complete Overview & Expert Tips for 2025

If you're just getting started with local SEO, this Google My Business guide is the perfect spot to kick things off.

Even though GMB looks simple and pretty intuitive, there are a lot of things to pay attention to. You’ll really benefit from it only if your listing is set up right.

Remember — when people search for a product or service near them, they're usually very close to making a purchase. One in two people who conduct a local search (think “watch repair near me”) visit a store that day.

So it's important the information about your business that shows up when people search Google is as accurate, complete, and optimized as possible.

In this article, I’ll show you how to create your Google My Business account, verify your business, make your listing as strong as possible, and more — with some expert guidance along the way.

Table of Contents

What is Google My Business?
Is Google My Business free?
Google My Business Benefits
How to Create a Google My Business Listing
How to Verify Your Business on Google
How to Optimize Your GMB Listing
Google My Business App — Does It Exist?

But wait … do I need Google My Business or Google Business Profile? 🧐

They're the same thing. It used to be called Google My Business, and a lot of people still call it that, even though it’s now Google Business Profile. To keep things simple, in this piece, we’ll stick with the old name most folks are familiar with.

Image Source

Google My Business Benefits

Let’s explore the key six benefits of Google Business Profile and how it can help you get noticed online and bring in more local customers by putting all the important info right where people can see it.

1. Increased Visibility and Better Rankings

According to Safari Digital, 46% of all Google searches are driven by local intent. Plus, 97% of people search online to find nearby stores, and in 2023, 28% of those local searches ended in a purchase.

So, what does Google My Business do for you?

It boosts your business’s presence in Google Search and Maps, especially in local searches. When someone searches for “near me" services, GMB ensures your business shows up in the top results — if relevant.

Image Source

Google looks at various factors, including relevance, distance, and the prominence of the business in the local area. A complete and optimized GMB listing gives Google the data it needs to rank you higher.

Example: A local pizza place sets up its GMB profile with updated info, like opening hours, pictures of its dishes, and customer reviews. Now, when someone in the neighborhood searches for “pizza delivery,” this restaurant appears in the local 3-pack — the top 3 results on Google Maps — which gets it more foot traffic and delivery orders.

2. Enhanced Customer Engagement

You can directly interact with your customers through Q&A sections and reviews.

Pissed Consumer reports that 75.5% of consumers trust online reviews, so responding to both positive and negative feedback is important for building trust and keeping people engaged.

Example: A hair salon actively responds to reviews — thanking those who leave positive comments and resolving issues for those who leave negative feedback. This shows they care about customer satisfaction and, at the same time, encourage others to leave reviews.

Expert tip: “We use a tool called BrightLocal to manage all our client reviews in one place. It‘s super helpful for staying organized. Respond to every single review, whether it’s positive or negative. When you respond, try to naturally weave in keywords related to your business and location,” advises Marshal Davis, president of Ascendly Marketing

3. Valuable Insights and Analytics

One of the best things about GMB is its valuable insights into customer behavior.

You can see how customers find your listing (search terms, location), what actions they take (such as calling your business or visiting your website), how many people check out your business via Maps, and how many users interact with you overall.

Image Source

Example: A local café notices through GMB insights that many customers find them using the term “breakfast near me.” Seeing this trend, they decide to promote their breakfast menu more heavily in posts and in-store promotions, leading to an increase in morning visitors.

4. Free Marketing and Advertising

GMB offers free exposure by letting you showcase photos, product or service descriptions, and key updates. This helps potential customers get a solid sense of your business before they even click on your website or step into your store.

The better your profile is optimized, the higher the chances you’ll appear in search results without spending money on PPC ads.

Example: A florist uses GMB to showcase bouquets and seasonal offers. When people search for “flower delivery,” they can see fresh photos of the latest arrangements, which leads to more calls for orders, especially during holidays like Valentine’s Day or Mother’s Day. Without any ad budget, they start appearing in local searches.

5. Mobile Access

All GMB listings are optimized for mobile, so when users search for businesses on their phones, they can quickly get all the info they need — directions, hours, reviews, etc.

This is crucial since 80% of Gen Z, 62% of millennials, 66% of Gen X, 35% of Boomers, and 52% of the general population primarily use mobile search.

Example: A bakery ensures their GMB listing is complete with an address, contact number, and hours of operation. When someone’s out shopping and searches for “bakery near me,” the listing pops up with a one-click option to call or get directions, driving foot traffic to the store.

6. Simplified Appointment Booking

Service-based businesses can use GMB’s appointment booking feature to let customers schedule appointments directly from the listing. Actually, Publer states that 95% of companies receive appointment requests via Google My Business.

This reduces friction and improves the customer experience by making the process easy and seamless. And that’s exactly what users prefer.

Example: A beauty spa adds an appointment link to their GMB listing. Clients searching for “facials” or “massage therapy near me” can now book their services directly from the search result, increasing bookings without requiring customers to visit the website first.

How to Create a Google My Business Listing

Step 1: Log into the Google Account you want to be associated with your business (or create a Google Account if you don’t already have one).
Step 2: Go to www.google.com/intl/en_us/business/ and select “Manage now.”
Step 3: Enter your business name.

Step 4: Choose your business type — online retail, local store, or service business.

Step 5: Time to choose the category. Select the most accurate category possible — you’re essentially telling Google which type of customers should see your business listing.

Expert tip: “Fill out your profile fully, and don’t limit your brand to one category. GBP lets you add up to 10 different sub-categories to your business beyond your primary option, which can help Google better understand everything you do. Your business isn’t one-dimensional, so add different categories for the full spectrum of your products and services. The more categories you add, the more keywords you’re likely to rank for,” Elisa Daniela Montanari, head of SEO at Wrike.

Step 6: Enter your business address.

Step 7: Add your business phone number (optional).

Step 8: Choose a verification option. If you’re not ready to verify your business yet, click “Try a different method” → “Verify Later.”

How to Verify Your Business on Google

There are several ways to verify your GMB listing:

By postcard
By phone
By email
Instant verification
Bulk verification

Postcard Verification

Step 1: If you aren‘t already logged into Google My Business, sign in now and choose the business you want to verify. (If you’re already logged in, you'll be at the verification step.)
Step 2: Make sure your business address is correct. Optional: Add a contact name — that's who the postcard will be addressed to.

Step 3: Click “Mail.” The postcard should reach you in five days — make sure you don't edit your business name, address, or category (or request a new code) before it comes, because this could delay the process.
Step 4: Once you've gotten the postcard, log into Google My Business. If you have more than one business location, select the location you want to verify. If you only have one, select “Verify now.”
Step 5: In the Code field, enter the five-digit verification code on your postcard. Click “Submit.”

If your postcard never shows up or you lose it, you can request a new code by signing into Google My Business and clicking the “Request another code” blue banner at the top of the screen.

Phone Verification

Google lets some businesses verify their location by phone. If you‘re eligible, you’ll see the “Verify by phone” option when you start the verification process.

Step 1: If you aren‘t already logged into Google My Business, sign in now and choose the business you want to verify. (If you’re already logged in, you'll be at the verification step.)
Step 2: Make sure your phone number is correct, then choose “Verify by phone.”

Step 3: Enter the verification code from the text you receive.

Email Verification

Google lets some businesses verify their location by phone. If you‘re eligible, you’ll see the “Verify by email” option when you start the verification process.

Step 1: If you aren‘t already logged into Google My Business, sign in now and choose the business you want to verify. (If you’re already logged in, you'll be at the verification step.)
Step 2: Make sure your email address is correct, then choose “Verify by email.”
Step 3: Go to your inbox, open the email from Google My Business, and click the verification button in the email.

Instant Verification

If you‘ve already verified your business with Google Search Console (a free tool that lets you manage your website’s search performance and health), you might be able to instantly verify your email.

Step 1: Sign into Google My Business with the same account you used to verify your business with Google Search Console. (Some business categories aren‘t eligible for instant verification, so if you don’t get a notification asking you to verify the listing, you'll have to use a different verification method.)

Bulk Verification

If you operate more than 10 locations for the same business — and you're not a service business or an agency managing locations for multiple businesses — you might be eligible for bulk verification.

Step 1: If you aren't already logged into Google My Business, sign in now and choose a location. Click “Get verified” next to its name.
Step 2: Click “Chain.”
Step 3: Fill out the verification form with your business name (as well as the parent company, if applicable), country or countries where you operate, all contact names (i.e., everyone who will be using the Google My Business account), contact phone number, business manager email (someone at the business who can verify you're a representative of that business), and the email address of your Google Account Manager.
Step 4: Submit the verification form. It can take up to a week for Google to review and process your claim.

How to Optimize Your GMB Listing

Once you‘ve verified your business, it’s time to finish fleshing out your profile.

Go to the Google My Business dashboard, click the listing you'd like to work on, select “Info,” and then choose a section to fill out or update.

Add as much information and media as you can, including a business profile photo, the area you serve, your hours, attributes (e.g., “wheelchair accessible,” “free wifi”), the day and year you opened, and a public phone number and website URL.

Anyone can “suggest an edit” to your listing by clicking on the three dots in the right corner, so it‘s important to A) get everything right the first time (so you don’t encourage random people to make their own changes) and B) periodically log into your GMB dashboard and make sure all the details look right.

At any point in time, you can edit your business profile by logging into your GMB dashboard, clicking on “Info,” clicking the pencil next to the field you'd like to edit, making your change, and then choosing “Apply.”

Expert tip: “Create a listing for each location and skip the copy-and-paste. Each description should be unique so Google can tell these are two different businesses operating under the same umbrella. If each profile is a carbon copy, it could look suspicious to Google, and your ranking may suffer. That said, you shouldn’t need to manage everything manually, so use a tool to manage multiple profiles from a centralized location,” says Brooke Webber, head of marketing at Ninja Patches

Regarding optimizing your listing, I also spoke with Sergey Galanin, the SEO director at Phonexa, who pointed out that one common mistake is not keeping the details on your website in sync with your GMB.

If there’s inconsistency between your site and GMB, it can confuse potential customers. They might come across conflicting information and get skeptical about your business and what you offer.

This can lead to lost customers, a negative online reputation, and even bad reviews. Worst case, Google could even penalize your business for having mismatched information.

Google My Business Photos

According to Google, businesses with photos see 35% more clicks to their website and 42% higher requests for driving directions in Google Maps.

Ditch the generic stock photos and showcase what makes your business unique.

Think photos of your team in action, happy customers enjoying your products, or behind-the-scenes peeks at your process, says Marshal Davis.

Photos should be at least 720 pixels wide by 720 pixels high and JPG or PNG files.

Not sure how many pictures to add — or what they should be of?

Cover photo

Your Google My Business cover photo is one of the most important, as it shows up front and center on your listing.

Profile photo

Your profile photo is what appears when you upload new photos, videos, or review responses.

Along with your profile and cover photos, you can and should upload other pictures to make your listing more informative and engaging.

Type	Description	Google-recommended minimum	Suggestions
Exterior	The outside of your business from different directions.	Three photos	Use pictures from different times of day (morning, afternoon, evening) so customers always recognize your business.
Interior	The inside of your business, with a focus on decor and ambiance.	Three photos	Give customers an accurate idea of what it will look like to stand or sit inside your business.
Product	A representation of the types of products or services you offer.	One photo per product type or service	Show the products you're known for and make sure the photos are lit well.
Employees at work	“Action” shots of your employees delivering the types of services you offer.	Three	Try to capture your employees with satisfied customers.
Food and drink	Pictures that represent your most popular menu items.	Three	Consider hiring a food photographer — these are tricky to get right! If that's not in the budget, use bright, even lighting (i.e. no shadows or dimness).
Common areas	Photos of where your customers will spend time (think a lobby or lounge).	One photo per common area	Represent the variety of amenities you offer.
Rooms	Pictures of your different room and suite options (if applicable).	Three	Don't try to mislead guests — show your wallet-friendly and high-end options.
Team	A shot of your management team and staff.	Three	Use pictures that show your unique culture and team personality.

Google My Business Videos

You can also add videos. Videos must be:

30 seconds or shorter
100 MB or smaller
720p resolution or higher

Videos can add some variety to your profile and make you stand out among other businesses in your category; however, don‘t worry if you don’t have any. Unlike photos, they're not a “must-have.”

Google My Business Reviews

One of the best ways to encourage future customers to leave positive reviews? Respond to current ones. Not only does leaving an appreciative response show the original reviewer you're thankful for their support, but it also makes that positive review stand out on your listing and influences people to leave their own reviews.

Here's a sample reply to a satisfied customer:

Thank you for your business, [name]! We‘re so glad you enjoyed [product, e.g., "the blueberry pie"] — it’s one of our favorites, as well. Hope to see you back at [business name] soon.

You should also respond to negative reviews to show you take them seriously and placate the unhappy buyer. But make sure you're extremely courteous — attacking them back will only make you look unprofessional and their review more credible.

Thank you for the feedback, [name], and I‘m incredibly sorry [product/experience] did not meet your expectations. [If you’ve made a change, mention it here — e.g., “We're now double-checking orders to make sure everyone gets exactly what they asked for.”] If you‘d like to come back in, we’d be happy to give you [product] on the house. In any case, thanks for your business, and I hope we can do better next time.

Google My Business App — Does It Exist?

The Google My Business app is gone. To keep your Business Profile fresh and connect with customers, use the Google Maps app and Google Search instead.

Simply open the Google Maps app on your phone and go to the “Business” tab to manage your profile easily. Use the same Google Account linked to your Business Profile.

The Google Maps app offers most features of the old Google My Business app. You can:

Add or claim your business to show up on Google.
Edit your business info, like address, hours, or photos.
Respond to customer messages or calls.
Set up notifications for your mobile device.
Manage your reviews.
Check your performance metrics.
Advertise your business.

Download the Google Maps app on both iOS and Android.

Do I need a Google My Business account?

As my final piece of advice: If you run a local business and don’t have Google My Business, it’s like shooting yourself in the foot.

I dare to say it’s your best chance to get noticed by customers nearby and show them exactly what you offer. Plus, it lets you connect with them through reviews and posts, which helps build trust in your community.

And thanks to all the insights you get from GMB analytics, it’s easier than ever to fine-tune your marketing and find what works.

Bottom line? Google My Business is a free, powerful tool that drives local traffic right to your door. Don't sleep on it. :)

P.S. Speaking of getting noticed, if you're ready to launch your own business, check out our free Business Startup Kit. It includes nine easy templates to help you come up with a catchy name, create a solid business plan, and pitch your idea to investors. Figuring out startup costs or planning your marketing strategy? This guide has everything you need to get started.

Editor's note: This post was originally published in April 2018 and has been updated for comprehensiveness.

November 8, 2024

Affiliate Marketing 2024: How to Launch and Succeed

Affiliate marketing continues to be a lucrative way for individuals and businesses to earn income online by promoting products or services and earning commissions on resulting sales. As we move into 2024, the landscape of affiliate marketing is evolving, presenting new opportunities and challenges. This guide will provide you with a comprehensive overview of how …

Continue reading "Affiliate Marketing 2024: How to Launch and Succeed"

The post Affiliate Marketing 2024: How to Launch and Succeed first appeared on Lucid Softech.

November 8, 2024

65+ Best DaVinci Resolve Templates 2025 (Free & Pro)

DaVinci Resolve is the go-to video editing software for most professionals. High-quality editing tools, color correction, audio post-production tools, and the ability to use the software for free convinced more people to switch to DaVinci Resolve.

Now, there’s one more reason to use DaVinci Resolve— templates! Thanks to its massive growth, the community around the software doubled in size. With it came more professional-quality templates for you to use in your projects.

In this post, we showcase some of the best DaVinci Resolve templates we’ve found. There are templates for everything from creating intro scenes to adding lower-thirds, titles, and much more.

Check out the templates below, download them all (there are free ones in there), and experience the magic of DaVinci Resolve.

Urban Trendy Opener for DaVinci Resolve

This DaVinci Resolve template will help you design modern and trendy openers for your videos with a stylish urban vibe. It includes cool and attractive animations and effects to add that Extra look to your projects. You can easily customize the template to your preference too.

Liquid Slides DaVinci Resolve Template

A collection of creative slides for DaVinci Resolve. This template comes with multiple styles of slide layouts with liquid-style animations and effects. You can use these in your promo videos and create slideshows as well.

Fast Dynamic Intro Template for DaVinci Resolve

This DaVinci Resolve intro template has fast and dynamic animations that fit perfectly with energetic videos. It’s especially ideal for sports, gym, adventure, and fitness-themed videos. There are 13 media placeholders and 9 text placeholders in this template.

Colorful Opener Intro for DaVinci Resolve

Featuring 7 media placeholders, 6 titles, and a logo placeholder, this DaVinci Resolve has the perfect design for making openers for both business and creative videos. The template has bright and colorful effects too.

Wedding Elegance – Free DaVinci Resolve Template

This is a free DaVinci Resolve template you can use to create beautiful openers and slides for wedding-themed videos. It features sparkling text animations and easily editable media and text placeholders.

Newspaper History – Free DaVinci Resolve Slideshow Template

You can use this free DaVinci Resolve template to design attractive, documentary-style photo slideshows. It features a newspaper-themed design with newspaper backgrounds and editable media placeholders.

Event Promo – Free DaVinci Resolve Template

This free DaVinci Resolve template is perfect for making quick and professional-looking promo videos to promote your events and conferences. The template is easily editable and it’s most suitable for adverts and social media promos.

Fashion Opener DaVinci Resolve Template

This DaVinci Resolve template offers a trendy and stylish way to kick off your fashion videos. It provides engaging, easy-to-edit designs that can be customized to align with your brand’s aesthetic. The template creates a polished, professional look, making it an excellent tool for fashion content creators and enthusiasts alike.

YouTube Collage Slides for DaVinci Resolve

This DaVinci Resolve template adds depth and dynamism to any slideshow and it’s especially perfect for creating YouTube videos. Simple yet engaging, its design caters to a wide range of uses, helping you craft more compelling YouTube presentations in no time.

Creative Scenes for DaVinci Resolve

A meticulously designed slideshow template ideal for all your creative projects. This versatile DaVinci Resolve template delivers high-quality visuals, enabling you to exhibit your content effectively. Simple yet striking, it amplifies your storytelling potential, elevating your projects to new heights.

Elegant Slides for DaVinci Resolve

This is a chic-style DaVinci Resolve template designed to enhance your elegant fashion and beauty slideshow videos. It highlights your content with a sophisticated touch with its stylish aesthetic and seamless functionality, it’s an exceptional addition for any DaVinci Resolve user seeking to elevate their video presentations.

News Intro DaVinci Resolve Template

An incredibly resourceful DaVinci Resolve template for producing professional, news-style introductions. This template is designed to facilitate seamless editing while creating high-quality news intros, enhancing the overall appeal of your broadcast.

Summer Sale Promo for DaVinci Resolve

Check out this summer sale promo DaVinci Resolve template for creating cool and breezy promo videos. It’s an excellent tool for crafting dynamic promotional videos, infusing a summery spirit into your sales messages. The template effortlessly helps enhance your visuals, balancing simplicity and engagement in a compelling package.

Travel Slides for DaVinci Resolve

Get your audience’s wanderlust stirring with this travel slideshow DaVinci Resolve template. This slideshow template is perfect for showcasing your travel videos, capturing the essence of every destination beautifully. It comes with professional-grade design features that will enhance and uplift your travel content effortlessly.

Glitch Titles – Free DaVinci Resolve Templates

If you’re looking to add a cool and creative look to your title designs, this free DaVinci Resolve template is made just for you. It comes with a stylishly modern and creative title design with glitch animations. It’s great for tech and gaming-themed videos.

Free Horizontal Split Frame DaVinci Resolve Transition

This is a simple transition animation template for DaVinci Resolve template that features a subtle horizontal split frame animation. The basic and subtle design of this transition makes it a great choice for business, corporate, and professional videos.

Lower Thirds Templates for DaVinci Resolve

This DaVinci Resolve template features a collection of professional lower-thirds for your video projects. It’s a useful toolkit for applying refined and professional lower-third graphical elements in your video editing process.

Neon Brush Transitions for DaVinci Resolve

This creative DaVinci Resolve transitions pack delivers transitions infused with neon brush effects. Ideal for DaVinci Resolve users wanting to add an artistic flair to their video projects, these transitions truly stand out.

CRT Perspective Transitions for DaVinci Resolve

This collection of DaVinci Resolve transitions provides retro CRT-style effects, adding a distinctive and nostalgic appeal to your videos. They seamlessly blend old-school charm with modern digital editing, making your projects stand out in a creative and engaging way.

3D Lines Transitions for DaVinci Resolve

A unique DaVinci Resolve template for adding cool transitions to your videos. This one features a 3D lines effect that creates a mesmerizing effect. It’s ideal for promo videos, trailers, and even social media videos.

Neon Glitch DaVinci Resolve Transitions

Another creative transition template pack for DaVinci Resolve. This template has a colorful neon glitching effect that bridges your scenes with a trendy animation. It’s perfect for YouTube and Instagram videos.

Tropical Logo Reveal for DaVinci Resolve

This is a logo reveal template for DaVinci Resolve that comes with an attractive CG scene featuring a tropical vibe. The template allows you to reveal your logo with a zoom-in effect in a nature-themed setting.

Zoom Transitions Vol. 01 for DaVinci Resolve

A collection of seamless transition effects for DaVinci Resolve. This bundle includes multiple transitions for DaVinci Resolve featuring different styles of zoom animations. They are very easy to use and customize to fit any type of video.

Free Distort And Twist DaVinci Resolve Transition

This DaVinci Resolve template is free to download. It features a simple twist and blurry distortion effect you can use as a transition in your videos.

Free Animated Lower Third DaVinci Resolve Template

You can add a simple and minimal lower third to your videos with this simple DaVinci Resolve template. It has a subtle animation with a clean look. It’s free to download.

Fast Logo Opener – DaVinci Resolve Template

Whether you’re working on a new YouTube video or a social media promo video, you’ll need a killer opener to get the attention of the audience. This logo opener template will help you achieve that goal. It features 9 media placeholders with 5 text layers that you can easily customize to create a stylish opening scene in DaVinci Resolve.

Hip Hop Intro Template for DaVinci Resolve

Creating the perfect intro sequence for a video can be tough. With this intro template, you’ll be able to get a head start on your project. It gives you a professionally crafted layout with media and text placeholders to create a trendy intro scene for various types of videos.

Modern Stylish Intro – DaVinci Resolve Template

With 20 text placeholders and 9 media placeholders, this DaVinci Resolve Intro template allows you to create a modern and stylish intro scene for your videos without effort. It’s perfect for all kinds of lifestyle and creative films and promo videos as well.

Trap Action Opener – DaVinci Resolve Template

Trap action opener is a unique DaVinci Resolve template that features a very professional design. It includes an upbeat transition animation that will fit in perfectly with sports and fitness videos. The template is fully customizable and it comes with 17 text and 17 media placeholders.

Event Slides Template for DaVinci Resolve

If you’re working on a showcase video for a conference or promo video for an event, this DaVinci Resolve template will help you design a modern slideshow video in just a few steps. The template features multiple slide designs with different animations and layouts. You can mix and match to create your own unique slideshow videos.

Simple Video Mask Title Free DaVinci Resolve Template

Add a simple, minimal, and clean title to your creative videos using this free DaVinci Resolve template. It’s easily customizable and you can edit the text and background to your preference as well.

Modern Titles Templates for DaVinci Resolve

If you want to add modern and trendy titles to your YouTube videos and business videos, this DaVinci Resolve templates pack is for you. It includes multiple title designs with unique designs. They are available in 4K resolution.

Multiscreen – 7 Split Screen DaVinci Resolve Templates

Multiscreen or split-screen frames is a commonly used effect in videos to showcase multiple scenes in one frame. With this DaVinci Resolve template, you can create those effects without effort. There are 7 split-screen templates in this bundle.

300 Transitions Pack for DaVinci Resolve

This bundle of DaVinci Resolve templates will give you more than enough transitions to last a lifetime of video editing. There are 300 different transitions in the collection featuring 11 categories. The transitions are available in up to 8K resolution.

Podcast Audio Visualization DaVinci Resolve Template

Use this DaVinci Resolve template when uploading your podcasts to YouTube or social media platforms in video formats. It adds a cool audio visualization effect to make your podcast videos look more interesting.

Free Logo Reveal & Opener Template for DaVinci Resolve

This is a free DaVinci Resolve template that features a simple design. You can use it to make both logo reveals or openers for your videos. The template includes 8 media placeholders and 6 text placeholders.

Film Burn Transitions for DaVinci Resolve

This bundle of DaVinci Resolve transitions will help add a nostalgic effect to your videos. It includes 40 different transitions featuring film burn effects. There are 20 smooth and 20 dynamic transitions in the bundle.

Trending Titles for DaVinci Resolve

You can add minimalist and cool-looking titles for your videos with this collection of DaVinci Resolve title templates. There are many different styles of title layouts in this pack with trendy designs for you to choose from.

Christmas LUTs DaVinci Resolve Templates

Make your holiday-themed videos look extra festive with this DaVinci Resolve LUTs pack. These LUTs are designed to add a magical and warm filter to your videos. They will instantly transform your everyday videos into a masterpiece.

Cartoon Brushes Logo Opener Pack for DaVinci Resolve

The colorful and creative design of these logo reveal templates makes them the perfect choice for all kinds of kids-themed videos. It features colorful cartoon-style effects for making attractive openers for various videos.

Free Basic Instagram Story Template for DaVinci Resolve

Free Basic Instagram Story Tempalte for DaVinci Resolve

You can use this DaVinci Resolve template to create simple but attractive Instagram story videos. It’s especially great for promoting products and events. The template is free to use.

Modern Corporate Intro DaVinci Resolve Template

This DaVinci Resolve template features a modern and energetic slideshow design that you can use to craft intros and promos for various business and corporate videos. You can also customize the template to change text and colors as well.

The Ultimate Transitions Pack for DaVinci Resolve

If you’re a fan of experimenting with different types of transition effects in DaVinci Resolve, this bundle is a must-have for you. It includes more than 170 different transition effects in 18 different categories you can use in your video projects.

Travel Broadcast Package for DaVinci Resolve

A bundle of DaVinci Resolve templates designed specifically for travel vlogs and promo videos. It includes a complete collection of titles, intros, backgrounds, transitions, and more for creating professional videos related to travel and tourism.

Fire & Smoke Transitions DaVinci Resolve Templates

With this collection, you can make explosive videos for YouTube and social media by adding cool fiery transition effects or smoke effects. The 2D transitions in this pack are perfect for creative and educational videos as well as for production promos and intro scenes.

Free Instagram Story DaVinci Resolve Template

This is a free DaVinci Resolve template you can use to craft a simple Instagram story video to promote a product. It features a simple drop-in shape animation with a video mask.

Line Drop Lower Third Free DaVinci Resolve Template

You can use this free DaVinci Resolve template to add a simple lower third to your YouTube videos. The template features a subtle animation to add more style as well.

Street Opener – DaVinci Resolve Template

If you want to add a bit of upbeat urban vibe to your videos, this DaVinci Resolve template is the perfect choice for you. It will allow you to easily create a stylish opener for lifestyle, fashion, and modern business videos in just a few minutes. The template can be customized to change colors, media, and text.

Corporate Slideshow – DaVinci Resolve Template

With this DaVinci Resolve template, you can create a modern slideshow presentation video for businesses. It features a simple mosaic transition animation with various effect styles. The template is simply perfect for corporate event and promo videos.

Power Typography Templates for DaVinci Resolve

A big bold title scene is a must-have for every video for instantly grabbing the attention of your viewer. With this collection of typography templates, you won’t have trouble getting that job done. It includes various styles of modern typography designs with cool effects. You can easily add them to your own videos using DaVinci Resolve.

Modern Showreel Opener Template for DaVinci Resolve

Create an energetic showreel opener for your videos using this modern DaVinci Resolve template. It features a stylish slideshow design with 34 media placeholders for adding videos and images. The template is easily customizable to your preference.

Square Photo Slideshow – DaVinci Resolve Template

If you want to create a simple photo slideshow video, this DaVinci Resolve template will come in handy. It comes with a simple square photo design similar to Instagram posts. The template is also very easy to customize as it lets you drag and drop your photos to the layout.

YouTube Subscribe Box Free DaVinci Resolve Template

Using this DaVinci Resolve template, you can promote your YouTube channel in your videos by adding a subscribe box. The template features an animated subscribe button as well.

Distort & Twist Transition Free DaVinci Resolve Effect

This is a simple transition effect you can use when producing videos in DaVinci Resolve. It features a fast twist effect that’s suitable for various professional videos.

Dynamic Slideshow Template for DaVinci Resolve

You can use this trendy video template to create a dynamic slideshow with different styles of attractive effects. The template comes with multiple media and text placeholders that you can easily edit however you like. And it works without any additional plugins.

Urban Opener – DaVinci Resolve Intro Template

This opener is perfect for various promo and creative videos. It’s especially suitable for motivational and upbeat YouTube videos. The template features a creative slideshow design with several text and media placeholders for easily adding your own content to the layout.

Photo Memory Slideshow Template for DaVinci Resolve

If you’re working on a photo album video, this DaVinci Resolve template will allow you to add a vintage-themed effect to your video. It also features several transition effects to give your photo slideshows a more professional look and feel.

Event Promo – DaVinci Resolve Template

This DaVinci Resolve video template is made with corporate brands and businesses in mind. It allows you to create a promo video to showcase an event or conference using a modern slideshow design. The template includes editable text layers and media placeholders.

YouTube Endscreens – DaVinci Resolve Templates

The endscreen section in YouTube videos is a useful feature that allows you to promote your other videos to viewers. Of course, the design of this endscreen is also important. With this DaVinci Resolve template kit, you can create a stylishly animated endscreen for your own YouTube channel.

Vertical Split Frame Effect Free DaVinci Resolve Template

Another free DaVinci Resolve template featuring a simple transition effect. This effect is most suitable for YouTube films and videos as it has a subtle vertical split effect.

Dual Line Arrow Callout Free DaVinci Resolve Template

Add callouts to your product promo and showcase videos using this free template. It features a simple design with quick fade-in and fade-out animations.

Motion Title Templates for DaVinci Resolve

This title pack for DaVinci Resolve is perfect for documentary and film projects. It features modern and minimal title designs with subtle animations that will add a professional look to your videos.

Wedding Slideshow – DaVinci Resolve Template

Creating a wedding photo album video will be a walk in the park when you have this DaVinci Resolve template at your side. It features a beautiful slideshow design with creative animation effects and transitions. The template is also easy to customize as it comes with text and media placeholders.

2D FX Liquid Transitions for DaVinci Resolve

With this collection of transition effects, you’ll be able to add cool animated FX transitions between clips. It includes many different liquid-style transition effects that are great for creative video projects.

Modern Big Titles – DaVinci Resolve Templates

You can use this bundle of title templates to easily add bold titles to your videos. This DaVinci Resolve templates collection includes various styles of titles with different animations. They will go along great with all kinds of business, creative, and professional videos.

Real Estate Promo Template for DaVinci Resolve

If you’re working on a promo video for a real estate business, this DaVinci Resolve template will help you add a section to showcase properties in a professional way. The template is easily customizable and comes in Full HD resolution.

Brush Opener – DaVinci Resolve Intro Templates

Grab this opener template to add creative intro scenes for your YouTube and promo videos. The DaVinci Resolve template includes several different styles of brush animations and transition effects.

For more video templates, check out our best Premiere Pro templates collection.

November 8, 2024

Alternatives To Typical Technical Illustrations And Data Visualisations

Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data.

The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.

Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!

So, keep reading and looking at the following examples, and I will show you some really cool stuff.

Technology

Typically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible — you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.

What Makes Data And Information Good

It must be aesthetically pleasing, interesting, and stimulating to look at.
It must be of value and worth the effort to read and digest the information.
It must be easy to understand and logical.
To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, as Vitaly Friedman in his article “Data Visualization and Infographics” has pointed out.
It must be legible and have well-named and easy-to-understand axes and labels.
It should help explain and show data and information in a more interesting way than if it were presented in tabular form.
It should help explain or unpack what is written in any surrounding text and make it come to life in an unusual and useful way.
It must be easy to compare and contrast the data against the other data.

The Importance Of Knowing About Different Audiences

There are some common categories of audiences:

Expert,
Intermediate,
Beginner,
Member of the public,
Child,
Teenager,
Middle-aged,
Ageing,
Has some prior knowledge,
Does not have any prior knowledge,
Person with some kind of disability (vision, physical, hearing, mobility).

Sara Dholakia in her article “A Guide To Getting Data Visualization Right” points out the following considerations:

The audience’s familiarity with the subject matter of your data;
How much context they already have versus what you should provide;
Their familiarity with various methods of data visualisation.

Just look at what we are more often than not presented with.

So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.

3D Flow Diagram

It provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.

Card Diagram

It’s an effective way to highlight and select information or data in relation to its surrounding data and information.

Pyramid Graph

Being great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.

3D Examples Of Common Graphs

They are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.

Sankey Flow Diagram

This diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It's not often seen, but it's really cool.

Stream Graph

A stream graph is a great way to show the data and how it relates to the other data — much more interesting than just using lines as is typically seen.

3D Map

It provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.

Tree Map

It’s a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.

Waterfall Chart

A waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.

Doughnut Chart

It shows the data against the other data segments and also as a value within a range of data.

Lollipop Chart

A lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.

Bubble Chart

It’s an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.

How To Start Doing Technical Illustration And Data Visualisation

There are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick O’Brien discusses in his article “Web Design Done Well: Delightful Data Visualization Examples.”

But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.

Pro Tip: Logo Templates & Logo Makers

1. Use a Visual Double Entendre

2. Color is Vitally Important

3. Avoid the Cliché

4. Make it Ownable

5. Everybody Loves Custom Type

6. Keep it Simple Stupid

7. Consider Proportion & Symmetry

8. Think About Negative Space

9. Passive vs. Active

10. Know What it Means

Do Your Logos Suck?

Disclosures (<details> and <summary>)

Marking up disclosures

Styling disclosures

Creating an accordion with multiple disclosures

Adding JavaScript functionality

Creating accessible disclosures

The Dialog element (<dialog>)

How to prevent scrolling when the dialog is open

Styling the dialog’s backdrop

Dealing with non-modal dialogs

The Popover API (<element popover>)

Marking up popovers

Styling popovers

Adding JavaScript functionality

Implementing timed backdrops (and sequenced popovers)

Creating modal popovers

Aaaand… breathe

What is a blog post?

What are the benefits of a blog?

Audience Engagement

Content Generation and Repurposing

Traffic Generation

Blog vs. Website

What is the difference between a wiki and a blog?

1. To help your company rank on search engines.

2. To share information about a given topic and become an expert in an industry.

3. To attract visitors to your site and turn those visitors into leads.

4. To cultivate an online community and engage with an audience.

Why You Need a Blog

1. Choose your target audience.

2. Brainstorm content ideas frequently based on your market segment.

3. Research and review a content management system (CMS).

4. Create a blog strategy and editorial calendar.

5. Pay attention to article structure.

6. Become an expert in marketing and promoting your blog.

7. Learn about SEO.

8. Use a variety of blog post styles.

9. Repurpose old content.

10. Perform a competitive analysis.

How to Promote Your Blog

1. Link from your website.

2. Repurpose blog content.

3. Utilize internal linking.

4. Promote on social media.

5. Consider guest blogging.

6. Leverage influencers.

7. Explore paid options.

Blogging is beneficial for business.

Google My Business Benefits

1. Increased Visibility and Better Rankings

2. Enhanced Customer Engagement

3. Valuable Insights and Analytics

4. Free Marketing and Advertising

5. Mobile Access

6. Simplified Appointment Booking

How to Create a Google My Business Listing

How to Verify Your Business on Google

Postcard Verification

Phone Verification

Email Verification

Instant Verification

Bulk Verification

How to Optimize Your GMB Listing

Google My Business Photos

Cover photo

Profile photo

Google My Business Videos

Google My Business Reviews

Disclosures (`<details>` and `<summary>`)

The Dialog element (`<dialog>`)

The Popover API (`<element popover>`)