Almost Inevitable Design https://almostinevitable.com Wordpress Web Design Wed, 27 May 2020 15:55:41 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.1 https://almostinevitable.com/wp-content/uploads/2019/11/cropped-large-square2-32x32.jpg Almost Inevitable Design https://almostinevitable.com 32 32 From Almost Inevitable Design, one of the best Divi + WordPress resources on the web, comes a podcast on the ins and outs of working in the web development, web design, and graphic design industry. This podcast is mainly in three parts: a discussion on some specific industry-related topics, and then some news, and finally some resources that could help your work. All the links can be accessed from the Almost Inevitable dot com website if you need them. Almost Inevitable Design yes episodic Almost Inevitable Design pkson@me.com pkson@me.com (Almost Inevitable Design) Weekly Web and Graphic Design Musings and Discussions Almost Inevitable Design https://almostinevitable.com/wp-content/uploads/2019/08/the_2_4m_podcast_by_PK_cover.jpg https://almostinevitable.com 82055194 Ep040 – Real Solution #9 https://almostinevitable.com/ep040-real-solution-9/ https://almostinevitable.com/ep040-real-solution-9/#respond Wed, 27 May 2020 15:55:41 +0000 https://almostinevitable.com/?p=5164 Let's talk about the CTA buttons, and above the fold. What do you put in above the fold?

The post Ep040 – Real Solution #9 appeared first on Almost Inevitable Design.

]]>
Let’s talk about the CTA buttons, and above the fold. What do you put in above the fold? That is something so many people in different fields have different opinions about. How to do it, where it goes, how it should look, and all that.

Have a listen, and here are the links I mention below.

https://neilpatel.com/blog/why-the-fold-is-a-myth/

https://www.protocol80.com/blog/2019-cta-statistics

https://www.impactbnd.com/blog/is-staying-above-the-fold-still-relevant-in-website-design

 

Articles

Time to update your portfolio

Is it Time to Redesign Your Portfolio?

Personal Brand Stand Out
https://dribbble.com/stories/2020/05/26/how-to-make-your-personal-brand-stand-out

Instagram Stories
https://designshack.net/articles/inspiration/tips-for-designing-instagram-stories-that-dont-suck/

 

The title

White Zombie / Astro Creep: 2000 (1995)
https://www.youtube.com/watch?v=Cvlpktjsq0A

The post Ep040 – Real Solution #9 appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep040-real-solution-9/feed/ 0 Let's talk about the CTA buttons, and above the fold. What do you put in above the fold? Let's talk about the CTA buttons, and above the fold. What do you put in above the fold? Almost Inevitable Design 51:04 5164
Ep039 – That was just your life https://almostinevitable.com/ep039-that-was-just-your-life/ https://almostinevitable.com/ep039-that-was-just-your-life/#respond Wed, 20 May 2020 16:23:12 +0000 https://almostinevitable.com/?p=5142 Why is it a bad idea for ecommerce website owners to "just try really hard to succeed?"

The post Ep039 – That was just your life appeared first on Almost Inevitable Design.

]]>
Some more Woocommerce stuff. We’re going to focus on why it’s a bad idea for ecommerce website owners to “just try really hard to succeed.”

Tier 3 Delusions
– I will just hire people to do it for me on commission or hourly
– I will disrupt the market
– Thinking it will scale instantly
– If I try hard, it’ll work.

 

News & Resources

Everything is cute?
https://vanschneider.com/the-kawaiization-of-product-design

Some really good ones here.
https://vanschneider.com/the-best-totally-free-web-fonts-typefaces

Holy S***
https://www.creativebloq.com/news/fruit-loops-toucan-sam

The title

Metallica / Death Magnetic (2008)
https://www.youtube.com/watch?v=ptU5ZKAwLxk

The post Ep039 – That was just your life appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep039-that-was-just-your-life/feed/ 0 Why is it a bad idea for ecommerce website owners to "just try really hard to succeed?" Why is it a bad idea for ecommerce website owners to "just try really hard to succeed?" Almost Inevitable Design 44:55 5142
Ep 038 – The New F*** You https://almostinevitable.com/ep-038-the-new-f-you/ https://almostinevitable.com/ep-038-the-new-f-you/#respond Wed, 13 May 2020 16:35:46 +0000 https://almostinevitable.com/?p=5122 What web element is the new FU? What annoys you the most? Well here's one of them.

The post Ep 038 – The New F*** You appeared first on Almost Inevitable Design.

]]>
What web element annoys you the most? Well, for me, there are a lot, but popups are the MOST annoying for me.

Let’s dive deeper and look into popups.

https://www.smashingmagazine.com/2018/04/mobile-pop-up-ads/

https://www.nngroup.com/articles/popups/

https://www.smashingmagazine.com/2017/05/intrusive-interstitials-guidelines-avoid-google-penalty/

 

Articles

F Dark Patterns
https://www.smashingmagazine.com/2020/05/convince-others-against-dark-patterns

Learn to say NO
https://www.wpelevation.com/2020/05/how-to-say-no-to-clients-and-create-clear-boundaries/

 

The title

Street Sweeper Social Club / The Ghetto Blaster EP (2010)
https://www.youtube.com/watch?v=mWEp-xUp1bw

The post Ep 038 – The New F*** You appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-038-the-new-f-you/feed/ 0 What web element is the new FU? What annoys you the most? Well here's one of them. What web element is the new FU? What annoys you the most? Well here's one of them. Almost Inevitable Design 41:29 5122
Ep037 – Hardwired https://almostinevitable.com/ep037-hardwired/ https://almostinevitable.com/ep037-hardwired/#respond Wed, 06 May 2020 15:38:34 +0000 https://almostinevitable.com/?p=5083 Here's what I think separates regular themes, bad "woocommerce" themes from "proper" WooCommerce themes.

The post Ep037 – Hardwired appeared first on Almost Inevitable Design.

]]>
Here’s what I think separates regular themes, bad “woocommerce” themes from “proper” WooCommerce themes. I’ll be breaking down what I look at in a proper WC theme, and here’s the list of suggestions.

Tune in for the break down and reviews.

Unwind https://wordpress.org/themes/siteorigin-unwind/
Customify https://wordpress.org/themes/customify/
Sullivan https://wordpress.org/themes/sullivan/
Blocksy https://wordpress.org/themes/blocksy/

Storefront https://wordpress.org/themes/storefront/
GeneratePress https://wordpress.org/themes/generatepress/
Ocean WP https://wordpress.org/themes/oceanwp/

Articles and resources

Google Meet is free.. so .. good?
https://www.blog.google/products/meet/bringing-google-meet-to-more-people/ 

This is worth checking out
https://flextype.org/en

Yet some more icons
https://themesberg.com/blog/open-source/10-open-source-free-svg-icon-libraries

This is really well put together
https://uxplanet.org/how-i-redesigned-my-colleges-students-application-for-a-better-user-experience-a-ux-case-study-e0f068c34b3b

This is hilarious
https://twitter.com/disneyplus/status/1254772307941191686

 

Metallica / Hardwired… to Self-Destruct (2016)

https://www.youtube.com/watch?v=uhBHL3v4d3I

The post Ep037 – Hardwired appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep037-hardwired/feed/ 0 Here's what I think separates regular themes, bad "woocommerce" themes from "proper" WooCommerce themes. Here's what I think separates regular themes, bad "woocommerce" themes from "proper" WooCommerce themes. Almost Inevitable Design 56:06 5083
Ep 036 – Train of Consequences https://almostinevitable.com/ep-036-train-of-consequences/ https://almostinevitable.com/ep-036-train-of-consequences/#respond Wed, 29 Apr 2020 13:22:23 +0000 https://almostinevitable.com/?p=5056 Here's how some people end up on Wix. Also, here are some solutions we can offer them.

The post Ep 036 – Train of Consequences appeared first on Almost Inevitable Design.

]]>
Here’s how some people end up on Wix.

Creative hobby/professions > Need a website, but (very) limited funds > Try Wix > They get used to it > End up being proud of it.

Solutions
– Squarespace
– Easy installation theme package + Tutorials
– Use as portfolio

Resources

The Hero Generator
https://hero-generator.netlify.app/

Hey, free stuff!
https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp 

Interesting speech bubbles
https://freefrontend.com/css-speech-bubbles 

Just fun to play with.
https://helpmedecideplease.com

 

The Title

Train of Consequences by Megadeth from the album Youthanasia(1994)

Audio version
https://www.youtube.com/watch?v=Cel-3ojNUpg

The music video was pretty… useless so I’m not including that. haha

The post Ep 036 – Train of Consequences appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-036-train-of-consequences/feed/ 0 Here's how some people end up on Wix. Also, here are some solutions we can offer them. Here's how some people end up on Wix. Also, here are some solutions we can offer them. Almost Inevitable Design 53:07 5056
Ep 035 – Disposable Heroes https://almostinevitable.com/ep-035-disposable-heroes/ https://almostinevitable.com/ep-035-disposable-heroes/#respond Thu, 23 Apr 2020 15:35:30 +0000 https://almostinevitable.com/?p=5031 A simple tut on inspecting safari for mobile, and an exploration (and solution) on hero sliders.

The post Ep 035 – Disposable Heroes appeared first on Almost Inevitable Design.

]]>
Here’s a tut on how to inspect the mobile safari browser properly.

Also, for today’s topic: hero sliders are just stupid. STOP.

I’ll go over some alternatives so you can recommend them to your stupid clients.

Links that help.

http://shouldiuseacarousel.com/

https://www.nngroup.com/articles/auto-forwarding/

https://instapage.com/blog/6-reasons-why-image-sliders-are-bad-for-conversions

extra
https://yoast.com/opinion-on-sliders/

News & resources

https://www.gosquared.com/blog/improve-your-google-website-ranking

http://knutsynstad.com/fauxcode/

https://shorthandcss.com/

https://boardist.io/

The Title

Metallica / Master of Puppets (1986)
https://www.youtube.com/watch?v=jtNrx1c3Xh8

The post Ep 035 – Disposable Heroes appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-035-disposable-heroes/feed/ 0 A simple tut on inspecting safari for mobile, and an exploration (and solution) on hero sliders. A simple tut on inspecting safari for mobile, and an exploration (and solution) on hero sliders. Almost Inevitable Design 55:10 5031
Ep 034 – Polyamorous https://almostinevitable.com/ep-034-polyamorous/ https://almostinevitable.com/ep-034-polyamorous/#comments Wed, 15 Apr 2020 13:20:28 +0000 https://almostinevitable.com/?p=4983 This episode was supposed to be a quick one about checking browsers and devices. I think it sort of went off the rails. hahahaha

The post Ep 034 – Polyamorous appeared first on Almost Inevitable Design.

]]>
This episode was supposed to be a quick one about checking browsers and devices. I think it sort of went off the rails. If it sounds like it, I apologize, there are some good articles and resources, so please check those links out.

If you’re fine with me talking about annoying people being overly protective of their OS’s then proceed. haha

World OS stats
https://gs.statcounter.com/os-market-share

Virtual box
https://www.virtualbox.org/wiki/Downloads

Download Windows (turns out it was) 10
https://www.microsoft.com/en-us/software-download/windows10ISO

 

Articles

Design trends
https://uxdesign.cc/10-trends-shaping-popular-dribbble-shots-right-now-16be9cf8bab3

This one’s just a bunch of fun
https://howlowcanyourlogo.com/

About targeted ads
https://usefathom.com/blog/targeted-ads

Google drive. ugh.
https://www.androidpolice.com/2020/04/10/google-completely-ruined-shared-folders-in-drive/

 

Resources

BEM (block, element, modifier)
https://9elements.com/bem-cheat-sheet/

Purchasing domains
https://www.wpbeginner.com/beginners-guide/how-to-buy-a-taken-domain-pro-tips/

Some good resources for theme devs
https://speckyboy.com/free-resources-supercharge-wordpress-theme-development/

I love this one. Hasty
https://www.wp-hasty.com/

 

The title

Breaking Benjamin / Saturate (2002)
https://www.youtube.com/watch?v=2vAtVlhuvac

The post Ep 034 – Polyamorous appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-034-polyamorous/feed/ 2 This episode was supposed to be a quick one about checking browsers and devices. I think it sort of went off the rails. hahahaha This episode was supposed to be a quick one about checking browsers and devices. I think it sort of went off the rails. hahahaha Almost Inevitable Design 58:27 4983
Ep 033 – Wherever I May Roam https://almostinevitable.com/ep-033-wherever-i-may-roam/ https://almostinevitable.com/ep-033-wherever-i-may-roam/#respond Wed, 08 Apr 2020 13:16:15 +0000 https://almostinevitable.com/?p=4898 Three types of digital stores that you can offer to clients in these dark unsocial times.

The post Ep 033 – Wherever I May Roam appeared first on Almost Inevitable Design.

]]>
In the current state of affairs, I think this episode might give you some ideas and direction for come e-commerce for clients. Oh, for the record, we’re not roaming anywhere anytime soon.

3 types of digital stores

eBook

Easy Digital Downloads

https://wordpress.org/plugins/easy-digital-downloads/

https://easydigitaldownloads.com/

Subscription

Paid Membership Pro

https://wordpress.org/plugins/paid-memberships-pro/

https://www.paidmembershipspro.com

Or WC membership

https://woocommerce.com/products/woocommerce-memberships/

Courses

Tutor LMS

https://wordpress.org/plugins/tutor/

https://www.themeum.com/product/tutor-lms/

LearnPress

https://wordpress.org/plugins/learnpress/

https://thimpress.com/learnpress/

LearnDash

https://www.learndash.com/

 

Articles

https://dribbble.com/stories/2020/04/06/personal-website-ideas-designers

https://www.superhighway98.com/seo

 

Resources

https://bored.solutions/

https://www.makeitpopgame.com/generator/

miro.com

 

The title

Metallica / The Black Album (1991)
https://www.youtube.com/watch?v=cwPg8gJq_Kw

The post Ep 033 – Wherever I May Roam appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-033-wherever-i-may-roam/feed/ 0 Three types of digital stores that you can offer to clients in these dark unsocial times. Three types of digital stores that you can offer to clients in these dark unsocial times. Almost Inevitable Design 56:23 4898
Ep 032 – Let the Sparks Fly https://almostinevitable.com/ep-032-let-the-sparks-fly/ https://almostinevitable.com/ep-032-let-the-sparks-fly/#respond Wed, 01 Apr 2020 14:49:09 +0000 https://almostinevitable.com/?p=4863 Do social sharing buttons work? Tune in to hear my findings on this.

The post Ep 032 – Let the Sparks Fly appeared first on Almost Inevitable Design.

]]>
Do social sharing buttons work? The answer to this question can be inferred from this Wikipedia link.

Let’s get into these articles.

https://www.seattlewebdesign.com/blog/seattle-web-design-online-marketing-blog/post/do-people-really-use-social-sharing-buttons

Excerpt:
Moovweb studied 61 million mobile sessions and discovered that 99.8 percent of mobile users never engage with social share buttons. In fact, mobile users are 11.5 times more likely to click ads than they are to click social share buttons.

Another related article
http://www.adweek.com/digital/report-moovweb-social-share-buttons/

The Moovweb article
https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

The data is the same as above, but there are some extra breakdowns in the article.

The most interesting snippet is this part:
The heart of the sharing problem is that users_ must be logged in_ in order to share. If you’re not logged in, sharing can be kind of a nightmare.

https://thenextweb.com/insider/2015/12/23/the-hidden-cost-of-social-share-buttons/

Excerpt:
By providing social sharing buttons, you are in essence causing all conversations regarding your brand and identity to be transported elsewhere (i.e. to social media sites). When people choose to share your content, the discussions will inevitably end up on the specific individual’s social media page.

This means you no longer have control over the conversation and you actually lose users rather than keep them on board. Even in the most ideal scenario, in which a user converses on your brand’s social media page, users are still transported to Facebook or Twitter instead of your site.

Also excerpt:

This is the primary drawback of social share buttons. Social share buttons are generally written in JavaScript, and this code has quite a bit of power and command behind it – costing up to 84Kb in data for a Facebook ‘Like’ button alone.

As you can imagine, inserting multiple buttons such as Facebook, Twitter, Linkedin, and G+ can take a serious toll on your site’s speed. Of course, assuming the above statistics are true, this could be detrimental to your user retention, as more and more of your visitors are sure to drop as a result of the slower connection caused by your sharing buttons.

Privacy Policy problems
https://www.business2community.com/social-media/why-most-share-buttons-go-against-your-privacy-policy-02199051

Excerpt:
As for our own findings in 2018, research showed us that 71% of shares were made through Copy & Paste, leaving the remaining 29% to Share Buttons.

An interesting article that doesn’t cite sources:
https://www.socialmediatoday.com/content/6-myths-about-social-sharing

Articles & News

Don’t know how to pronounce his last name:
https://joshwcomeau.com/performance/embracing-modern-image-formats/

Resources

Making blog post templates
https://www.wpbeginner.com/wp-themes/create-custom-single-post-templates-for-specific-posts-or-sections-in-wordpress

The Title

Thousand Foot Krutch / The End Is Where We Begin (2012)

The post Ep 032 – Let the Sparks Fly appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-032-let-the-sparks-fly/feed/ 0 Do social sharing buttons work? Tune in to hear my findings on this. Do social sharing buttons work? Tune in to hear my findings on this. Almost Inevitable Design 56:07 4863
Ep 031 – The Frayed Ends of Sanity https://almostinevitable.com/ep-031-the-frayed-ends-of-sanity/ https://almostinevitable.com/ep-031-the-frayed-ends-of-sanity/#comments Thu, 26 Mar 2020 05:27:13 +0000 https://almostinevitable.com/?p=4852 Here are some plugins and tips that will help you solve most of your WooCommerce problems.

The post Ep 031 – The Frayed Ends of Sanity appeared first on Almost Inevitable Design.

]]>
Here are some plugins and tips that will help you solve most of your WooCommerce problems.

These problems occur because of the following delusions:

Tier 3 Delusions
– Trying to automate everything
– I can’t market this without feature X

Really useful plugins

Gravity Forms
https://www.gravityforms.com/
https://woocommerce.com/products/gravity-forms-add-ons/

Checkout Field Editor
https://wordpress.org/plugins/woo-checkout-field-editor-pro/

 

Articles

Quotes about social media
https://www.markettap.com/quotes-about-social-media/

Plugin Quality not Quantity
https://wpengine.com/blog/plugins-and-fast-wordpress-sites-its-not-the-number-of-plugins-its-the-quality/

 

Resources

Oh boy oh boy, 50% off!!

https://affinity.serif.com/en-us/supporting-the-creative-community/

 

The title

Metallica / …And Justice for All (1988)

https://www.youtube.com/watch?v=rG1mclfYchA

The post Ep 031 – The Frayed Ends of Sanity appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-031-the-frayed-ends-of-sanity/feed/ 2 Here are some plugins and tips that will help you solve most of your WooCommerce problems. Here are some plugins and tips that will help you solve most of your WooCommerce problems. Almost Inevitable Design 50:46 4852
Ep 030 – Chrome Nation https://almostinevitable.com/ep-030-chrome-nation/ https://almostinevitable.com/ep-030-chrome-nation/#comments Wed, 18 Mar 2020 14:43:53 +0000 https://almostinevitable.com/?p=4813 Let's look at the stats on browsers and search engines.

The post Ep 030 – Chrome Nation appeared first on Almost Inevitable Design.

]]>
Let’s look at the numbers and what we can do about it.

Here are some sites for you to get your own stats
https://gs.statcounter.com/

https://www.netmarketshare.com/browser-market-share.aspx

https://www.w3counter.com/globalstats.php

 

News & articles

Symmetry
https://hbr.org/2020/03/what-does-the-symmetry-of-your-logo-say-about-your-brand

You’ve gotta read this.
http://www.erickarjaluoto.com/blog/a-guide-to-better-designer-client-relationships/

 

The Title,/h2>

