Almost Inevitable Design https://almostinevitable.com Wordpress Web Design Wed, 22 Jan 2020 06:22:46 +0000 en-US hourly 1 https://wordpress.org/?v=5.1.4 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 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/ 4 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/ 9 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/ 1 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/ 6 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/ 4 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/ 7 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
Divi – 5 column gallery on desktop and 2 on mobile https://almostinevitable.com/divi-gallery-5-columns-on-desktop/ https://almostinevitable.com/divi-gallery-5-columns-on-desktop/#respond Sun, 17 Mar 2019 11:31:29 +0000 https://almostinevitable.com/?p=2734 This article will be about styling the Divi Gallery module. By default, the Divi Gallery has 4 columns on desktop and 1 column on mobile. But in this tutorial, we will make it have 5 columns on desktop and 2 on mobile. We will achieve this by using some custom CSS code. The first thing […]

The post Divi – 5 column gallery on desktop and 2 on mobile appeared first on Almost Inevitable Design.

]]>
This article will be about styling the Divi Gallery module. By default, the Divi Gallery has 4 columns on desktop and 1 column on mobile. But in this tutorial, we will make it have 5 columns on desktop and 2 on mobile.

We will achieve this by using some custom CSS code.

The first thing that you need to do is to create your gallery. Create a new Divi page, add a new section, row and add a Gallery module into it. Then add at least 10 images into your gallery (so that we have at least 2 rows of images).

Divi Gallery Module

Then add a custom CSS class col-width to your Gallery module.

Gallery CSS Class

And below is the code that you need to use if you want to have your gallery have 5 columns on desktop. You need to add this code either to the custom CSS filed of the general Divi theme options. Or you can add it just into the particular page’s custom CSS code field.

@media (min-width: 981px){
	.et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {
		clear: none; 
	}
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 20%;
	}
}
@media (max-width: 980px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 25%;
	}
}
@media (max-width: 479px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 50%;
	}
}

Divi custom CSS field

As you can see in the CSS code above, there is a code for every width of the screen. Desktop screens usually have more than 980 pixels, while mobiles have less than 480 pixels.

We also have there the code for tablets that will make the gallery to have 4 columns on these devices.

If you are interested in a more simple process of how to make your Divi gallery have 5 columns, regardless of the screen size, check out this other tutorial.

Lastly, if you want to have no spacing between the gallery images, go into your Row settings and enable the options “Make This Row Fullwidth”, “Use Custom Gutter Width” and set the gutter width to 1. This will make the gallery images to extend across the full width of your page and have no spacing between the gallery items.

Gallery Sizing Options

Here you can see how a Divi gallery with these settings looks like on desktop (it has 5 columns):

Gallery 5 columns

And below you can see how it looks like on mobile (2 columns):

Gallery 2 columns

 

And you are done.

 

 

[contact-form-7]

 

The post Divi – 5 column gallery on desktop and 2 on mobile appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-gallery-5-columns-on-desktop/feed/ 0 2734
Divi – Scroll on hover https://almostinevitable.com/divi-scroll-on-hover/ https://almostinevitable.com/divi-scroll-on-hover/#respond Tue, 12 Mar 2019 12:05:16 +0000 https://almostinevitable.com/?p=2693 A Divi tutorial on how to make an image scroll on mouse hover. A great way to show web mockups and stuff for your portfolio.

The post Divi – Scroll on hover appeared first on Almost Inevitable Design.

]]>

I remembered seeing a scroll on hover thing on https://candythemes.com/, and thought it was nice, and then last night, someone posted on a FB group about it so I decided to make a tutorial on it.

So here’s how you make a scrolling action happen when you hover your mouse over an element.

First, a sample

Second, the video

Third, the class

Add the custom class of “hover-scroll” (without the quotation marks) to the image module here:

Last, the code

.et_pb_image.hover-scroll {
  width: 100%;
  height: 20rem; /* this is the height of the box */
  overflow: hidden;
  position: relative;
  border: 1px solid black; }
  .et_pb_image.hover-scroll .et_pb_image_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }
  .et_pb_image.hover-scroll:hover .et_pb_image_wrap {
    top: 20rem; /* has to be the same */
    transform: translateY(-100%);
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }
  @media all and (max-width: 479px) {
    .et_pb_image.hover-scroll {
      border: 0;
      height: auto; }
      .et_pb_image.hover-scroll .et_pb_image_wrap {
        position: relative; } }

Take that code, drop it in anywhere where custom CSS can be included.
– Child theme CSS file
– Divi Theme options page
– WP customization > custom CSS panel
– or lastly, if you want it to work just on a single page, the page builder options.

NOTE: On mobile, the border goes away, and the image is displayed in its full height. Because hover is weird on mobile. If you want this to work on ipads too, change the 479px to 1024px.

update: here’s another sample

Again, the class

This time, add the custom class of “hover-scroll-mockup” (without the quotation marks) to the image module here:

other settings

Add the mockup device (in this case the iMac) as the image, and the long scrolly image as the background as shown below:

the imac

I’m using the iMac as the mockup device. If you want to use other devices, then there will have to be some adjustments. … maybe I’ll get around to it.. and have one where I have all the major devices. I’ve added comments to the CSS so you can adjust some parts to show properly. Have a play with those numbers. And here’s the iMac image I got from https://www.kisspng.com/png-imac-macbook-pro-apple-transparent-969373/ and make it a bit smaller. Go ahead and download that.

Last, the code

.et_pb_image.hover-scroll-mockup {
  background-position: center 15px; /* You might have to adjust the number part to fit the screen */
  border-radius: 10px; /* Because Mac edges are chamfered */
  background-size: cover; 
  position: relative; 
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  -ms-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out; }
  .et_pb_image.hover-scroll-mockup:before {
    content: "";
    display: block;
    background: white;
    position: absolute;
    width: 100%;
    height: 30%; /* this should be the height of the stand + chin of the iMac */
    bottom: 0;
    left: 0; } 
  .et_pb_image.hover-scroll-mockup:hover {
    background-position: center 110%; /* Again, here, if the bottom doesn't align properly, adjust the second value a little bit */
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }

Take that code, drop it in anywhere where custom CSS can be included.
– Child theme CSS file
– Divi Theme options page
– WP customization > custom CSS panel
– or lastly, if you want it to work just on a single page, the page builder options.

NOTE: On mobile, it’s gonna have to stay there as a whole.. so either make some adjustments, or make this module a desktop-only module (as hover works only on desktop anyways?)

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 be a master at CSS in the quickest time possible, sign up for the newsletter below for a great offer on the Beginner’s CSS course for Divi users that is scheduled to come out this month!

[contact-form-7]

Photo by Rodolfo Marques on Unsplash

The post Divi – Scroll on hover appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-scroll-on-hover/feed/ 0 2693
Marx Creative on the Divi showcase Feb 2019! https://almostinevitable.com/marx-creative-on-the-divi-showcase-feb-2019/ https://almostinevitable.com/marx-creative-on-the-divi-showcase-feb-2019/#respond Wed, 06 Mar 2019 08:32:32 +0000 https://almostinevitable.com/?p=2605 If you didn’t know, I work at a design agency in south east QLD (Australia) called Marx Creative that does really great design. I’m the lead web developer (digital designer by title since I do other digital stuff too, like video editing) at Marx Creative. I develop most of the websites we design, and the […]

The post Marx Creative on the Divi showcase Feb 2019! appeared first on Almost Inevitable Design.

]]>
If you didn’t know, I work at a design agency in south east QLD (Australia) called Marx Creative that does really great design. I’m the lead web developer (digital designer by title since I do other digital stuff too, like video editing) at Marx Creative. I develop most of the websites we design, and the other simpler ones I oversee development just so they adhere to our standards. (We have incredibly high standards.)

I work with wonderful co-workers, who are the best at what they do. The overall design of Marx Creative was done by our art director/lead graphic designer, and I think she does wonderful work. Our boss also oversaw the whole project as creative director, and our project manager made sure we had the time and schedule to get it finished. (it took us about half a year, woah)

So yeah, super happy about all this. 🙂

