Toggle graphic slider display area using Astra and Gutenberg

in using Astra ThemeIf you want to create a rotating gallery, you don't have to use a page builder like Elementor to do it. Combining WordPress' default Gutenberg editor with Astra's recommended Spectra plugin makes it easy to implement a rotating gallery.

This tutorial brings a complete step-by-step process that is suitable for application in scenarios such as product introductions, team presentations, and homepage main images.

I. Tools required

All free resources:

• Astra Theme: lightweight, good with custom designs
• Gutenberg Editor: WordPress comes with a block editor.
• Spectra plugin: developed by Astra to add more advanced blocks to the editor

Installation method:

• Go to the Plugins page in the backend and search for Spectra to install and enable it.

• After startup, activate the following block in the Spectra settings: Slider,ContainerHeading, Image, Heading

II. Creating a graphic slider module

Step 1: Create or Edit a New Page

go intofig. beginningor other pages, open them with the Gutenberg editor.

Step 2: Add the outer container layout

Add a Container block:

• Set the width to full width

• Add top and bottom inner margins, e.g. 60px.

• Recommended settingsbackground coloror retain a transparent background

Step 3: Add Slider Block

Insert the Slider block provided by Spectra into the container:

• The default contains twoslide (photography, presentation software)Increase in quantity possible

• Set to slide or fade in/out effect

• Navigation arrows, point navigation, auto-rotation can be enabled

Step 4: Designing the Content of Each Slide

Creates a two-column layout in each slide:

• Right column for image display: use Image block to insert product or brand image
• The left column is the text block: it contains the title (Advanced Heading), the body description,buttons(CTA)

Layout suggestions:

• The recommended width of the image section is 40% and the text section is 60%
• Set the left and right columns to be center-aligned to increase visual balance
• Proper spacing makes content clearer and easier to read

Third, mobile layout optimization

The following settings are required in order to display clearly on cell phones and tablets:

• Setting the container to switch to portrait orientation on mobile devices

• Images are displayed at the top, text at the bottom
• utilizationresponsiveFont units (e.g., clamp, vw) to adjust text size
• Buttons are sized and spaced for finger tapping

Most of the blocks provided by Spectra support device adaption and require essentially no complex processing.

IV. Style Setting Suggestions

To keep things simple and aesthetically pleasing, refer to the following settings:

• Use a light gray or brand color for the background color

• Images with uniform proportions, e.g. 4:3 or squares, to avoid page cluttering
• The title is recommended to be set to 32~36pxThe body of the text reads 18~20px

• buttonsAdd mouse hover style to enhance click appeal

V. Common Usage Scenarios

Application Type	Description of content
Product Rotation	Each display a product image + brief description + jump button
Team Members	Includes headshot, job description, personalized copy and contact buttons
Brand Vision Showcase	Three to five slides showcasing the brand's mission and core philosophy
Home Header Block	Showcase event information or core service profiles to enhance the visual guide on the homepage

VI. Release and reuse methods

Once editing is complete, this slider can be placed:

• Place it at the top or center of the page as a highlight
• Save as a reusable block for subsequent quick insertion into other pages
• If using Astra ProThe Custom Layouts module can also be used to add to the structure of a given page.

VII. Summary

utilization Astra The combination of + Gutenberg + Spectra can complete a graphic rotation module, with fast loading, flexible design, mobile adaptation and other features. Suitable for lightweight enterprise official website, brand landing page, blog home page and other page structure.

If looking for a pristine, lightweight slider display solution, this approach is worth trying.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off