Wayne Static – Pighammer 2011
https://www.youtube.com/watch?v=n0c3eYKOp8c

The post Ep 030 – Chrome Nation appeared first on Almost Inevitable Design.

]]> https://almostinevitable.com/ep-030-chrome-nation/feed/ 2 Let's look at the stats on browsers and search engines. Let's look at the stats on browsers and search engines. Almost Inevitable Design yes 1:09:21 4813 Ep 029 – Phantom Lord https://almostinevitable.com/ep-029-phantom-lord/ https://almostinevitable.com/ep-029-phantom-lord/#comments Wed, 11 Mar 2020 16:32:30 +0000 https://almostinevitable.com/?p=4793 This episode is about using WooCommerce catalog mode. Buckle up. There's a lot to talk about.

The post Ep 029 – Phantom Lord appeared first on Almost Inevitable Design.

]]>
This episode is about using WooCommerce catalog mode. Buckle up. There’s a lot to talk about.

– Get either WC plugin (https://woocommerce.com/products/catalog-visibility-options/)
– Or YITH plugin free (https://wordpress.org/plugins/yith-woocommerce-catalog-mode/)
– Also this looks pretty good sold on codecanyon https://codecanyon.net/item/woocommerce-catalog-mode/6806913

The BusinessBloomer article
https://businessbloomer.com/woocommerce-how-to-enable-catalog-mode/

Elex catalog mode
https://elextensions.com/plugin/elex-woocommerce-catalog-mode-plugin-free/

Product options filters
From Woo
https://woocommerce.com/products/product-filters/

From one of my favorite Woo devs
https://codecanyon.net/item/woocommerce-product-filter/8514038

Searching everything
https://wordpress.org/plugins/relevanssi/

Cf7 dynamic text
https://wordpress.org/plugins/contact-form-7-dynamic-text-extension/

 

News

Bootstrap 5!
https://themesberg.com/blog/design/bootstrap-5-release-date-and-whats-new

haha Wix vs. Squarespace
https://www.sitebuilderreport.com/state-of-website-builders

 

Resources

Free icons
https://iconscout.com/unicons

Learn Flex and/or Grid
https://ishadeed.com/article/learn-box-alignment

 

The title

Metallica / Kill ‘Em All (1983)

https://www.youtube.com/watch?v=P3bZJX8jaLo

The post Ep 029 – Phantom Lord appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-029-phantom-lord/feed/ 2 This episode is about using WooCommerce catalog mode. Buckle up. There's a lot to talk about. This episode is about using WooCommerce catalog mode. Buckle up. There's a lot to talk about. Almost Inevitable Design yes 56:41 4793
Ep 028 – Pleasure and Pain https://almostinevitable.com/ep-028-pleasure-and-pain/ https://almostinevitable.com/ep-028-pleasure-and-pain/#respond Tue, 03 Mar 2020 23:26:12 +0000 https://almostinevitable.com/?p=4779 Here are some ways to keep yourself.. relatively motivated even when working on those crappy projects.

The post Ep 028 – Pleasure and Pain appeared first on Almost Inevitable Design.

]]>
Have you had trouble motivating yourself over boring, ugly, illogical projects? I have. Quite a bit more than I’d care to admit.

Here are some ways to keep yourself.. relatively motivated even when working on those crappy projects.

– Try to implement something cool or new and make it a learning experience. (check out sites like https://freefrontend.com/ or https://codemyui.com/ )
– Try some totally different design that’s out of your normal comfort zone
– Try challenging yourself to finishing the project as efficiently as possible. (at least it’ll be over quickly)

Tune in to hear me talk about working on those kinds of projects.

 

Articles

Have a read about how much people trust Google.
https://moz.com/blog/2020-google-search-survey

Some perspective on CSS
https://css-tricks.com/why-is-css-frustrating/

 

Resources

Some page loaders
https://catswhocode.com/css-spinner/

Some cool hover effects.
https://csshint.com/css-hover-effects/

When it works it’s cool
https://cssstats.com/

Really helpful in playing with CSS colors
https://hexcolor.co/css-color-extractor/

 

The Title

Pleasure and Pain is a Gemini Syndrome song off of their 2013 album, Lux.
https://www.youtube.com/watch?v=J5Y1whCvdpo

The post Ep 028 – Pleasure and Pain appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-028-pleasure-and-pain/feed/ 0 Here are some ways to keep yourself.. relatively motivated even when working on those crappy projects. Here are some ways to keep yourself.. relatively motivated even when working on those crappy projects. Almost Inevitable Design yes 35:49 4779
Ep 027 – Sad But True https://almostinevitable.com/ep-027-sad-but-true/ https://almostinevitable.com/ep-027-sad-but-true/#respond Tue, 25 Feb 2020 22:47:21 +0000 https://almostinevitable.com/?p=4765 Another tier of WooCommerce delusions and how to tackle them.... with stats!

The post Ep 027 – Sad But True appeared first on Almost Inevitable Design.

]]>
Another tier of WooCommerce delusions and how to tackle them. Business strategies that you can try, with stats!

Let’s kick this one off with some numbers.

https://www.webdesignerdepot.com/2020/02/the-latest-research-for-web-designers-february-2020/

The takeaway here is that there are quite a few stats you can use to make a better case for yourself, whether it’s for maintenance packages, marketing approaches, or client advisory.

Now that we know all that, let’s get into the delusions haha

Tier 2 Delusions
– Trying to rank with generic terms
– Once I start ranking, I can make money easily
– Trying to make a “one-stop” solution, a multiple vendor store

It’s most likely not gonna work.

 

News

WordPress 5.4 sounds pretty good!
https://www.wpbeginner.com/news/whats-coming-in-wordpress-5-4-features-and-screenshots/

https://make.wordpress.org/core/2020/02/13/wordpress-5-4-introduces-apply-shortcodes-as-an-alias-for-do-shortcode/

 

Resources

I don’t talk about these in the recording, but here are some extra resources.

https://hexcolor.co/css-color-extractor/

https://www.behance.net/gallery/91936795/Plastic-Humans-Just-Another-Illustration-Set

 

The title

MetallicA / The Black Album (1991)
https://www.youtube.com/watch?v=A8MO7fkZc5o

The post Ep 027 – Sad But True appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-027-sad-but-true/feed/ 0 Another tier of WooCommerce delusions and how to tackle them.... with stats! Another tier of WooCommerce delusions and how to tackle them.... with stats! Almost Inevitable Design yes 59:44 4765
Ep 026 – Tainted Love https://almostinevitable.com/ep-026-tainted-love/ https://almostinevitable.com/ep-026-tainted-love/#respond Wed, 19 Feb 2020 00:47:36 +0000 https://almostinevitable.com/?p=4744 Anything can/will/might break, and the only thing that you can rely on is your OWN skills.

The post Ep 026 – Tainted Love appeared first on Almost Inevitable Design.

]]>
Funny how I just got a comment on one of my posts concerning this topic. hahaha Someone actually tried to argue that you should avoid using CSS as much as possible because Divi has enough options. Wut.

Unfortunately, this episode was recorded before that stupid comment was written, but my points would still be an answer to that comment.

Anything can/will/might break, any service can croak out, and any company might go bankrupt.

The only thing that you can rely on is your OWN skills. Always work on building your own personal skills, so you don’t have to rely solely on a single product.

 

I talk about these resources in the episode

https://siteorigin.com/page-builder/

https://creativethemes.com/blocksy/

There’s a lot more stuff I like, but I think these are the ones I mention..

 

News & Articles

Seriously, I hate WIX.
https://www.liquidint.com/blog/marketing/wix-seo-battle-recap

Such a cool concept. Too bad it didn’t work.
https://www.fastcompany.com/90462605/brandless-the-pioneering-amazon-alternative-shuts-down

Resources

Ha. So much fun.
https://theselyricsdonotexist.com/

A list of online code editors
https://catswhocode.com/online-code-editor/

Tag your YT vids
https://youtubetaggenerator.com/

The Title

Marilyn Manson / Not Another Teen Movie soundtrack (2001)
Also featured on The Golden Age of Grotesque (2003)
https://www.youtube.com/watch?v=XkKulSH2nNc

The post Ep 026 – Tainted Love appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-026-tainted-love/feed/ 0 Anything can/will/might break, and the only thing that you can rely on is your OWN skills. Anything can/will/might break, and the only thing that you can rely on is your OWN skills. Almost Inevitable Design yes 1:00:00 4744
Ep 025 – The Thing That Should Not Be https://almostinevitable.com/ep-025-the-thing-that-should-not-be/ https://almostinevitable.com/ep-025-the-thing-that-should-not-be/#respond Tue, 11 Feb 2020 23:50:23 +0000 https://almostinevitable.com/?p=4726 Tune in to get insights on how to piece together functions to get the WooCommerce website you want.

The post Ep 025 – The Thing That Should Not Be appeared first on Almost Inevitable Design.

]]>
This one’s pretty important if you’re making WooCommerce websites. How to piece together functions, how to research, and how to rework them to get the intended functionality.

 

Everyone like lists. This one’s an ol.

General workflow
Note: This should be done before you quote anything. haha

1. During the brief -> Make sure you cover all the little things
2. Who’s gonna populate it?
3. Products -> How are they supposed to work? How is the ordering process supposed to work? How is checkout supposed to work>
4. Cover everything.
5. Start research on YITH & WC -> conceptualize the functionality and check documentation to see how it works.

 

Really helpful plugin for changing character strings
https://wordpress.org/plugins/say-what/

Tune in for some examples and anecdotes on how to plan and structure your WooCommerce website!

 

The title

MetallicA / Master of Puppets (1986)

https://www.youtube.com/watch?v=gm9c_QpuMms

The post Ep 025 – The Thing That Should Not Be appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-025-the-thing-that-should-not-be/feed/ 0 Tune in to get insights on how to piece together functions to get the WooCommerce website you want. Tune in to get insights on how to piece together functions to get the WooCommerce website you want. Almost Inevitable Design yes 53:19 4726
Ep 024 – Re-Align https://almostinevitable.com/ep-024-re-align/ https://almostinevitable.com/ep-024-re-align/#respond Wed, 05 Feb 2020 14:57:49 +0000 https://almostinevitable.com/?p=4700 Have you heard the phrase "you have to design for mobile first?" Let's talk about that.

The post Ep 024 – Re-Align appeared first on Almost Inevitable Design.

]]>
Have you heard the phrase “you have to design for mobile first?”

Yeah… I hear that a lot. Normally, I work with desktop proofs (So design mockups made to show what the desktop version looks like) and I work my way DOWN. Mobile first means I start with the mobile design, and work my way UP.

Totally opposite approach.

So I searched for tutorials and articles on designing for mobile first.

Here’s what I found.

 

Google: “how to design mobile first”

https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/

https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/

https://www.searchenginewatch.com/2019/03/05/mobile-first-design-for-2019/

https://www.topcoder.com/your-guide-to-mobile-first-design/

https://designshack.net/articles/mobile/mobilefirst/

https://opensenselabs.com/blog/articles/mobile-first-design-guide

https://www.forbes.com/sites/forbestechcouncil/2018/03/19/five-tips-for-designing-a-mobile-first-website/

https://justcoded.com/blog/mobile-first-web-design-why-is-it-important-in-2019/

 

Also another

Google “design mobile first tutorial”

Let’s go specifically for tutorials then…

https://www.html5rocks.com/en/mobile/responsivedesign/

https://zellwk.com/blog/how-to-write-mobile-first-css/

https://blog.alexdevero.com/ultimate-guide-mobile-first-web-design/

 

I talk about all those links and what I think about the mobile first approach.

 

Articles

https://edition.cnn.com/2020/01/29/tech/facebook-earnings/

https://dribbble.com/stories/2020/01/31/nfl-team-logos-reimagined

 

Resources

https://csshint.com/css-animated-backgrounds

https://cloudfour.com/thinks/staggered-animations-with-css-custom-properties/

 

The title

Godsmack / “Re-align” / Faceless (2003)

https://www.youtube.com/watch?v=vv9Zv83lStw

 

Just to show that I really did visit all those pages on the 1st page of SERP

The post Ep 024 – Re-Align appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-024-re-align/feed/ 0 Have you heard the phrase "you have to design for mobile first?" Let's talk about that. Have you heard the phrase "you have to design for mobile first?" Let's talk about that. Almost Inevitable Design yes 59:19 4700
Ep 023 – Creeping Death https://almostinevitable.com/ep-023-creeping-death/ https://almostinevitable.com/ep-023-creeping-death/#respond Thu, 30 Jan 2020 13:42:53 +0000 https://almostinevitable.com/?p=4677 Tier 2 delusions of WooCommerce websites and clients. Tune in!

The post Ep 023 – Creeping Death appeared first on Almost Inevitable Design.

]]>
Let’s get into some more WooCommerce!

Tier 1 Delusions
– Being too specific
– Having too many rules
– Trying to mirror a brick and mortar shop too closely
– I can make money easily (This will always be on the list)

Articles

Diversity helps.
https://www.webdesignerdepot.com/2020/01/diversity-in-photos-affect-ux/

I’m a 6/10 on this
https://capwatkins.com/blog/the-sliding-scale-of-giving-a-fuck

No more landing pages!
https://uxdesign.cc/the-new-landing-page-is-to-have-no-landing-page-at-all-bb57ca1548f1

 

Resources

An extensive list of themes
https://kinsta.com/best-wordpress-themes

This will help you understand CSS a bit better.
https://wattenberger.com/blog/css-cascade

And her whole website if really cool
https://wattenberger.com/

Some color combos
https://logobly.com/colors/

 

The Title

METALLICA / Ride the Lightning (1984)
https://www.youtube.com/watch?v=xAOMEqMXiXI

The post Ep 023 – Creeping Death appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-023-creeping-death/feed/ 0 Tier 2 delusions of WooCommerce websites and clients. Tune in! Tier 2 delusions of WooCommerce websites and clients. Tune in! Almost Inevitable Design yes 56:00 4677
Ep 022 – 1000 Points of Hate https://almostinevitable.com/ep-022-1000-points-of-hate/ https://almostinevitable.com/ep-022-1000-points-of-hate/#respond Wed, 22 Jan 2020 06:22:46 +0000 https://almostinevitable.com/?p=4652 Extra warning: Extra strong language. Here's a story of how I recently got screwed over.

The post Ep 022 – 1000 Points of Hate appeared first on Almost Inevitable Design.

]]>
This episode has a bit more “language” than the other ones. Why?

It’s a story about how I pretty much got screwed over.

Tune in for storytime.

 

Have you noticed those unimaginative blurb points, bullet points, and/or lists that seem to be on every ugly website?

Here are some of my ideas for making lists that don’t suck.

– Don’t use them. At all. There are other ways of conveying information. Do that.
– Use at least a well-made icon, and not an elegantfont, or font-awesome.
– Try taking out the body copy, and just use the headings. People skim anyway.
– Don’t make them too long, because people won’t rea-

 

Here are some outside sources on this matter.

About bullet points and lists and blurbs
https://www.nngroup.com/articles/presenting-bulleted-lists/

Some inspirations
http://ui-patterns.com/users/1/collections/lists/screenshots

 

News & Articles

hahahahaha about compromise.
https://modus.medium.com/why-compromise-is-the-great-design-superpower-fa9c1653f4da

also this
https://uxdesign.cc/designing-for-your-clients-or-for-likes-from-your-peers-6ffe335e700c

Here are some “logos” in a perfect world.
https://csshint.com/logo-with-typography

Here’s a logo study of a (highly) imperfect company.
https://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_godaddy_done_in_house.php

But this isn’t bad at all.
https://godaddy.design/

 

Resources

Just some eye candy
https://www.themasterpicks.com/65-best-creative-instagram-accounts

Very useful
https://tiny-helpers.dev

Also very cool, and very useful.
https://www.colorsandfonts.com/

The title

Anthrax / Sound of White Noise (1993)
https://www.youtube.com/watch?v=IP2UxCujy_k

The post Ep 022 – 1000 Points of Hate appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-022-1000-points-of-hate/feed/ 0 Extra warning: Extra strong language. Here's a story of how I recently got screwed over. Extra warning: Extra strong language. Here's a story of how I recently got screwed over. Almost Inevitable Design yes 56:22 4652
Ep 021 – Moth Into Flame https://almostinevitable.com/ep-021-moth-into-flame/ https://almostinevitable.com/ep-021-moth-into-flame/#respond Tue, 14 Jan 2020 23:40:41 +0000 https://almostinevitable.com/?p=4622 Woo! WooCommerce! Join me for a new WooCommerce for web designers & developers series! In this episode, the tiers of Woolusion.

The post Ep 021 – Moth Into Flame appeared first on Almost Inevitable Design.

]]>
Let’s start a new series!

WooCommerce for Web Designers & Developers

In this series, I will be covering a lot of things (primary, secondary, tertiary) concerning WooCommerce (and eComm in general). Tune in for fun with Woocommerce.

 

The topic

Many clients suffer from Woolusions.

Here are the Tier 0 Woolusions that I’ll be covering in this episode. I’ll expand/explain/remedy them in the podcast, so tune in!

– If you build it they will come.
– This shop is a great idea!
– I will market it once I’m finished.
– My friends will help with marketing with a shoutout on their social media.
– I can make money easily.

 

News & resources

DeGoogling yourself
https://www.kylepiira.com/2020/01/09/why-i-quit-google/

Some stats on TLD response times
https://bunnycdn.com/blog/is-your-fancy-new-domain-hurting-your-performance-gtld-benchmark

and… get your color!
https://kolormark.com/

This is my Almost Inevitable brand color
https://kolormark.com/fcdc00

 

The Title

From MetallicA’s Hardwired… to self destruct (2016) album.

https://www.youtube.com/watch?v=4tdKl-gTpZg

The post Ep 021 – Moth Into Flame appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-021-moth-into-flame/feed/ 0 Woo! WooCommerce! Join me for a new WooCommerce for web designers & developers series! In this episode, the tiers of Woolusion. Woo! WooCommerce! Join me for a new WooCommerce for web designers & developers series! In this episode, the tiers of Woolusion. Almost Inevitable Design yes 58:19 4622
Ep 020 – Back in Black https://almostinevitable.com/ep-020-back-in-black/ https://almostinevitable.com/ep-020-back-in-black/#respond Tue, 07 Jan 2020 16:42:07 +0000 https://almostinevitable.com/?p=4594 Steps 8 and 9! Let's get paid! Tune in for a quick tutorial on WP migration, and getting paid.

The post Ep 020 – Back in Black appeared first on Almost Inevitable Design.

]]>
Steps 8 and 9 : Get the balance, and provide the migration… and not the other way around. This is a really important point that gets overlooked way more than I’d like. Here are some tips that should help smooth out the payment and I ended up explaining the whole process of migrating a WordPress website in too much detail haha

Some tips.

Preempt the balance payment – A good way is to add some guidance in an email during step 7.

Make sure you have the login details.

Provide the migration.

Technical stuff: I tend to use all in one migration, or duplicator. Tune in for a quick tutorial on this.

 

The title

AC/DC / Back in Black (1980)

https://www.youtube.com/watch?v=pAgnJDJN4VA

The post Ep 020 – Back in Black appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-020-back-in-black/feed/ 0 Steps 8 and 9! Let's get paid! Tune in for a quick tutorial on WP migration, and getting paid. Steps 8 and 9! Let's get paid! Tune in for a quick tutorial on WP migration, and getting paid. Almost Inevitable Design yes 36:06 4594
Ep 019 – Sabotage https://almostinevitable.com/ep-019-sabotage/ https://almostinevitable.com/ep-019-sabotage/#respond Tue, 07 Jan 2020 12:57:24 +0000 https://almostinevitable.com/?p=4591 Step 7! Getting the final approval! Some things to look out for.

The post Ep 019 – Sabotage appeared first on Almost Inevitable Design.

]]>
It’s time for the final approval and get paid! BUT scope creep and last minute stuff happens.

