Explanation of the Spectra add-on (Ultimate Addons for Gutenberg) to customize page design

The new block editor built into WordPress, known as Gutenberg, makes it easy to create articles and pages on your site based on the concept of blocks or components. This editor is distinguished by the ability to expand its features and add great options for website design. One of these options is to provide additional supporting components that expand its capabilities, which can be added to it through add-ons specific to this editor, such as the Ultimate Addons for Gutenberg add-on, or known as Spectra, which is a free add-on that provides a set of customizable components that are ready for use on your site.

In today's article, we will explain in detail how to use this add-on that enhances the Gutenberg editor, and explain how to benefit from it to create distinctive designs for your WordPress pages or articles and move your site to a new professional level without the need to use page builders add-ons or write any programming codes. If you are a fan of this new editor and prefer to rely on it primarily on your site, then this article is for you. Table of Contents What is Spectra – Ultimate Addons for Gutenberg Installing and setting up Spectra – Ultimate Addons for Gutenberg The most important add-on blocks Spectra – Ultimate Addons for Gutenberg Adding Spectra blocks to articles or website pages Importing Ultimate Addons for Gutenberg templates Conclusion What is Spectra – Ultimate Addons for Gutenberg Add-on Spectra is an add-on WordPress is free and was previously called Ultimate Addons for Gutenberg. It basically extends the Gutenberg plugin editor in WordPress and provides it with many additional components or blocks, ready-made templates, and other advanced tools that make it easier for you to design a professional and beautiful website.

This plugin is available on the official WordPress theme store and has a five-star rating and over 300,000 active installs. This plugin was developed by Rainstorm Force, the same company that developed the famous Astra theme and many other well-known plugins in the WordPress system. A paid Pro version of this add-on will soon be available, which will provide additional premium components and designs that are not available in the free version. It will also provide professional features such as dynamic content and a full theme builder.

The free plugin provides a large number of additional components or blocks that expand the features of the default WordPress editor, Gutenberg. The word block (B lock) in the Gutenberg editor means an independent part that can include any type of content. Anything you include within an article or page on your site (whether a text paragraph, a title, an image, a photo gallery, or a video...) will be included in its own block. This plugin is compatible with all types of WordPress themes, although it is usually recommended to use it with the Astra template because it is affiliated with the same company that developed the template. But it is considered ideal for use with all templates, especially those that come without its own page builder, as it eliminates the need to use any page builder add-on that may slow down the work of your site.

Installing and setting up the Spectra plugin - Ultimate Addons for Gutenberg Installing the Spectra plugin is similar to installing any WordPress plugin. Go to your site's control panel and select the Plugins tab< أضف جديد Add New< وابحث في صندوق البحث عن اسم الإضافة Spectra. بمجرد أن تظهر لك الإضافة انقر على زر التثبيت الآن لتثبيتها، ثم انقر على زر التفعيل لتفعيلها في موقعك.

Read more: How to install a WordPress plugin and activate it on your site correctly. Once you activate the plugin, its welcome and setup window will appear, which you can access whenever you want by clicking Settings in the control panel and clicking U GA. At the top of the window, useful information and links about the add-on are displayed, and in the B locks section at the bottom are displayed all the components or blocks that the add-on provides to you, which will be attached to the editor’s blocks, and they are arranged alphabetically according to their names (their current number when preparing the article is 32 blocks, and additional blocks are added to them periodically). Next to the name B locks, you will find two buttons: A activate All and Deactivate All, to activate or deactivate all of these blocks as needed, as well as the R button. eusable Blocks which is used to add reusable components. You can also activate each of these blocks individually by clicking on the A activate|Deactivate link located to the left of its name, as shown in the following image.

In this article, we will activate all the add-on blocks by clicking on the A ctivate All button, but it is preferable that you activate the blocks that you need on your site and deactivate the unnecessary blocks so that your website does not grow unnecessarily. The most important blocks of the Spectra plugin - Ultimate Addons for Gutenberg. In this paragraph, we will give an overview of the most important blocks provided by the Ultimate Addons for Gutenberg plugin and how to benefit from them in designing WordPress website pages and articles. The add-on provides many components or blocks, some of which are dedicated to displaying content (Content blocks) and some of which are dedicated to layout (Layout blocks).

These blocks help you create your page easily and quickly. Since the number of these blocks is very large, I will mention some of them here and leave you to explore the rest of the components on your own: A advanced heading: It is used to create beautiful vertical titles consisting of a main title and a subtitle with a horizontal separator between them. I nfo Box: Add stylish information boxes that include images, titles, and subtitles.

C all to action: To easily place the take action button. T abs Block: To display information in elegant tabs. Form Block: to create and customize on-page contact forms, S tar Ratings: to put star ratings on content and increase trust in your brand.

T able of Contents: To include a table of contents that makes it easier for visitors to access the content. G oogle Map: To add a Google map to your site and introduce visitors to your business location. P ost Timeline: To display your site’s articles within timelines with full control over their arrangement and design.

