Tutorials

How to take your PDF to the next level

Blog, Tutorials / By

Upgrade your PDF and wow your clients. Ideally, you will have Adobe Indesign and Adobe Acrobat to make most of the suggestions here, but I have some alternative ways to do them too. Here are five ways to make your PDF more professional without further ado.

Make your PDF fillable.

If your PDF has fields to fill in, make it interactive and allow them to be fillable. Oftentimes, and usually in the past, people would print the form, fill it by hand, scan it, and then send it. Making a PDF fillable makes it easier to type and save information. Here is an example of a fillable PDF.

Here is a youtube tutorial to make a fillable PDF in Adobe Indesign and how to add checkmarks.

If you don’t have Adobe Indesign, you can add editable PDF online at https://smallpdf.com/edit-pdf.

Add Bookmarks

If you have a long PDF and include a table of contents, you can make it clickable and add bookmarks to decrease scrolling.

How to add bookmarks in Adobe Indesign

How to add bookmarks in Adobe Acrobat

Add Videos

You can add embedded videos in PDFs, it does make the file bigger. However, if it’s relevant and enriches your content, go for it! There is a cavet you have to direct or point out that the video is playable. There is not stop or play options.

There is an alternate way here:

Add GIFS

GIFs are a fun way to add dynamic elements to your PDF.

Add Links

Links are always super helpful in a PDF.

Hope that helps and happy creating!

How to hide static titles for CMS items in Webflow

Blog, Tutorials / By

Let’s say. For example, you have a CMS of products. There might be some empty fields. However, when you start building the product page, and you have an empty field instead of it hiding, you’ll get a line that says, “This field is empty.” That doesn’t look good. Well, you can hide it!

It takes a little bit of a workaround. To start for each field, you must put it in a separate DIV. This way, you have more control.

Click the gear icon at the top. Then scroll down until you see the conditional visibility section. Then you would choose the field you want to hide when empty under “Name,” then choose “Equals,” And the value would be “Set.”

So, it is telling Webflow to show this DIV when the field is filled; if it isn’t, hide it.

This can work for Titles, or any other part of CMS.

That’s it! I hope that helps you.

Happy Creating

What to do when working with an International Photographer

Blog, Business, Marketing, Personal, Tutorials / By

*Note: This is my anonymous interview with a friend.

Here are some top things I wish I had known before working with an International Vendor. We hired a wedding photographer in another country, which is our experience.

Define the terms of the contract clearly – Especially the Currency

What happened to me was that I didn’t specify what currency we were paying in. It caused a bit of an argument when we wanted to pay USD as it would save us money vs paying in Euros. It caused tension in the relationship, and I wish I had nipped in the bud way earlier.

Get someone local if you can – or start studying the local culture deeply

Although we hired an international photographer, where we were shooting isn’t their home country. They just live close and could drive there. I thought they would have at least looked up the local culture and customs, but they didn’t. They directed us to do certain poses and actions that were not in line with the local custom and were offensive. This is a general good rule thumb to do when you are travelling.

Have your own vision

The photographer might have their own vision or storyboard. You can ask about their process, and understand how much you need to prepare. I wish we looked up places where we would like to take photos at, and what we wanted to do.

Look up the International Holidays

This should have been a non brainer but it totally slipped our mines. A lot of rentals were closed (Do this ahead of time if you can), and locations were too. Which was a bummer.

I hope these few tips helped! Have a wonderful week!

How to create a custom order in CMS lists for Webflow

Blog, Tutorials / By

This is the only method I found so far that works.

Go to the CMS settings and add a new “Custom Field,” then choose the plain text option.

Call it “Order #” or whatever you like. Save the field, then save your changes.

Go into your CMS item, and it should show up like this. You would then put the order with 01 being the first item you want them to see. Then moving down 02, 03, 04 etc., in descending order. Note: You have to be 01, not 1, or it won’t read correctly.

Do your thing, and place the CMS collection list wherever you want on your page. Then go to the “Element Settings”/gear icon. Go to the “Sort Order” section. Click the “plus sign.”

Then choose sort by “Order # (Plain Text)”, and by alphabetical (A-Z).

And that’s it! Happy creating!

How to Change the background color in Figma

Blog, Tutorials / By