What do you do?

Here are some things to avoid during the final stage approval
– Letting them in the backend.
– Trusting them.
– Agree to add last minute features from left field.

 

The Title

Beastie Boys / Ill Communication (1994)

https://www.youtube.com/watch?v=z5rRZdiu1UE

The post Ep 019 – Sabotage appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-019-sabotage/feed/ 0 Step 7! Getting the final approval! Some things to look out for. Step 7! Getting the final approval! Some things to look out for. Almost Inevitable Design yes 27:05 4591
Ep 018 – Zero https://almostinevitable.com/ep-018-zero/ https://almostinevitable.com/ep-018-zero/#respond Tue, 17 Dec 2019 23:11:29 +0000 https://almostinevitable.com/?p=4544 Plugins, how many is too many? Tune in to learn about WP, how plugins work, and why the plugin number game is not important.

The post Ep 018 – Zero appeared first on Almost Inevitable Design.

]]>
Plugins, how many is too many? How do these things work? How do you keep track? Well, let’s talk about this. How many plugins are good for WordPress? To answer that, we need to know how plugins work, what they do, what they’re supposed to do, and how we can manage them.

Things to remember
– Plugins are php functions that add extra functions to WP
– Many themes have a lot of functions in them by default. This is the same as having multiple plugins anyway.

Things you can do to ensure you don’t end up with crap plugins
– Check how recently it was updated
– Check the dev’s website
– Check the support forum

Tune in to get into some technical stuff and what matters and what doesn’t in terms of plugins.

News & Articles

Reddit A/B testing
https://old.reddit.com/r/mobileweb/comments/e7yivg/join_reddit_to_keep_reading_an_account_is_now/

Logo design parodies
https://dribbble.com/stories/2019/12/12/famous-logo-design-parodies

One of the stupidest people I’ve read about recently.
https://arstechnica.com/tech-policy/2019/12/failed-plot-to-steal-domain-name-at-gunpoint-brings-14-year-prison-term/

 

Resources

Some easy tips in making your local business websites better.
https://icons8.com/articles/small-business-website-design

A really great breakdown on HSL colors.
https://medium.com/@elad/why-css-hsl-colors-are-better-83b1e0b6eead

Some … tools for web designers.. but.. not as good as I thought.. haha
https://www.delt.net/mag/best-tools-for-web-designers

 

The Title

Smashing Pumpkins “Zero”
From the album “Mellon Collie and the Infinite Sadness (1995)”
https://www.youtube.com/watch?v=3wk7C64kaP4

The post Ep 018 – Zero appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-018-zero/feed/ 0 Plugins, how many is too many? Tune in to learn about WP, how plugins work, and why the plugin number game is not important. Plugins, how many is too many? Tune in to learn about WP, how plugins work, and why the plugin number game is not important. Almost Inevitable Design yes 50:54 4544
Ep 017 – Left Unfinished https://almostinevitable.com/ep-017-left-unfinished/ https://almostinevitable.com/ep-017-left-unfinished/#respond Wed, 11 Dec 2019 00:47:02 +0000 https://almostinevitable.com/?p=4497 This episode is about finishing up the preview build. Some things concerning the build that you will need to consider. Actual real-life stuff. Nothing inspirational.

The post Ep 017 – Left Unfinished appeared first on Almost Inevitable Design.

]]>
This episode is about finishing up the preview build. Some things concerning the build that you will need to consider when building.

Edit: There was a mistake and the media file went missing. I’ve added it again properly. Sorry.

Disclaimer: Please remember that I am encouraging you to learn more and become better everyday. If you’re building in what I call amateurish ways, then please consider either a. learning, or b. hiring a (front-end) developer. Bad websites come from bad builds. Bad builds come from stubborn oblivious denial and ignorance. I read other people’s code everyday, I check cool codepens and articles on front-end code literally everyday. I’m always learning. Shouldn’t we all be?

So, although this episode might sound like an attack to your builds… it’s because I want professionals to actually be a tier above amateurs. You owe it to the clients.

Things to do during the build

– Turn off all the caches
– Put all the things in place as according to your planning, and not mouse tweaking.
– Really try to stick with the templates you planned (from the proof)
– Style from the front end only
– Delete useless images and stuff while building
– Don’t rely on small adjustments. Make a system.
– Try to understand how things are put together.
– Don’t forget: It will most likely not be 100% finished, because there are a lot of small details and content that the client will have to provide or confirm. Also, there are circumstances that will be different on the live URL from the preview URL. So make a note of all these things. It will be important. -> Both you and the client needs to understand this. Tighten the screws only after migration.

 

News & Articles

Brave FTW
https://searchengineland.com/privacy-focused-rewarded-ads-browser-brave-tops-10m-monthly-active-users-326100

DuckDuckGo FTW
https://www.wired.com/story/i-ditched-google-for-duckduckgo-heres-why-you-should-too

Google AMP, how to avoid them
https://markosaric.com/google-amp/

Have a break and look at pretty illustrations
https://dribbble.com/stories/2019/12/05/character-designs-reimagined

 

Resources

A nice web audit checklist
https://webaud.it

5 bad WordPress habits
https://speckyboy.com/bad-habits-wordpress

Some cool CSS gradients
http://csshint.com/animated-gradient-examples

 

The Title

Machine head / Through the ashes of empires (2003)
https://www.youtube.com/watch?v=s-LUIQPCy54

The post Ep 017 – Left Unfinished appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-017-left-unfinished/feed/ 0 This episode is about finishing up the preview build. Some things concerning the build that you will need to consider. Actual real-life stuff. Nothing inspirational. This episode is about finishing up the preview build. Some things concerning the build that you will need to consider. Actual real-life stuff. Nothing inspirational. Almost Inevitable Design yes 1:03:56 4497
Ep 016 – None But My Own https://almostinevitable.com/ep-016-none-but-my-own/ https://almostinevitable.com/ep-016-none-but-my-own/#respond Tue, 03 Dec 2019 23:32:41 +0000 https://almostinevitable.com/?p=4464 Finally! We are in the BUILD stage! Tune in for important tips on what to do before you build to make things more efficient.

The post Ep 016 – None But My Own appeared first on Almost Inevitable Design.

]]>
Finally! We are in the BUILD! But.. some precautions even before you start the build…

Please remember: You have absolutely NO control over anything if the preview-build domain and server is not yours. So always work somewhere you control. Always.

OK. So more lists..

Things to do even before installation

– Optimize images (export assets -> svg, jpg, png)
– Text into html
– Plan sizes, colors, layouts, and structure.

Things to do before you start

– Theme + child theme
– Install an image optimizer (+ safe svg)
– Contact form 7 (or gravity) + CF DB
– Turn off the cache

We’ll get into “Things to do during build” in the next episode.

 

News

Yoast is now toast?
https://www.reddit.com/r/Wordpress/comments/e4buij/heres_my_take_on_yoasts_black_friday_inadmin/

https://carb.is/2019/12/advertising-in-the-wordpress-admin/
https://github.com/Yoast/wordpress-seo/issues/13961

A good alternative (I’ve tried it for a short period of time, and it works really well)
The SEO Framework
https://wordpress.org/plugins/autodescription/

WIX “SEO”
https://www.wixseohaters.com/
the WIX domain + /seo-battle/

Some web design trends that need to die
https://www.webdesignerdepot.com/2019/11/10-outdated-web-design-trends/

Resources

Contract
https://www.hongkiat.com/blog/design-contract-clauses/

SEO keyword explanations
https://www.webdesignerdepot.com/2019/11/keyword-research-101-everything-you-need-to-know/

Free vectornator
Note: It’s the first version release, so I understand some bugs, but it kept on crashing when typing in the text tool for me.. so maybe don’t invest everything in it yet..
https://vectornator.io/blog/vectornator-goes-on-mac

The Title

from Machine Head‘s 1994 album Burn my eyes

https://www.youtube.com/watch?v=cv0Av7VubD0

The post Ep 016 – None But My Own appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-016-none-but-my-own/feed/ 0 Finally! We are in the BUILD stage! Tune in for important tips on what to do before you build to make things more efficient. Finally! We are in the BUILD stage! Tune in for important tips on what to do before you build to make things more efficient. Almost Inevitable Design yes 57:08 4464
Ep 015 – Bored https://almostinevitable.com/ep-015-bored/ https://almostinevitable.com/ep-015-bored/#respond Tue, 26 Nov 2019 23:25:32 +0000 https://almostinevitable.com/?p=4392 Bored of the same old stuff? Want to get some new ideas, some new flavors in your websites? Tune in!

The post Ep 015 – Bored appeared first on Almost Inevitable Design.

]]>
Sick of the same old designs, and same old stuff? In this episode I talk about things you can do to stay in your niche but stay inspired or find some designs that motivate you. Tune in!

 

Some methods for getting out of the design rut..

– Checking the same industry stuff? No
– Stop asking for “inspiration.”
– Look at good stuff. Try to pick out ONE, and try to implement that.
– Print stuff
– Especially web – themeforest, html templates, etc

So basically, the main idea is to get out of the cycle of putting out the same stuff over and over.

Some helpful links I mention

https://www.pages.xyz/

https://www.siteinspire.com/

https://codemyui.com/

https://httpster.net/

https://abduzeedo.com/

 

News

Get it together Facebook
https://thenextweb.com/facebook/2019/11/22/facebook-considers-political-ad-limits-after-twitter-and-google-take-action/

Might help when consulting clients
https://www.noupe.com/business-online/ecommerce/find-a-niche-for-your-ecommerce-store.html

Cybetruuuuuuucccccckkkkkkk!!!!
https://thenextweb.com/plugged/2019/11/22/tesla-unveils-the-wildly-futuristic-cybertruck-starting-at-39900/

 

Resources

Some YT channels
https://dailydevlinks.com/best-youtube-channels-for-front-end-developers

Fun CSS grid stuff
https://1stwebdesigner.com/fascinating-css-grid-layout-examples-and-tutorials

Free illustrations
https://illlustrations.co

 

The Title

Deftones!! BOOORRRREEEEEDDDDDD

https://www.youtube.com/watch?v=-WdYo3WlETY

The post Ep 015 – Bored appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-015-bored/feed/ 0 Bored of the same old stuff? Want to get some new ideas, some new flavors in your websites? Tune in! Bored of the same old stuff? Want to get some new ideas, some new flavors in your websites? Tune in! Almost Inevitable Design yes 48:04 4392
Ep 014 – This is Gonna Hurt https://almostinevitable.com/ep-014-this-is-gonna-hurt/ https://almostinevitable.com/ep-014-this-is-gonna-hurt/#respond Tue, 19 Nov 2019 22:59:20 +0000 https://almostinevitable.com/?p=4323 I think the approval process is one of the worst stages ever as a designer. There are some good days, but sometimes it can be really bad.

The post Ep 014 – This is Gonna Hurt appeared first on Almost Inevitable Design.

]]>
I think the approval process is one of the worst stages ever as a designer. There are some good days, but sometimes it can be disheartening, disappointing, and demeaning. But remember, it’s not art.

Here’s the Reddit post I was talking about.
https://www.reddit.com/r/graphic_design/comments/dxfcjo/i_am_currently_a_graphic_design_student_ive_read/
From user dreaming-underwater

It’s a bad field to go into if you:
* Have to take out student loans to pay for college
* Think you’re going to be an artist
* Are thin-skinned


Here are some approaches you can take
– Fire the client
– Try to understand what they mean, not what they’re saying
– Take this as a chance to learn a new style
– Just do it and get it over with

A quick reminder to keep you sane: Remember, taste cannot be bought.

News

Taylor Swift doxxing
https://www.theverge.com/2019/11/14/20965843/taylor-swift-fans-doxxed-scooter-braun-scott-borchetta-twitter

No more likes!
https://thenextweb.com/apps/2019/11/14/instagram-hidden-likes-global

Definitely worth a read. SEO myths.
https://searchengineland.com/seo-myths-busted-by-an-ex-googler-324985

Resources

Check out some good email stuff
https://design4users.com/email-design-trends/

Pricing yourself
https://99u.adobe.com/articles/64872/know-your-worth-a-guide-to-setting-your-rates

Hand Lettering??
https://line25.com/tutorials/hand-lettering-tutorial-guide-for-beginners

The Title

Sixx AM / This is Gonna Hurt
(Formed by Nikki Sixx, the bassist from Mötley Crüe)

https://www.youtube.com/watch?v=DYEXPn9e9ac

The post Ep 014 – This is Gonna Hurt appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-014-this-is-gonna-hurt/feed/ 0 I think the approval process is one of the worst stages ever as a designer. There are some good days, but sometimes it can be really bad. I think the approval process is one of the worst stages ever as a designer. There are some good days, but sometimes it can be really bad. Almost Inevitable Design yes 52:23 4323
Ep 013 – Door to Door Cannibals https://almostinevitable.com/ep-013-door-to-door-cannibals/ https://almostinevitable.com/ep-013-door-to-door-cannibals/#comments Wed, 13 Nov 2019 00:22:44 +0000 https://almostinevitable.com/?p=4293 How do you start getting clients? Tune in to hear one of my ideas on this topic.

The post Ep 013 – Door to Door Cannibals appeared first on Almost Inevitable Design.

]]>
This one’s about our endless quest – How to get clients? Here is a good approach to starting off your freelance work and start getting clients. We all need paying clients, and especially if you’re just starting off, it’s hard to get them.

The 5 reasons why I suggest this approach (from the podcast)…

  • Have industry-specific suggestions and ideas
  • Understand the industry enough to upsell
  • Understand the SEO & marketing ins and outs
  • Have very valuable first-hand networking
  • Have secondary and tertiary fields

I really hope this sets you of in a good direction so you can get a good start in your web design journeys. Please

 

News & Articles

The survey
https://www.fastcompany.com/90422497/what-life-is-really-like-for-todays-freelance-designers-in-5-numbers

Inspiration ideas
https://dribbble.com/stories/2019/10/30/how-to-spark-creativity-when-you-feel-uninspired

Adobe’s excuse
https://www.creativebloq.com/news/adobes-inconsistent-icons

Come on guys..
https://mashable.com/article/adobe-creative-cloud-accounts-exposed

 

Resources

Paper newspapers are still relevant..?
https://www.smashingmagazine.com/2019/11/newspapers-teach-web-design/

Get some cool color palettes
https://imagehues.com

SEO! NEIL PATEL!
https://app.neilpatel.com/en/ubersuggest/

The title

Chevelle’s Door to Door Cannibals has a bit of frightening imagery, but it’s a kick ass song.

https://www.youtube.com/watch?v=6mBLdvSUH9g

The post Ep 013 – Door to Door Cannibals appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-013-door-to-door-cannibals/feed/ 6 How do you start getting clients? Tune in to hear one of my ideas on this topic. How do you start getting clients? Tune in to hear one of my ideas on this topic. Almost Inevitable Design yes 56:21 4293
Ep 012 – I Thought I Knew It All https://almostinevitable.com/ep-012-i-thought-i-knew-it-all/ https://almostinevitable.com/ep-012-i-thought-i-knew-it-all/#comments Tue, 05 Nov 2019 23:43:33 +0000 https://almostinevitable.com/?p=4255 This episode talks about providing a design proof (or mockup) for the client. It's probably the most important step in the web creation process, but it's unfortunate that it gets overlooked quite often.

The post Ep 012 – I Thought I Knew It All appeared first on Almost Inevitable Design.

]]>
This episode talks about providing a design proof (or mockup) for the client. It’s probably the most important step in the web creation process, but it’s unfortunate that it gets overlooked quite often. This causes way more problems than you’d think. Tune in for some insights and tips about creating web design proofs for the client!

Some things to consider when building a proof.

For the client
– Stick with branding and personality
– Inspirations
– Layout first and slowly fill up with text and images

For yourself
– make them easily exportable
– make things clear for you to understand
– make mental notes of where micro animations should be.

Some extra tips
– I like using proofs that are 1600px across with a grid of 12 columns for a container that is 1200px across.
– Suggested apps: Adobe XD (free), Adobe InDesign (Adobe paid subscription), Affinity Publisher (one time fee), Sketch (Yearly subscription)

 

News & Articles

Good read about what makes websites look shady/abandoned
https://www.smashingmagazine.com/2019/10/signs-website-haunted-house-welcoming-home/

Chrome. ugh. Firefox. yay. Brave. yay.
https://www.forbes.com/sites/kateoflahertyuk/2019/05/30/google-just-gave-2-billion-chrome-users-a-reason-to-switch-to-firefox/

AirBnB ugh. (Fascinating read)
https://www.vice.com/en_us/article/43k7z3/nationwide-fake-host-scam-on-airbnb

 

Resources

Animated icons!!!!
https://lordicon.com/icons

Some really cool CSS tricks
https://ishadeed.com/article/unusual-use-cases-pseudo-elements/

Divi blog post template builder tutorial
https://www.elegantthemes.com/blog/divi-resources/how-to-use-the-post-content-module-in-the-divi-theme-builder

 

The Title

Megadeth!!!

https://www.youtube.com/watch?v=K5ze4DDvWgE

The post Ep 012 – I Thought I Knew It All appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-012-i-thought-i-knew-it-all/feed/ 2 This episode talks about providing a design proof (or mockup) for the client. It's probably the most important step in the web creation process, but it's unfortunate that it gets overlooked quite often. This episode talks about providing a design proof (or mockup) for the client. It's probably the most important step in the web creation process, but it's unfortunate that it gets overlooked quite often. Almost Inevitable Design yes 54:08 4255
WP – Add a year + copyright shortcode https://almostinevitable.com/wp-add-a-year-copyright-shortcode/ https://almostinevitable.com/wp-add-a-year-copyright-shortcode/#respond Wed, 30 Oct 2019 14:04:33 +0000 https://almostinevitable.com/?p=4221 Here's quick tutorial on how to add an automatically updating "year + copyright" text in your footer.. or anywhere on your site.

The post WP – Add a year + copyright shortcode appeared first on Almost Inevitable Design.

]]>
Background

Since Divi released a major update in the form of ver. 4, (see the constantly updated review here) people have been excitedly making their own custom footers (and headers). However, this opens up the door for a lot of elements that are not always easily made via page builder.

The year + copyright text is one of them.

If you wanted to put a “© 2019 Almost Inevitable Design” in your footer, then simply typing it in doesn’t allow the year to change dynamically.

Of course, you could come back and change it once a year, but if you make websites for others, you can’t just go around changing the year for all your clients over New Years, right?

 

The solution

Getting the year is not an HTML function. It should have to be either php or javascript.

Luckily, WordPress allows us to write custom shortcodes, and that’s what we’ll do.

All you need to do is drop in the shortcode and it will automatically show the ©, the year, and the blog name (name of the website).

You can also change the name if you want by adding an attribute like blogname=”your alt blog name” and it will show that custom name on the frontend.

Like this:

will give you this:

Again, please note: without the extra attribute, the shortcode will show the blog name by default, so you don’t have to worry about it much.

Here’s a Divi example

Just paste in the shortcode, and you’re done.

 

The code

 

//// This is a shortcode that allows you to just drop in [copyyear] anywhere 
//// and it will show you "© 2019 Blog Name" enclosed in a <p class="copyright-text"> tag. 
//// It will show you the blog name by default, but if you want to change the name.. 
//// you can also add an attribute [copyyear blogname="woah"] which gives you "© 2019 woah"
//// Credit: PK at Almost Inevitable Design at https://almostinevitable.com 

function copyright_yearr( $atts ) {
   $att = shortcode_atts( array(
      'blogname' => get_bloginfo( 'name' )
   ), $atts );
   $year = date("Y");
   $copyrighttxt .= "<p class='copyright-text'>&copy; ". $year ." ". $att['blogname'] . "</p>";
   return $copyrighttxt;
}

add_shortcode('copyyear', 'copyright_yearr');

 

Where does it go?

Copy that php snippet and paste it in your child theme’s functions.php file.

