Loading...

Follow BootstrapCreative Blog - Jacob Lett on Feedspot

Continue with Google
Continue with Facebook
or

Valid

In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database, you are unable to modify the HTML markup to add the tag. So, CSS is perfect for this because we can add these tags when there is a class name change.

What is a pseudo element?

A definition for the word pseudo is “not real”. So in our case that fits perfectly because it is a visual graphic that doesn’t actually live in the HTML content of the page. Below is what the syntax looks like, take note of the double colons. Before you create pseudo elements in your layouts, ask yourself this question “If I printed the page, would I want this to appear?” If the answer is yes, pseudo elements are not the right fit and you should look into using javascript or outputting the content with server side code.

selector::pseudo-element {
  property: value;
}

Step 1 – Build the Structure

I will be using Bootstrap 4 in my example but the CSS styles we will write can be used without it. Below is the HTML structure of a figure tag with an image and caption.

<figure >
    <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="featured image" >
    <figcaption >A short caption for the image</figcaption>
  </figure>

Step 2 – Create Custom CSS Class .tag

Since Bootstrap 4 does not include a built in class, we need to write something custom. I prefer to write custom classes following the pattern Bootstrap 4 uses. Creating a base class .tag and then write any variations with that class as the prefix to keep things organized. Below are the first two CSS rules.

The first rule has a position: relative which tells the browser anything absolutely positioned inside it should be position relative to its container size. If this is not specified, anything absolutely positioned will be positioned to the body tag.

/* Make the tag position relative to the figure */
.figure.tag {
  position: relative;
}

Now we are going to write the pseudo element which will contain our tag content. These styles will be shared by all of the style variations like featured, on sale, and out of stock. This prevents redundancy in our code.

