Docs navigation

WordPress Elements

Learn how to generate a fully functional WordPress website by selecting the Elements in the Yotako Plugin

The Element selection screen works with viewports, meaning, if you previously selected different screen sizes in Step 1, you will see the respective icons in this Step.

You can start by clicking on one of them, then the screen will appear.

In this screen, you need to select the corresponding WordPress elements in your design. Here is a brief explanation of all the elements that you can select here:

Please note: The primary elements (the ones will see in the Tab Bar) can only be of type Group or Component in Adobe XD, meaning, you cannot select a Text element as a Header or Footer, for example.

Header: The Header element Group, usually here is where your Page title is and also the navigation menu.
Header Menu: The navigation menu, that usually will link to other pages of your design.
Footer: The Footer element Group, similar to the Header, is where your Footer element groups will be, usually also a combo of the Logo of your website and navigation items.
Footer Menu: Pretty much the same thing as the Header Menu. If you have multiple menus, you can select them freely here.
Post Content: If you are building a Blog-like WordPress website, you'll likely need this.
Posts Block: In a Blog page, the Post block is usually an excerpt of a blog post on your website that displays information like the Post Image, Title, and Description.

Selecting elements

Groups (Header, Footer)

To select an element, make sure you are in Step 2 of the plugin, with a viewport selected and one of the Elements of your choosing active (it will have a blue background).

Then, highlight the element in your design. You will notice that the plugin text will change to Add 'Element Name'.

For example, if you are in the Header selection, the button will say Add Header. To add it, just click it! The plugin will display a message saying that the element was added and the Chip will become green!

When you select a menu, make sure the Element is a child of the respective parent selection (Header Menu element is a child of the Header element, same thing for Footer), the Menu block will appear, in this block, after your selection, you can choose to rename this menu to a more user-friendly name, feel free to do it, or not! It is totally optional.

Special Elements (Post Content, Posts Block)

Post Content

The Post Content block is normally where a Blog Post will be visible.

To select a Post Content, it needs to have the following Group Structure

.└── Container/    ├── Title (Text elements only)    ├── Description (Text elements only)    ├── Author (Text elements only)    ├── Image (Image elements only)    ├── Date (Text elements only)    └── Avatar (Image elements only)

If you fail to meet one of these criteria, an error dialog will appear.

Posts Block

The Posts block behaves similarly to a Post Item, it's common use-case is a list of blog posts on a blog page.

To select a Posts Block, it needs to have the following Group Structure

.└── Container/    └── Block/        ├── Title (Text elements only)        ├── Description (Text elements only)        ├── Author (Text elements only)        ├── Image (Image elements only)        ├── Date (Text elements only)        └── Avatar (Image elements only)