Where in the child theme? In the root folder of the child theme, you’ll see functions.php. Open that up, and paste the code on the bottom of the file, then save.

 

 
Do you have a child theme?

No? Then you'll need one! (click here to read why you really need one)

If you need one, then head over here to get a free child theme that comes with some useful features.

Get a free child theme  

 

And that’s it!

Please take a look around the website, have fun, and please do not hesitate to ask questions.

 

 

[contact-form-7]

The post WP – Add a year + copyright shortcode appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-add-a-year-copyright-shortcode/feed/ 0 4221
Ep 011 – Get it Together https://almostinevitable.com/ep-011-get-it-together/ https://almostinevitable.com/ep-011-get-it-together/#respond Tue, 29 Oct 2019 23:02:58 +0000 https://almostinevitable.com/?p=4192 Now that you got paid, let's get to work! This episode is about getting the content from the client!

The post Ep 011 – Get it Together appeared first on Almost Inevitable Design.

]]>
This episode, we will talk about step 3.5 – Gathering content from the client. This is a major bottleneck in most production workflows. So here are some thoughts on what to do or not do to make this process less painful.

Please do…

– give them a questionnaire
– give them a checklist
– hire a copywriter
– explain that you might have to edit their content (included in the fee)
– clarify which images you want
– offer to organize a photographer

And… please…

– do NOT leave it up to them
– do NOT get bullied into making their content
– do NOT offer Lorem ipsum
– do NOT wait for them to come back to you

Tune in to hear explanations, stories, and ideas about gathering content from the clients!

 

News & Articles

Visual Composer is free in the WordPress repo!
https://visualcomposer.com/blog/visual-composer-on-wordpress-org/

Get it here
https://wordpress.org/plugins/visualcomposer/

A good read about UI design
https://uxdesign.cc/10-mistakes-i-made-starting-out-as-a-ui-designer-93ec45d1ad39

Interesting read about some famous logos
https://www.creativebloq.com/features/5-logos-by-famous-designers-and-why-they-work

 

Resources

Seems to be a great client management system. (I’m not sponsored or affiliated in any way, it was suggested by Kate.)
https://www.dubsado.com/

Free animated icons!
https://icons8.com/animated-icons

Free illustrated people!
https://fresh-folk.com/

The title

Get it together

https://www.youtube.com/watch?v=jeHfQqTLi6A

The post Ep 011 – Get it Together appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-011-get-it-together/feed/ 0 Now that you got paid, let's get to work! This episode is about getting the content from the client! Now that you got paid, let's get to work! This episode is about getting the content from the client! Almost Inevitable Design yes 57:49 4192
Ep 010 – Half God Half Devil https://almostinevitable.com/ep-010-half-god-half-devil/ https://almostinevitable.com/ep-010-half-god-half-devil/#respond Tue, 22 Oct 2019 23:29:07 +0000 https://almostinevitable.com/?p=4103 In this episode, we talk about getting your deposit in your bank account. The important first payment, and how not to mess it up. Who knew it would come with its own set of precautions.

The post Ep 010 – Half God Half Devil appeared first on Almost Inevitable Design.

]]>
In this episode, we talk about getting your deposit in your bank account. The important first payment, and how not to mess it up. Now that the proposal has been given a green light, they’re gonna have to pay, but who thought it comes with its own set of precautions.

My personal approach to how I do it. (and how a lot of agencies do it): 50% up front, 50% before migration.

I’ve seen people with different plans, but the fact remains that they all get a portion of the proposal upfront before work commences.

Here are some things to keep in mind:

  • Do not get bullied or tricked into working before payment.
  • Do not trust them.
  • Try not to spend the deposit right away.

Tune in for fun stories!

 

News

Pretty interesting
https://www.brandly.com/blog/when-brand-identity-goes-wrong-5-embarrassing-mistakes

Apple is not selling your data.. ok.
https://www.theregister.co.uk/2019/10/14/apple_china_tencent

Divi 4!!!!!
https://www.elegantthemes.com/blog/theme-releases/divi-4

Here’s my longer review on this.
https://almostinevitable.com/divi-4-quick-review-overview/

Resources

Play around with flexbox
https://www.outpan.com/app/1b970b008f/flexbox-playground

Some fine-tuning of UI
https://www.mobilespoon.net/2019/08/visually-distorted-when-ui-looks-all.html

Inspiration for some thin lines used in design
https://speckyboy.com/ultra-thin-lines-web-design/

 

Title

https://www.youtube.com/watch?v=iwzaIEmaW0s

 

Photo of a halved toasted samwich by Asnim Asnim on Unsplash

The post Ep 010 – Half God Half Devil appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-010-half-god-half-devil/feed/ 0 In this episode, we talk about getting your deposit in your bank account. The important first payment, and how not to mess it up. Who knew it would come with its own set of precautions. In this episode, we talk about getting your deposit in your bank account. The important first payment, and how not to mess it up. Who knew it would come with its own set of precautions. Almost Inevitable Design yes 51:11 4103
A Divi 4 Review + updates https://almostinevitable.com/divi-4-quick-review-overview/ https://almostinevitable.com/divi-4-quick-review-overview/#comments Tue, 22 Oct 2019 16:47:22 +0000 https://almostinevitable.com/?p=4091 Oh boy, here's a Divi 4.0.2 review. I do say 'quick' but it's quite comprehensive. Here are the things I've seen that are good, and bad, with some tips.

The post A Divi 4 Review + updates appeared first on Almost Inevitable Design.

]]>
Introduction

One of the most anticipated releases in recent memory had to be Justice League. That didn’t go too well (for the record, I didn’t mind it as much as some vocal others since I’m fine just watching the super heroes doing things).

Avengers Endgame was highly anticipated, and it was pretty great. Cap finally said “assemble.” cool

In this specific neck of the woods, Divi 4 is about as anticipated as any Marvel movie because it promised to deliver the long-awaited “theme builder.”

I’m not kidding about the ‘long-awaited’ part. This was posted on May 17th, 2018, and it’s been long enough that all the people who decided that this feature is exactly what they needed for their next build have either given up, complained for 17 months, or “waited patiently.”

This means that expectations were through the roof.

Many people thought that they could change the world with their mice. Or at least the header.

(People seem to care so much about the header. I guess 5 options weren’t enough.)

 

Disclaimer

I love using Divi. I really do. It’s the theme of choice for 99% of my websites. The other 1% I use a different theme and the Divi builder plugin. So.. yeah.. I use Divi. I’ve used it since 1.0, and I’ve used Elegant Themes even before they released Divi. However, I’m not sponsored by ET or any WP developer, nor do I necessarily need to blindly endorse anyone, so this review should be pretty fair.

Also… as you can see from the screenshots below, the theme builder worked a bit better than it did in the video.

 

Updates

To be fair, I’ll be updating this post and add tags to the updates that have happened.
The update tags will look like this

 

Background

Because WordPress is a blogging platform (technically it’s still true), a “page builder” should actually allow the customization of archives, and posts.

Let me say that again.

WordPress page builders should be able to customize archives and posts.

Except for ONE snag. They’re PAGE builders, not archive builders or post builders. (haha)
See, WP has three main types of ‘pages’
– Posts : have categories (note: custom post types, like products, are posts)
– Archives : a bunch of posts in a category/tag/taxonomy
– Pages : have parents/children

Only pages have had the luxury of being “built.”

This is most likely because
– page-only builders are conceptually easier to make work and develop,
– and the content is usually static, and lastly,
– since WP got popular, people make way more pages than the other types

(“but you can allow the page builder on blog posts too!” That’s the same thing as pages, it’s just the inner content, not the actual template that pulls its data dynamically.)

So.. we have a good variety of page builders. Not many have tackled posts & archives though.

There have been a few brave plugins and themes that have attempted it.

I’ve personally opted to code the php myself or use other methods than deal with bad post/archive builders.

Finally, Divi tries its hand at doing something that others have failed.

 

Watch the video, or keep reading to see if Divi did a good job!

The Video Review

 

The good & the bad

I’ll cover the main talking points below.

This is a review for Divi theme version 4.0.2
Now updated for Divi theme version 4.0.6

I’m sure it’ll get better later.

 

The Theme Builder

“The post & archive builder” is what I’m going to often describe it as because that’s the main feature and the most important usage. So Divi came out with a post & archive builder, which is awesome! (the fact that they released it)

This is the main interface.

What they did well:
– Easy to follow graphical representation of the post templates & archive templates.
– Easy labeling of everything.
– Quick and responsive when assigning templates
– Made it possible to make layouts and builds for pretty much every/any category, author, date, tag, etc. It’s truly amazing.

What could be better:
– Be a little easier for beginners to understand

Tips:
– Don’t forget to ‘save changes’ after you exit the builder.

But that’s about it. Don’t forget to save changes to have them applied to the frontend.

 

Other things I’ve noticed
– Everything is really sluggish (It’s not the server, I’m usually fully spec’ed out) even just regular typing
– Modules don’t open at random times
– When publishing a page from the backend builder (new ‘experience’), the preview randomly loads in a new tab.
– When working with the backend builder, sometimes the WP side menu doesn’t work, and thinks I’m leaving the page and asks if I want to save and exit or not. Wut.

 

Header & Footer

What they did well:
– Allow different headers and footers anywhere/everywhere
– Allow pretty much anything in the header/footer. (The whole builder gamut is open)

What could be better:
– Actually add the header in the header tag. (bad HTML semantics could mean bad SEO) fixed in 4.0.3
– Actually add the footer in the footer tag. fixed in 4.0.3
– Have some header specific modules, like phone number, logo, email, etc, and maybe a setting for the menu to turn into a hamburger via setting
– Find a way to disconnect the complainers’ keyboards… because it’s really annoying.

As you can see divs all the way.

I’m sure all of those problems will be fixed (except for the last two) in future versions.

I can’t believe I’m saying this (because I hate Flatsome), but the Flatsome header builder isn’t too shabby. It has some header specific modules, and some HTML blocks you could add to up to three layers of header. Not bad. And they had this years ago.

 

Post Archives

What they did well:
– Allow customizations all throughout the archives and tags.

What could be better:
– Have the builder actually load…. fixed in 4.0.3
– Have the builder load better. (numerous white screens when things are moved) better in 4.0.3
– Have the builder save things better. (numerous crashes)
– Add a dynamic content module. (it’s the blog module and text module at the moment, and it’s so hard to realize this)
– Add better content detection. (Category descriptions and other custom fields can’t be pulled through as dynamic content meaning that you’d have to make each category separately) ACF support added in 4.0.4

Little things I’ve noticed:
– Code module loses br (line break tags) on front end. why? Something even as simple as this makes it hard to use because I lose control over the design so easily, making it unreliable, so even something like this is important for me.

I’m sure most of those problems will be fixed in future versions.

Tips:
– Save save save reload reload reload save save save reload..
– Have the patience of a thousand Buddhas waiting last in line at the DMV when it’s 4:45pm.
Use the blog module for the dynamic content. Seriously, I was so lost in the beginning.
This works for search results as well.

 

Single posts

What they did well:
– Made it possible to make templates for single posts, and it’s great

What could be better:
– Allow some custom fields to be pulled through… (not all of them work..)
– Not totally cancel out WP specific files like single.php but use a conditional to check if the theme builder was used and take out only the the_content() part (because it makes it harder to add php customizations, and it’s too reliant on the theme builder which could cause problems down the line)

Tips:
– Don’t forget to ‘save changes’ after you exit the builder.
– Remember, the post title has all the meta data, and you can also pull some fields with the text module.
Don’t forget to add the and the post content module for the content.

 

Single products

What they did well:
– Pulled apart the whole woocommerce product page elements really well, and made it so it pulls the content through dynamically. I’m really impressed.
– This can be used to make truly awesome WC shops, so it’s great. (It will need to be able to pull in a lot of custom fields to be really great though)

What could be better:
– The “product tabs” module keeps crashing the builder.

Tips:
– Add the product tabs last for now… because it keep crashing everything.

 

Updatability

Here’s one thing that a LOT of people have trouble with.

Whether to update or not.

If you have jitters about updating your current live site, then here are some questions you can ask yourself before you pull the trigger.

Do you have a child theme? Yes
Does it have all the styling and customizations in it? Yes
— most likely good.

Do you have the static CSS generation setting turned on? Yes
Are you jumping about .5+ versions? (Last Divi 3 was 3.29.3, so if you’re below 3.24..) Yes
— could be tricky. Try to refresh everything and turn everything off before you proceed.

Have you edited the parent theme at all? Yes
Does your custom CSS look something like this: .et_pb_section_2 { /*blah*/ } with the number suffixes? Yes
— definitely bad. Start with a backup, and work your way slowly into it.

I’d also go as far as to say that relying too heavily on builder settings can also cause problems when there’s a huge version difference because it can cause a shortcode parameter problem, but it should be ok by definition.

 

However, one important thing to remember is that the theme builder is totally separate from the rest of the existing pages you would have on your site. So it most likely wouldn’t break much. So not too much to worry.

 

Backlash

The main backlash I’ve seen people complain about is one of two things.
a. the header not being as customizable as they want it
b. being confusing

 

If you are one of those people, then

a. check out some header tweaks you can do (the php line number might have changed a bit, but the approach is the same) in the meantime, and
b. it’s really not confusing at all if you are mindful about dynamic content. Posts and archives are all about the content that fills in the blocks, so always remember that when you put things together. It’s just a whole different part of WordPress that’s opened up for you, so of course it’ll take time.

Also.. if you’re like me, and can’t even get the theme builder to load… just leave it alone haha it’s so frustrating that the more you try to get it to work, the worse it’s going to be.

 

Conclusion

What they did well:
– Finally made and released the theme builder!
– Made an easy to use/understand builder for the archive and post templates

What could be better:
– Have the wireframe mode stay wireframe whenever it’s loaded. (if wireframe has been chosen)
– Get things to load properly.
– Get settings panels to work when clicked on.

Some tips:
– Save save save reload reload reload save save save

Sooooooo…..

Is it worth the wait? No.

17 months is enough to teach yourself how to write CSS, PHP, or JQ. It’s enough to find your own good/coded solutions to the post & archive templates. Although I believe they’ve worked their way up while bringing everyone up to date and easing into it, I’m pretty sure there are better ways of doing this.

 

Is it good for beginners? No.

It doesn’t even work on GoDaddy shared hosting, so beginners are going to have problems.

 

Is it good for intermediate users? Maybe.

As long as they have a clear goal of what they want (and not “play around with the design”) then it could be helpful as long as they understand what’s going on.

 

PS.

What about Extra?

Ah.. yes. Extra, the bastard child of Elegant Themes. So neglected that it’s not even above the fold in the downloads section.

Extra got the theme builder update.. but it already had the category builder built in. Now there are two archive builders. Wha…?

If it were up to me, I would have modified Extra’s category builder so it becomes a full fledged post-archive builder. It has some good modules, and it works really well. I can see the advantage of adding a new “modern” builder.. but.. now it’s just Extra’s legacy builder + a new “theme builder” and it’s redundant and confusing.

 

Comments? … Angry rants will be deleted or made fun of. Reasonable debates are fine. Questions are totally OK, I’ll try to answer the best I can.

 

Need to learn CSS so your builds won’t break easily?

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

 

[contact-form-7]

 

Photo by Lorenzo Herrera on Unsplash

The post A Divi 4 Review + updates appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-4-quick-review-overview/feed/ 3 4091
CSS – When should you use !important? https://almostinevitable.com/css-when-should-you-use-important/ https://almostinevitable.com/css-when-should-you-use-important/#comments Wed, 16 Oct 2019 15:28:24 +0000 https://almostinevitable.com/?p=3269 How does !important work in CSS? Should you use it? If so, when? If not, why not?

The post CSS – When should you use !important? appeared first on Almost Inevitable Design.

]]>
Let’s start with an example

In your inbox, you have a lot of emails that you will need to prioritize so you can organize them, and work through.

It feels important, so you put a red flag on ALL of your emails.

Now ALL your emails have a red flag. Is that.. good? Will that help you prioritize your work?

Probably not.

It might even sound pretty stupid (it is) because now you’re gonna have to use ALL CAPS TO SHOW IMPORTANCE. THEN WHAT? EXCLAMATION POINTS?!?!?!?!!!

Yeah… pretty stupid, right?

So… if that makes sense… then…
you should avoid using !important in your CSS as much as possible.

 

It’s like trying to nail everything down regardless of usage.

 

CSS is a stylesheet language, and with so many moving parts on a website, it should be fluid rather than rigid. Especially in the age of responsiveness, nailing things down and hijacking the whole cascade causes way more problems than it fixes.

CSS rules are like a bunch of small little recipes, for example

.pizza {
  border-radius: 50%;
  border: 4px cheesy crust;
  display: dough;
  background: pizza-sauce;
  toppings: pepperoni;
}
.pizza:after {
  content: "beer";
}

(note: that’s not real CSS)

 

and you want to put a pizza on every table.

But some tables are for kids. So naturally, you’d add something like

.kids.pizza:after {
  content: "sprite";
}

And it’ll work just fine.

 


(Yup. for kids.)

 

…. But… just because someone didn’t know what they were doing, and wrote this instead:

.pizza {
  border-radius: 50%;
  border: 4px cheesy crust;
  display: dough;
  background: pizza-sauce;
  toppings: pepperoni;
}
.pizza:after {
  content: "beer" !important;
}

Now

.kids.pizza:after {
  content: "sprite";
}

Won’t work AT ALL.

What you’re gonna have to do is crank it up a notch.

 

 

wait.. no, with CSS.

 

Like this:

.kids.pizza:after {
  content: "sprite" !important;
}

And that’s just stupid. It’s the inevitable solution to a totally preventable problem.

But it gets worse. What if someone (the driver) wanted… Pepsi with their pizza?

.pepsi.pizza:after {
  content: "pepsi" !important;
}

won’t work at all, and you try something like

.pepsi.pizza:after {
  content: "pepsi" !important !important /* oh come on please stop giving me Sprite, I want pepsi! not even coke, just pepsi, is that too much to ask oh god make it stop giving me sprite */;
}

and it still won’t fix anything.

 

 

It’ll have to be something like:

#thisworks .learnCSS.seriously.pepsi.pizza:after {
  content: "pepsi" !important;
}

Which means you’re going to have to find a way to make sure the element that’s being targeted works with the selectors.

The more this happens, the worse it gets.

 

So it’s basically, if you have an !important in the CSS, but you have to work over/around it, CSS specificity comes into play. If that’s the case, there’s no point in using !important in the first place. That’s the whole point. !important is usually just a bad-coder’s crutch.

OK.. so.. why?

 

Why is this happening?

 

“But I read in a tutorial…”

 

OK… so…

I’ve seen many people use this worst-practice method as the provided code for tutorials on a lot of websites. This is just flat out irresponsible. Please learn before “helping/sharing.” This is one of the largest culprits. Some people just add !important everywhere in their tutorial code, and the people wanting to learn from those tuts just end up seeing bad code, and learn from that, propagating and perpetuating stupid CSS.

This is probably from one of two reasons.. The person writing the tutorial was just trying out code without knowing how it works properly until it sticks, and they think that’s the solution.

 

 

It’s the wrong approach. They should be more responsible.

Another theory is, some people complain that a certain tutorial is not working, and adding !important sometimes just plows through the cascade and forces it, so it seems like a good idea. The “it’s ok this one time” mentality isn’t helping anyone though.

 

I’ve even seen truckloads of people say “hey, if it doesn’t work try putting !important at the end.” and of course, it sometimes works, and people say “gee, thanks, you must be a wizard! I’m going to put !important at the end of everything from now on.” … and they never learn how to write proper CSS.

 

 

Just learn about CSS specificity (link) and it’ll take care of at least 90% of your problems.

If you want to learn how to write CSS specifically for Divi consider learning properly here:

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

So not ever ever?

So never ever ever use !important? Like ever?

I didn’t say that… it exists, and it can be used properly.

So let’s get serious now.

 