/* set the base styles all tags should use */
.figure.tag::before {
  position: absolute;
  top: 10%;
  display: block;
  color: white;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

Step 3 – Write the Tag Content Variations

These tags use the content property to essentially add content before the selected element. Here I am just writing the words I want displayed, and then changing the containers background color. I suggest experimenting with turning the position absolute on and off to see how that changes things.

/* Specific variations for different tags */
.figure.tag-featured::before {
  content: "Featured";
  background: orange;
}
.figure.tag-sale::before {
  content: "Sale";
  background: red;
}

For the out of stock tag, I wanted it to be centered so I wrote a few more properties to do that.

.figure.tag-out::before {
  content: "Out of Stock";
  background: #e2e2e2;
  border: #ccc;
  color: #444;
  top: 42%;
  right: 0;
  left: 0;
  width: 30%;
  margin: 0 auto;
  text-align: center;
}

View the Code Demo

Conclusion

So as you can see, pseudo content elements are very powerful and can help you add visual content to a page. Before you create these in your layouts, ask yourself this question “If I printed the page, would I want this to appear?” If the answer is yes, you will need to find a way to add the content into the DOM or HTML document of the page. You can do this by updating your server side code or javascript to add the element.

If you are new to CSS positioning, I highly recommend this article on CSS-Tricks that has demos on their differences.

The post How to Add a Featured Tag with Text Over an Image appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The code snippet below is handy when you are trying to check if the current page is a parent or a child in a WordPress theme. You can then use the conditional to output different code depending on the page depth it is

<?php
// gets page depth
global $wp_query;
$object = $wp_query->get_queried_object();
$parent_id  = $object->post_parent;
$depth = 0;
while ($parent_id > 0) {
       $page = get_page($parent_id);
       $parent_id = $page->post_parent;
       $depth++;
}
 
// echo $depth;

?>

<?php if ( $depth == 0  ) {
    echo 'page level 0';

}  elseif ( $depth == 1 ) {
    echo 'page level 1';
} else {
    echo 'something else';
}?>

Source: Get the depth of the current page in WordPress

The post Check Page Level Depth If Condition in WordPress appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Jobs theory also called Jobs to Be Done Theory was created by Strategyn to help businesses try and understand reasons why someone would buy their product service.

People do not want a quarter-inch drill, they want a quarter inch hole.

Sell the sizzle and not the steak.

Instead of focusing on your your product or service you are focusing on your potential customers. In the drill example you could have multiple types of people that would have a need for a power drill. Each individual persona would have a unique job to get done. Below are some possibilities.

  • A commercial painter who need a drill to mix paint on jobs using a drill
  • An electrician who needs to drill holes for wiring
  • A plumber who needs to drill holes for their pipes
  • A crafter who needs a drill to secure wall hangers on the back of a picture frame

And for each “job to be done” there are potential drill features that would be more appealing for their specific application.

  • A commercial painter – waterproof drill for easy cleaning because it gets covered in paint
  • An electrician – lightweight and durable
  • A plumber – lightweight, waterproof, and no cords so electric shock proof
  • A crafter – feminine colors and lightweight
Below is an example of a job story Template

When __________(situation)

I want __________(motivation)

So I can __________(expected outcome)

Jobs to be done example

When I am installing kitchen cabinets I want to drill quarter-inch holes So I can quickly fasten the cabinet to the wall.

An example I experienced is when I first started doing freelance web design. A month or so after building a website for a client they would call and say they were not getting any leads. Or say they were not being found on Google search for certain keyword terms. I thought they wanted a website, but in reality they wanted more new business.

When I am slow with business I want a consistent flow of new business leads So I can avoid drops in cash flow.

Notice how this statement mentions nothing about websites, social media, SEO or anything like that. All of those things are solutions to the job the business owner wants to get done. In this case, get more sales.

Learn More about Jobs Theory

You can learn more about the Jobs Theory in the HubSpot Academy Training titled, Using Jobs to Be Done in Sales Enablement.

The post What is Jobs Theory and How Does it Apply to HubSpot? appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

This is a great question and something I have been thinking a lot about. Especially in how to teach this skill online vs a classroom setting.

If I had to pick four important factors to becoming a good designer they would be.

Pencil sketch before moving to the computer

Sketch a lot of thumbnails with paper and pencil BEFORE working on the computer. A gradient or cool font will never save a poor concept. This is the discipline required to achieve high quality concepts and solutions.

Emulate the work and design style of professionals

Emulate the work and design style of professionals. Look at work you see on large sites, design awards, magazines, and books. You should strive for your work to be just as good.

Learn art history and past graphic designers work

Learn art history and past graphic designers work. You will see themes and patterns you can use in your work. Colors, lighting, composition, etc.

Have a reason for every design element

If someone asks you “Why did you use that picture or that font?” “What is your reasoning for having the navbar behave like this?” Since you spent a lot of time on the strategy and sketching, your design should have reasons for every element and support your goals. If not, consider removing it. Sometimes the best addition is subtraction : )

Be aware of design trends but don’t abuse them

Sometimes designers have to follow design trends because that is what the client wants. You also don’t want to appear out of touch and dated.

So I recommend being aware of trends but don’t gravitate to them just because they are cool. Focus on sketching and thinking way more than the visual aesthetics. If the design trend is appropriate for your design solution and will support it then use it. If not, really question if it makes sense to use it.

Embrace the design process

The majority of what we do is organization of content and helping people communicate or use an application/tool.

Have frequent group critiques guided by a professional

Have frequent group critiques guided by a professional. This will help you hear questions like “Have you tried x?” “What more can you do?” Outside opinion is really important in helping you see things differently.

Let me know if you have any other questions because I want to help beginners in this area as much as I can.

The post My 7 Tips for Learning the Artistic Side of Web Design appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
The Bootstrap Creative Manifesto

Before we begin talking about how to bootstrap your creative business lets first define what bootstrapping is. Bootstrapping is relying on your own resources (time and money) to start and run your business instead of getting a loan or outside investment. This allows you to start a business with lower risks and retain full ownership of your business. It will also ensure you know a lot about the details of your business because you are not hiring employees or outsourcing core business functions like marketing.

I am writing these tips as someone who has bootstrapped a web design business selling services and digital products online. When I started I did not have any family members who I could ask questions about business… let alone online business. So I read a lot blogs as I was working in my full time job. I hope the information below helps to guide you in the right direction and encourage you as you bootstrap your business. There will be some information below that is interchangeable if you are selling services or products online.

1. Learn how the web works

