Academy: Your first Greyd.Suite website

Hey, I’m Jakob from Greyd and I’m going to show you how you can quickly and efficiently create your own website and customize everything on your own. We are going to talk about how the site editor and how WordPress actually works and is built. We’re going to change the entire design of the website. We’re going to create a page really efficiently from scratch. Then we’re going to talk a little bit about what Greyd actually does differently than the core and what core values Greyd offers. Last but not least, we talk about dynamic data and how you can set up dynamic elements inside your website. So let’s get right in.

As soon as you install Greyd, you end up here and your installation is complete. I just activated the theme and all the plugins and now I can start designing and customizing my website. First step is I’m going to take a look at the home page. How does my website actually look like? This is the default installation of Greyd and we’re going to take a look at how the backend is built, how the infrastructure looks like. We got our posts here. We can edit our posts or add new posts, create draft posts. We have the pages, media for all the images and documents. Pages are all the elements that actually have a URL on the front end as well.

I prepared some pages for the content of this video. We have elements like templates and forms, which we’ll talk about later. We also have a custom post type “people” and Greyd features like post types, pop-ups, dashboards, settings, slices, and more. First, we’re going to take a look at how the design works and how the site editor works. You can find it under Appearance → Editor. That is where the core design of your entire website lies. Opening the link brings us to the site editor. On the left bar, there are five different sections we can edit: navigation, styles, pages, templates, and patterns.

Navigation is similar to the classic WordPress menus. This is the default navigation. Then we have styles. Styles are really interesting: you can change the entire website design with just one click based on presets provided by the Greyd theme. Pages are kind of a duplicate of the pages in the backend, but include special system pages like the block home page. Templates are system pages like 404, single post, or archive. Patterns are easy presets that you can insert into your website. They can be synced or non-synced. Synced patterns are reusable blocks that you can reuse across your websites. Header and footer are also pattern-based but considered template parts that only a few roles can edit.

First, let’s take a look at the styles and change the design of the website. I like the blue style. I click edit and a panel opens on the right where I can further customize: change fonts, adjust the color palette, tweak buttons. For example, I can make the blue more cyan. I want to make my buttons round, and Greyd styles enhance the core styles. They control not only core buttons but also form buttons, search buttons, and more. They also offer hover styles, which core does not. In Greyd styles, I set the border radius of my buttons to 100 pixels. Now all button types are round. This looks nice.

This shows how Greyd improves the core experience but stays close to it. Only custom styles are saved, natively hooked into the WordPress core. I save that. Next, I want to edit my logo. I prepared a logo, drop it in, and insert it. I adjust options like site icon, which updates the favicon in the browser. I make it a bit smaller and save. The site is updated. On the front end, everything looks good. The header is responsive. If I resize the window, the title disappears and a burger menu shows. Using Greyd, I can configure visibility per breakpoint, hide the title on mobile, and disable mobile overlay for the menu.

This is another example how Greyd customizes and enhances core blocks while adding custom ones like the burger overlay menu. Now I want to build the homepage. First, I remove existing content like the style guide section. I move a group block to use it for my content later. I upload an image as a background by converting the group to a cover block. I upload a gradient image, adjust the overlay, tweak colors and opacity, and configure buttons for better visibility. I move the header inside the cover block to overlay the background. Now the hero section is ready. I can add headlines later. Next, I focus on the content section.

I could build everything from scratch, but I want to use patterns. Designers already created patterns for me. I explore patterns and select discount elements, pricing tiles, and text with whitespace. I reorder content. The left sidebar shows the structure of the website. I move content into a group and ensure it uses content width. For spacing, I add margin top and bottom. For columns, I set extra large spacing. I customize top and bottom spacing per section. Then I explore banners and add a black background pattern. I customize colors to match my theme, adjust buttons, and remove duotone filters. It looks nice.

Next, I add pricing plans. I adjust margins to add space between elements. I make vertical margins extra large. For the last section, I change the headline color to white, reset custom colors, and customize overlay opacity. This section now looks great. I save the page and check the front end. The website looks nice. I customized sections, added new ones, and it only took a few minutes. Content can now be filled in by me or my content team.

Last, let’s look at dynamic data. I built static sections, but I want to reuse and display dynamic data. I created a post type with custom fields called “people” for employees, customers, or testimonials. I prepared a page where I want to display them. But first, we look at dynamic templates. Dynamic templates are similar to patterns but independent of their content and can be reused across websites. I create a new template called “dynamic box”. It has a headline, image, and paragraph, but no content. I publish it.

On my prepared page, I insert a query loop with a template block. I select the “dynamic box” template. Now I configure the query loop to display “people” instead of posts. I map fields dynamically: post image, headline, and custom field “quote”. Using the hashtag picker, I insert dynamic tags. Now the template pulls data from the backend. On the front end, Emma, Robert, and Sarah are displayed with their quotes.

I can reuse the template again, but fill it with static content. I insert the dynamic box, add a static background gradient, and leave text empty. The paragraph is optional and not rendered if left blank. Same goes for images or buttons. I update the template style: make images bigger, headlines blue, text smaller, add rounded borders and shadows. After updating, all references update automatically. Headlines are blue, images bigger, text smaller. Content remains unchanged, only design updates. This is the power of dynamic templates.

I can reuse this template in my next project. You’ll learn more in the next video. I hope you learned something and found it fun. See you in the next one.