So here are three (reasonable) instances to use !important.

 

When to use !important

 

1. To override other !importants

This one’s a given. The only way you’re going to override another !important is with another !important.

The most prominent !important that I’ve encountered when working with Divi is the last column sticking to the right.

Divi has this CSS snippet in its default stylesheet. (or something like that.. I’m just typing this from memory)

.et_pb_row .et_pb_column:last-child {
  margin-right: 0 !important;
}

That sort of sucks when you’re trying to arrange a column so it’ll be centered. (This affects even flexboxes and everything, so it’s annoying)

Note: ET has taken out a lot of !importants in the CSS, so it’s much easier to write non-shouting CSS rules. So that’s good.

 

2. To override inline css

This is an inline style:

<p style="text-align: center;">This will be centered</p>

Inline styles are added mainly in two methods: TinyMCE and jQuery.

TinyMCE is basically the WordPress classic editor. When you add styles to the text, like alignment, color, etc, then it adds an inline style. This isn’t usually a problem since it’s a conscious choice made by the content creator. Technically, this is added via JS, so.. next method

jQuery is a JavaScript library that’s pretty useful for adding extra interactive features. For example, Divi has some JS that adds the top padding to the page after getting the size of the navigation bar (header). (note: this is why Divi has the jumping header issue. The JS needs to load and apply the styles later) The thing with the JQ styling approach is that sometimes you might not need/want what the theme is doing, so you might have to override that sometimes.

This is a very understandable reason to being forced into using !important.

 

3. To use classes like inline styles

Having said all that, the only actual case for using !important in production that I’ve encountered is using a class like an inline style. something like this:

<p class="text-white">This text should be white regardless of other factors</p>

In cases like this, it’s a lot easier to manage than regular inline styles.
(If you want to change a certain color, changing one rule is better than locating all the places it’s been defined inline.)

So something like this:

.text-white {
  color: #fff !important;
}

can be useful, especially when you’re dealing with a lot of layout templates, and everything has its own styles defined, but you really need to make that specific part a certain color. Then yeah, this works.

 

Conclusion

This was a pretty long post haha, but I really hope it all made sense, and you find new motivation to learn more about the exciting world of CSS. Once you learn how to write your own code, your web development skill/method will be upgraded forever.

Again, if you want to learn how to write CSS specifically for Divi consider learning properly here:

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

 

[contact-form-7]

 

Photo by Paul Hanaoka on Unsplash

The post CSS – When should you use !important? appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/css-when-should-you-use-important/feed/ 2 3269
Ep 009 – Click Click Boom https://almostinevitable.com/ep-009-click-click-boom/ https://almostinevitable.com/ep-009-click-click-boom/#comments Tue, 15 Oct 2019 23:24:27 +0000 https://almostinevitable.com/?p=4062 This episode is about using premade layouts, templates, and demo content. Are they worth your time? Yes and no. What?

The post Ep 009 – Click Click Boom appeared first on Almost Inevitable Design.

]]>
This episode is about using premade layouts, templates, and demo content. Are they worth your time? Yes and no. What? Tune in for an “exciting” episode on when demo content is useful, how it can serve you, and when not to use them. (Hint: It might not be what you think)

 

Side note: Did you know that Audacity doesn’t work on MacOS Catalina yet? I was so confused when I tried to start recording. I ended up using my iPad and the TW Recorder app (which I’ve used for years and really like) and I like that setup even more. I might just stick with that.

 

News & Articles

Adobe Fresco!
https://www.digitalartsonline.co.uk/reviews/creative-software/adobe-fresco-review-we-draw-paint-with-pre-release-of-new-procreate-rival/

If you’ve heard the podcast, you’ll probably know why this link is here:
https://procreate.art/

Too old?
https://www.webdesignerdepot.com/2019/10/are-you-too-old-to-be-a-web-designer

Someone’s gonna get even more suuuuuuuuuued!
https://www.latimes.com/politics/story/2019-10-07/blind-person-dominos-ada-supreme-court-disabled

 

Resources

Sketching templates
https://sketchize.com/

Color terminology
https://design4users.com/basic-color-terminology/

Excel to HTML
https://exceltohtml.net/

The title

https://www.youtube.com/watch?v=YfjTZLxekig

 

 

Photo of store demo fashion content by Victor Xok on Unsplash

The post Ep 009 – Click Click Boom appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-009-click-click-boom/feed/ 3 This episode is about using premade layouts, templates, and demo content. Are they worth your time? Yes and no. What? This episode is about using premade layouts, templates, and demo content. Are they worth your time? Yes and no. What? Almost Inevitable Design yes 59:29 4062
Ep 008 – Dirty Deeds Done Dirt Cheap https://almostinevitable.com/ep-008-dirty-deeds-done-dirt-cheap/ https://almostinevitable.com/ep-008-dirty-deeds-done-dirt-cheap/#respond Tue, 08 Oct 2019 16:18:06 +0000 https://almostinevitable.com/?p=3977 In this episode, I talk about putting together proposals, or quotes, for web design projects. There are a lot of things to consider when putting together a proposal/quote. (Y'all know I always charge $2.4m hahahahaha)

The post Ep 008 – Dirty Deeds Done Dirt Cheap appeared first on Almost Inevitable Design.

]]>
In this episode, I talk about putting together proposals, or quotes, for web design projects. There are a lot of things to consider when putting together a proposal/quote. (Y’all know I always charge $2.4m hahahahaha) So yeah, a lot of stuff to think about.

Sitemaps

To make sure you put together a good sitemap, you need to understand..

  • Posts: has categories
  • Pages: no categories, but has child/parent pages
  • Archives: everything in a category, tag, or taxonomy

 

Pricing

A bit of pricing was talked about in Ep 004 Anything Goes

Now, the question is, since you have the sitemap, do you charge per page? or per design?

What about Woocommerce? it comes WITH shop, single product, login, account, cart, and checkout pages by default.

How important is itemizing?

Tune in to hear me ramble/discuss/talk about it.

 

News

IG+FB blocking snapchat
https://beebom.com/instagram-reportedly-threatened-users-with-removal-of-verified-status-for-posting-snapchat-content/

Google
https://www.androidpolice.com/2019/10/02/google-announces-new-privacy-features-and-upgrades-its-password-manager/

Web Design Repository?
https://www.fastcompany.com/90411793/a-new-repository-of-the-webs-best-portfolios-helps-you-design-yours-like-a-pro

 

Resources

Humans
https://humans.fyi/

Practicing design briefs
https://sharpen.design/

Free online image editor
https://doka.photo/

 

Title

I wasn’t kidding hahaha. That’s the bottle of ACDC red that I bought.


 

Dirty Deeds Done Dirt Cheap

https://www.youtube.com/watch?v=UIE4UjBtx-o

 

Photo by Max Bender on Unsplash

The post Ep 008 – Dirty Deeds Done Dirt Cheap appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-008-dirty-deeds-done-dirt-cheap/feed/ 0 In this episode, I talk about putting together proposals, or quotes, for web design projects. There are a lot of things to consider when putting together a proposal/quote. (Y'all know I always charge $2.4m hahahahaha) In this episode, I talk about putting together proposals, or quotes, for web design projects. There are a lot of things to consider when putting together a proposal/quote. (Y'all know I always charge $2.4m hahahahaha) Almost Inevitable Design yes 42:37 3977
Ep 007 – 7empest https://almostinevitable.com/ep-007-7empest/ https://almostinevitable.com/ep-007-7empest/#respond Wed, 02 Oct 2019 00:14:49 +0000 https://almostinevitable.com/?p=3956 In this episode, I talk about time management and setting hourly rates. This will later come into consideration when you're writing up your proposal and quotes. So join me in the audio.

The post Ep 007 – 7empest appeared first on Almost Inevitable Design.

]]>
In this episode, I talk about time management and setting hourly rates. This will later come into consideration when you’re writing up your proposal and quotes. So join me in the audio. The content below is relevant, I promise.

Time Management Albums
  • Metallica / Master of Puppets 55′
  • Rage Against The Machine / Rage Against The Machine 53′
  • Alice in Chains / Dirt 58′
  • Alice in Chains / Facelift 54′
  • Nirvana / Mtv Unplugged 54′
  • Megadeth / Youthanasia 52′
  • Pantera / Far Beyond Driven 56′
  • Pantera / Vulgar Display of Power 53′
  • Pearl Jam / Ten 53′
  • Pearl Jam / Vs 52′
  • Guns N’ Roses / Appetite For Destruction 54′
  • Avatar / Black Waltz 56′
  • Ozzy Osbourne / Ozzmosis 57′
  • Seether /  Karma & Effect 56′
  • Papa Roach / Infest 53′
  • Disturbed / The Sickness 54′
  • Dope / American Apathy 52′
  • Machine Head / Burn My Eyes 56′
  • Mudvayne / Lost and Found 53′
Hourly rates?

Here are some topics/questions covered in the audio that you can think about..

  • How long do things really take you?
  • How much should you be making?
  • How much do other people charge?
  • Should you charge the same as other people/agencies? More? Less?

 

Also, check out this video. It’s a really great breakdown of how Brad set his hourly rates.

Brad Colbow

(I’m embedding it, and not linking it because it’s a really fun watch)

 

News

Field Autofill Problem
https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/

Yahoo!’s new logo
https://www.pentagram.com/work/yahoo/story
I wish them the best..

Resources

Color Palletes
http://colormind.io/
..and some useful articles here..
http://refactoringui.com

Firefox Nightly
Read about it here
https://webdesign.tutsplus.com/articles/find-out-why-your-css-isnt-working–cms-33472
and download it here
https://www.mozilla.org/en-US/firefox/nightly/all/

 

The Title

https://www.youtube.com/watch?v=9D2R69gVyZ0

 

Photo by Felix Mittermeier on Unsplash

The post Ep 007 – 7empest appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-007-7empest/feed/ 0 In this episode, I talk about time management and setting hourly rates. This will later come into consideration when you're writing up your proposal and quotes. So join me in the audio. In this episode, I talk about time management and setting hourly rates. This will later come into consideration when you're writing up your proposal and quotes. So join me in the audio. Almost Inevitable Design yes 46:26 3956
Divi – Mobile menu – X – on open https://almostinevitable.com/divi-mobile-menu-x-on-open/ https://almostinevitable.com/divi-mobile-menu-x-on-open/#respond Tue, 01 Oct 2019 10:59:55 +0000 https://almostinevitable.com/?p=3941 Learn to change the Divi mobile menu icon open-state with this simple CSS snippet.

The post Divi – Mobile menu – X – on open appeared first on Almost Inevitable Design.

]]>
This is probably the simplest tutorial/snippet I’ve published on this website.

It’s also one of the most obvious, and I’m surprised I haven’t noticed this before, but yeah, look:

The default Divi mobile menu hamburger stays hamburger even when the menu is opened.

This snippet changes it to an X.

The code

#main-header .mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

 

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

So simple.

 

more?

For more simple stuff with the hamburger,

Change the size (note: it’s normally 32px, so this example is a bit large, change it to what you want)

#main-header .mobile_menu_bar:before {
    font-size: 45px; 
}

 

Change the color:

#main-header .mobile_menu_bar:before {
    color: red; 
}

 

Here’s how to change the normal hamburger altogether

Also you might want to check out
more header resources

 

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

 

Photo by David Paschke on Unsplash

The post Divi – Mobile menu – X – on open appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-mobile-menu-x-on-open/feed/ 0 3941
Ep 006 – Everything You Love https://almostinevitable.com/ep-006-everything-you-love/ https://almostinevitable.com/ep-006-everything-you-love/#comments Wed, 25 Sep 2019 00:34:49 +0000 https://almostinevitable.com/?p=3920 What do you look for when hiring or partnering with a designer or developer? In this episode, I talk about what I think are important factors in partnering up with someone.

The post Ep 006 – Everything You Love appeared first on Almost Inevitable Design.

]]>
What to look for when hiring or partnering with a designer or developer. My thoughts and experience on how to find the right person for the job.

My mother used to tell me to find a partner whose mother cooked well. (or at least how I liked it… which would ultimately be similar to the way my mom cooked.. although I did later find that I’ve had a limited palate because I only ate what my mom made till I was an adult.. mainly stuff like beer.. haha)

This anecdote is important in the first chapter:

Hiring new employees

Find someone who LIKES what you think is to be of good design taste. You can’t buy taste.

 

If you are a..

Developer looking for a designer

Consider the following..

  • How they make their sitemaps
  • Which apps do they use?
  • Assets management?
  • How much they understand web (screen size, layouts)

 

If you are a..

Designer looking for a developer

Consider the following..

  • Their web software of choice (WP, Drupal, Joomla, etc)
  • Check between an actual proof vs. the result
  • Check responsiveness
  • Ask what they added, contributed

 

And lastly, but most importantly,

Things that should matter on both sides
  • Keeping a positive attitude during the whole process
  • Punctuality
  • Communication, compromise, clarity
  • Mutual respect

and finally:
Price shouldn’t be the deciding factor.

Of course, these are just the bullet points to the content in this episode, have a listen if you want more detailed breakdowns.

 

News

The twenty twenty theme preview!
https://make.wordpress.org/core/2019/09/06/introducing-twenty-twenty/

From Anders Norén

Note: a tutorial on the half background coming soon.

Large logos
https://imjustcreative.com/andrew-wendling-famous-logos-bigger/2019/09/20

 

Resources

A bunch about fake human faces.
https://www.fastcompany.com/90406423/these-ai-generated-people-are-coming-to-kill-stock-photography

https://generated.photos/

https://www.fastcompany.com/90306749/refresh-this-crazy-website-to-create-new-people-who-dont-exist

This one’s uncanny and.. fun. haha
https://thispersondoesnotexist.com/

Some layout inspirations
Just some new stuff..
https://webflow.com/blog/unique-website-layouts

CTA
A good article on making good CTA buttons.
https://uxdesign.cc/7-cta-button-design-guidelines-4cdc21c2c85a

 

and of course…

Title

From Chimaira… This song is like a ballad compared to their regular stuff hahaha

https://www.youtube.com/watch?v=QRHnpc1cW80

 

 

 
Photo by Tyler Nix on Unsplash

The post Ep 006 – Everything You Love appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-006-everything-you-love/feed/ 2 What do you look for when hiring or partnering with a designer or developer? In this episode, I talk about what I think are important factors in partnering up with someone. What do you look for when hiring or partnering with a designer or developer? In this episode, I talk about what I think are important factors in partnering up with someone. Almost Inevitable Design yes 57:49 3920
Divi – Adding a section to the slide in menu https://almostinevitable.com/divi-adding-a-section-to-the-slide-in-menu/ https://almostinevitable.com/divi-adding-a-section-to-the-slide-in-menu/#respond Thu, 19 Sep 2019 14:16:59 +0000 https://almostinevitable.com/?p=3842 Here's a pretty simple way to add a custom section to the slide in menu.

The post Divi – Adding a section to the slide in menu appeared first on Almost Inevitable Design.

]]>
The Preview

I had a suggestion/request for a tutorial.

This is what you get:

 

The Video

 

The Setup

 

Do you have a child theme?

No? Then you'll need one! (click here to read why you really need one)

If you need one, then head over here to get a free child theme that comes with some useful features.

Get a free child theme  
 

Or you’re gonna need this functionality in your child theme.

Insert layouts everywhere

 

So hopefully, you’ll be seeing this:

note: the id number will be different, but don’t worry, just copy paste what you have on your site.

 

You’re ready to go!

The Code

Open up header.php, and you’ll find this:

 

in line 128, you’re gonna add this:

<?php echo do_shortcode('[ai_layout_sc id="444"]'); ?>

note: of course when you paste the shortcode, it’ll have your id number, not 444

Now it’ll look like this:

 

and you’re done!

Extra tips

– The section should have a transparent background (if you want the menu background color to show)
– media queries don’t work (since media queries are for screen widths, not container sizes) so you’ll have to experiment a bit to get the right sizing.

 

 
If you want to brush up on your CSS so you can style/design all these cool new elements, try learning it!

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
[contact-form-7]
 

Sandwich Photo by Youjeen Cho on Unsplash

The post Divi – Adding a section to the slide in menu appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-adding-a-section-to-the-slide-in-menu/feed/ 0 3842
Divi – How to add a small design element to the header https://almostinevitable.com/divi-how-to-add-a-small-design-element-to-the-header/ https://almostinevitable.com/divi-how-to-add-a-small-design-element-to-the-header/#respond Wed, 18 Sep 2019 15:51:40 +0000 https://almostinevitable.com/?p=3839 The little yellow triangle in the header of this website. Learn how to do that, and a bit more.

The post Divi – How to add a small design element to the header appeared first on Almost Inevitable Design.

]]>
The Preview

Since you’re already ON this website.. look up at the upper left corner of the header. Yeah

Right there.

 

Then someone asked me how I did it. So here’s the tutorial on that.

 

The Video

The Code

#main-header {
	overflow: hidden;
	position: relative;
}
#main-header:before {
	content: "";
	position: absolute;
	display: block;
	top: -76px; /* Play around with the value to get what you want */
	left: -106px;  /* Play around with the value to get what you want */
	width: 260px;  /* Play around with the value to get what you want */
	height: 145px;  /* Play around with the value to get what you want */
	background: #d00;  /* Play around with the color to get what you want */
	transform: rotate(-45deg);  /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}
/* This is for the header on scroll */
#main-header.et-fixed-header:before {
	top: -76px; /* Play around with the value to get what you want */
	left: -106px; /* Play around with the value to get what you want */
	transition: .3s all ease-in-out;
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

Pretty simple, right?

PS. If you use a gradient background, sometimes it looks blurry, and I don’t like blurry objects. So I think it’s a low-skill level method.

 

Need to learn CSS?

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

Photo by Joanna Kosinska on Unsplash

The post Divi – How to add a small design element to the header appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-how-to-add-a-small-design-element-to-the-header/feed/ 0 3839
Ep 005 – Simple Design https://almostinevitable.com/ep-005-simple-design/ https://almostinevitable.com/ep-005-simple-design/#respond Wed, 18 Sep 2019 01:11:41 +0000 https://almostinevitable.com/?p=3846 This episode covers a wide range of questions that could help you when getting the initial client brief. Step one.

The post Ep 005 – Simple Design appeared first on Almost Inevitable Design.

]]>
Step 1 of the 9 step web creation. Getting the brief (and not boxers).

All jobs start with a brief, and all good jobs start with a good brief. So let’s go over some questions you can think about when talking to the new potential client.

Some useful questions:

  • Website for a new business? Refresh?
  • What is the purpose?
  • What would you like to do with it?
  • What is your product? What does it do?
  • Inspirations?
  • Competitors? How are you different?
  • Audience? Who’s a good customer? Who’s an ACTUAL customer?
  • Deadline?
  • Describe your company?

 

Some extra questions

  • Have you registered the domain?
  • How are your emails set up?
  • What type of site? landing? one page? multi? ecommerce?
  • Do you have an idea of what to put in the navigation menu, or what pages?
  • Do you have the text content? Do you need copywriting?
  • Do you have images? Do you need to hire a photographer? would stock images work?
  • Do you have a brand set up?
  • Will you be updating content regularly? Will it be fairly regular? Do you need a maintenance package?

That’s a lot of questions haha.

Do you have any more important questions that I missed? Anything to add? Anything else you’d like to hear me cover? Please let me know in the comments!

News & articles

Volkswagon has a new logo
https://www.creativebloq.com/news/new-volkswagen-logo

Accuracy in SEO
https://searchengineland.com/content-accuracy-is-not-a-ranking-factor-321727

Design trends in mobile
https://design4users.com/ui-design-trends-web-mobile/

Resources

FreeFrontend is pretty cool
https://freefrontend.com/
Especially this one.
https://freefrontend.com/css-triangle-backgrounds/

The Caniuse for mail.
https://www.caniemail.com/
(I hate outlook)

Free fonts yo.
https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380

 

Title