Note: The Almost Inevitable website (this here) is just me trying to share tips, tutorials, and thoughts from working in the industry, while offering products like web development courses which help pay for the server, and the occasional coffee. 

So anyways, we normally do not submit any of our web creations to ET’s design showcase or do I post links on Facebook groups because our clients usually run analytics on their sites and if our clients’ sites get international traffic that’s highly unrelated to the clients’ target market, the analytics become really confusing. So although we are usually very proud of our work, I don’t post our sites anywhere.

However, the recent redesign was for ourselves. So I thought it might be worth submitting to ET, hoping they like it.

So yeah, I’m so happy we made it in the Feb 2019 Divi design showcase list.

In the short time between the post and now, I’ve had quite a few requests for tips and tuts on how to create our site.

Let’s start with a video:

I’ll go over everything.

For the list of resources:

Child theme. I usually use a custom child theme that has most of the stuff we always use for our builds. It’s similar to this free child theme. So go get that to start with.

 

If you use that child theme, then that’s fine, but otherwise, you’re gonna need to be able to add layouts here and there. You can do that with this tut.

 

Divi 100 Hamburger extension ET released a plugin for the hamburger, and I just used that. It still works fine. Link here

 

A lot of people have asked about the menu.

You can get the tutorial here:

Also this for a bit more tweaking

 

For the blurb (the project grid was made with blurbs) hover and mobile responsiveness you can find the tutorial here:

 

The vertical slider controls can be done with this tut

 

It took a while, but the arrows were from a laborious adaptation of this pen:

https://codepen.io/nicoencarnacion/pen/XpaRQV

 

I think I covered most of it. If you have any questions, let me know.

Also, plug:

 

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

 

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

 

Newsletter Sign up Form
[contact-form-7]

The post Marx Creative on the Divi showcase Feb 2019! appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/marx-creative-on-the-divi-showcase-feb-2019/feed/ 0 2605
WP – Migrating from WIX to WordPress https://almostinevitable.com/wp-migrating-from-wix-to-wordpress/ https://almostinevitable.com/wp-migrating-from-wix-to-wordpress/#respond Mon, 04 Mar 2019 12:51:26 +0000 https://almostinevitable.com/?p=2492 Here’s how to fix WIX.   You migrate the site over to a self-hosted WordPress installation and start building fresh. Yeah, well, that’s the only way to fix it. The main problem is how, right?   So, a bit of technical stuff. (A bit simplified just so it’s enough to understand (hopefully) and you can […]

The post WP – Migrating from WIX to WordPress appeared first on Almost Inevitable Design.

]]>
Here’s how to fix WIX.

 

You migrate the site over to a self-hosted WordPress installation and start building fresh.

Yeah, well, that’s the only way to fix it.

The main problem is how, right?

 

So, a bit of technical stuff. (A bit simplified just so it’s enough to understand (hopefully) and you can later explain to a client)

A website has two major components. The domain name and the hosting server.

Once the domain name is purchased, you can point it to something called a nameserver.
– The nameserver is (usually) the hosting server.
– The nameserver has a bunch of settings called the DNS settings.
– The DNS settings has stuff like A records, and MX settings. (The other stuff doesn’t concern you as much at this moment)
– The A records control where the website is, and the MX settings is where the mail exchange server lives.

Here’s a simple illustration:

Was that helpful? Hopefully.

Usually when people end up with WIX, they go for the full package.
That means they’ll have both the domain and server on WIX.
So you need to move both.

Some side notes:
– If they bought the domain through a separate registrar, then that’s good, you can have the client continue using that, and start from step 3.
– You can technically just change the nameserver and/or DNS records in WIX and keep the domain on WIX, but I strongly suggest transferring the domain to somewhere more normal.

Oh, before we move on, here’s a very important answer to a question that a surprising and concerning number of people have asked.

No, there is no tool or plugin that can simply import a WIX website.

The CMS is different, and WIX doesn’t allow anything remotely similar to anything like that. Also… why would you even consider importing such an ugly website?

So.. now that we got that out of the way… and you’re gonna do a redesign, here’s the workflow:

STEP ONE. Get the EPP code from WIX : The EPP code (or transfer code depending on company) is a string of characters that allows hosting companies/servers to talk to each other and provide verification of the domain move. Here’s how to do it in WIX: https://support.wix.com/en/article/transferring-your-wix-domain-away-from-wix-2477749

STEP TWO. Transfer the domain to some other registrar : Find a normal/reputable registrar (namecheap, TPP, porkbun, etc) and find the domain transfer option and do that.

Once the transfer request is submitted, the source registrar will send an email for verification to the person who signed up for the domain registry. (If it’s the client’s “IT company” then it’s could be more of pulling teeth, but it’s so good that you’re straightening things out for them).

In a few days (like 3-7) you’ll have the new domain on the new registrar. The DNS settings most likely remain intact. This needs to stay. Unfortunately, you have to make sure you leave the nameserver on WIX for now until you finish the new site. No need to purchase any extra hosting at this moment.

STEP THREE. Start building on a preview site : You should be building on a server you control, of course. I’ve made the mistake of building on the client’s server a few times. One bad experience is enough. haha

STEP FOUR. Migrate it to the new server. Once everything is hunky dory (like.. the client paid the final balance), you can take the new website into where ever it should go (like the client’s new hosting account)

STEP FIVE. Change the NS (or just A record) to match the new website.

STEP SIX. Cancel WIX forever.

Here’s a simpler step by step illustration:

 

 

Basically, try to migrate the site one step at a time.

 

And for your viewing pleasure, a 4X4 crossing a ditch one wheel at a time.

The post WP – Migrating from WIX to WordPress appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-migrating-from-wix-to-wordpress/feed/ 0 2492
Divi tip – Add link to phone number in top header https://almostinevitable.com/divi-tip-add-link-to-phone-number-in-top-header/ https://almostinevitable.com/divi-tip-add-link-to-phone-number-in-top-header/#comments Sun, 03 Mar 2019 12:26:35 +0000 https://almostinevitable.com/?p=2519 You know the phone number in the top header? Yeah, let's get that to link to a phone number automatically.

The post Divi tip – Add link to phone number in top header appeared first on Almost Inevitable Design.

]]>
Surprisingly, the phone number input on the top header is not linkable in Divi.

The reason is because it is ‘sanitized’ on output. So whatever you add to that field, it’s all stripped out before its displayed on the frontend.

The reasoning is because… Elegant Themes thought it was a good idea. I don’t agree, but I don’t disagree either. Sometimes it’s safe to sanitize those fields. So yeah, whatevs.

 

Anyways, let’s change that.

You’re gonna have to edit the header, so you’ll need a child theme. Get one here (Click me).

Inside that child theme, you’ll see header.php

Open it up.

Change line 65 to this:

<span id="et-info-phone"><a href="<?php echo esc_attr( 'tel:' .$et_phone_number); ?>"><?php echo et_core_esc_previously( et_sanitize_html_input_text( $et_phone_number ) ); ?></a></span>

Done.

Now you’ll get the phone number to link directly to the number. It’s pretty helpful on mobile devices.

 

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 Anastasia Dulgier on Unsplash

The post Divi tip – Add link to phone number in top header appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tip-add-link-to-phone-number-in-top-header/feed/ 4 2519
Divi Tutorial – Header with an extra row for content https://almostinevitable.com/divi-tutorial-header-with-an-extra-row-for-content/ https://almostinevitable.com/divi-tutorial-header-with-an-extra-row-for-content/#comments Mon, 25 Feb 2019 14:23:57 +0000 https://almostinevitable.com/?p=2517 This one’s a bit hard to explain in words, but it’s really cool when you get into it. Here’s another header hack / tutorial for you. (Check out some more header related tutorials: Click here) It’s quite a bit of frustrating work to make it, but for you, it’s not too hard to do… because […]

The post Divi Tutorial – Header with an extra row for content appeared first on Almost Inevitable Design.

]]>
This one’s a bit hard to explain in words, but it’s really cool when you get into it.

Here’s another header hack / tutorial for you.

(Check out some more header related tutorials: Click here)

It’s quite a bit of frustrating work to make it, but for you, it’s not too hard to do… because I’ve already done it. haha

 

Here’s what we’re aiming for.

 

