New landing page: Connecting influencers to affiliate programs ("Creator Connections")

[thetinyl]

Quick summary

Affiliate partnership opportunities exist within the WordPress ecosystem but can be hard to find. A new “WordPress Creator Connections” (working title) landing page on WordPress.org could help connect creators to these existing programs. This way, they can share their love of WordPress, make money, and stop pushing their audiences to our competitors.

Find the full context, project scope, and discussion in the original issue (posted in the Marketing GitHub repo).

Notes

• From a layout perspective, this page can follow the simple elegance of the proposed Hosting page redesign (preview here).
• Content for this first iteration is nearly ready and can be found in this document (drafted by @eidolonnight and @rmartinezduque).

Given the simplicity of the layout and that this page will be in the new .org theme, we can build a first draft in the Editor (🎉) and then notify Design and Meta when ready for help fine-tuning.

[thetinyl]

I've built a first draft of this page in the Editor. It's very bare bones. If anyone from @WordPress/meta-design is available to add some finesse (does not have to be complex), that would be very much appreciated.

The copy is mostly final, but any changes that will be made won't affect the layout.

[marko-srb]

Here's the proposed design that I am trying to implement in the Editor.

— — — Active state for FAQ.

[marko-srb]

@ryelle and @ndiego

While I was trying to do the edits, old theme bugged me from having the section width as I set it in editor. See comparison below.

Is there a way to switch this page to a new theme we use for Learn? Other elements in there, like hero section, are also done in manner of blocks we used for refresh. If there's an easy way to switch theme to the new one for this page, I should be able to handle all the further edits and creation of the page. Let me know.

Thanks!

[ryelle]

Is there a way to switch this page to a new theme we use for Learn?

Do you just mean the new design in general, or are you asking for something in the Learn theme in particular? This is the main site, so it would use the main theme like About, Download, and those subpages.

I've set a temporary page template for now, so that it uses the correct width. It was already using the new theme, new pages just need an extra step for previews to look right.

[marko-srb]

Thanks @ryelle !

This works now. What I mean by 'Learn' theme is the following. The 3 sections below are actually used from previous designs we used in new theme, or some old layouts, that are still in use, but polished.

1. This is a classic Learn/Patterns/Themes cover/hero section, just with the graphics on the right. How do I add such element into my page?

I tried actually using 'home page cover' pattern for this, but it is merged component when I select it from patterns list, and it doesn't allow me to edit. How would I edit it if I use it?

2. A simple title left/paragraph right is the block we used often. For some reason 'column' block isn't working properly (maybe it's just for me) and I cannot replicate the look.

3. We have links with lines on Learn footer. Also would like to copy this element.

—

How can I re-use these elements in my page? Also does the 'column' block work for you? I get error when I use it. See ss below.

— — — Column block issue:

Thanks!

[marko-srb]

Additional note:

I actually went and copied the hero block from home and paste it. Then I was able to edit it. But as soon as I went for 'block' customization in the right panel the block crashed — same as columns block.

Here's ss:

[ryelle]

There are block styles you can use to get some of these effects, but we don't use reusable blocks/synced patterns because they're not translatable with the current system.

Copying from other pages is probably the best approach if you don't want to build from scratch. There are probably multiple ways to get 1, cover block or columns. For 2, that's just columns, a heading, and a list block. Same with 3, just the list there has the "links" style to get the borders. Although, if 3 is expandable we do not have an existing style for that, and it might require dev work.

I actually went and copied the hero block from home and paste it. Then I was able to edit it. But as soon as I went for 'block' customization in the right panel the block crashed — same as columns block.

Yes, I'm seeing this too on all blocks, I'll take a look today.

[ryelle]

I've identified the block crashing issue as a bug in Gutenberg, reported it, and rolled back w.org to 18.8 — so you shouldn't have that problem anymore.

[marko-srb]

Thanks @ryelle! I'll ping in case I need any access for reusing some blocks in the future.

[marko-srb]

@ryelle

it seems that column block is still crashing whenever I go to 'block' tab to style it. I did multiple tests before I wrote this msg... Let me know if I can do anything to report it somewhere else...

[marko-srb]

Ok, column block started working today.

Here's the draft preview.

@ryelle, @ndiego I have the following issues present, plus help needed:

1. Hero section. In the Editor, hero graphics goes through the edge of the screen, while it isn't replicated in the preview. I removed the margins, so this may be a bug, or I am not doing something right...

2. Alignment of right blocks under columns. In all three sections I have right column blocks nicely aligned (in the Editor), while on the preview they are not aligned. Can you help/let me know how to fix this?

2b. Lines are half deleted in this section on the live preview.

3. Can we have Global nav and footer in the same Charcoal 2 color, as in design? I am not really sure how to do this, so if you can help I'd appreciate. Thanks a lot!

I think once we are able to solve these, there are a very few minor copy updates needed and we should be set to go live...

CC: @thetinyl , @eidolonnight

[marko-srb]

Ok, I've managed to fix all the issues, except the line breaking 2b thing.

Thanks for the help @ndiego , @ryelle

[ndiego]

I fixed 2b. The default separator style in the Editor looks full width, when it actually isn't on the frontend. I switched the style to "Wide Line".

[marko-srb]

@ryelle

I got a green light from @eidolonnight that this page can go live.

Draft: https://wordpress.org/?page_id=40405&preview=true

Here's the preview of desired styling of the Global navigation (white) and footer (charcoal 2).

Let me know in case you need any additional input from me... Thanks!

CC: @thetinyl, @ndiego

[ryelle]

@eidolonnight @thetinyl Should the URL be wordpress.org/wordpress-creator-connections (it is now), or can we drop the duplicate "wordpress" and do wordpress.org/creator-connections? No technical requirements here, I just think that looks better.

Once we finalize the URL this can be published, added to the page-manifest and synced. If we don't have an answer today, someone else from Neso will need to take over since I'll be AFK.

[eidolonnight]

Thanks @ryelle ! I agree that creator-connections is cleaner for the URL. Let's go with that.

[ryelle]

All published: https://wordpress.org/creator-connections/

It's available for translations, but hasn't been pushed out to Rosetta sites.

I did have to jump in and update the heading levels — the page title is not shown so the first heading in the content should be an h1. I reset the font sizes on all the headings to be the same, but it might have impacted some spacing. Just fyi @marko-srb , in case you want to review it again.

[marko-srb]

Thanks @ryelle.

All looks good on desktop. But on mobile we need a few tweaks to make it look ok.

1. On mobile hero section lacks graphics
2. Last three sections are lacking margin/padding from the sides.

Let me know if both of these should be easily solvable in the Editor (e.g. adding margins, checking why graphics in hero isn't shown and tweaking the block settings) — and in case yes, I'll take a stab to make the edits and make it work on mobile too.

Thanks!

[marko-srb]

Here are the screenshots:

[ryelle]

@marko-srb Please open a new issue for any changes, thanks!