“Simple Design” by Breaking Benjamin (from their album “We Are Not Alone”)

https://www.youtube.com/watch?v=UGUt2vVRPHY

 

 

 

Photo by davisco on Unsplash

The post Ep 005 – Simple Design appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-005-simple-design/feed/ 0 This episode covers a wide range of questions that could help you when getting the initial client brief. Step one. This episode covers a wide range of questions that could help you when getting the initial client brief. Step one. Almost Inevitable Design yes 58:23 3846
Ep 004 – Anything Goes https://almostinevitable.com/ep-004-anything-goes/ https://almostinevitable.com/ep-004-anything-goes/#respond Wed, 11 Sep 2019 05:40:09 +0000 https://almostinevitable.com/?p=3794 This episode is about pricing/quoting projects. I cover the three main approaches to pricing design jobs and its pros and cons.

The post Ep 004 – Anything Goes appeared first on Almost Inevitable Design.

]]>
Pricing: How do you price a project? How should you? How do these things work? In this episode, I cover some pricing methods, and a little bit of how I do it.

Value-based pricing?

It’s a cool idea, and makes total sense, but there are things you need to consider before you take a full value-based pricing model.

hourly rates?

This sounds ok in theory, but again, there are pros and cons worth considering.

project based?

This is the most common approach to website pricing, but it also comes with a few caveats.

How I price projects

I use all three (hahahahaha no, seriously) and in this episode I roughly go over how I use all three methods to (hopefully) price things well.

 

News & Articles

If you’re interested in eCommerce at all, you’ve gotta watch this.

5 tips.
https://www.youtube.com/watch?v=DWHB6nTyKDI

Critiques
https://www.youtube.com/watch?v=SxYVaZB2TWA

An article on Adobe XD.
https://blog.prototypr.io/why-adobe-xd-is-better-than-sketch-67f943b22a7d

Go get XD here – click me –

A well-written article on web UX
https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

 

Resources

Here’s the code, read the article to understand what it does.

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

https://dev.to/gajus/my-favorite-css-hack-32g3

Font combination tips
https://www.toptal.com/designers/typography/font-combinations

and tips on hierarchy
https://www.toptal.com/designers/typography/typographic-hierarchy

 

The title

https://www.youtube.com/watch?v=c8H8a5Bab6o

The post Ep 004 – Anything Goes appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-004-anything-goes/feed/ 0 This episode is about pricing/quoting projects. I cover the three main approaches to pricing design jobs and its pros and cons. This episode is about pricing/quoting projects. I cover the three main approaches to pricing design jobs and its pros and cons. Almost Inevitable Design yes 53:02 3794
Ep 003 – Smells Like a FreakShow https://almostinevitable.com/ep-003-smells-like-a-freakshow/ https://almostinevitable.com/ep-003-smells-like-a-freakshow/#respond Tue, 03 Sep 2019 17:29:32 +0000 https://almostinevitable.com/?p=3670 In this episode, I talk about the web design process. A 9 step process that all/most design agencies follow, that will help you grasp an understanding of how to approach a project.

The post Ep 003 – Smells Like a FreakShow appeared first on Almost Inevitable Design.

]]>
In this episode, PK talks about the web design process. A 9 step process that all/most design agencies follow, that will help you grasp an understanding of how to approach a project. More detailed discussions in future episodes, but here, PK summarizes the whole process for you.

 

The standard web design process.

The rundown:
1. Brief
2. Quote
3. Deposit
4. Proof
5. Approval
6. Build
7. Approval
8. Balance
9. Migration

Of course, more details in the audio. And even more details in future episodes!

 

News

https://thenextweb.com/syndication/2019/08/23/why-recaptcha-is-actually-an-act-of-human-torture/

https://www.androidpolice.com/2019/08/30/google-youtube-kills-exact-subscriber-count/

 

Resources

https://speckyboy.com/variable-font-examples/

https://dailydevlinks.com/css-style-guides

https://spin.atomicobject.com/2019/08/02/developer-design-decision/

 

The title

https://www.youtube.com/watch?v=3T0B5KthfiU

Note: The original music video is.. slightly disturbing, and has an alternate vocal track, so I’m adding this fan-made lyric video.

Update: The fan vid is gone. I found another version of the video in the original audio. The video is still disturbing.

 

Photo by chuttersnap on Unsplash

The post Ep 003 – Smells Like a FreakShow appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-003-smells-like-a-freakshow/feed/ 0 In this episode, I talk about the web design process. A 9 step process that all/most design agencies follow, that will help you grasp an understanding of how to approach a project. In this episode, I talk about the web design process. A 9 step process that all/most design agencies follow, that will help you grasp an understanding of how to approach a project. Almost Inevitable Design yes 54:31 3670
Ep 002 – Blind https://almostinevitable.com/ep-002-blind/ https://almostinevitable.com/ep-002-blind/#comments Tue, 27 Aug 2019 23:14:32 +0000 https://almostinevitable.com/?p=3636 What do you do when the client has no design sensibility? What can we do when the client is impervious to your (objectively) good design? Wait, objectively good design?

The post Ep 002 – Blind appeared first on Almost Inevitable Design.

]]>
What do you do when the client has no design sensibility?

What can we do when the client is impervious to your (objectively) good design? Wait, objectively good design? Do we educate the client? How? Or, if not, what should we do? Lots of things to ponder, lots of options, and lots of things to cover.

This is something that can be … almost inevitable, and we need to figure out ways of navigating through such sticky situations.

 

This webcomic is still very much what still happens. The Oatmeal – How a web design goes to hellllll

 

News

Noto Sans! IKEA!
https://www.itsnicethat.com/news/ikea-changes-typeface-to-noto-monotype-google-graphic-design-210819

Here’s Noto: https://fonts.google.com/specimen/Noto+Sans

IG from FB, WA from FB.
https://www.creativebloq.com/news/instagram-and-whatsapp-get-a-rebrand

Adobe Fresco sneak peak.
https://thedesignest.net/adobe-fresco-introduction/

 

Resources

A very cool free app.
https://maccy.app/

Looks really nice.

Note: I use ClipMenu, it’s an old app, but it works very well.
The original DL links on clipmenu.com were on Dropbox, and they don’t exist anymore. So there’s an archived file link you can use, or there are lots of DL versions here.

If you can’t be bothered to trudge through all that, just grab it here.

Helpful article on images for the web.
https://webdevblog.com/image-optimization

The title

https://www.youtube.com/watch?v=5_hIojjA3A4

Korn’s first track off their debut album. It’s a good album. It blew me away when I was in high school.

Blind in a cornfield (get it?) – Photo by Toa Heftiba on Unsplash

 

 

PS. Cyrillic -> pronounced Surilik. sorry.

Hyundai and Kia are the same company. That could have been a good example.

Oh, and the word was oxymoron.

The post Ep 002 – Blind appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-002-blind/feed/ 4 What do you do when the client has no design sensibility? What can we do when the client is impervious to your (objectively) good design? Wait, objectively good design? What do you do when the client has no design sensibility? What can we do when the client is impervious to your (objectively) good design? Wait, objectively good design? Almost Inevitable Design yes 55:42 3636
Ep 001 – Room a thousand years wide https://almostinevitable.com/ep-001-room-a-thousand-years-wide/ https://almostinevitable.com/ep-001-room-a-thousand-years-wide/#comments Thu, 22 Aug 2019 12:07:48 +0000 https://almostinevitable.com/?p=3609 EEEEEEEE Podcast!

The post Ep 001 – Room a thousand years wide appeared first on Almost Inevitable Design.

]]>
Hi everyone! Welcome to my podcast!

I’ve wanted to do one for a long time, but I wasn’t sure about a few things, so it was just in the back of my mind, and not actively pursued. Now, as you can see, I’m giving it a go.

Warning: Contrary to my other content, this podcast is ever so slightly sprinkled with profanity.
I decided that I’d be more comfortable talking with less filters. So… just a heads up.

For now, there are three major sections planned
– A topic related to the design business (or an anecdote)
– Some recent news
– Some good resources

topic: why $2.4m?

too many variables

The main reason why I say this all the time is because asking for a price on a public forum where everyone’s situation is different, is, in my opinion, counterproductive. There are way too many factors to think about when pricing a website, so a sentence like “hey, how much would you quote for a woocommerce website? 5 products max” is not doing anyone any favors.

Just to give y’all a bit more to look into, check out this link

https://folyo.me/blog/how-much-does-a-website-cost-and-other-pricing-questions

 

news

hey, Domino’s pizza

https://www.fastcompany.com/90385375/dominos-is-locked-in-a-legal-battle-over-the-future-of-web-design

If you wanna read a bit more about it… here’s a good article to read.

https://www.searchenginejournal.com/seo-web-accessibility/

I’m not much of an.. “accessibility” expert, but these are things that I read about and add to my checklist of things to think about when building. So hopefully the websites get better as time goes by.

 

Resources

Some patterns
https://lstore.graphics/paaatterns

Some isometric illustrations woohoo
https://isometric.online/

 

and…

The title

https://youtu.be/p4nNvXvrWlE

(YT is trying to track people more aggressively, so if you have privacy badger blocking YT code, the video might seem unavailable. In that case, just go to the page to listen to Chris belt it out. )
 

I’ll need to publish an episode before I submit to where ever, so I’ll start with this. I’ll add all the links later! Stay tuned!

The post Ep 001 – Room a thousand years wide appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/ep-001-room-a-thousand-years-wide/feed/ 4 EEEEEEEE Podcast! EEEEEEEE Podcast! Almost Inevitable Design yes 39:43 3609
Divi – Solutions to the most common responsive problems https://almostinevitable.com/divi-solutions-to-the-most-common-responsive-problems/ https://almostinevitable.com/divi-solutions-to-the-most-common-responsive-problems/#comments Tue, 06 Aug 2019 14:32:34 +0000 https://almostinevitable.com/?p=3206 After years of making highly responsive Divi websites, here’s a rundown of my solutions to the most common responsiveness questions concerning Divi I’ve seen on the web. (Web meaning Facebook groups.) Buckle up, this one’s (long and) comprehensive This post isn’t a single “tutorial” per se, but more like a summary of everything you need, […]

The post Divi – Solutions to the most common responsive problems appeared first on Almost Inevitable Design.

]]>
After years of making highly responsive Divi websites, here’s a rundown of my solutions to the most common responsiveness questions concerning Divi I’ve seen on the web. (Web meaning Facebook groups.)

Buckle up, this one’s (long and) comprehensive

This post isn’t a single “tutorial” per se, but more like a summary of everything you need, and I’ll be linking to some useful tutorials that’ll provide the solutions… so more like a tutorial collection, like I did here.

 

But before we get serious…

 

Let’s get this misguided “method” out of the way.

making separate sections
for each device – Don’t do this.

Here are some reasons why that is a very bad idea.

A. You will have problems with adding # links.

That’s because anchor links (links that look like this)

<a href="#section">Section</a>

will be messed up. This is because those # links are actually added in the id, like this:


<div id="section" class="blue-block">
    

The link drops you here

</div>

and the browser scrolls to that section. But if there are different sections that have the same thing like:


<div id="section" class="blue-block1">
    

This shows on desktop

</div>


<div id="section" class="blue-block2">
    

This shows on tablet

</div>


<div id="section" class="blue-block3">
    

This shows on mobile

</div>

Then the link won’t work. This causes way too many problems.

B. Adding unnecessary load

This is unnecessarily adding stuff to the load. Especially when it’s used with images. Just text only, I am not happy with, but still it doesn’t cause as much loading problems as much as doing this “tip/trick/hack/buffoonery” with images. However…

C. You get duplicate content on the page (affecting seo)

We don’t get to see it, because we’re humans, but bots do.

Bots aren’t savvy with CSS and its stylings, so for them, it’ll just look like duplicate content, which could easily fall into either boilerplate content or keyword stuffing, neither of which is desirable in terms of SEO. This is really sad since you put in the effort because it’s important content, but it ends up hurting your SEO.

You can read more on this page. Also check out the replies on this page or read the comments on this page

I know some people might be like “hey, I rank well with this method” and I don’t care. It’s still duplicate content, and it’s still just the worst way to do it. (Also, who knows what’ll happen to search algorithms later down the line?)

D. It’s frustrating to manage

Imagine having to edit three sections/rows/modules every time you had to change one thing. It’s really frustrating.

Imagine if you had inherited a site like that. Very frustrating.

E. It’s clunky during resizes

Things just popup or disappear, and it’s very clunky in how it displays when you’re resizing the browser.

It’s even worse when there are multiple images involved. Everything is either there or not, and things just jump around.

Terrible.

F. You won’t get any fine tuning

All you get are two breakpoints: 980px, and 480px. There’s no way of doing anything special for ipads (1024px), and for smaller laptops (1280-1440px). It’s just desktop, tablet, and mobile.

G. It’s just lazy and amateurish

Seeing this being done, advised, or championed is like watching a child performing magic and telling people to close their eyes while they make something disappear. Technically it sort of seems like it works, but it’s not being done properly at all, and they’re gonna have to learn to do it right sooner or later if they want to keep pursuing that field.

If you’re offering web development services for money (ie. professionally) then you should be using media queries, and not the laziest amateurish way possible.

 

If I offended you and your go-to method, please leave a comment below so I can gleefully delete it.

We should be trying to become better at what we do, and not get upset or defensive about a lazy method just because we don’t want to learn.

 

Now that the worst idea / “solution” / “method” has been addressed, let’s move on.

 

the most important thing

Learn CSS. Yeah. Seriously. That’s the most important thing.

 

Regardless of what your role is, or the job title you consider yourself as, if YOU are the person putting together the website, you need to know CSS. No excuses.

 

 

BUT, since we’re just on the topic of solving responsive problems, let’s just keep going for now.

 

Solution

Here’s what you’ll need to start with.

Media Queries

This is a media query:

@media all and (max-width: 479px) {
    h1 {
        font-size: 20px;
    }
}

That css snippet tells the browser that:
– if the width is 479px at its largest… meaning.. anything narrower than that..
– make the h1’s size 20px.

 

The important thing is that media queries have their own brackets, so the rules should go inside the media query brackets. (I’ve encountered people that refuse to copy that last extra } and complain that a CSS snippet doesn’t work.. even after I told them that they need that extra bracket… why they wouldn’t listen.. I don’t know…) So yeah, {double {brackets}.}

If you want to really learn all there is about flexbox and media queries, this course is for you. It’s specifically made to solve 99% of your mobile responsive problems with Divi, and even add extra value to your builds. I guarantee it. Years of mobile responsive web coding experience is in that course.

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Of course, if you’re a bit scared to dive into the deep end, you can learn all there is about CSS with Divi with this other course. It takes you through everything you need to know about CSS from the very beginning all the way to making your own layouts with just CSS. (it includes mobile responsiveness as well)

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

Now we can tackle some common problems.

 

The Divi builder preview size

This isn’t actually a problem, it’s a misconception.

Divi has two major breakpoints. One at 980px and one at 480px. So naturally, the settings revolve around these breakpoints.

The common misconception is that thinking the mobile view and tablet view are actual (common, real-life) mobile and tablet screen sizes.

It’s not.

So if you adjust everything to look “perfect” on those views, 99% of the time, it’s gonna break.

I understand Elegant Theme’s choice on this to an extent.

The reason for using the seemingly arbitrary breakpoints is because they are sort of a ‘catch-all’ size. Essentially, 480px across will cover most phones* and 980px across is the point between landscape(1024) iPad and portrait(768). So basically, what you’re seeing is a max-width: 480px, max-width: 980px situation.

Yes, it’s misleading on ET’s part saying that it’s the “preview” but I think as long as you understand what it is, you can spend more productive time on making your websites work than relying on that single feature to solve everything and complaining if it doesn’t.

* except for the huge Android phones that have fullHD size screens in ‘retina’ so they have 1080×1920 screens which translates to 540×960, so I use an extra breakpoint at 550px myself

So we take complaining out of the equation, now what?

Solution

Well, if you really want to just stick with the builder settings (and not do it with proper CSS), then use the browser inspector to show you the various mobile screen sizes, and check your work as you go.

Wanna learn how to use the inspector?

I actually have a new (free) mini course that goes through all the nitty gritty of using the inspector that you can check out. As web developers, the browser is the first and most important piece of software that needs to be understood.

(free) inspector course

 

text bleeding out on mobile

This is pretty much the same thing as

controlling text size on mobile

 

The reason why this happens is because the letters in each word stick together, and they don’t break unless you ask them to.

I personally think forcing something like break-word, overflow-wrap, and hyphens isn’t always the best idea… because

a. You’re gonna need a media query anyway, and
b. read-
ing some-
thing like
this isn’t
always the
best in leg-
ibility

So I think a little bit more effort should be put in.

Solution

The best way to fix this is to just change the font-size.

The easiest way is to adjust your module settings.

The CSS way is to add a class in the module’s advanced tab here:

Let’s add… ‘control-text’ in the custom class field.

Then the text inside (let’s say paragraph text) can be controlled via media query like this:

@media all and (max-width: 480px) {
    .et_pb_module.control-text p {
        font-size: 20px;
    }
}

The above snippet means “when the browser is narrower than 480px across, then the p inside a module that has a custom class of control-text shall be 20px in size.”

You can make the adjustments from there.

You can also add a bunch of stuff together inside the media query, and you can make a bunch of minor tweaks, like this.

@media all and (max-width: 768px) {
    .et_pb_module.control-text h1 {
        font-size: 32px;
    }
    .et_pb_module.control-text p {
        font-size: 20px;
    }
}
@media all and (max-width: 479px) {
    .et_pb_module.control-text h1 {
        font-size: 24px;
    }
    .et_pb_module.control-text p {
        font-size: 16px;
    }
}

Once you wrote everything, you can paste it in where custom CSS should go.

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

So that’s how you control text.

Reference: If you want to hyphenate paragraphs, or just make sure you get all the sizes covered, Learn more about break-word here and learn more about overflow-wrap here.

Note: about using vw for font sizes..
Using vw isn’t a bad idea per se, but it’ll work for very specific cases, for a limited range of screen sizes.

This is because font-size is the height, and vw gets its base unit from width. So it’s not always easy to adjust, and it’s not always directly proportional.

extra solution for line breaks

If you want to learn how to change line breaks, here’s a really cool trick you can use to control the

<br>

The next problem to tackle would be..

 

 

 

stacking order

This is easily done with flexbox.

I just put up a tutorial on this. Check it out.

 

making double columns

This one’s also done with flexbox. (flexbox is really great) I already have a tutorial on this. (one of my most popular ones)

background position

If you’re adding a background image to a section/row/column/module that has the main focus point off-center, then chances are, that background might not look its best when it adjusts on mobile.

On desktop it might look fine.

But then, on the phone…

This problem occurs because the image stretches to fit the vertical space, and since it’s centered, the focus point is outside the view port.

So let’s find a way to fix that.

Divi adds background images via CSS. So it’s fairly easy to edit it.

Look for the selector that has

.some-divi-classes {
    background-image: url(https://theURLfortheimage);
}

That’s how Divi adds the background image. (note: .some-divi-classes = Divi builder classes like .et_pb_section, etc. Don’t use classes with numbers on them, like .et_pb_section_0 because those numbers change as soon as you move them, which is why things break. That’s why you should add a custom class)

The position is controlled by one property.

.some-divi-classes {
    background-position: center;
}

That’s the default setting.

You can change it like this:

Start by adding a custom class like mentioned before, and now you can write CSS like…

.some-divi-classes.custom-class {
    background-position: left center;
}

background-position is shorthand for -x and -y, so it’s the same thing as

.some-divi-classes.custom-class {
    background-position-x: left;
    background-position-y: center;
}

solution 1

So all you need now is to change the background position inside a media query.

Something like this:

@media all and (max-width: 479px) {
  .some-divi-classes.custom-class {
      background-position: center;
  } 
}

Again, if you’re having problems using the inspector, learn for free here:

(free) inspector course

 

solution 2

Another important thing to remember is that the section is usually too tall. So the background tries to fill the space, and since mobile is usually portrait and desktops are usually landscape, it’s hard to keep the focus of the image consistent.

So, a really simple solution to this is to change the height of the section with media queries.

Something like this works much better:

Useful Tip

Don’t use height: __ vh (relative) or __px (absolute) sizes. .. err.. try not to use “height” if there’s a lot of content in the section. The text will be pushed out of the section, and it’ll become a hassle to control. Rather, use paddings and/or margins around the text to get the section to stretch out.

 

layout change

Here’s something cool. You can actually change whole layouts. Of course, this works much better when you are coding everything from top to bottom, but it’s still not too hard to do with basic level CSS, as long as you understand how layouts work.

I can’t go into much detail right now since every layout is different, but here’s an example of how you can take a desktop oriented solution and make it work on mobile devices with some CSS.


 

 

Next…

 

 

Suggested screen sizes to check

After all this, the most MOST important factor to think about is screen size.

Yes, screen sizes. Which ones are used the most? Do you know the answer?

Anecdotal evidence isn’t very helpful, so let’s check the actual stats (source).

Here are some tidbits we can glean from this stat:

  • 360×640 is the most popular: This is the mid range Android phone size. Wha…? Yeah, it’s the ‘retina’ display pixel count for 720×1280 which is the most common Android screen size. (The higher models have fullHD which is 1080×1920 translated to 540×960)
  • 1366×768 is also very popular: This is the mid-size laptop screen. Usually between 12″ and 14″.
  • 1920×1080 is next: This is the 21″-24″ screen fullHD desktop screen size.
  • Next is a few 360s with a 375: the 375 is the iPhone 6, 7, 8 (non plus), and the 360 are the other Androids.

Now consider your regular development environment.

If you’re reading this post, you most likely have a sweet setup. Possibly a large iMac, or a MacBook Pro, or a dual screen (or more!) Windows desktop, with maybe an extra laptop, iPad, Surface, iPhone, Galaxy, etc.

 

More often than not, we use a large screen for the majority of our work.

This means we don’t see web pages in the sizes that most of the world sees it. We have way more pixels working for us.

Consider this: The main Facebook feed is only 500px across on desktop.

Seriously.

Go ahead, inspect your Facebook page.

 

solution

You’ve gotta…

Think slightly smaller

One thing that I’ve noticed very often is that when people design on their own screen, they forget what it actually looks like on other screens. A lot of the time, things end up being slightly larger than they should be. This is a great way for getting
words broken off mid-sentence.

 

Some useful media queries

Here’s a simple list of common breakpoints you might want to use as a template in your CSS file.

/*** Any desktop larger than a laptop - this query goes HIGHER than 1400 ***/
@media all and (min-width: 1401px) {
}

/*** Regular laptops - this query goes BELOW 1400 ***/
@media all and (max-width: 1400px) {
}

/*** For the people who love to resize or keep windows open haphazardly ***/
@media all and (min-width: 1025px) and (max-width: 1399px) {
}

/*** All the mobile devices ***/
@media all and (max-width: 1024px) {
}

/*** iPad landscape and more resizers ***/
@media all and (min-width: 769px) and (max-width: 1024px) {
}

/*** iPad portrait and below ***/
@media all and (max-width: 550px) {
}

/*** iPad portrait and more resizers ***/
@media all and (min-width: 551px) and (max-width: 768px) {
}

/*** Phablets and all phones ***/
@media all and (max-width: 550px) {
}

/*** Regular sized phones for non-Shaq sized people ***/
@media all and (max-width: 479px) {
}

I normally keep a list of about two dozen breakpoints (not kidding) in my library and use them (and change the sizes) whenever needed. I usually end up using about 6-10 breakpoints in any given build. There are quite a few responsive-ready build methods that I try to keep when developing, and it has cut down the number of breakpoints a bit, but I still check every screen size possible, and it needs quite a bit of work.

 

another round of ads

Learn all about flexbox and media queries and extra tricks and how to use them properly integrated with Divi with this course.

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 
Or you could take a more comprehensive course and learn all about CSS + Divi with this course:

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
Or learn everything at a discount here:

 

and finally….

Conclusion

“Beautiful on all screen sizes” is a phrase that I’ve seen thrown around everywhere, but it’s rare to see websites that actually do this well.

It takes a LOT of time and care to make everything actually look great on ALL screen sizes.

For the record, I actually check every page on screen sizes from 375px to 1920px going through every pixel size. It takes a LOOOONG time to go through 1575 sizes multiplied by number of pages (multiplied by browsers, and devices). I’m not kidding.

 

There is no “easy way” to do this, nor is there any theme/framework in existence that does it perfectly without manual configuration.

It takes a lot of care and dedication.

If you want to really offer great value to your clients, really embrace what mobile responsiveness does and make the most of it.

Invest the time to really get into it, and you’ll be happy and proud that you did.

 

 

[contact-form-7]

 

Image credits

Featured image of iPhone Photo by Daniel Korpai on Unsplash

iPhone Mockup from: Designmodo

The iMac mockup can be found on Behance here.

The other iPhone mockup is from dribbble here.

Owl photo by Bruno do Val on Unsplash

Antelope Canyon photo by Hari Panicker on Unsplash

Concert finger horns photo by Luuk Wouters on Unsplash

Desktop Photo by Christopher Gower on Unsplash

The post Divi – Solutions to the most common responsive problems appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-solutions-to-the-most-common-responsive-problems/feed/ 6 3206
Divi Tutorial – Reorder Mobile Stacking https://almostinevitable.com/divi-tutorial-reorder-mobile-stacking/ https://almostinevitable.com/divi-tutorial-reorder-mobile-stacking/#respond Sun, 07 Jul 2019 15:01:28 +0000 https://almostinevitable.com/?p=533 Here’s a simple method you can use to reorder mobile stacking. The main problem with using page builders and its settings is that you’re stuck with what the developer allows you to do. Divi in this case, is quite limited in its responsiveness, which is why I made a whole course on how to make […]

The post Divi Tutorial – Reorder Mobile Stacking appeared first on Almost Inevitable Design.

]]>
Here’s a simple method you can use to reorder mobile stacking.

The main problem with using page builders and its settings is that you’re stuck with what the developer allows you to do.

Divi in this case, is quite limited in its responsiveness, which is why I made a whole course on how to make it more responsive.
Plug: The course covers a lot, check out the sample course to make your decision.

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

OK, on to reordering mobile stacking.

Objective

Normally, when we have a layout like this:

On mobile,

 

We get a mobile stacking view like this, which isn’t ideal.

So we’re going to make it look like this, which is much better.

 

and that’s what we’re going to do.

The video

 

The build

Not much to the build, as long as it’s a couple of columns you want to swap order on mobile, it’ll be fine. Here’s what I’m working with in the video. (Everything is default settings and the modules don’t really matter since we’re swapping the columns.)

 

Add ‘reverse-on-mobile’ in the row’s custom class.

 

The code

And add this CSS.

@media all and (max-width: 480px) {
  .et_pb_row.reverse-on-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

Feel free to change the 480 to something else if you want to make the reverse stack work on different screen widths. (For example, 980px is Divi’s breakpoint for most things mobile.)

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

…and you’re done. Really simple, hey.

However..

Extra Note

Because the last column in a row has 0 margin on the bottom, and the others have 30px by default, when we switch the order, the image is stuck with no margin on the bottom. You can of course set the margin on mobile in the builder, but if you want to get the CSS out of the way without bothering yourself about it in the module settings, then add the two extra classes in the columns’ custom classes.

and add this CSS instead of the one above.

@media all and (max-width: 480px) {
  .et_pb_row.reverse-on-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_row.reverse-on-mobile .et_pb_column.text-col {
    margin-bottom: 0;
  }
  .et_pb_row.reverse-on-mobile .et_pb_column.image-col {
    margin-bottom: 30px; /* change this as you see fit */
  }
}

 

Please note: The reason why I add extra classes, and not use :first-child, :last-child is because in my courses I explain a lot more stuff on how to make more complex stacking orders and stuff, and it’s always good to label the columns (or modules) so you can edit them easily without fighting default CSS.

If you want to learn more about CSS, check out the course I have here.

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi
[contact-form-7]

 

Storage Shelves Photo by Samuel Zeller on Unsplash

The post Divi Tutorial – Reorder Mobile Stacking appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tutorial-reorder-mobile-stacking/feed/ 0 533
Divi – Header with both a nav menu & hamburger https://almostinevitable.com/divi-header-with-both-a-nav-menu-hamburger/ https://almostinevitable.com/divi-header-with-both-a-nav-menu-hamburger/#comments Tue, 18 Jun 2019 10:58:57 +0000 https://almostinevitable.com/?p=3277 The Preview I saw a question posted on Facebook asking how to make the header on this site with Divi. It’s a header with an extra navigation menu in the center, with the hamburger on the side. It looks like a great layout for having an extra menu that doesn’t have to be shown so […]

The post Divi – Header with both a nav menu & hamburger appeared first on Almost Inevitable Design.

]]>
The Preview

I saw a question posted on Facebook asking how to make the header on this site with Divi. It’s a header with an extra navigation menu in the center, with the hamburger on the side. It looks like a great layout for having an extra menu that doesn’t have to be shown so prominently, like ecommerce websites, membership websites, etc. So I decided to make it.

and here it is:

It works well, and I didn’t style for submenus in this case because I figured the center nav should just be the major endpoints, and not the full menu, (that’s why we’re using two menus..?) if you want to style the submenu as well, you’re gonna have to do it yourself in this case.. or just bug me enough and make me do it haha. .. but yeah, If you want to learn CSS and do it yourself..

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

Onward..

 

The video

 

The code

 

NOTE: the php files mentioned below should be in your child theme. Do NOT make these edits to the parent theme.

 
Do you have a child theme?

No? Then you'll need one! (click here to read why you really need one)

If you need one, then head over here to get a free child theme that comes with some useful features.

Get a free child theme  

 

All set?

OK, here we go!

To register a new menu add this php snippet to the bottom of your functions.php file

(if the file has a ?> at the end, add the snippet before, otherwise, just drop it in there. Only thing to avoid is having extra blank spaces at the end of the file. This can cause issues with generating sitemap XML.)