Selling online requires a different skill-set that naturally becomes a bit geeky. The internet and the web was first created by academic professors and then expanded by really smart computer programmers. This means you are going to need to become familiar with things like HTML, CSS, tags, hashtags, urls, and more. It can seem overwhelming to learn everything but you do not need to worry because you will learn a lot as you go.

The main thing is just to know this upfront. You are going to encounter times where you might need to learn more about HTML tags in order to fix something. This will prevent you from automatically dismissing your ability to learn the technology that runs your business.

The top two things you should be familiar with are the basic HTML tags and how search engine works. Below are two great resources to learn more about them.

HTML tags

How search engines work

2. Do not outsource your marketing

Terms like digital marketing, inbound marketing, content marketing, internet marketing, social media marketing are all just “Marketing”. It is simply the “how to” market a product or service online. Marketing is 100% art and not a science. What that means is that you duplicate another companies marketing strategy and have dissimilar results. There are no quick ways to go viral, rank #1 on google, make $1,000 in a month, or have 50 likes on a post.

There are no quick ways to go viral, rank #1 on google, make $1,000 in a month, or have 50 likes on a post.

Digital marketing requires you to think about people… your target customer.

You might be wondering:

How do I know who my target customer is? Here is a persona development worksheet to help you define a customer persona for your business.

How can you help them with your product or service? Can you still help them if they do not buy something? What are they most interested in? How can I use analytic data to learn more about my customer?

Marketing to your customer is a systematic trial and error in hopes of finding something that works. It may take a long time to figure this out. The best way to make progress is to set aside a monthly budget that you can afford to lose and not hurt your business. If it is just $20, what can you do with $20 to talk to some potential customers? It could be simply writing letters, or spending $20 on buying someone lunch.

photo credit: Condell’s Great Western Boot Mart (Clarke Street, Hill End, N.S.W), 1871-1875 / American & Australasian Photographic Company

3. Create minimum viable products – experiments

The minimum viable product has been talked a lot recently due to a book by Eric Reis titled The Lean Startup. It is essentially creating a product that solves your customer’s problem in the simplest form. Another way you can think of this is running a product experiment. When you start out, every marketing effort is an experiment. If the product does not sell or get a lot of traction you can either change it or move on to something else.

The reason for doing this is to prevent spending your valuable time creating something that your customer does not want to buy. Wouldn’t your time be better spent creating something you think your customer wants and then receive user feedback saying they like it but would love it if it had certain features. Now your target customer is telling you exactly what they need vs you guessing or making assumptions.

4. Learn about branding and use graphic design templates

Online business is becoming more and more competitive and thus expensive because every business wants to rank on the first page of Google search results for their business keyword. The best way to carve out search traffic your competition cannot steal is by having a strong and memorable brand name and domain. If you need a domain name I highly recommend Namecheap to purchase one. If someone can go to Google and type in your business name and find you in the #1 spot you now have a stronger connection with your customer. This is why branding is so important. Your goal is to make connections in your customers minds when I want X I go to “your company name”.

The best way to carve out search traffic your competition cannot steal is by having a strong and memorable brand name.

As a graphic designer, I always thought templates were the underbelly of the design world. They were de-valuing the work I was doing as a freelance designer and making it hard for me to sell my services. As a small business owner I could understand the confusion as to why a website template costs $150 and a custom site I built cost $1000+. However, design templates are perfect fit for a bootstrapper because you can have professional branding at 1/10 of the cost for custom design work. Sure the branding isn’t 100% unique but it will get you 80% there and you can always re-brand once your business is off the ground and you can afford the investment.

An additional step would be for you to learn how to edit the templates you buy. The Adobe Creative software designers use was really expensive but now can be purchased as a monthly service. This makes this professional design software extremely accessible to entrepreneurs. If you learn the creative software you can purchase the templates and change fonts and colors to fit your brand. If you are making major edits to a template I would still suggest hiring a graphic designer but for small tweaks it is something you could do yourself.

Pay what you want design templates

Crafted Ecommerce Theme

5. Know when to ask for help

Bootstrappers are naturally do-it-yourselfers. There is nothing you will not at least try doing or learning to get the job done. Sometimes to your downfall. If you find yourself spinning your wheels and hitting a roadblock make sure you invest in hiring a professional for consulting help.

