WordPress PageBox

Understanding content components in PageBox for WordPress

2 views November 30, 2018 Leandi Kolver 0

Components are a useful elements that can be a key part of your website. They are commonly used for tab sections or sliding banners, but they can be a powerful tool for sharing sections of pages, even when decoupled.

What is a content component?

A content component is a post-type that can contain a number of atoms and modules. This component can then be displayed within a container atom on a page or post. Components are pulled through to the container atom from the components tab, meaning that components, and any of the atoms they contain, cannot be edited directly from the container atom. Any edits to any of the atoms within the component must be made within the component tab, which will then be pulled through to any container atoms to which the component is assigned. This makes components perfect for sharing sections of pages across multiple sites. As long as the component has been shared, sections of pages can be updated simultaneously, whilst the rest of the page remains decoupled.

To learn more about sharing and decoupling pages, posts, components and more, take a look at our handy guide. To learn more about components and how to use them, read the information below.

Adding a component

Components can be accessed and created directly from your dashboard. Follow the instructions below in order to create and customise components.

You can add a new component from the top toolbar of the Pagebox dashboard by hovering over the “+ New” button and clicking on “Component” in the dropdown menu. This will take you directly to a new component which you can then customise.

Alternatively, there is a “Components” tab at the top of the navigation bar on the left-hand side of the dashboard. Hovering over the tab will display a menu with multiple options. From here you can view all of the “Components”, edit the “Type” of the components, or you can add a new component directly from this menu by clicking “Add New”.

The “Components” tab

Clicking on the “Components” tab will take you to “Components”. This tab contains all of the components that have been created for your site. There is the option to filter these near the top of the page. You can display every component that has been created (All), only components that have been created by your username (Mine), only components that have been published (Published), only draft components (Draft), or components that have been deleted (Bin).

You can find specific components using the search bar at the top of the page. Clicking on a component will allow you to edit it. There is also the option to bin the component.

Click on the “Add New” button at the top of the page in order to create a new component. After creating the component, you will then be able to edit its content.

Editing the component

Once you have created a new component, you can then begin to customise it. You can also edit already created components at any time in the “Components” tab.

A title should be added to the component in the title field at the top of the page. This is how you will know which component to add within the container atom.

Once you have added a title, you will then be able to add any atoms that you want to be displayed within the container atom. In order to add atoms to the page, you must first select the dynamic component template.

This will then allow you to start adding rows and atoms to the page. For information on how to add and control rows, columns, and atoms, take a look at our dynamic template and controlling row and column settings guides.

Once you have added atoms to the component, you will then need to assign a “Component Type”. This determines which sort of container atom the component can be displayed in. For example, a Slider container can only contain components that have the type “Slide” assigned to them.

In order to create a type, simply click on the “+ Add New Component Type” link at the bottom of the type section on the right-hand side of the page. Here you can add the name of your new type. You should ensure that the type you are adding is the same as the type of container that you would like the component to be displayed with. For example, if you want the component to be displayed within an accordion container, the type of the component should be “Accordion”. It makes no difference whether the type has a capital letter or not.

Once you have added the name of your new type, click on the “Add New Component Type” button at the bottom of the “Type” box in order to add it to the “All Component Types” menu. The new type will be automatically assigned to your component once you have added it. Types that have been assigned to your component will have a tick in the checkbox beside them.

Multiple types can be added to a single component. This will mean that one component will be able to be displayed in multiple types of container. For example, a component with both the types “Accordion and “Slide” applied to it, will be able to be displayed in both accordion and slider container atoms. Once you have added some component types, you will be able to choose types from “All Component Types”, or from the “Most Used” section, which will only show your most frequently used types. You can select different types by clicking on the checkboxes beside them.

If you no longer want a type to be assigned to your component, you can click on the checkbox again to deselect it. This will remove the type from your component.

Component types are hierarchal; therefore, you can choose a parent component type from the dropdown menu when adding a new type.

Once you have added a component type and some atoms to the component, you can then publish it.

Publishing the component

Once you have created your component and added any content, you may want to save any of the changes you have made, or even publish the component to your site. On the right-hand side, at the top of the page, there is a menu with publishing options. Before hitting publish, make sure you have checked out our tips for creating a perfect page guide, to ensure that your component is perfect before publishing.

If you wish to save the changes you have made to the component, but do not want to publish it, you can save your component as a draft by clicking on the “Save Draft” button on the left. You will then be able to access the component from the draft section in the “Components” tab.

If you no longer want to keep the component you can move it to the bin. You will then be able to access the component from the bin section in the “Components” tab.

To publish the component, click on the “Publish” button at the bottom of the publish box.

Displaying the component in a container atom

Once you have published a component, you will be able to display it within a container atom. See the individual container atom’s user guide for more information on how to add a container atom to a page.

Container atoms can be added to any post or page. There are three types of container atom: Slider, Tab, and Accordion. Which component you use with which container will depend upon the type of the component and the type of the container. If the types are not the same, then you will not be able to use that component with that container.

Whilst adding the container to the page, you will have the option to add components to the atom. From here, you can choose the component that you would like to display from the dropdown menu.

This component, and all of the atoms or modules contained within it, will be displayed in one section of the container. For example, as we are adding this component to an accordion container, the component will be displayed in the first accordion panel. Therefore, you will most likely use more than one component in each container.

You can add another component by clicking on “Add New”. You can then add as many components as you want, following the instructions above.

As you can see, the components, and the atoms within them, cannot be edited directly from this screen. In order to edit a component, or a specific atom, click on the “Edit Component” link beside the component that you want to edit.

Clicking on the “Edit component” link will take you to the component that needs to be edited within the component tab. You can then make any changes and update it. Making edits in the component tab, will implement the changes in every container atom that the component is displayed within.

Here is an example of how the component can be set-up within the component tab.

Here is an example of how this component would be displayed within an accordion container.

Each component will be displayed within its own accordion panel. If you only choose to display one component, then only one accordion panel will be displayed, even if you have used multiple rows and atoms within the component. If you use two components, then two accordion panels will be displayed.

As you can see, all of the atoms contained within the component have been displayed within a single accordion panel.

If two components have been added, they will be displayed in two separate accordion panels.

The same is true of each type of container atom that is available. One “Slide” component will be displayed in one slide of a slider container atom. One “Tab” component will be displayed in one tab of a tab container atom.

Conclusion

In conclusion, content components are groups of atoms or modules that can be displayed within a container atom of the same type. These components are created and edited in the components tab and are subsequently pulled through to the container atom, whilst remaining within the components tab. This means that components, and the atoms they contain, cannot be edited directly from the container atom. Only the structure of the container atom, and which components are displayed, can be changed from the container atom editing screen. In order to edit a component, you will be redirected to the components page, where you can edit any of the atoms. After updating the component, the changes will automatically be applied to the container atom, which means that components are perfect for keeping sections of decoupled pages shared.

Was this helpful?