Full disclosure / Credit : A friend of mine asked me if I could make a header that looks like this: https://diviagency.divilife.site/
So I checked it out. I liked how the header has a lot of space for extra info and a CTA button, but I didn’t like how the text wrapped inconsistently, and the search field didn’t appear where I would have intuitively thought it would. (See below)

 

So I decided to make a post on building a similar layout. I don’t know how that header was built, but my tutorial was done totally independently, and probably not similar in build method at all. (I didn’t even inspect the inspiration header, so I don’t know how it was built)

Anyways, here we go.

the video

 

The materials

1. A child theme – Yes, you should always use a child theme. Come on, we’re past this in 2019.
– Click me to get a Divi child theme (this child theme will take care of the next item on the list.)
– Click me to see why you ALWAYS need a child theme. (and in this case, you’re gonna have to use one anyways)

2. A way to insert content in the header. – You can either add html yourself, or add a divi row via this method here. (Click me)

3. These files


Inside you’ll find:
– header-stackedheader.php
– stackedheader.css

(If you’re on Windows there might be some other empty folders names MACOS or whatever, you can disregard them)

 

and off we go!

The steps

Step 0. Make the extra content that’ll go in the header

You can use html, and insert it directly, or you can use the layout shortcode by using the method from item 2 above. (or just watch the video)

Step 1. Change the file name

You’re going to have to change header-stackedheader.php to header.php and drop that into your child theme. (Overwrite the existing header.php file)

Step 2. Add the extra content

Go to line 257 in the header file (the one you just downloaded and changed the filename) and either
– change the shortcode to what you need it to be or
– add html (or php) as you see fit.

And now

Step 3. Add the styling

Stackedheader.css has all the css you need to make the header look good. Watch the video to get a couple of tips on customizing the styles. Copy the css and drop that into your child theme’s css file (/css/main.css if you’re using my child theme) or theme options.

And you’re done.

It’s a bit complicated, but it’s worth it if you want a complex layout that works 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

 

[contact-form-7]

 

Photo by Heather Gill on Unsplash

The post Divi Tutorial – Header with an extra row for content appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tutorial-header-with-an-extra-row-for-content/feed/ 6 2517
WP – Opinion (sort of) – Do you need a child theme? https://almostinevitable.com/wp-opinion-sort-of-do-you-need-a-child-theme/ https://almostinevitable.com/wp-opinion-sort-of-do-you-need-a-child-theme/#comments Mon, 25 Feb 2019 13:28:24 +0000 https://almostinevitable.com/?p=2477 The "debate" that should have ended, but for some reason just won't end.

The post WP – Opinion (sort of) – Do you need a child theme? appeared first on Almost Inevitable Design.

]]>
Do you need a child theme?

 

 

Yes, always.

 

 

 

 

 

 

 

 

 

 

 

 

 

Oh, more? OK… well.. This should be enough to convince you to use a child theme…

“Child themes provide an extra layer of security that is valuable in building and customizing a website.”

(note: by security, I don’t mean against hackers, I mean against errors and bugs and customizability)

 

But I’ve noticed that it’s not always the case.. so.. Before we get into this, I just want to mention that, for the record, I think I shouldn’t be bothering myself about this, because… you should have already be using a child theme.

But.. I’ve seen that it’s not standard practice, and also that some people who are very adamant about not using a child theme.

Which I think is ridiculous.

This blog is aimed at the beginner and intermediate front-end developer, but I do try to make sure it also addresses questions that newbies would have, which means I shouldn’t assume anything.. so here we are.

OK. Here’s a hypothetical situation:

If someone offered a pretty comprehensive deal for insurance on your car, and it was free, and all you had to do was sign the contract… would you? Or would you just say “oh, I’m not planning on getting into any accidents, so I’m ok?”

I think it’s pretty stupid and crazy to not sign up for free insurance.

What if that insurance covered modifications? What if the insurance covered all the oil changes and even regular maintenance?

“Nah, I’ll be driving safely, and I won’t open the hood, so I won’t need ANY insurance.”

Come on, how is it a good idea to NOT get FREE insurance?

 

That’s what a child theme is.

It’s insurance on your website.

It keeps everything on a different layer, so you’re much safer when things go haywire.

Let me explain.

A child theme is a smaller version of a theme that piggybacks on the “parent theme” and offers the same experience. BUT anything you do to the child theme while it’s activated, everything is retained inside the child theme. If you switch themes (even between child themes) then you can switch between those settings easily.

** side note:
This has allowed many popular (builder) themes to provide a framework, and have lots of companies offer child themes as finished products. They’re usually called “premium” child themes and quite a few companies are heavily invested in this business model. You can find child themes for Genesis, Divi, Storefront, etc. This is slightly different from offering “demo content” which is usually a json file being loaded to get all the settings and content running to minimize customizations.

Also when I mean child themes, I usually do not mean “premium” child themes. I mean the basic child theme, without any particular customizations pre-installed.

 

So, what constitutes a child theme?

In the past, it was made possible with just one styles.css file in a folder, and adding CSS to that file to override the parent theme. Simpler times.

Now, it’s been taken further, and done more comprehensively. So now, the stylesheet is enqueued (loaded) with a dependency on the parent theme (meaning, if the parent theme doesn’t load, then the child theme doesn’t load).

What’s great about child themes is that you can include a lot of extra php files and override the parent theme’s files. This is great for sitewide customizations.

Nobody is debating that. Not even the misguided souls that I will have to address below. No one is debating the fact that child themes are needed when the customizations are extensive.

Now for the frustrating part.

Here’s what a lot of (irresponsible and misinformed) “WordPress developers” say with quite a bit of (misguided) assertion:
“You only need a child theme if you’re going to make customizations, and if it’s just for a bit of CSS, then you don’t need it.”

I’ve seen that comment uttered/typed quite often.

To be fair:
Yes, it is possible to update the theme without a child theme and keep the extra custom CSS that was added in the “custom CSS fields” that many themes offer on their theme options page. This is because the CSS in that field is saved in the database, and is enqueued by the theme on the front end. So a theme update won’t disturb the extra CSS.

So we need to talk about this irresponsible argument. (I say irresponsible because if a car salesman tells a buyer that free comprehensive insurance is unneeded.. that’s irresponsible.)

Now I know that some people are just stubborn to no end, and will not ever give up on their stupid opinions. Stupid people vehemently arguing stupid opinions against blatant facts are a problem, and I can’t do anything about those people. I can’t change the world, but if I can get some people to start using child themes as standard practice, then.. I’ve at least done my part. So, in case I help anyone wanting to learn, and change, then.. please read on.

It’s been established that there are many advantages of using a child theme, right?

We’re past that now, right?

OK.

So, let’s look at other aspects, and to be fair, we can talk about websites that require only “a bit of CSS.”

ONE. Future proofing.

There can be more edits in the future, and a case where a child theme is needed may arise. Migrating to a child theme from a parent means that all the theme settings will have to be inputted again (or as a json file depending on the theme) which is a pain. This could have been avoided if a child theme was used.

Oh, you’re SURE there will be no edits worth having a child theme?

Alright then… let’s go on..

TWO. It can be very tricky for anyone who inherits the site.

There is no way to know what edits have been made, meaning updating anything comes with a huge liability. And the person who inherits the website will be very unhappy.

That was about professional courtesy, which some people might not care about. Especially if it’s your own website, right? Then this one is really important.

MOST IMPORTANTLY

THREE. The child theme provides a layer of customizations that can be packaged real easily.

Let me explain.

The theme that is activated has its own set of customizations that are saved in the database.
Something like:
“Theme A – white header, logo1, blue text, CSS snippet 1” will be saved in the database.

If you‘re experimenting with some ideas, and then you’re suddenly not sure if that’s the way to go, then you can easily deactivate (child) theme A, and start a new (child) theme named B.

That will save “Theme B – red header, logo2, green text, CSS snippet 2” in the database. (This includes the CSS in the theme options, but not the builder module settings)

You can switch back to child theme A with a couple of mouse clicks, and you get all your theme settings back. Everything that’s been saved will come back, including the theme options in the backend, and the front end theme customizer, and all the CSS that’s been entered via those panels.

