{"id":927,"date":"2023-03-13T14:50:00","date_gmt":"2023-03-13T14:50:00","guid":{"rendered":"https:\/\/nel-media.com\/en\/?p=927"},"modified":"2025-06-28T14:22:32","modified_gmt":"2025-06-28T14:22:32","slug":"spectra-page-builder-a-new-era-of-design","status":"publish","type":"post","link":"https:\/\/nel-media.com\/en\/spectra-page-builder-a-new-era-of-design","title":{"rendered":"Spectra Page Builder: Build Stunning Sites Fast"},"content":{"rendered":"\n

What is Spectra page builder?<\/h2>\n\n\n\n

Designing a website has never been easier with the introduction of Spectra page builder.<\/p>\n\n\n\n

It’s not just another, new, WordPress page builder.<\/p>\n\n\n\n

Spectra blocks take website design to a whole new level, offering users a range of high-quality, customizable design elements to make a website stand out.<\/p>\n\n\n\n

These blocks are designed to be visually stunning and are optimized for performance, ensuring that your website is fast and responsive.<\/p>\n\n\n\n

The blocks are also highly customizable, allowing users to tweak them to fit their brand’s specific needs. <\/p>\n\n\n\n

Users can choose from a range of colors, fonts, and layouts to create a unique design that reflects their brand’s personality.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Table Of Contents block<\/h2>\n\n\n\n

If you have a longer page or post you can use a Table of contents<\/strong> block for better visibility, as I do here.<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tContent on this post<\/strong>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. What is Spectra page builder?<\/a>
  2. Table Of Contents block<\/a>
  3. Container block<\/a>
  4. Advanced Heading<\/a>
  5. Image block<\/a>
  6. Heading<\/a>
  7. Buttons<\/a>
  8. Info box<\/a>
  9. Counter block<\/a>
  10. Count down<\/a>
  11. Icon list<\/a>
  12. Icon block<\/a>
  13. Price list<\/a>
  14. Star ratings<\/a>
  15. Modal block<\/a>
  16. Testemonials carusel block<\/a>
  17. Schema blocks<\/a>
  18. Slider block<\/a>
  19. Tabs block<\/a>
  20. Gallery block<\/a>
  21. Blockquote<\/a>
  22. Team block<\/a>
  23. Social share block<\/a>
  24. Timeline block<\/a>
  25. Spectra templates<\/a>
  26. Control panel<\/a>
  27. Spectra blocks speed<\/a>
  28. Conclusion<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    In Table of Contents settings, you can adjust many parameters and define which headings will appear in it H1, H2, H3…<\/p>\n\n\n\n

    Container block<\/h2>\n\n\n\n

    The Container block is the block that you will almost always use and it contains all the other blocks. <\/p>\n\n\n\n

    You can choose double, triple, quadruple blocks and their combinations.<\/p>\n\n\n\n

    \"Spectra<\/figure>\n\n\n\n

    Blocks use flex technology and are adaptable for any type of device.<\/p>\n\n\n\n

    Almost everything on them is adjustable from alignment, distance from edges, distance between blocks…<\/p>\n\n\n\n

    \"Container<\/figure>\n\n\n\n

    If we have a triple block and it is too narrow on the tablet, the Wrap option will divide the blocks into 2+1 and they will be displayed ideally.<\/p>\n\n\n\n

    Advanced Heading<\/h2>\n\n\n\n

    With an advanced heading block, you can get stylized titles with a color gradient, different colors of words in the title, subtitle, and separator between them.<\/p>\n\n\n\n

    Your Attractive Heading1<\/h3>
    <\/div>

    Sub Heading<\/p><\/div>\n\n\n\n

    Your Attractive Heading<\/mark> 2<\/mark><\/h3><\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Image block<\/h2>\n\n\n\n

    Image block<\/strong> brings new possibilities for styling images and photos.<\/p>\n\n\n\n

    You can add many types of masks, define borders or add shadows.<\/p>\n\n\n\n

    \n
    \n
    \"woman<\/figure><\/div>\n<\/div>\n\n\n\n
    \n
    \"woman<\/figure><\/div>\n<\/div>\n\n\n\n
    \n
    \"woman<\/figure><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    Many effects can be adjusted to be visible on hover.<\/p>\n\n\n\n

    \n
    \n
    \"woman<\/figure><\/div>\n<\/div>\n\n\n\n
    \n
    \"woman<\/figure><\/div>\n<\/div>\n\n\n\n
    \n
    \"woman
    <\/div>

    Heading<\/h2>
    <\/div><\/div><\/figure><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    You can even add an overlay with the title and text and use them as links.<\/p>\n\n\n\n

    Buttons<\/h2>\n\n\n\n

    Button’s block extends Gutenber’s classic capabilities with gradient colors, borders, shadows, and icons.<\/p>\n\n\n\n

    \n
    Button1<\/div><\/a><\/div><\/div>\n\n\n\n
    Button2<\/div><\/a><\/div><\/div>\n\n\n\n
    <\/path><\/svg><\/span>
    Buy on Amazon<\/div><\/a><\/div><\/div>\n<\/div><\/div>\n\n\n\n
    \n
    Button4<\/div><\/a><\/div><\/div>\n\n\n\n
    Button5<\/div><\/path><\/svg><\/span><\/a><\/div><\/div>\n\n\n\n
    button6<\/div><\/a><\/div><\/div>\n<\/div><\/div>\n\n\n\n

    If that is not enough for you, you can also use a special Marketing button<\/strong> block.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Subscribe Now<\/span><\/path><\/svg>

    Get access to Premium Features for FREE for a year!<\/p><\/a><\/div>\n\n\n\n

    Info box<\/h2>\n\n\n\n

    The Info Box can be adjusted with many preset options depending on your needs.<\/p>\n\n\n\n

    In this block, you can use icons or pictures.<\/p>\n\n\n\n

    An icon can be stacked or framed with a round or square shape.<\/p>\n\n\n\n

    \n
    <\/path><\/svg><\/div><\/div>

    Info Box<\/h3><\/div>
    <\/div>

    Here is an Info Box example.<\/p>

    Read More<\/span><\/a><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n

    On all elements, colors can be changed on hover. The info box doesn’t have its background color.<\/p>\n\n\n\n

    For different background colors just put the info box into the container.<\/p>\n\n\n\n

    Counter block<\/h2>\n\n\n\n

    A counter block is a pretty new block in the Spectra collection.<\/p>\n\n\n\n

    The first block presents a text counter with an icon. <\/p>\n\n\n\n

    The second block is the circle counter and the third is the bar counter.<\/p>\n\n\n\n

    \n
    \n
    <\/path><\/svg><\/span>
    <\/span>%<\/span><\/div>
    Spectra is at:<\/div><\/div>\n<\/div>\n\n\n\n
    \n
    <\/span>%<\/span><\/div>
    <\/div><\/div><\/circle><\/circle><\/svg><\/div><\/div>\n<\/div>\n\n\n\n
    \n
    <\/span>%<\/span><\/div><\/div>
    Spectra is at:<\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    In Counter block settings you need to add starting number, ending number, total number, decimal places (if any), number prefix and suffix, and animation duration.<\/p>\n\n\n\n

    Count down <\/h2>\n\n\n\n

    If you want to mark the time until when the sale will last or until when members can sign up for the course, you can do it using the Countdown block.<\/p>\n\n\n\n

    \n
    –<\/div>
    DAYS<\/div><\/div>
    –<\/div>
    HOURS<\/div><\/div>
    –<\/div>
    MIN<\/div><\/div>
    –<\/div>
    SEC<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n

    Almost all parameters of this block can be edited if they would fit anywhere on the web page.<\/p>\n\n\n\n

    Icon list<\/h2>\n\n\n\n

    The Icon list block can be helpful if you are listing multiple items. Each item can also be defined as a link and have a different icon.<\/p>\n\n\n\n

    \n
    \n
    <\/path><\/svg><\/span>Item 1<\/span><\/div>\n\n\n\n
    <\/path><\/svg><\/span>Item 2<\/span><\/div>\n\n\n\n
    <\/path><\/svg><\/span>Item 3<\/span><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

    Icon block<\/h2>\n\n\n\n

    In addition to the Icon list block, you can also find the Icon block. You will have hundreds of icons at your disposal that you can style in an extremely large number of ways.<\/p>\n\n\n\n

    \n
    \n\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\n\n
    \n\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\n\n
    \n\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\n\n
    \n\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/path><\/svg>\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n<\/div><\/div>\n\n\n\n

    Soon it will be possible to add your icons in SVG format!<\/p>\n\n\n\n

    Price list<\/h2>\n\n\n\n

    A price list is a block intended for defining product prices. <\/p>\n\n\n\n

    By default, it comes as a quadruple element, but by deleting three child elements you can turn it into a single element.<\/p>\n\n\n\n

    \n
    \"pure

    Pure Nature<\/h4>
    On sale!<\/div><\/div>$19<\/strong><\/span><\/div>
    <\/div><\/div>\n\n\n\n
    \"vinegar

    Vinegar Gummies<\/h4>
    On sale!<\/div><\/div> $29<\/strong><\/span><\/div>
    <\/div><\/div>\n<\/div>\n\n\n\n

    Star ratings<\/h2>\n\n\n\n

    Some elements come with his star ratings. <\/p>\n\n\n\n

    But if you need to place ratings on some particular place you can do that with the Star rating block.<\/p>\n\n\n\n

    \n

    What do you think about Spectra blocks?<\/p>

    \u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span><\/div><\/div>\n<\/div><\/div>\n\n\n\n

    Or use 1-10 star ratings.<\/p>\n\n\n\n

    \n

    What rating do you want to give them?<\/p>

    \u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span>\u2605<\/span><\/div><\/div>\n<\/div><\/div>\n\n\n\n

    Modal block<\/h2>\n\n\n\n

    The modal block is used for simple popup messages, for example, sign up for news.<\/p>\n\n\n\n

    Simply press the button and see how it will look.<\/p>\n\n\n\n

    Press me!<\/span><\/span><\/a><\/div>
    \n

    Here you can place a contact form or CTA button !<\/p>\n\n\n\n

    \"spectra<\/figure>\n<\/div>