Adding Spectra Blocks to Site Pages or Articles Spectra blocks or plugins work just like any other component of the Gutenberg editor's blocks. To add it to any page or article on your site, all you have to do is edit the page or article and click on the (+) icon to insert it in the position you want. After clicking on the Add Block button, you can write the name of the block to quickly access it and insert it. You can also click on Browse All to see all of the editor’s blocks and choose the block that suits you.

The plugin components will be grouped under the ULTIMATE ADDONS BLOCKS section. You can hover over any component to view a preview of that component and click on it to insert it in the position you want on the page or article as follows: ULTIMATE ADDONS BLOCKS The settings for each plugin block are also controlled through the left sidebar that appears for each block in the same editing style as in the Gutenberg editor. Blocks may also include alignment options and formatting options that can be managed from The bar that usually appears at the top of the block. For example, we will include the A advanced heading component, which enables you to add your headings professionally, add a subtitle, and use a separator between the main and subtitles, with the ability to customize it completely. All you have to do is click on the + button and write the block name Advanced heading.

Once the desired block appears, you can click on it to add it to your article. After adding the block, you can add your title and subtitle, and a set of formatting options associated with this block will appear at the top, such as aligning the title (left, center, right), in addition to the appearance of all its setting options on the right sidebar, which enables you to control the fonts and colors for both the main title and the subtitle, and customize the length, width, and color of the separator, the distance between the block elements, and other options as follows. Customize the block in the way that suits you, and in the same way you can add any of the wonderful blocks that the add-on provides you with and do Prepare it according to your needs until you reach the desired shape and design. When you finish adding all the components you need, publish your article so that it is ready for presentation.

Importing Ultimate Addons for Gutenberg templates If you do not want to build your page part by part and configure each component separately, then the Spectra add-on is an addition to the group of blocks that we explained previously, a library of ready-made professional designs that you can access by clicking on the U AG Templates button on the article or page editing window, where a library of designs collected within three tabs will appear: Pages: Pages provides you with ready-made page designs with several templates or sub-templates. (Templates) You can select from them and edit them within the Gutenberg editor to quickly and easily create new web pages. Patterns: They are a set of blocks that the add-on provides for specific parts of pages and have been professionally created and customized. You can import any template from them to your page or article and customize it to suit your site’s needs. Wireframes: These are simple designs without content, in black and white only, in Dark and Light styles.

For example, we will create a new home page for our website using one of the ready-made page templates provided by the add-on. We choose from the site's control panel pages< أضف جديد و نسمي الصفحة باسم صفحة رئيسية جديدة ثم ننقر فوق الزر الزر U AG Templates كما هو ظاهر في الصورة التالية. بعد النقر فوق الزر سيظهر لك في التبويب P ages ع دة نماذج لتصاميم صفحات جاهزة تتناسب مع أهداف مختلفة لتختار من بينها التصميم التصميم الذي يعجبك.

For example, we will choose the design Digital Agency and a pop-up window will then appear with several options for templates available for this design. This template, as you can see, provides 4 templates, from which we will choose the Home template and click on the I mport Template button to import it. You can also preview the template before importing it by clicking on the P review Site button. After previewing the template and clicking on the import button, the import process will begin automatically for the contents of the template or page that you have chosen, and the necessary plugins to display the elements of this template will also be automatically installed and activated if necessary. For example, the design we imported includes a contact form, so the W PForms Lite add-on will be imported and activated on the site automatically during the import process.

After the import is complete, you will have to modify the content according to your site's needs and publish your page after completion. For example, after we imported the Digital Agency template, we edited and formatted its content, replaced all the images it provided with our own images, deleted the parts we did not need in the ready-made design, and in the end we obtained the following design for our new page. All we have to do now is publish this page on our website and display it as a dedicated home page.

Thus, we have been able to design a new page for our website with a beautiful and professional appearance with ease and with just a few clicks, without the need to build the page components from scratch. Read also: Learn how to create a professional web page in WordPress in more than one way. Note 1: Some ready-made design samples may include widgets or dynamic elements that are not imported, and to display them correctly, you must add them manually to your page. Note2: When you import a page or form, you may see some imported colors and fonts appear different from the previewed content.

This is because the customizer settings will be automatically inherited in the imported page or form design. For example, assume that the page you are importing contains a black button, but you set the buttons to blue in the customization tool. Then, after importing the page, the setting you customized will be applied and the button will appear blue instead of black. Likewise, if you set a specific font type for headings or paragraphs in the customization tool, it will be adopted in the imported design.

Conclusion In today's article, we learned about the Spectra add-on, known as WordPress Gutenberg Blocks, which expands the work of the default Gutenberg block editor in WordPress, which alone does not have enough flexibility to create professional designs. So you can expand the capabilities of the WordPress editor through this add-on, which is compatible with all WordPress templates, and gives you many wonderful customizable components that provide you with the advantage of displaying and planning your site’s content. It also provides you with many ready-made page designs that you can use and modify easily according to your need without the need for any additional page builder tool. We advise you to try this add-on, especially since dealing with the components and designs of this add-on is very easy and very similar to dealing with the components of the editor itself. It provides a graphical interface for each component and includes many customization options that help you get the design you want quickly and easily, which makes it a preferred option for many WordPress website owners.