You may have put your settings to dark mode and tried to change it, but sometimes it doesn’t change the background.

Here’s how to fix it.

Make sure nothing is selected. Go to the “Design Panel” On the left side, and under the “Background” section, change the colour there.

That’s it! Happy Creating!

How to change the colour of flat icons PNGS in Figma

Art, Blog, Tutorials / By

If you downloaded the transparent flat icon in a png format and want to change the colour in Figma. Well, that’s what we are going to do today.

First, insert the icon and then select it.

Then go to the effects section in the right side panel, and choose the “Inner Shadow” effect.

Open the “Inner Shadow” panel by clicking the sun icon. These are the default options.

I’m changing it to red. So these are my settings. What you need to focus on are the spread, colour and opacity. You want to kick the spread as much as possible until the entire icon is filled.

This is the finished icon! Hope that helps. Happy creating!

How to add captions to Lightbox Multi-Images and Singular Images for CMS Items

Blog, Tutorials / By

Credit goes where credit is due, and I only figured this out because of a Webflow tutorial and due to Sygnal attributes for the codes.

STEP 1 – Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/dist/css/webflow-elements.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/src/nocode/webflow-elements.js"></script>

STEP 2 – Add the Captions/Alt Text

This web flow tutorial was wonderful!

Combine those two together, and viola!

Step 3: Editing the Style of the Alt Text

To edit the style font of the Alt Text, paste this code into the head of the page:

<style>
.w-lightbox-caption {
    font-family: Arial;
    font-size: 18px;
}
</style>

Happy creating!

How to make the arrow rotate in the Dropdown menu in Webflow

Blog, Tutorials / By

They certainly don’t make it easy to figure some stuff out. I didn’t want to use any code or build it from scratch. Here’s how I figured it out on my own after tinkering around.

Tutorial

Make sure you are the parent of the whole drop-down container.

Next, ensure you name your Icon by going into the style panel and then under “Style Selector,” give it a unique name class. I named mines “Icon Star.”

Then go to the right panel, and choose interactions.

Then click the Element trigger and choose “Dropdown opens”

Then under “Menu Opens,” Choose “Custom animation > Start an animation.”

Then click the plus sign “+” next to the timed animation.

This panel will open. You will then have to click on the plus sign to add an animation. Then select Affect > Class. And choose “Only children with this class,” and type in your custom class name. For me, it was “Icon Star.” This is important as it’s telling to only affect this drop-down only. If you had many drop-downs and didn’t select only these children, it would affect all of them.

Then below the “Rotate” Subheading, I chose to put “180 DEG” on the Z plane. You can choose whatever you want, but this is what I chose.

Click done, and check if it works. If it turns when you open the drop-down menu great!

Now, you are going to do the same thing when the menu close.

You will go through the same steps as above, the only difference is the rotation degree.

Rest the number back to 0.

And that’s it! Let me know if it helps, happy creating!

Webflow Search Results aren’t showing on my new site

Blog, Tutorials / By

When you launch your website quickly, you might not see search results. One possible reason is that you haven’t indexed the search results yet.

To do this, go to the settings in the editor view. Then go to “Search” and then click “Index now.”

It will do it once a day when your site is published. If you want to do it more than once daily, you must upgrade your site plan.

I hope that helps!

Happy creating.

How to fix the Webflow Link’s current state in Navbar

Blog, Tutorials / By

For some flipping reason, this is a glitch that has never been fixed. Here’s what you need to do. I figured it out after watching videos, reading, and getting a headache for half an hour.

What is the current state?

It states that your link can be in. We are familiar with hover, pressed, none, etc. Webflow has a unique one called “Current State”; the condition it shows up is when you are on the page that it links to and has pressed the link.

How do you fix it:

So, you won’t see it in the states dropdown menu for links.

You will have to go to the page that the link goes to.

When in the editor, hover over the link and double-click it. You should see a similar purple outline to let you know you are in it.

Then in the style panel, the current state will automatically show up.

You can then edit it as you see fit.

Why does this happen?

This is a well-known glitch in Webflow that hasn’t been fixed since its inception. You can see this chatter in the forums for sure. There are other annoying things like this throughout WebFlow, and you’ll just have to live with it.

I hope that helps!

Happy creating!