Jr Designer thread - Wordpress edition
- Started
- Last post
- 8 Responses
- cherub
and by Jr Designer I mean, I'm not good at wp yet but I intend to be. lol.
It's a journey.
Wordpress is open, I'm learning things...
One slight tactical mistake I made so far. If you install a plugin like beaver builder to help build your page and you uninstall it, you end up with a broken site when you try to go re-edit using the built in wp editor.
Because apparently the different page builders don't play nice with each other, I wish I had know that before.
I know we have a wordpress thread but u guys are wordpress wizards. That thread is intimidating tbh.
Don't go too hard on me. I'm new.
- ********1
when you use most editors bakery, elementor, etc. you're kinda committing to using it, removal causes issues for all including css styles, pages, shortcodes. if mistakenly uninstalled then reinstalled you will still have loss of some things at times.
exports, backups, full downloaded dupes or even server side backups will always save you headaches when making drastic changes
https://duplicator.com/ plugin has been good to me over the years.
- free version:
https://wordpress.or…******** - and in reference to your 1st paragraph, there is probably no tool that you can install AFTER uv made the mistake that will tell you which builder created thecherub
- page. Normally I'd say look at the log file but I've heard wp doesn't keep a log file by default u need to install a plugin to access it.cherub
- export the database sql file for more reassurance********
- or simply never edit in production:
https://www.reddit.c…******** - there is probably easier ways to tell how pages were made but ive always just reviewed the raw source to make conclusions********
- you dont have to be a pro to post here:
https://www.qbn.com/…******** - there are some very knowledgeable wordpress devs on here that can always help********
- They are gurus for certain, I just didn't want to muck that thread up with my derpy wp fumbles. (which there are likely to be many many more)cherub
- Also I only understand about 40% of what's going on in the wp thread, if I'm being honest. I don't have designer vocabulary... yetcherub
- Holy rofl @ that reddit video pockets pffft...cherub
- free version:
- cherub0
Random question:
Is there anything inherently WRONG with just using the gutenburg block editor? Overall no one is making clear argument for what you CAN'T do with it to build a simple landing page.
I'm looking at these side by side page builder comparison videos on youtube. This guy's accent puts me off a bit... but he does come very close to answering a question I had around the 2:40 mark
(again, hard to understand thru that accent)
If I understood him correctly he is saying that the gutenburg editor is overly simplistic (so far so good) but one very important difference - is that with the gutenburg editor, your theme will override the styling in the editor. So if u are a doofus like me, and you've mangled up the text or fonts or whatever, you can just go into your theme and change it, and your theme (in the case, neve) has your back. The theme styling will override everything else anyway so your'e fine.
That's sounds great to me, I'd rather design my page in the neve sidebar anyway. It's very intuitive to be doing the design there, rather than clunk around with these rows and shit, I can't seem to ever drag and drop as easily as advertised.
RE: "you're kind of commiting to using it"
yeah I didn't know that in the beginning so now I'm having to loop back around and work some stuff out.
- I get it now. The page builders are independent of your theme.cherub
- :)********
- i disable gutenburg personally********
- ^yupYakuZoku
- Gutenburg was Wordpress trying to give all the people who were making sites with 'pagebuilder' add ons the ability to do all of that stuff within Wordpress.webazoot
- But it was/still is a bit of a mess. Not a fan of pagebuilders as you are behoden to whatever companys product you are using. But Gutenberg is not good either.webazoot
- Welcome to Wordpress in 2024.webazoot
- Ahhh good info. That's how Gutenberg came about... Makes sense.cherub
- cherub0
RE: 'Best Wordpress Practices'
Here are my choices on the Namecheap default Wordpress installation...
Now, if I google for this, google tells me on a fresh Wordpress installation you need:
Eleven essential WordPress plugins every site must have
1. A backup & security plugin like Jetpack. ...
2. A contact form builder like WPForms. ...
3. An anti-spam plugin like Akismet. ...
4. An SEO plugin like Yoast SEO. ...
5. A lead generation plugin like OptinMonster. ...
6. A WordPress CRM like Jetpack CRM. ...
7. An eCommerce plugin like WooCommerce...
8. 8. A legal pages builder like WP AutoTerms...
9. A redirect plugin like Redirection...
10. 10. A code inserter like WPCode...
11. A performance plugin like Jetpack Boost...Of course this list is too general, in reality you'll tweak/adjust to fit the website in question. So we're talking about, in MOST cases you'll need these plugins...
IF this were a TEST here's how I WOULD answer I you asked me, "Which of these are needed for fresh wp install?"
(I'm not cheating with google, this is just off the top of my head)
1. Security is #1 but not sure if there exists something better than jetpack, also the loginizer is necessary in case jetpack doesn't do that.
2. This is really useful, yes.
3. Antispam is probably right behind security, Akismet is pretty standard but u need a license key iirc. It's free tho.
4. SEO definitely needed, I like semrush / backlinko, but there are many that will do the job.
5. I'm not a marketer... not sure about this one.
6. CRM? Please speak English. No clue.
7. Ecommerce plugin... never used but excited to try. yes.
8. I have not even thought yet about legal compliance. **sweats profusely**
9. Redirect, umm. This is for broken links. So, yes? Unsure.
10. For code I used some PHP code inserter.
11. This one is silly. What is this doing, exactly? Minify the code? Why can't Wordpress put this in natively? Unless some people need slow Wordpress, that's why it's not native? Makes no sense. But yes, some speedup sounds good. Many choices tho.
What do actual designers say? What are the clutch WP plugins that u tend to use on every install?
Eager to hear your response... I probably got alot of these answers wrong
- I normally end up using Yoast and Contact Form 7 on most sites but all the rest of that, no. Site dependant.webazoot
- cherub0
I learned a hard lesson yesterday, and lost about 7 hours of productivity in the process.
If you install a theme and click 'edit' while viewing the page, you arent editing a webpage, you're editing the theme template for the front page. I should have suspected something was wrong when each time I clicked "save" it did NOT prompt me to also "publish" the page like it usually does. There is nothing to publish, its only a template. So after logging off then looking for my web page, of course I didnt find it in the trash or anywhere else... because it never existed.
This time, I saved the "template parts" so in case anything happens I can copy the blocks over.
There is one small upside. I'm getting used to the block editor, and how to work with rows and columns.
- At first the blocks thing was intimidating but now I understand what is meant when ppl say "It tries to take up all the available width". Also, my H2 tags werecherub
- being ignored then I found out its bcuz the container they were in... wouldn't let them be bigger. Then *POOF* huge text!!! IT WORKS NOW!!! hahacherub
- The only thing that is non-intuitive is I also seem to grab the wrong size rows, columns for the thing I'm doing, and I can't seem to drag the rows/colums tocherub
- make them bigger.cherub
- cherub0
I'm getting bogged down in handling a color schema for:
followed links
unfollowed links
highlight upon hover over linksand the rest. I asked the AI about this, I asked it to show me how to come up with the color schema for desktop, and for mobile, just so I could see how it's supposed to be.
It gave me the mcdonalds's website as an example of what the schema is supposed to look like on desktop.
It gave me socialbee's website as an example of what it's supposed to look like on mobile.
The AI recommended to handle hover like this:
"Alternatively, a simple underline or bold effect on hover can be combined with the color change to emphasize interactivity without overwhelming the design."
I have some questions. I see that mcdonalds site has all links underlined. Is that common practice if you are designing for desktop? Also there are no hover effects when you hover over the links, and visited links appear to be same color. (although all links are blue instead of the usual black used in the body)
I see that socialbee has mostly buttons, where I would have expected links to be. That makes sense because buttons are naturally bigger than text links. Is this common practice when designing for mobile (depreciate all links to convert them to buttons).
Also, there don't appear to be any followed buttons color changes upon hover either.
For my website, should I use highlighting or a different text color for followed links at all? Neither website above uses either, that i can tell.
What about bold? Is that a good effect to have upon hover over the call to action?
- No to bold on hover. No to changing everything to buttons. Underlines are the historical style for a link. :visited colour is helpful when many links exist.monNom
- :hover is only a feature on desktop, so may be removed for consistency with mobile.monNom
- Standard html: link blue and underlined
Link:active (clicking) - red, underlined
Link:visited - dark blue/purple, underlined
Hover: no-change, cursor changes.monNom - Don't bold on hover as that will shift the text around your link, possibly causing reflow of text, and feeling generally awful.monNom
- :hover and :focus can treated the same; :focus is relevant to touch-screens where :hover is not.evilpeacock
- Ok underlines are the historical way to do links, so that's sorted. But I thought long taps = hover on mobile. When I'm scrolling down a page on mobile,cherub
- Asking AI is likely a waste-of-time. Hit up good references like CSS Tricks:
https://css-tricks.c…evilpeacock - sometimes I do accidentally "hover" over something by long tapping. If I remember correctly, a few sites do that.cherub
- ah, the css tricks is a good one thanks.cherub
- cherub0
Still trying to make wordpress my bitch, but damn layout is hard.
Ok. I found some resources if any jr designers are reading this and need a refresher on layout.
https://www.datocms-assets.com/2…
https://www.ramotion.com/blog/we…
Some random thoughts:
I had assumed that the logo/clickable title would always be the topmost thing, and centered. But based on that bottom pic, It appears the logo shares space with the top nav, on the same row in the header (which is itself can be split into a top, middle, and bottom header) with the logo and/or title not being centered but offset to the left. Because that's where the eye goes first when westerners first land on a page, top left.So the surprise there was that I thought the logo would only share row space with the h1 page title, not the navigation. Also, some of that stuff in the image looks left justified, not centered. On mobile it will be centered due to space, but still. That was unexpected.
And the reason all this matters is because of breakpoints. The whole web page is either columns stacked side by side or, likely, rows stacked upon each other, and when the viewport is scaled down each element inside that particular row as the rendering engine FLOWS left to right, it will wrap to the next line when it runs out of space.
The breakpoints are gonna make building the side nav VERY fun. :(
And a last note about the side nav that I wished someone had told me- it's an invisible area on the left, not necessarily with an outline that you can see. Its called sidebar but not really a bar.
Of course only complete wp beginners will get anything out of this, that's why I made the thread.
Like I said, go easy. I'm doing my best.
- cherub0
My image posted as a link, so I fixed it below.
I wish he would have designed it in portrait mode, so I can see what I'm supposed to do for mobile. But what I think happens, is on mobile the hamburger menu in the top right causes the side bar to pop out from the left, and it covers the whole screen which is normal.
Does that sound right?