There you have it. A few advantages of having a child theme even if all you’re doing is just a couple of edits.

Conclusion

YES child theme -> a bunch of advantages, and NO disadvantages
NO child theme -> NO advantages, and some possible disavantages

I’m sure you can make your own decision now. Right?

 

So PLEASE. Use a child theme.

 

If you need a child theme CLICK ME to use this plugin (child theme configurator) and set one up.

or

Get a free Divi child theme here

Oh, and one more thing. If you’re a designer/developer, then you can add the screenshot.png file and brand the child theme, and even name it so it looks custom.

Photo by Amy Velazquez on Unsplash

The post WP – Opinion (sort of) – Do you need a child theme? appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-opinion-sort-of-do-you-need-a-child-theme/feed/ 2 2477
Divi Tutorial – animating button backgrounds https://almostinevitable.com/divi-tutorial-animating-button-backgrounds/ https://almostinevitable.com/divi-tutorial-animating-button-backgrounds/#respond Wed, 30 Jan 2019 15:40:42 +0000 https://almostinevitable.com/?p=2102 Let’s learn how to make some cool CSS based button animations. This one’s relatively easy. Let’s start with the video:   This is a gradient button This is a gradient button This is a gradient button This is a gradient button   The trick is giving the background a gradient, make it larger than double […]

The post Divi Tutorial – animating button backgrounds appeared first on Almost Inevitable Design.

]]>
Let’s learn how to make some cool CSS based button animations.

This one’s relatively easy.

Let’s start with the video:

 

 

The trick is giving the background a gradient, make it larger than double the button, and aligning the left sides.
Then, on hover, move the background so its right side will align with the right side of the button.

With some clever gradients, you can make some pretty cool effects.

Where do you get the gradient? Just click on any of the cool buttons above. haha
I added the link to the buttons.

Here’s the CSS you see in the video.

.et_pb_button.background-animation {
    display: inline-block;
    border-radius: 1px;
    border: 0px;
    padding: 10px 17px 10px 20px;
        letter-spacing: 3px;
        color: #fff;
        font-size: .75rem;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-weight: 700;
    

    background-size: 250% auto;
        background: rgb(255,183,107); 
        background: -moz-linear-gradient(-45deg, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,252,249,1) 51%, rgba(255,183,107,1) 55%, rgba(255,127,4,1) 100%); 
        background: -webkit-linear-gradient(-45deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,252,249,1) 51%,rgba(255,183,107,1) 55%,rgba(255,127,4,1) 100%); 
        background: linear-gradient(135deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,252,249,1) 51%,rgba(255,183,107,1) 55%,rgba(255,127,4,1) 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=1 ); 
        -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;
}
.et_pb_button.background-animation:hover {
    background-color: transparent;
    border-radius: 1px;
    border: 0px;
    padding: 10px 17px 10px 20px;

    background-position: right center;
        -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;
}
.et_pb_button.background-animation:after {
    display: none;
}

Note: watch the video for more explanation on which lines can be taken out, or edited. (basically the first blocks, so 2-12, 28-31 can be taken out and styled within the builder as long as you don’t touch the background settings, and 16-20 is what you swap out with your own custom gradient)

So paste that CSS here:

 

Next add the custom class to the button like this:

 

And you will be finished.

 

Please leave a comment if you have any questions!

 

Here are some other similar tuts you might enjoy




 

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]

Featured Image Credit: Photo by Ashkan Forouzani on Unsplash

The post Divi Tutorial – animating button backgrounds appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tutorial-animating-button-backgrounds/feed/ 0 2102
Divi – Styling the blog module https://almostinevitable.com/divi-styling-the-blog-module/ https://almostinevitable.com/divi-styling-the-blog-module/#comments Wed, 09 Jan 2019 15:37:04 +0000 https://almostinevitable.com/?p=2388 Hey guys, here’s a really easy way of adding two layout options to the blog module. The code First, take this CSS snippet, and add it to the theme. (Divi > Theme Options > Custom CSS) Note: You can change the % to change the ratios. Also, they just stack on mobile.   Remember: This […]

The post Divi – Styling the blog module appeared first on Almost Inevitable Design.

]]>
Hey guys, here’s a really easy way of adding two layout options to the blog module.

The code

First, take this CSS snippet, and add it to the theme. (Divi > Theme Options > Custom CSS)

/* The CSS for getting a double columned blog */
.et_pb_module.double-column .et_pb_ajax_pagination_container {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .et_pb_module.double-column .et_pb_ajax_pagination_container article.et_pb_post {
    width: 45%; }
    @media all and (max-width: 479px) {
      .et_pb_module.double-column .et_pb_ajax_pagination_container article.et_pb_post {
        width: 100%; } }

/* The CSS for having the featured image on the left */
.et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post {
  width: 100%; }
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-featured-image-url {
    width: 45%;
    float: left; }
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-title,
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-meta,
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-content {
    width: 50%;
    float: right; }
  @media all and (max-width: 479px) {
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-featured-image-url,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-title,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-meta,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-content {
      width: 100%;
      float: none; } }

Note: You can change the % to change the ratios. Also, they just stack on mobile.

 

Remember: This trick works only with the fullwidth layout for the blog module

 

The next part is really easy.

 

Double Columns

This part’s really easy. Oh, I mentioned that already.

Add a blog module, and then in the advanced tab, add a class “double-column”

… and you’re done.

Voila

Easy Peasy.

Next!

 

Featured Image on the Side

Add a blog module, and then in the advanced tab, add a class “image-on-the-left”

… and you’re done.

like this:

Pretty easy, right?

 

Extra: If you need a comprehensive tutorial on how to control the archive page (like when you click a category, you get whisked off to an archive page) click on the image below to check it 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

 

[contact-form-7]

 

 

Photo by oldskool photography on Unsplash

The post Divi – Styling the blog module appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-styling-the-blog-module/feed/ 5 2388
Opinion – Re: Moving away from Divi? https://almostinevitable.com/opinion-re-moving-away-from-divi/ https://almostinevitable.com/opinion-re-moving-away-from-divi/#comments Wed, 09 Jan 2019 12:43:30 +0000 https://almostinevitable.com/?p=1735 So, there are a lot of people criticizing Divi for leaving behind a bunch of shortcodes. Wait, let me correct that. There are a lot of people on Elementor’s payroll that criticize Divi for leaving behind a bunch of shortcodes. (The loudest of the complainers) basically, there are a lot of people that criticize Divi […]

The post Opinion – Re: Moving away from Divi? appeared first on Almost Inevitable Design.

]]>
So, there are a lot of people criticizing Divi for leaving behind a bunch of shortcodes.

Wait, let me correct that.

There are a lot of people on Elementor’s payroll that criticize Divi for leaving behind a bunch of shortcodes. (The loudest of the complainers)

basically, there are a lot of people that criticize Divi for leaving behind a bunch of shortcodes.

Why do I make that distinction?

Well many new page builders (Elementor, Beaver, to name a couple) pride themselves in “not leaving behind any shortcode residue” upon deactivation.

Let’s discuss this..

 

1. There’s nothing wrong with shortcodes

Absolutely nothing wrong.

I still remember when WordPress first got shortcodes in ver. 2.5 (in 2008) and I was so happy with my newfound super power.

 

 

That’s how the page builder industry became such a huge thing.

That’s how WordPress became such a huge thing.

 

Lemme say that again for y’all:

Shortcodes massively helped WordPress take over the web industry.

We started with shortcodes letting us easily define columns and buttons and CTAs, and moved onto putting them in the text editor so it’s easier to define them without memorizing the shortcodes. Then we went onto a plugin that let us drag and drop things… and BAM page builders.

Now the question arises: Is this legacy, and should we move on?

No. There’s no reason to.

Mainly because I don’t think shortcodes are outdated.

This is because shortcodes are small macros. It really doesn’t matter if that’s how it builds pages. As long as you’re using the page builder interface well, and/or copy pasting the right shortcode, there’s absolutely no reason shortcodes to be considered be either outdated or useless.

Also..

Divi, Avada, Enfold, Flatsome, Jupiter, Bridge, BeTheme, Salient, Impreza, and Uncode… (many of which use) WPBakery Page Builder (aka Visual Composer), and SiteOrigin Page Builder, etc