One thing I did with my web design business was email the owner of a similar company in a different state for advice. I was having difficulty finding clients and was able to get some great strategies from someone who was further along than I was. You will find other business owners are willing to help you because they have been in your shoes. All you have to do is ask.

Another great place to network with entrepreneurs are local Meetup groups. You can find groups for Etsy sellers or people learning WordPress.

6. Set realistic expectations for sales and traffic

You can save yourself from the self-defeating feelings of disappointment by setting realistic expectations up front. The best way to do this is to treat everything as an experiment. If something doesn’t work out as planned ask yourself “Is there anything I could have done better?” Or “What did I learn from this?”. Your efforts are never waisted as you always learn something through your action.

When I was working late hours as a graphic designer for other businesses I often craved something else. I wanted to work on something I believed in and enjoyed. This began my journey of reading books and blogs on online business, digital marketing, and SEO. All of this information began to frustrate me because I did not have the time to apply what I was learning. Once I began to follow the steps of others I soon realized you cannot replicate someone else’s success. You have do what makes sense based on your skills and abilities not those of the author. I learned a lot of things to try and test but beware of expecting to match their results.

Once I began to follow the steps of others I soon realized you cannot replicate someone else’s success.

Getting a consistent and inexpensive source of traffic to your website is not impossible but extremely difficult. It takes tons of experiments to figure out the best combination to your business. Beware of anyone who says they can help you rank #1 on Google or get you tons of traffic. The best traffic comes through word of mouth and referrals from past customers. Blogging is another way for others to learn more about you but don’t expect to get any traffic from writing a few blog posts.

If you want consistent traffic sources you will need pay for it through online advertising and via your email subscriber list. These sources you can utilize and optimize

7. Partner with others serving the same customer

If you are a freelance photographer, who else works with engaged couples you can pass referrals to? Maybe you could offer a package deal with bundled services from one of your partners. As a web designer-developer I partnered with social media consultants, writers, and photographers I referred out the work I did not specialize in. This network worked well for building trust with cold prospects because they trusted your partner already. Obviously you need to protect these relationships because you could tarnish the reputation of your partner if you do not deliver.

8. Persistence and reality checks

If an entrepreneur in the woods makes a difference and nobody is around to see it… does it matter? It is our human nature that drives us to want some validation for hard work. We crave approval and applause (sales). But sometimes after spending weeks developing a new product we receive no views, likes, or response.

If an entrepreneur in the woods makes a difference and nobody is around to see it… does it matter?

You then begin to question the value of the work you just produced. Let me be the first to tell you that if you created something in the effort to help someone else, you have made a profound difference. And it matters. It may take some time for others to see the value but your value is not defined by the things you do or produce. If you receive a few sales and no negative feedback or returns this could be a sign your marketing is flat.

9. Learn how to use Google Analytics and Google Search Console

It is obvious but every online business needs a website or home base to send traffic to. This home-base acts as a conversation between you and your customer. Online marketing has a strong advantage over tradition marketing because it is a lot easier to track results. You can monitor user behavior, sales, and traffic sources.

Google Search Console is your way of telling Google about your website and how you would like them to see it. In return Google crawls your site and shows you the keywords you are ranking for in the search engine. Google Analytics however, shows you what people do once they visit your website. How they got there, what pages they visited, and what links they clicked on. As you do more marketing you will refer back to these sites to check your results and see what things you should continue doing and what you should stop doing.

How to add Google Analytics tracking code to your site

Search analytics report guide for Google Search Console

10. Leverage online marketplaces, social networks, forums, and groups

If you are planning on selling a physical or digital product you will have the best results if you start on a marketplace like Etsy, Amazon, or Ebay. These established marketplaces already have a consistent stream of people visiting with their wallets out ready to buy. Also, they have tools to help you list products fast and test the market. If you are unable to sell something here you will most likely have difficulty selling it outside one of these marketplaces. Once your store grows and you want to minimize competition, offer discounts, and define a brand; you can open an online store on a shopping cart provider like Bigcommerce.

Social networks, forums, and groups are one the best ways to find a large group of people you are trying to help. Join one of these groups and genuinely contribute to the conversation. My advice would be to pick one or two you already use. Make sure you monitor your Google Analytics for referral traffic. If your posts are not generating traffic you may want to seek out another source. You may be wasting time.