function register_my_menu() {
  register_nav_menu('extra-header-menu',__( 'Extra Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

And add this

<?php wp_nav_menu( array( 'theme_location' => 'extra-header-menu', 'container_class' => 'extra_menu_class' ) ); ?>

to your header.php right above #et-top-navigation so it looks like this:

You just made a new menu show up in the header. Now you need to go to the WP backend and add items to the menu, and style it.

 

The build

Go to “appearance > customize” and then “header & navigation > header format > slide in”. This will put the primary menu into a slide in panel + hamburger.

Now that you have your menus ready, you can add items to it on the “appearance > menus” page in the backend.

1. On the new menu, just put some stuff you want in there.

 

2. On your “primary menu” add everything you need, including the items that went in the center menu.

The reason is because the center menu will disappear on mobile, so you will need them to show up in the (slide in) primary menu. The only thing we’ll do to them is we’re going to add ‘hide-on-desktop’ class to the menu items we want to.. hide on desktop.

 

The css

Take this CSS and edit some stuff for the text if needed.

.extra_menu_class {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.extra_menu_class .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.extra_menu_class .menu .menu-item {
  margin: 0 14px;
}
.extra_menu_class .menu .menu-item a {
  font-size: 16px;
  font-weight: 700;
  color: black;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.extra_menu_class .menu .menu-item:hover a {
  opacity: .6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.extra_menu_class .menu .menu-item.current-menu-item a {
  color: red;
}
@media all and (min-width: 981px) {
  .hide-on-desktop {
    display: none;
  }
}
@media all and (max-width: 980px) {
  .hide-on-desktop {
    display: list-item;
  }
  .extra_menu_class {
    display: none;
  }
}

Please note: I have taken out the # part because there’s no specificity fight going on, so a few classes work fine.

And there you have it. Pretty neat eh?

I ended up using this on a new project website I’m working on. I think it’ll work really well.

Since I just mentioned it.. if you want to stay up to date on all the stuff I’m working on, then please sign up for my newsletter. I’ll have some cool news soon.

[contact-form-7]

 

If you want to learn CSS to customize things yourself..

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

If you want to dive into responsiveness,

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

Hamburger Photo by Bobby Rodriguezz on Unsplash

The post Divi – Header with both a nav menu & hamburger appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-header-with-both-a-nav-menu-hamburger/feed/ 11 3277
Divi – Double columned tabs https://almostinevitable.com/divi-double-columned-tabs/ https://almostinevitable.com/divi-double-columned-tabs/#comments Mon, 03 Jun 2019 15:04:14 +0000 https://almostinevitable.com/?p=3168 The inspiration I got a request for this layout on the Divi page: Looks harmless, but how to recreate it in Divi??? Well, it took a bit of work and some restructuring, but it works out pretty well with just CSS. (Because the Divi tabs already have jquery working for them) Check out the preview […]

The post Divi – Double columned tabs appeared first on Almost Inevitable Design.

]]>
The inspiration

I got a request for this layout on the Divi page:

Looks harmless, but how to recreate it in Divi???

Well, it took a bit of work and some restructuring, but it works out pretty well with just CSS. (Because the Divi tabs already have jquery working for them)

Check out the preview

 

The Video

Watch the video for a short breakdown of how the code was put together. (so you can edit it for your own uses)

 

The Build

First, add a custom class to the tab module

And make 8 tabs.

Next, just add the CSS.

Before you go, if you want a slightly different vertical layout,

 

note: The other styling is up to you. I tried to stay out of the way in terms of styling the details so it won’t clash with what you’re doing. If you’re having problems, please let me know.

 

The Code

And here’s the CSS

.et_pb_module.et_pb_tabs.tabs-content-tabs {
  position: relative;
  height: 450px;
  width: 100%;
  border: none;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls:after {
  display: none;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li {
  float: none;
  position: absolute;
  display: block;
  border: none;
  width: 130px;
  padding: 10px;
  text-align: center;
  background: white;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 8px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li:hover {
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3 {
  left: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
  right: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4 {
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5 {
  top: 33%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6 {
  top: 67%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
  top: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_active {
  -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li a {
  display: inline-block;
  padding: 0;
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs {
  width: calc(100% - 320px);
  height: 450px;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs .et_pb_tab {
  padding: 0 20px;
}
@media all and (max-width: 768px) {
  .et_pb_module.et_pb_tabs.tabs-content-tabs {
    height: auto;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls:after {
    display: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li {
    float: none;
    position: relative;
    margin-bottom: 20px;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3 {
    left: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
    right: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_0, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_4 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_1, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_5 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_2, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_6 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_3, .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_7 {
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li.et_pb_tab_active {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_tabs_controls > li a {
    display: inline-block;
    padding: 0;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: none;
            transform: none;
  }
  .et_pb_module.et_pb_tabs.tabs-content-tabs .et_pb_all_tabs .et_pb_tab {
    padding: 20px;
  }
}

.et_pb_row.extra-padding {
  padding: 60px 0;
}

 
To add custom CSS, either..

  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

And there you have it!

 
If you want to learn how to do this all yourself and/or solve your own problems easily

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
If you want to learn how to make Divi awesomely responsive

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Some awesome ideas coming up soon, so sign up!

[contact-form-7]

 

update

ET has posted a tutorial for this themselves (I guess due to the popularity of the layout) so you can also check it out here: https://www.elegantthemes.com/blog/divi-resources/how-to-recreate-ets-click-video-walkthrough-with-divi

Photo by Faruk Kaymak on Unsplash

The post Divi – Double columned tabs appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-double-columned-tabs/feed/ 2 3168
Divi – Changing Pagination Text https://almostinevitable.com/divi-changing-pagination-text/ https://almostinevitable.com/divi-changing-pagination-text/#comments Sun, 02 Jun 2019 16:12:05 +0000 https://almostinevitable.com/?p=3162 The Problem Have a look at this screenshot. See anything annoying? A lot of people seem to not like how it says “older entries” and “next entries” because.. it.. can’t be changed easily. (ET should really look into that) So how do we fix this in an easy non-destructive way? Note: The reason I say […]

The post Divi – Changing Pagination Text appeared first on Almost Inevitable Design.

]]>
The Problem

Have a look at this screenshot. See anything annoying?

A lot of people seem to not like how it says “older entries” and “next entries” because.. it.. can’t be changed easily. (ET should really look into that)

So how do we fix this in an easy non-destructive way?

Note: The reason I say “easy non-destructive” is because the only way to edit this at the moment is to either
1. edit the module itself in the parent theme
– Divi > includes > navigation.php
which means it will go away when you update the parent theme, (destructive) or
2. add a function to the child theme’s functions.php file that will override Divi’s navigation.php and load a new one. (not too hard… but not as easy as copy pasting a snippet)

The solution

What we’re going to do is just use CSS to cover up the pagination text and add new letters via pseudo elements. Easy peasy.

.pagination .alignleft a {
	color: rgba(255,255,255,0);
	position: relative;
}
.pagination .alignleft a:after {
	content: "« More Results";
	position: absolute;
	text-align: left;
	width: 200px;
	left: 0;
	color: #111;
}
.pagination .alignright a {
	color: rgba(255,255,255,0);
 	position: relative;
}
.pagination .alignright a:after {
	content: "Previous Results »";
	position: absolute;
	text-align: right;
	width: 200px;
	right: 0;
	color: #111;
}

Of course, if you want to change the text, go ahead and edit the text inside the “” in content: “”;.

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

If you want to learn how to do all this yourself,

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

PS. If you want to go the php route, add a function named wp_pagenavi and get_template_part it to a new navigation.php in your child theme.

 

[contact-form-7]

Photo by Thijs Slootjes on Unsplash

The post Divi – Changing Pagination Text appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-changing-pagination-text/feed/ 7 3162
Divi – Elegant Theme’s layout showcase hover https://almostinevitable.com/divi-elegant-themes-layout-showcase-hover/ https://almostinevitable.com/divi-elegant-themes-layout-showcase-hover/#comments Tue, 28 May 2019 15:02:02 +0000 https://almostinevitable.com/?p=3122 The Preview / Inspiration Hey guys, so Elegant Themes recently redesigned their website. I quite liked it. One thing really caught my eye. This part: It looks really nice, but the best part is when your mouse hovers over it. That looks pretty good! On mobile we get a 2 column layout. So now I […]

The post Divi – Elegant Theme’s layout showcase hover appeared first on Almost Inevitable Design.

]]>
The Preview / Inspiration

Hey guys, so Elegant Themes recently redesigned their website. I quite liked it.

One thing really caught my eye. This part:

It looks really nice, but the best part is when your mouse hovers over it.

That looks pretty good!

On mobile we get a 2 column layout.

So now I need to think about how to make it work. The thing is, it’s not just building it that’s the task here. That part’s easy. If it’s for a build that I’m doing myself, I don’t have to worry about making it easy to follow, or easy to edit. I can just build it any way I’m comfortable with. (In this case, I’d use ACF to add the extra images so it’ll show up in the archive. Note: Advanced level courses are coming soon. SCSS and ACF) Anyways, so sticking the best I can with Divi’s modules and build, here’s my way of recreating that cool layout with Divi.

Some points to remember

1. You will need three images on top of each other.
2. There’s a slight zoom when you hover.
3. It will be disabled on mobile (because.. hover doesn’t work on mobile)

Check out the preview

 

The video

 

The build

Let’s start with the whole row.

It’s the columns that will do the heavy lifting in this case, so go ahead and add three images modules per column.

The row and each column will have to take a custom class each.

Finally, add custom classes to each of the modules

And you’re ready to rock and roll!

The images I used are 500×800, just so I could get a card-like look to the layout.

 

The code

What’s a good layout without the CSS?

Copy paste this snippet:

.et_pb_row.ai-triple-overlap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
  position: relative;
  width: calc(25% - 20px);
  height: 220px;
  margin-right: 0;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image {
  overflow: hidden;
  width: 180px;
  max-width: 90%;
  height: 220px;
  border-radius: 6px;
  margin-bottom: 0;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image .et_pb_image_wrap > img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  height: 220px;
  width: 180px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-main {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 4;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-right {
  position: absolute;
  right: 40%;
  bottom: 0;
  -webkit-transform: translate(50%, 0) scale(0.9);
          transform: translate(50%, 0) scale(0.9);
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-right {
    display: none;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-left {
  position: absolute;
  left: 40%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0) scale(0.9);
          transform: translate(-50%, 0) scale(0.9);
  z-index: 2;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap .et_pb_image.image-left {
    display: none;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main {
  height: 250px;
  width: 150px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main .et_pb_image_wrap > img {
  height: 250px;
  width: 150px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 1024px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main {
    width: 180px;
    height: 220px;
  }
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-main .et_pb_image_wrap > img {
    height: 220px;
    width: 180px;
  }
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-right {
  -webkit-transform: rotate(5deg) translate(60%, -10%);
          transform: rotate(5deg) translate(60%, -10%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap:hover .et_pb_image.image-left {
  -webkit-transform: rotate(-5deg) translate(-60%, -10%);
          transform: rotate(-5deg) translate(-60%, -10%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media all and (max-width: 768px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
    width: 45%;
  }
}
@media all and (max-width: 479px) {
  .et_pb_row.ai-triple-overlap .et_pb_column.ai-col-overlap {
    width: 45% !important;
  }
}
@media all and (max-width: 768px) {
  .et_pb_row.ai-triple-overlap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .et_pb_row.ai-triple-overlap:after {
    display: none;
  }
}
@media all and (max-width: 479px) {
  .et_pb_row.ai-triple-overlap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

 
To add custom CSS, either..

  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)


 

The Download

The CSS and the json file.

 

And there you have it!

 
If you want to learn how to do this all yourself and/or solve your own problems easily

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 
If you want to learn how to make Divi awesomely responsive

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

update

ET has a post on this as well. You could check that out as well I guess. https://www.elegantthemes.com/blog/divi-resources/how-to-recreate-ets-layout-pack-previews-with-fan-out-hover-effects-in-divi

[contact-form-7]

 

Card deck photo by Aditya Chinchure on Unsplash

The.. red/gray layered Photo by Lasse Møller on Unsplash

The paint? photo by Paweł Czerwiński on Unsplash

Fire photo by Arnau Soler on Unsplash

The yellow photo by okeykat on Unsplash

Ocean photo by Luis Vidal on Unsplash

Bokeh photo by Sharon McCutcheon on Unsplash

The post Divi – Elegant Theme’s layout showcase hover appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-elegant-themes-layout-showcase-hover/feed/ 8 3122
Divi – Adding a hover overlay to the blog module https://almostinevitable.com/divi-adding-a-hover-overlay-to-the-blog-module/ https://almostinevitable.com/divi-adding-a-hover-overlay-to-the-blog-module/#comments Mon, 20 May 2019 14:02:01 +0000 https://almostinevitable.com/?p=3094 I’m actually pretty happy with this one. The main problem with making this in Divi is the HTML structure. Usually, if you want to superimpose a layer on top of an image, you’re going to need two distinct divs and give them absolute positioning. But the Divi blog module doesn’t have this. All the elements […]

The post Divi – Adding a hover overlay to the blog module appeared first on Almost Inevitable Design.

]]>
I’m actually pretty happy with this one.

The main problem with making this in Divi is the HTML structure.

Usually, if you want to superimpose a layer on top of an image, you’re going to need two distinct divs and give them absolute positioning.

But the Divi blog module doesn’t have this. All the elements are just child elements on the same level.

A few different options to overcome this:

– Make a new blog module -> just for that? whew..
– Edit the parent theme blog module -> You’ll have to do it for every update, so probably not a good idea.
– Use jquery to add some extra HTML -> Not the best tool for the problem. Plus, it can get hard to maintain.

So.. here’s a pure CSS method. woohoo!

Preview

Here’s what we’re going for:

Or just watch the video below:

 

The Video

 

What you need to do

Add a blog module.

Make sure you have the featured image ON.

 

Layout – Fullwidth

 

Custom Class: blog-hover

 

The CSS

And then add this CSS

.et_pb_posts.blog-hover .et_pb_ajax_pagination_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
  width: calc(33% - .5rem);
  margin-right: .95rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(3n+3) {
  margin-right: 0;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:after {
  content: "";
  position: absolute;
  visibility: visible;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* this is the color of the overlay */
  z-index: 1;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-featured-image-url {
  margin-bottom: 0;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-title {
  position: absolute;
  color: white; /* this is the color of the title text. You can take this out to modify it in the module settings */
  top: 1rem;
  left: 1.5rem;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  opacity: 0;
  z-index: 2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-content {
  display: none;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover:after {
  width: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
  top: 1rem;
  left: 1rem;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta {
  top: 3rem;
  left: 1rem;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta a {
  color: white; /* this is the color of the post meta. You can take this out to modify it in the module settings */
}
@media all and (max-width: 1024px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover {
    margin-bottom: 2rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover:after {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
    position: relative;
    top: 1rem;
    left: 0;
    opacity: 1;
    color: black; /* this is the color of the title on mobile. You can take this out to modify it in the module settings */
    margin-bottom: 1rem;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta {
    position: relative;
    top: auto;
    left: 0;
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .post-meta a {
    color: black; /* this is the color of the post meta on mobile. You can take this out to modify it in the module settings */
  }
}
@media all and (max-width: 1024px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    margin-bottom: 2rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:after {
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .entry-title {
    position: relative;
    top: 1rem;
    left: 0;
    opacity: 1;
    color: black;
    margin-bottom: 1rem;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta {
    position: relative;
    top: auto;
    left: 0;
    opacity: 1;
    color: black;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post .post-meta a {
    color: black;
  }
}
@media all and (max-width: 980px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    width: calc(50% - 12.5px);
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(3n+2) {
    margin-right: 1rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(odd) {
    margin-right: 1rem;
  }
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:nth-child(even) {
    margin-right: 0;
  }
}
@media all and (max-width: 479px) {
  .et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post {
    width: 100%;
    margin-right: 0 !important;
  }
}

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

And you’re DONE!

 

Note: if you want to hide the post meta and only use the title in the center of the block, add display: none; to all the post-meta rules and change the entry-title positioning like this:

.et_pb_posts.blog-hover .et_pb_ajax_pagination_container .et_pb_post:hover .entry-title {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi
To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

[contact-form-7]

 

Photo by Jure Tufekcic on Unsplash

The post Divi – Adding a hover overlay to the blog module appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-adding-a-hover-overlay-to-the-blog-module/feed/ 8 3094
Course – Learn CSS for Divi https://almostinevitable.com/product/learn-css-for-divi/ https://almostinevitable.com/product/learn-css-for-divi/#respond Mon, 13 May 2019 17:15:58 +0000 https://almostinevitable.com/?p=3055 Don’t know anything about CSS? Just a beginner? No worries! With this online course, you will become an advanced CSS coder with 14 hours of comprehensive videos on using CSS for Divi!

The post Course – Learn CSS for Divi appeared first on Almost Inevitable Design.

]]>
The post Course – Learn CSS for Divi appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/product/learn-css-for-divi/feed/ 0 3055
Divi – A section above the main header https://almostinevitable.com/divi-a-section-above-the-main-header/ https://almostinevitable.com/divi-a-section-above-the-main-header/#comments Mon, 29 Apr 2019 13:59:41 +0000 https://almostinevitable.com/?p=2933 This is a cool way to add a whole section (or layout if you wish) above the main navigation and then have it stick to the top during scroll. It’s pretty cool. Preview This is what it looks like: View post on imgur.com   You need this To start with, go get the child theme, […]

The post Divi – A section above the main header appeared first on Almost Inevitable Design.

]]>
This is a cool way to add a whole section (or layout if you wish) above the main navigation and then have it stick to the top during scroll. It’s pretty cool.

Preview

This is what it looks like:

View post on imgur.com

 

You need this

To start with, go get the child theme,

or if you’re using a child theme, add this code to your functions.php

And make sure your header is set to stick to the top.

 

The video

 

The code

Here’s the php code you need to add right above header id=”main-header” in the header.php file. (copy the header.php from Divi into the child theme if it’s not already there. Edits to the child theme file won’t be lost on updates to the parent theme)

<?php if ( is_home() || is_front_page() ) : 
	echo do_shortcode('[ai_layout_sc id="000000"]');
 endif; ?>

Please change the shortcode id number to whatever number your section had in the library.

Then add this CSS

.home.page #page-container {
 padding-top:0px !important
}
.home.page #page-container header#main-header {
 position:relative;
 -webkit-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -ms-transition:all 0.5s ease-in-out;
 transition:all 0.5s ease-in-out
}
.home.page #page-container header#main-header.et-fixed-header {
 position:fixed;
 -webkit-transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -ms-transition:all 0.5s ease-in-out;
 transition:all 0.5s ease-in-out
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

and you’re done!

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

 

Photo by Li Yang on Unsplash

The post Divi – A section above the main header appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-a-section-above-the-main-header/feed/ 2 2933
Divi – overlaying module on hero section https://almostinevitable.com/divi-overlaying-module-on-hero-section/ https://almostinevitable.com/divi-overlaying-module-on-hero-section/#respond Thu, 25 Apr 2019 15:16:06 +0000 https://almostinevitable.com/?p=2910 Here’s how you can make a module stick to the bottom of the hero section. This would be helpful for things like newsletter signups, special notices (without using a popup), and contact forms. The object We’re going for a layout something like this:   The Video Note: It’s a bit long, but I go through […]

The post Divi – overlaying module on hero section appeared first on Almost Inevitable Design.

]]>
Here’s how you can make a module stick to the bottom of the hero section.

This would be helpful for things like newsletter signups, special notices (without using a popup), and contact forms.

The object

We’re going for a layout something like this:

 

The Video

Note: It’s a bit long, but I go through everything for you so you can customize the CSS yourself if you need to.

 

The classes

This time, you need to do TWO things haha

Add a custom class (save-the-world) to the section like this:

And add a custom class (overlay-module) to the module you want to overlay like this:

 

The css

.et_pb_section.save-the-world {
  padding: 0;
  height: 40vw; }
  .et_pb_section.save-the-world .et_pb_row {
    padding: 0;
    height: 40vw;
    width: calc(100% - 120px); /* customizable - was originally 80% */
    max-width: 100%; /* customizable - was originally 1080px */ }
    .et_pb_section.save-the-world .et_pb_row .et_pb_column {
      position: relative;
      height: 40vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      .et_pb_section.save-the-world .et_pb_row .et_pb_column .overlay-module {
        position: absolute;
        bottom: 0;
        right: 0;
        height: auto;
        width: 25vw; /* customizable */
        padding: 1.5rem; /* customizable */
      }

@media all and (max-width: 980px) {
  .et_pb_section.save-the-world {
    height: auto; }
    .et_pb_section.save-the-world .et_pb_row {
      height: auto; }
      .et_pb_section.save-the-world .et_pb_row .et_pb_column {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        height: auto;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end; }
        .et_pb_section.save-the-world .et_pb_row .et_pb_column .et_pb_module {
          margin-bottom: 0; /* customizable */
        }
        /* if you're not using the code module, you can change the .et_pb_code to something else (like .et_pb_text) */
        .et_pb_section.save-the-world .et_pb_row .et_pb_column .et_pb_code {
          padding-top: 60px; /* customizable */
          padding-bottom: 30px; /* customizable */
          width: 100%; }
        .et_pb_section.save-the-world .et_pb_row .et_pb_column .overlay-module {
          position: relative;
          width: auto; } }
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

And you are done! Hope this helps you make cool hero sections!

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]
Photo by 35mm on Unsplash

The post Divi – overlaying module on hero section appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-overlaying-module-on-hero-section/feed/ 0 2910
Divi – blurb text overlay https://almostinevitable.com/divi-blurb-text-overlay/ https://almostinevitable.com/divi-blurb-text-overlay/#respond Tue, 23 Apr 2019 16:06:33 +0000 https://almostinevitable.com/?p=2873 Here's how to get the text over images in two simple steps

The post Divi – blurb text overlay appeared first on Almost Inevitable Design.

]]>
I had a request for a tweak to get the following look:

 

So here we go!

The video

 

The class

Add the custom class to the ROW.

Like this:

Add ai-text-overlay in the row’s custom CSS class.

 

The snippet

Here’s the snippet that will do the styling for you.

.et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_main_blurb_image {
    margin-bottom: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px; }
    .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header {
      font-size: 14px;
      color: white;
      padding-bottom: 0; }

 

To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

Photo credit:
 

The post Divi – blurb text overlay appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-blurb-text-overlay/feed/ 0 2873
Divi – transparent header only on home page https://almostinevitable.com/divi-transparent-header-only-on-home-page/ https://almostinevitable.com/divi-transparent-header-only-on-home-page/#comments Tue, 23 Apr 2019 15:50:36 +0000 https://almostinevitable.com/?p=2875 What if you wanted a different header color JUST for the home page? This is the snippet you’ll need.   Of course, you can change the colors easily by swapping out the ‘transparent’ to something else. Cool, I’ll just sign off with just that. Maybe I should get into dissecting the header sometime.. hmm.   […]

The post Divi – transparent header only on home page appeared first on Almost Inevitable Design.

]]>
What if you wanted a different header color JUST for the home page?

This is the snippet you’ll need.

.home #main-header, 
.home #main-header.et-fixed-header {
	background-color: transparent;
}
.home #page-container {
	padding-top: 0 !important;
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.

(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

Of course, you can change the colors easily by swapping out the ‘transparent’ to something else.

Cool, I’ll just sign off with just that. Maybe I should get into dissecting the header sometime.. hmm.

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

 

The post Divi – transparent header only on home page appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-transparent-header-only-on-home-page/feed/ 9 2875
Divi – Change the look of the default blog page https://almostinevitable.com/divi-change-the-look-of-the-default-blog-page/ https://almostinevitable.com/divi-change-the-look-of-the-default-blog-page/#comments Sun, 31 Mar 2019 14:24:57 +0000 https://almostinevitable.com/?p=2802 Divi’s default blog archive page isn’t necessarily outdated, but it’s a bit boring for people like us who use Divi all the time. The Project I got a request from a guy who reached out wanting some help with styling his blog, and he wanted it to look like these guys: The Problem Although it […]

The post Divi – Change the look of the default blog page appeared first on Almost Inevitable Design.

]]>
Divi’s default blog archive page isn’t necessarily outdated, but it’s a bit boring for people like us who use Divi all the time.

The Project

I got a request from a guy who reached out wanting some help with styling his blog, and he wanted it to look like these guys:

The Problem

Although it looks kinda simple to do, the main problem is getting this done without actually editing any php files. I think once it goes into major file edits, I lose a lot of people following along haha and it’s a lot easier this way.

So the main problem that I had to solve was the orphaned text that is the excerpt. (I talk about this in the video) Because it’s hard to manipulate that text without a tag around it, it’s tricky to put the title / meta above the featured image.

I ended up re-ordering via flexbox.

 

Hey, I have a course that specifically covers flexbox and media queries!

Come check it out if you want to learn more about how to make Divi more responsive.

 

So yeah, flexbox to the rescue.

However, there are a few more problems to solve. Mainly the fact that the default Divi archive uses float which can be a problem in getting the layout just right. (or at least to the my basic standards) So .. yeah, for this, I had to use flexbox again to ensure the ratios and gutter widths.

 

The result

Here’s what we get.

Not too bad.

Let’s watch the video, and I’ll explain some stuff.

 

The video

The snippet

 

#content-area {
  display: -webkit-flex;
  display: flex; }
  #content-area #left-area {
    float: none;
    width: 70%;
    box-sizing: border-box;
    margin-top: -1px;
    padding-right: 30px; }
    #content-area #left-area .et_pb_post.format-standard {
      border: 1px solid #ddd;
      box-sizing: border-box;
      margin-bottom: 30px;
      padding: 30px;
      background: white;
      display: -webkit-flex;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column-reverse; }
      #content-area #left-area .et_pb_post.format-standard .entry-featured-image-url {
        width: 100%;
        order: 1; }
      #content-area #left-area .et_pb_post.format-standard .entry-title {
        width: 100%;
        order: 3; }
      #content-area #left-area .et_pb_post.format-standard .post-meta {
        width: 100%;
        order: 2; }
  #content-area #sidebar {
    float: none;
    width: 30%;
    box-sizing: border-box;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 30px; }
    #content-area #sidebar .et_pb_widget {
      border: 1px solid #ddd;
      box-sizing: border-box;
      padding: 20px;
      background: white; }

.single.single-post #content-area #left-area .et_pb_post.format-standard {
  flex-direction: column; }

#main-content {
  background: #f7f7f7; }
  #main-content .container {
    padding-top: 0px; }
    #main-content .container:before {
      display: none; }

Copy all of that and drop it into either
– child theme css file (most recommended, get your free child theme here)
– Theme options > custom CSS
– Customizer > custom CSS

Alternative

If you want to learn how to style everything yourself, but make the category pages (archive) work, check out this post:

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

 

The post Divi – Change the look of the default blog page appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-change-the-look-of-the-default-blog-page/feed/ 2 2802
Divi – Logo overlapping both header rows https://almostinevitable.com/divi-logo-overlapping-both-header-rows/ https://almostinevitable.com/divi-logo-overlapping-both-header-rows/#respond Tue, 26 Mar 2019 12:54:06 +0000 https://almostinevitable.com/?p=2761 Here’s a really simple way of making a header with a logo that overlaps both header rows. With JUST CSS. So it’s pretty neat. Background I had a tutorial request for this header: It’s a nice funky site. If you want to check it out yourself, go ahead. It’s made with Divi, and there’s been […]

The post Divi – Logo overlapping both header rows appeared first on Almost Inevitable Design.

]]>
Here’s a really simple way of making a header with a logo that overlaps both header rows. With JUST CSS. So it’s pretty neat.

Background

I had a tutorial request for this header:

It’s a nice funky site. If you want to check it out yourself, go ahead. It’s made with Divi, and there’s been some edits to the header.

The top header (the section with the phone number and email) is not used, rather, it adds an additional section (seems to be just straight up php+html) under the main header. Since the logo was changed to be larger than default, it would overhang below the main header and the newly added section.

 

I’m going to try something a little bit simpler and easy to do.

 

note: the search function, we’re going to ignore since it’s not only specific to the client, but it involves adding a search plugin and including the shortcode in the header and stuff. If you want to check out how to add your own divi layout to the header, check out the following:

 

The new header

Here’s what we’re making:

It might look… different, but the basic structure is the same, just not fully styled.

The difference is that we’re using the two menus that come with Divi. So the top header will stay up there, and the main header will stay where it normally does.

You’ll have to take out the phone and email to avoid having the logo cover the contact details.

In this Divi tweak, the main idea and the important solution we need to address is how to make things overlap on top of each other, because z-index is not always the answer. There are many cases where z-index: 10000000000888888999; won’t work.

I explain how this works a bit in the video.

 

The video

 

The CSS

Take the CSS below and drop it in either
the theme options > custom CSS field, or in
the customizer > custom css, or in
your child theme’s style.css file.

#top-header {
  z-index: 1;
}
#main-header {
  z-index: 2;
}
#main-header .logo_container {
  top: -24px;
  width: 170px;
  z-index: 100;
}
#logo {
  max-height: 200%;
}
@media all and (max-width: 479px) {
  #main-header .logo_container {
    top: 0;
  }
  #logo {
    max-height: 80%;
  } 
}

 

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Also… if you’re interested in learning CSS properly…

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

[contact-form-7]

 

The post Divi – Logo overlapping both header rows appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-logo-overlapping-both-header-rows/feed/ 0 2761