It’s safe to say that if you’ve used WordPress, you’ve heard of at least one of those products.

They ALL use shortcodes. Just combining those sales/installation numbers would give you tens of millions of WordPress websites.

 

 

And those are just in the page-building area. If you consider all the other plugins that offer other functions..

like Contact Form 7, or Woocommerce…. or pretty much ANY widely used plugin that adds significant functionality to WordPress uses shortcodes. Shortcodes are not only here to stay, they power WordPress, and ultimately, the internet.

So… “Divi leaves behind shortcodes” being a problem is malarky. Gimme a break.

Using shortcodes is not a problem.

 

2. The alternative solution isn’t any better

I’ve given the (in)famous Elementor more than enough chances. I’ve really tried to get used to it. I’ve even suggested it to some DIY clients.

This post is not about using Elementor (that’s for a different post, different day), so staying on topic, when Elementor is deactivated… you end up with useless crap. WTF.

THAT’s what the Elementor crowd was raving about?

 

 

What’s the use of having some raw html? Does it retain anything? No.

Without Elementor’s stylesheets enqueued, what’s left is just as useless as any other page builder deactivation artifacts. GTFO with your pretentiousness. ugh.

 

3. You’re gonna be building fresh anyway… right… right?

You build a website with a page builder. Now you want to try another page builder. So you need to keep the content, and start using the new page builder to build.. a.. new… page. Right?

 

So…….. you copy paste the text somewhere, and use that when building the new page. The images are already in the library… (or you upload more)

At what stage do you need to even check what’s left of the page on deactivation? Caring about that sounds pretty stupid.

 

Here’s an analogy:

You’re redoing your bedroom. You pull out all the furniture to paint the walls and put in a new carpet. Then you get angry that the old carpet has marks on it, and the walls are dirty before you paint them. You still have your furniture, right? And you’re redoing the room. What’s the problem?

 

 

I find nothing wrong with that. Deactivating Elementor, and activating Beaver doesn’t make ANY process easier, at all. Foaming at the mouth trying to convert others to use the product you “like” just seems… weird. Especially when the arguments are stupid too.

 

Hey check this out:


Yeah… I was surprised to say the least.

Anyways, share this post with your friends. 🙂

[contact-form-7]

 

Photo by frank mckenna on Unsplash

The post Opinion – Re: Moving away from Divi? appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/opinion-re-moving-away-from-divi/feed/ 2 1735
WP – SVG problems with WP 5 https://almostinevitable.com/wp-svg-problems-with-wp-5/ https://almostinevitable.com/wp-svg-problems-with-wp-5/#respond Fri, 21 Dec 2018 15:05:52 +0000 https://almostinevitable.com/?p=2352 Oh man, WordPress 5.0 is becoming more of a problem than I thought. So, something that I’ve noticed is that SVG files are not uploading. UGH. I use a lot of SVG files. Yeah, there’s a security risk, which happens because some punks hide bad code in their SVG files and give them out. But […]

The post WP – SVG problems with WP 5 appeared first on Almost Inevitable Design.

]]>
Oh man, WordPress 5.0 is becoming more of a problem than I thought.

So, something that I’ve noticed is that SVG files are not uploading. UGH.

I use a lot of SVG files.

Yeah, there’s a security risk, which happens because some punks hide bad code in their SVG files and give them out. But since I make my own SVG files, and check the code before I upload anything, I’m OK… and y’all should too.

Oh, tip:

If you have to get your vector files from places like flaticon.com, then, get the eps, and open it in Illustrator, and then export it. (I’m sure they have clean svg files, but I rarely use unedited files anyway..)

So, here’s the problem.

Suddenly, all my builds started telling me this

What????

Sorry, this file type is not permitted for security reasons.

 

First things first

Here is the code that allows svg uploads.

//add SVG to allowed file uploads
function add_file_types_to_uploads($file_types){

    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );

    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Add that to the bottom of your functions.php file.

You should have a child theme, add this to the bottom of the child theme’s functions.php file. Get a free Divi child theme here, which has this code already included.

 

But it doesn’t work anymore. WHY NOT????? (btw, even svg plugins won’t work either. ugh)

The answer is here.. but who cares, it doesn’t work, and we need to make it work.

The fix

Step 1. Keep the code intact.

Yeah, that code is correct, it’s just the WP has blocked it for some reason, and it’ll come back soon. (probably) So yeah, leave it.

 

Step 2. Add this to the svg files.

So open the svg file in a text editor, and add this in the front.

<?xml version="1.0" encoding="utf-8"?>

Turns out this will fix it. huh.

At the moment, it’s not the svg files that are the problem, it’s WP being cranky.

 

BUT, unfortunately, the easiest fix for this is to edit the svg files.

So yeah, anyways, that’s how you can upload svg files again. UGH.

 

I’m not happy with WP 5. I’ll have Gutenberg + Divi review up soon.

 

Photo by Sandro Katalina on Unsplash

ps. I’ve seen that 4.9.9 has the same problem.. and this will fix it just the same.

Update: it seems that the SafeSVG plugin can circumvent this problem easily. So there you go. Problem solved. haha. I’mma go install that now.

 

[contact-form-7]

The post WP – SVG problems with WP 5 appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-svg-problems-with-wp-5/feed/ 0 2352
WP 5 + Divi 3.18 https://almostinevitable.com/wp-5-divi-3-18/ https://almostinevitable.com/wp-5-divi-3-18/#respond Mon, 17 Dec 2018 10:42:32 +0000 https://almostinevitable.com/?p=2320 Hi! I’m writing this in Gutenberg. Woah.  Is it good? We’ll see.  I’m not on Divi 3.18 though, this is Extra 2.17 (which is the equivalent, since Extra is a version number behind) It feels surreal though. Normally I write blog posts in the text editor mode, not the visual editor, nor the Divi builder. […]

The post WP 5 + Divi 3.18 appeared first on Almost Inevitable Design.

]]>
Hi! I’m writing this in Gutenberg. Woah. 

Is it good? We’ll see. 

I’m not on Divi 3.18 though, this is Extra 2.17 (which is the equivalent, since Extra is a version number behind)

It feels surreal though. Normally I write blog posts in the text editor mode, not the visual editor, nor the Divi builder. They seem to get in the way of what I’m doing anyway. 

So getting to the main point of this post, I’ll just make it quick. (I’ll be writing my thoughts on Gutenberg in a separate opinion piece.) 

Updates should be done in the following order: 

Plugins. Themes. WP Core. 

That’s pretty much it. Just update everything in that order, and most of the time, you’ll be fine. Of course, there are some basic settings you’ll have to have in place for this to work. Make sure you have the following in place before you update anything.

1.php 7+ : If you’re on any version of php5, and you make websites in exchange for money… then.. shame on you. Seriously. Go switch to php 7. Now. Go to cPanel > software > php version (click) > Select version (select) > Use defaults (click) > Set as current (click) and you’re DONE. 

2. FTP connection: It’s always safe to have ftp access before you update anything. If you get any errors, and WP is acting up, it’s going to be hard to edit anything to fix it. So ftp is crucial. 

3. phpMyAdmin access: (database access) This is also helpful to have. I’ve had trouble after migrations and/or updates where WordPress acted up for some unforeseeable reason, and having access to the database allowed me to force some content and settings without dealing with WP’s histrionics. (Access is available via cPanel)

4. Backup: You’re gonna need a backup. Make sure you have a backup. Duplicator, All-in-one migration, Updraft, and/or a whole server backup. They’re all good options to have. Make sure you backup before you do any significant updates. 

So yeah, I hope you get your WP installation to work! Good luck!

PS. Almost forgot. If you want to use Divi as you did before, the settings are in Theme Options > Builder > Advanced. Flick on the “Enable classic editor” and you’ll be ok.

[contact-form-7]

Photo by Chris Meads on Unsplash

The post WP 5 + Divi 3.18 appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-5-divi-3-18/feed/ 0 2320
Take control of the contact form https://almostinevitable.com/product/learn-contact-form-7-for-divi/ https://almostinevitable.com/product/learn-contact-form-7-for-divi/#respond Wed, 12 Dec 2018 04:06:55 +0000 https://almostinevitable.com/?p=2306 Online course: Learn how to make awesome contact forms that will upgrade your web development! (With some simple copy paste)

The post Take control of the contact form appeared first on Almost Inevitable Design.

]]>
The post Take control of the contact form appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/product/learn-contact-form-7-for-divi/feed/ 0 2306
Divi Tutorial – Make your own custom megamenu https://almostinevitable.com/divi-tutorial-make-your-own-custom-megamenu/ https://almostinevitable.com/divi-tutorial-make-your-own-custom-megamenu/#comments Tue, 11 Dec 2018 17:24:41 +0000 https://almostinevitable.com/?p=2083 Have you tried to add a mega menu to Divi? Not very fun, eh? Well, there’s this to start with: https://www.elegantthemes.com/blog/divi-resources/adding-images-to-your-divi-mega-menu It’s sort of like a mega menu.. but doesn’t give you enough creative freedom. So.. we go on to another method. The video   Details   We need two things to get this done. […]

The post Divi Tutorial – Make your own custom megamenu appeared first on Almost Inevitable Design.

]]>
Have you tried to add a mega menu to Divi? Not very fun, eh?

Well, there’s this to start with: https://www.elegantthemes.com/blog/divi-resources/adding-images-to-your-divi-mega-menu

It’s sort of like a mega menu.. but doesn’t give you enough creative freedom.

So.. we go on to another method.

The video

 

Details

 

We need two things to get this done.

 

ONE. This child theme

This child theme allows you to take layouts in the Divi library and use them as shortcodes everywhere.

 

TWO. This plugin

Shortcode in Menus

 

How to put them all together

First, go to Divi > Divi Library and make a layout or a section, or whatever you need.

Save it.

Now if you revisit Divi > Divi Library, you’ll find that there’s now a new shortcode for the layout. Copy that. You’ll need it later.

Next, go to Appearance > Menu and follow the instructions.

  1. Open screen options (upper right hand corner of screen)
  2. Check CSS classes in the panel you just opened.
  3. Add a custom link menu item with # in the URL. Once added, open it to add “mega-menu” in the custom class.
  4. Drop the shortcode into the content field in the “shortcode” menu box, and add that to menu.
  5. Make sure that item is a submenu of the menu item you just made in step 3.

Save all that, and you’re done.

There you go. Mega menu.

 

Photo by Christelle BOURGEOIS on Unsplash

The post Divi Tutorial – Make your own custom megamenu appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tutorial-make-your-own-custom-megamenu/feed/ 9 2083
Divi Tutorial – Blog Category Pages https://almostinevitable.com/divi-tutorial-blog-category-pages/ https://almostinevitable.com/divi-tutorial-blog-category-pages/#comments Tue, 11 Dec 2018 09:24:41 +0000 https://almostinevitable.com/?p=1717 Here’s how to customize the blog page / the category archive page. Oh boy.. this is one of the most requested Divi updates ever, isn’t it? This and the header. Yikes. As for the header, give these guys a check before you lament about the lack of custom headers.   Get the essentials first   […]

The post Divi Tutorial – Blog Category Pages appeared first on Almost Inevitable Design.

]]>
Here’s how to customize the blog page / the category archive page.

Oh boy.. this is one of the most requested Divi updates ever, isn’t it?

This and the header. Yikes.

As for the header, give these guys a check before you lament about the lack of custom headers.

 

Get the essentials first

 
But first, you need a child 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  

and
Converting a layout to a shortcode

 

Header stuff

The header archive

 

Oh, and if you have ideas or inspiration for headers just send me an email, and I’ll try to make a tutorial for it.

So yeah.. let’s get on to..

 

Building blog category archive pages with the divi builder

Now, for starters, and let’s get this out of the way:

If you want any blog styling, I strongly suggest using Extra.

Extra is awesome at what it does, and it actually has MORE features than Divi.

You can use it exactly like how Divi works, while giving you full control over the blog and its archive pages.

I don’t know if you care, but this website is made with Extra, and I find it better than Divi in some ways. heh.

The one problem people keep bringing up is the “how do I make pages like I do with Divi?” issue.

Well, here you go:

Tip: For people struggling with the full-width capability, make sure you get these settings in the page, and you get a full width Divi builder canvas just as you would in the Divi theme.

So now you can just build a site like you would on Divi, just with better blog control.

Seriously, give Extra a try.

 

However…

If you wanna stick with Divi, then let’s get started.

(Long) Video

 

Timestamps:
– Method 1 (1:50): Use Extra
– Method 2 (4:30): Customize the php files
– Method 3 (15:20): Use a redirection plugin

You can watch the video, or scroll down for more explanations.

 

The main problem with making a cool category page with Divi is the way WordPress works.

The way WP works with categories is that it creates an archive page that is auto-generated from the loop. (The “loop” is a core WP php section that finds the content and displays them all as long as it exists.) These archive pages are can be found in the eponymous file archive.php.

A common example is the Woocommerce shop page. Notice how it’s really hard to style that page? You make a nice shop page, and once you look at a product, and click on “go back to shop” or click on a category, it just… acts like that pretty page you just made isn’t even there. It’s because WP (and woocommerce) automatically generated it from the archive.

There are a few ways to fix the WP archive problem.

 

One. Use Extra.

Yeah, I’ve already mentioned it, but it’s really worth it.

No? You need a Divi solution? k

 

Two. Just style the archive pages

If you’re a fan of the sidebar and Divi full-width style blog module, then you’re good to go.

 

 

All you need to do is use the Divi single post layout settings, and style some parts, and you’re good to go!

 

 

But here’s the most frustrating part.

A lot of people seem to like the blog card view (masonry), but this is NOT a theme option. (Unfortunately, I don’t see them adding this any time soon… because… they have EXTRA. Seriously, give it a chance.)

 

Three. Edit the archive file and/or the category files

When WordPress is asked to display a category as an archive, it first checks if the archive.php is sound. Next, it’ll look for category-slug.php. Once WP sees it, it’ll use that as the template.

So what you need to do is.. simple.

Here, you have two options.

A. Use PHP, HTML, and CSS to make and style your own archive page.

This takes a bit of time. It’s fun, but it really takes a bit of time, and many budgets cannot cover the whole custom route.

If you’re just looking at styling it a bit, here’s one simple copy-paste solution/tutorial you might like.

So with php, once you learn how to get posts inside the loop, you can build whatever/however you want. I’ve made fully custom designed posts and archives that look pretty nice… here’s an example:

 

 

Our designer did a great job, so it looks really great, and works equally awesome. Especially since with one video tutorial, the client could learn how to populate all that stuff themselves without breaking anything accidentally (or ambitiously fiddling with the visual builder).

So… that was all done with ACF, PHP, HTML, and SCSS. Fun.

However…

 

Here’s option B.

B. Make a layout in the Divi library and drop the shortcode into a php file that you make for that specific category.
This is way more doable.

 

The basic approach is:
Get a way to get Divi library items into a shortcode. Check out this post on how to do it. (It’s the same link that I had on top of this post) And seriously, use a child theme.

1. Make a category layout in the Divi Library (Divi Library > Add new > layout) and save it. You will now have a shortcode that you are going to use in a minute
2. Take page.php (from the Divi folder) and duplicate it, drop it into the child theme, rename it to category.php and delete everything from line 10 to 69. (This file should be in the child theme.)
3. Drop the shortcode you got from step 2, and insert it here:

<?php echo do_shortcode('the shortcode should go here'); ?>

4. Take that php snippet and paste it in line 10 of category.php

And you’re done.

Click me to check out a styled blog module tutorial that you might enjoy.

If you want to make more custom layouts for different categories, then make more layouts, and duplicate the php files, then name them category-name.php and drop each shortcode in its respective file.

DONE.

BUT.

Here’s an easier method.

Frankly, I prefer and suggest this the most. haha Seriously, it’s so easy.

 

Three. Use a redirect

This is one of those hacks that.. works way better than you’d think. In fact, it works so well that you end up forgetting about how you set it up in the first place.

(note: You would have set up your permalinks in a way that you like them, and sometimes your permalinks could be slightly different from what is shown here. The solution is the same, just different character strings.)

Let’s start with this plugin:

https://wordpress.org/plugins/redirection/

Get that installed and let’s get going!

 

Basically what we’re going to be doing is taking what the category (or tag) archive URL is and redirecting it to a page of our choice.

 

So once you’ve installed it, go here

 

The important thing to remember is that you need to use a RELATIVE URL. So start with what comes after the .com

If you want to redirect a blog category, most likely it’ll be something like /category/nameofcategory and you can send it to a page like /nameofcategory

Try to make the page slug as clear as possible so it won’t cause problems concerning SEO.

 

and… voila. Easy.

 

I personally think this is the easiest way of setting up category pages, and they’re all 301 redirects so you won’t have any problems with Google or get 404 errors either.

 

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]

 

update: June 25th, 2019 – cleaned up the text a bit, added some relevant links.

Photo by Dan Gold on Unsplash

The post Divi Tutorial – Blog Category Pages appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tutorial-blog-category-pages/feed/ 10 1717
WP Tutorial – Styling Various Contact Form Plugins https://almostinevitable.com/wp-tutorial-styling-various-contact-form-plugins/ https://almostinevitable.com/wp-tutorial-styling-various-contact-form-plugins/#respond Mon, 10 Dec 2018 17:24:41 +0000 https://almostinevitable.com/?p=1277 Here's a simple rundown of styling most/all contact form plugins, and tips on making them look great.

The post WP Tutorial – Styling Various Contact Form Plugins appeared first on Almost Inevitable Design.

]]>
Contact forms are one of the most important features of a website, and in this post, I’ll try to go over some styling tips concerning contact forms.

I recently saw a FB post asking what people thought an essential function of a website should include.

I think it’s the contact form. Nothing even comes close in my opinion.

 

Even landing pages with a “coming soon” banner have contact details. Take away every other function of a website. All you have left is…. a contact form.

So yes. Contact forms.

Introduction

My choice of contact form plugin is Contact Form 7.

I think it’s the best bare-bones stupidly well-functioning plugin there is.

It’s also free.

It also has a lot of addons available.

BUT it’s a bit tricky to style well.

 

Warning: this is a looooong post. So I’ve separated it into 3 chapters. The list below is linked to the chapters.

 

Styling Contact forms

Styling a contact form comes in (I think) three major components.

1. The layout and its responsiveness
2. The fields and their micro-animations
3. The submit button and its macro-animation

Note: These bullet points are just for the styling aspect of a contact form, not the functions or the planning for maximizing lead generation. JUST the styling.

 

the layout

As for layouts, if you’re using something user-friendly like Gravity, Caldera, Ninja, Formidable, or Quform (or something similar with a drag and drop interface), then you would already have a pretty usable layout method. Most of those forms have their own way of making half-width or thirds columns. Which is great.

On mobile, they all stack well, so that’s also good.

However, they all share one important problem, they’re all slightly harder to style when you get to steps 2, and 3.

That’s, of course, because they do a good job on their own. They usually have their own stylesheets that dictate much of the look and feel and with a 2 or 3 columned row they simply stack on mobile, which is usually good enough.

 

If you’re using Contact Form 7, it’s a good idea to plan for responsiveness during the building process.

Some easy ways for coding this in HTML for Contact Forms 7 would look like this:

<div class="hole-form">
	<div class="one-row">
		<div class="one-field left">
			[shortcode for a field goes here]
			<!-- This shortcode would come from CF7 -->
		</div>
		<div class="one-field right">
			[another shortcode]
		</div>
	</div>
	<div class="one-row">
		<div class="one-field left">
			[a second row of fields]
		</div>
		<div class="one-field right">
			[also in the second row]
		</div>
	</div>
	<div class="one-row">
		<div class="one-field full">
			[shortcode for a message field can go here]
		</div>
	</div>
	<div class="one-row">
		<div class="one-field full">
			[shortcode for submit button]
		</div>
	</div>
</div>

Couple that with css like this:

.hole-form {
	width: 100%; 
	/* change this to get a different sized form */
	display: inline-block; 
	/* I like using inline block because it's easy to center */
}
.hole-form .one-row {
	width: 100%;
	overflow: hidden; 
	/* if the divs inside are floated, 
	then the height cancels out, 
	so this helps the parent div enclose 
	the floated divs inside */
}
.hole-form .one-row .one-field {
	margin: 5px 0px; 
	/* Margin on top and bottom 
	so the fields won't stick together */
}
.hole-form .one-row .one-field.left {
	width: 48%; 
	/* not 50% so they won't stick together */
	float: left;
}
.hole-form .one-row .one-field.right {
	width: 48%; 
	/* not 50% so they won't stick together */
 	float: right;
}
.hole-form .one-row .one-field.full {
	width: 100%;
 	float: none;
}
@media all and (max-width: 479px) {
	.hole-form .one-row .one-field.left, 
	.hole-form .one-row .one-field.right {
		width: 100%; 
		float: none;
	}
}

And you are ready to roll. It’ll look like this:

(note: there are a few different ways of achieving this,
like flexbox (with justify content, and flex wrap),
or tables (enclosing the rows in table rows and the fields in half-width divs),
or inline blocks (all divs are inline blocks and move around thusly)…

here, I’m using the classic approach of divs and floats. It’s a basic CSS method, and it’s very reliable and easy to understand.
I personally use flexbox, because.. I love flexbox. haha)

Here’s a course I made featuring a lot of flexbox:

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

So, about styling these puppies, a couple of tips:

Don’t place them over an image. Especially a busy one. Almost no amount of darkening/lightening of the background overlay is going to save the contact form. Seriously, don’t do it. Use that image somewhere else. Look down at your (paper) notebook/notepad. Are you writing over an image? Most likely not, right? Simple rule of thumb, if you can write over it with a pen, then ok, otherwise, avoid. Writing on a clean surface is much more user friendly than writing over an image. I don’t want to name names, or point fingers, but there are a lot of contact forms that really gave up on legibility.

Here, have a look.

Pretty hard to read/write, right?

Compare that to this (About 3% better than before):

– Another thing that you don’t want is full-width contact forms. Try to go with a half-width form (or at least a 2/3 width). Even regular paragraph text is hard to read if it’s too stretched out horizontally, (Extra reading on this here and here.) This applies to the users’ typed content as well. If it’s too long horizontally across, then the eyes have trouble following the content.

Compare the above layout to this:

Now it’s easier to follow what you’re writing (and to proofread) through the line breaks.

However, I still think the background is a bit too busy, and I would like the “let’s talk” left aligned, plus, I prefer not to drop any opacity for the background (for better legibility) If I had to improve the above contact form section with three clicks, it would be background image, background opacity, and title alignment. So..

Also,

Make sure the labels respond with the fields and move together. Also, I really suggest putting the label above the field. People read from top-down, so it’s natural. You’re not going to win any design awards by putting the label underneath. Usability is important.

Case Study

I usually don’t include real-life examples, but this website bamboozled me. I was trying to sign up, and I kept putting text in the wrong field. Ugh.

This input field does not look too bad on desktop, luckily, the form has a solid white background, so that part was good.

However, when you check it on mobile where everything stacks, the labels are under the fields.. giving you this:

That is very confusing. It’s easy to get lost, and it’s easy to confuse which field is which.

Two reasons.
1. Scrolling and reading is top down, so you see the label after the field.
2. The spacing from a label to the next field is similar to the label to its field.

That website was one of the worst/most confusing input screens I’ve seen in a while. (Not the ugliest, there are plenty of those, but definitely the most confusing)

And another important thing about mobile we should always think about is that you need to think about the keyboard area. This leaves you with only a small area for text input. So instructions should be simple and direct.

 

Let’s move on to the next chapter.

=-=-=- Back to top – Table of contents -=-=-=
1. The layout and its responsiveness
2. The fields and their micro-animations
3. The submit button and its macro-animation

 

 

the fields

Most fields are just text input fields. You can be fancy and use number fields, date fields, and email fields, but except for the email field, there’s more hassle than convenience in many cases. ugh. I don’t like anything that’s a hassle. I have enough problems without contact forms adding to it.

Here is where the stying takes full effect. There are a lot of things you can do that don’t have to be overly funky, while making the form look good.

A couple of tips that I think helps:
Keep it simple and easy on the eyes. You’re styling input fields, not eye-catching headlines. People are going to have to write on those fields. So nothing jarring, surprising, or hard to read.

– Color-wise, make sure there’s enough contrast, and it’s easy to read what you’re typing.

– Also, make sure it’s easy to tell which field the user is typing in, so we will use the :focus pseudo element to style this.

Let’s give this a crack with the CSS below.

.customclass input[type=text], 
.customclass input[type=password], 
.customclass input[type=tel], 
.customclass input[type=email], 
.customclass textarea, 
.customclass select {
        width: 100%;
	margin: 0px 0px 0px 0px;
	border: 1px #222 solid;
	border-radius: 1px;
	padding: 10px 12px;
	background: #f5f5f5;
	font-family: Helvetica, Arial, sans-serif;
	color: #555;
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
    -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;
}
.customclass input[type=text]:focus, 
.customclass input[type=password]:focus, 
.customclass input[type=tel]:focus, 
.customclass input[type=email]:focus, 
.customclass textarea:focus  {
	border: 1px #f00 solid;
	background: #fff;
	color: #111;
    -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;
}

You should probably change the .customclass to something else, or you can just put “customclass” over the form you want styled.

A good rule of thumb for styling these fields:

Try to allow some padding so the text won’t feel claustrophobic.

– Also, try to keep the text size large enough that it’s easy for people to read what they’re typing.

 

=-=-=- Back to top – Table of contents -=-=-=
1. The layout and its responsiveness
2. The fields and their micro-animations
3. The submit button and its macro-animation

 

 

the button

The submit button is the last and most important step, right? Yes.

So, generally speaking, the submit button should be easily noticeable, and enticing. (Side not: The submit button most likely shouldn’t say “submit” – source it should probably say “send”, or some other action word.)

I’ve had a lot of contemplating on how to style the submit button, and here are my general rules of thumbs. (Thumbs? Thumb? Rules of thumb?)

The mouse hover should be for the whole button.

So what I mean is this:

Hi I’m a button

and not this:

Hi I’m a button

The reason why I think this is important is because the action of submitting works throughout the whole button. So the part that can cause the action should respond. All of it. If it reacts, it should be actionable.

For the sake of completion, here’s the css I’m using:

a.fun-button {
	display: inline-block;
	cursor: pointer;
	font-family: 'Libre Franklin';
	font-size: .8rem;
	font-weight: 700;
	padding: .5rem 1rem;
	background: transparent;
	color: #d00 !important;
	text-transform: uppercase;
	border: #d00 solid 1px;
	border-radius: 1px;
}
a.the-whole-button:hover {
	background: #d00;
	color: white !important;
}
a.just-the-text:hover {
	color: black !important;
}

=-=-=- Back to top – Table of contents -=-=-=
1. The layout and its responsiveness
2. The fields and their micro-animations
3. The submit button and its macro-animation

Conclusion

So there you have it. The bare bones basics of styling contact forms.

 

PS. I have not mentioned anything about SMTP settings, mailing services, MX servers, or the UX, UI, side of things, or anything on lead generation. I’ve had experience with all that, and my job does cover that side of web-related services, but, I have kept this post to strictly styling. I can write up some posts on adding functions to the contact forms, if you’d like, but for the record, I am not a fan of server-related issues and settings. No sireee.

 

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

 

Photo by Heather Shevlin on Unsplash
Photo by Dose Media on Unsplash

The post WP Tutorial – Styling Various Contact Form Plugins appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/wp-tutorial-styling-various-contact-form-plugins/feed/ 0 1277
Divi tip – Vertical controllers on slider https://almostinevitable.com/divi-tip-vertical-controllers-on-slider/ https://almostinevitable.com/divi-tip-vertical-controllers-on-slider/#respond Tue, 04 Dec 2018 15:39:54 +0000 https://almostinevitable.com/?p=2133 Here’s how to put the Divi slider/gallery/carousel controller dots to the side. Compared to my other tutorials, this one is probably one of the simplest. Just a snippet of CSS, and you’re DONE. woot. I won’t even make a video for this one. haha I will have to explain some stuff though.. NOTE: Hey, something […]

The post Divi tip – Vertical controllers on slider appeared first on Almost Inevitable Design.

]]>
Here’s how to put the Divi slider/gallery/carousel controller dots to the side.

Compared to my other tutorials, this one is probably one of the simplest. Just a snippet of CSS, and you’re DONE. woot.

I won’t even make a video for this one. haha

I will have to explain some stuff though..

NOTE: Hey, something went wrong with my current setup: WP5 + Extra 2.18.4
So I just put it in Divi + WP 4.9ish because… it works.

Check it out here.

Click me to go check it out

Here’s how to put the Divi slider/gallery/carousel controller dots to the side.

Compared to my other tutorials, this one is probably one of the simplest. Just a snippet of CSS, and you’re DONE. woot.

So, here’s what you do:

.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers {
  position: absolute;
  transform: translateY(50%);
  bottom: 50%;
  right: 30px;
  left: auto;
  display: inline-block;
  text-align: center;
  width: 15px;
  height: auto;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers a {
  display: block;
  background-color: rgba(255,255,255,.4);
  width: 12px;
  height: 12px;
  margin: 12px 0;
  border-radius: 50%;
  border: 2px solid #fff;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-controllers a.et-pb-active-control {
  background-color: #fff;
}
.et_pb_gallery.et_pb_slider.vertical-dots .et-pb-slider-arrows {
  display: none;
}

 

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]

 

Image Credits

Photo by Nathalie Jolie on Unsplash, Photo by Jannis Brandt on Unsplash, Photo by Jessica Ruscello on Unsplash, Photo by Joseph Gonzalez on Unsplash

The post Divi tip – Vertical controllers on slider appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tip-vertical-controllers-on-slider/feed/ 0 2133
Divi Tip – Making the social links open in a new window https://almostinevitable.com/divi-tip-making-the-social-links-open-in-a-new-window/ https://almostinevitable.com/divi-tip-making-the-social-links-open-in-a-new-window/#comments Thu, 01 Nov 2018 15:35:07 +0000 https://almostinevitable.com/?p=2107 Have you ever noticed that Divi’s social buttons do not open in a new window/tab? What’s up with that??? So here’s how to make the edits so Divi will open the social media buttons in a new tab/window. Video Let’s start with a child theme. If you don’t have a child theme, you should, so […]

The post Divi Tip – Making the social links open in a new window appeared first on Almost Inevitable Design.

]]>
Have you ever noticed that Divi’s social buttons do not open in a new window/tab?

What’s up with that???

So here’s how to make the edits so Divi will open the social media buttons in a new tab/window.

Video

Let’s start with a child theme.

If you don’t have a child theme, you should, so get one here.

One great thing about child themes is that you can override the parent theme’s template files. (Not all the files, just the template files. Read more here.)

The build

So, the social links are hidden in social_icons.php inside the “includes” folder in the parent theme.

You’re going to make a duplicate in the child theme. In the same place.

So, start by making an “includes” folder in the child theme.

Copy paste a duplicate of the social_icons.php file into that folder.

You’ll see some php and html code.

Line 5, 12, and 19 all have something like this:

<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">

that line of code is going to get a target=”_blank”

So it looks like this:

<a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" target="_blank" class="icon">

Do that for all three social icons, and you’re good to go. Save it, and you’re done.

Simple.

 

 

Here’s an example of how it’s set up

Here’s the download file you can unzip and drop into your child theme, just in case.

 

Related

Get the Instagram tutorial here: https://almostinevitable.com/divi-tip-add-instagram-to-the-social-links/

update

Thanks to David’s contribution, you could add the following jquery.. like in the header html, or in a code module (and then put it on the page)

<script>
	jQuery(document).ready(function(){
		jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
	});
</script>

 

Photo by Pamela Saunders on Unsplash

The post Divi Tip – Making the social links open in a new window appeared first on Almost Inevitable Design.

]]>
https://almostinevitable.com/divi-tip-making-the-social-links-open-in-a-new-window/feed/ 3 2107