Summary

Bootstrapping your online creative business will protect you from compounding the stress of having outstanding loans and outside control of an investor. Things may go slower than you would like, but you will be in total control of the three main branches of a business: 1. marketing, 2.sales, and 3. finance.

For more information on how to bootstrap, read the Bootstrappers Manifesto written by Seth Godin.

The post 10 Ways to Bootstrap an Online Business appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In order to make your HTML5 video responsive you will need to add the following CSS style properties: width: 100%, and max-height: 100%.

<video style="width: 100%; max-height: 100%;" autoplay="autoplay" width="300" height="150">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
  Your browser does not support the video tag.</video>

The post HTML5 Responsive Autoplay Video Code Snippet appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Add the code snippet below into your functions.php file to hide the default WordPress content meta box.

Source

/**
 * Hide the Page and Post Content Editor - Gutenberg
 */
add_action( 'init', function() {
	// remove_post_type_support( 'post', 'editor' );
	remove_post_type_support( 'page', 'editor' );
}, 99);

The post Hide WordPress Content Editor Panel Using ACF appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Have you ever noticed data-toggle="dropdown" in Bootstrap 4 dropdown code sections and wondered what this does?

Bootstrap includes a CSS stylesheet and JS full of functions to add click behaviors and interactivity. Instead of having you write custom javascript to initialize these functions, it searches the page for any elements that contain certain data attributes. In this case it looks for anything with data-toggle="dropdown".

When it finds this, it runs javascript to show the dropdown on just this element. Below is a code example of how this works.

See the Pen what is Bootstrap 4 data-toggle? by Jacob Lett (@JacobLett) on CodePen.

Summary

In a lot of cases Bootstrap 4 saves you time from not having to write redundant CSS and JavaScript init functions. Using data attributes makes Bootstrap JS work a lot like CSS in how it finds elements to style or add interactivity for.

The post What does Bootstrap 4 data-toggle=”dropdown” do? appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Building a website is one of the greatest experiences. It is a convergence of creativity, technology, and service. So congratulations on embarking on the journey. Below is a very high level look at the 3 major steps. If you have questions, please let me know.

Creativity

Before you start building you need a plan and a goal in mind. Are you building an informational site, blog, ecommerce, or web software? 

Grab a piece of paper and pencil and begin sketching out your homepage. What does it look like? What does it do? What information will be there?

Now think of the architecture or the outline of your site. How many pages will it have? How will the pages be organized.

You will need to think of a domain name. Or the location of your site on the internet like https://bootstrapcreative.com

Technology

This stage can seem overwhelming but don’t worry. You will learn it as you go. Just remember, at a basic level a website is just a bunch of text files that are linked together. So if you can write and organize word documents, you can learn how to do the same with web documents/pages.

Service

Now that your site is published. You need to think about its utility. Is it useful and helpful to the people using it. Does it achieve the goals you first set out to achieve in the creativity stage? If not, what can you improve?

  • Things you might learn in this stage are SEO or search engine optimization, usability, and conversion rate optimization
  • You will also need to use Google Analytics to look for ways to improve your website.
  • Put on your webmaster hat and make additions, deletions, and improvements to your website over time.
Summary

Learning to build a responsive website is something that will feel impossible but if you break it into smaller steps you will surprise yourself. Learn how to make an ugly site first. Then learn the skills necessary to make your sites more complex and more visually appealing.

I wish you well and don’t give up!

The post How do I design and build a website? appeared first on BootstrapCreative.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

HubSpot provides the ability to change common styling used in your email and landing page templates inside your account settings area. But what if you want to have an email template that looks different from your default templates?

In this case, you need to override your default settings with your template specific settings. So you can create a drag and drop email template in your HubSpot design tools area. Then add the code below inside the additional <head> markup box.

{% set email_body_border_css = "none" %}
{% set email_main_body_box_shadow_css = "none" %}

These HubSpot variables are used in the email template to add a box shadow and border color. This will override your default settings and make your new template look different from the others.

Do you need help creating a custom HubSpot email template?

Learn more about my custom HubSpot email template development service.

The post How to Remove the Border Around a HubSpot Email Template appeared first on BootstrapCreative.

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview