EDITS.WS

Tag: wordpress block

  • How to Create Timelines in Web Design: Use Cases and a Tutorial

    Timelines are a popular design element in web design that enable designers to display a sequence of events or information in a visually appealing way.

    Using timelines in web design is a structured way to present content, thus making it easier for users to digest information. In this article, we’ll present various types of timeline designs, best practices, and a step-by-step tutorial on how to create your own timeline layout on WordPress.

    Types of Timeline Designs and Examples

    There are several types of timeline designs to choose from, each suited to different content and design preferences. Here are some popular options:

    Simple Vertical Timeline

    Vertical timelines are ideal for presenting a series of events in chronological order. They work well for historical timelines, project progress tracking, and personal histories.

    Like the example above, it shows a timeline of social networking sites and their years of establishment.

    Interactive Timeline

    Interactive timelines engage users by allowing them to click or scroll through events for more details. This format is excellent for storytelling, as it encourages user interaction and exploration.

    In the example, the timeline shows a very brief history of a company with image boxes that provide a button for users to click.

    Chronological Timeline

    Chronological timelines strictly adhere to a linear sequence, making them suitable for historical events, biographies, highlighting milestones, and other content where the order of events is crucial.

    Step-Based Timeline

    Step-based timelines break down processes or workflows into manageable steps. They are commonly used for tutorials, instructions, and project workflows.

    Best Practices for Using Timeline Designs in Web Design

    If you are thinking of adding a timeline to your website, it’s easy to make some mistakes and miss the opportunity to engage your website visitors. To make the most of timeline designs in your web projects, follow these best practices:

    1. Use Clear and Concise Labels

    Ensure that event labels and descriptions are clear and concise. Use descriptive titles and provide additional information when necessary to maintain clarity.

    2. Keep it Simple

    Simplicity is key. Avoid cluttering your timeline with too many events or details. Focus on the most important information to maintain a clean and engaging design.

    3. Ensure Responsiveness

    Make sure your timeline is responsive, meaning it looks and functions well on both desktop and mobile devices. Test your design across various screen sizes to ensure a seamless user experience.

    4. Incorporate Visual Elements

    Visual elements like icons, images, and color coding can enhance the visual appeal of your timeline and help users quickly identify different types of events or milestones.

    5. Maintain Consistency

    Consistency in design and layout throughout your timeline helps users navigate with ease. Ensure uniform spacing, fonts, and colors for a polished look.

    How to Create a Timeline Layout

    Creating a timeline layout for your website doesn’t have to be a daunting task. There are various tools and plugins available to simplify the process. If you’re using WordPress for your website, you can easily add timeline functionality with plugins like “Timeline Express” or “Cool Timeline.” These plugins offer customizable features and a user-friendly interface for creating and managing timelines.

    However, if you’re looking for a more all-around solution, then you might want to consider Stackable! Stackable is a versatile plugin for WordPress that offers a plugin library and multiple features that extends the WordPress Block Editor’s functionality.

    With Stackable’s Timeline block, you can create stylish and responsive timelines with ease and we’ll show you just how to do that!

    Install and Activate Stackable

    From your WordPress dashboard, navigate to Plugins > Add New. Search for Stackable in the search bar and it should show up as the first result. Click the Install button and then click Activate.

    Create Or Open A Page/Post

    From the dashboard, hover over Page or Post and select Add New. First we have to name the page, in this case, we’re naming it “A Year in Review”.

    Next, we’ll start adding some details for our page. We added the Columns block and selected the 50 / 50 layout. In the first column, we’ll add our text and it’ll be the same as our page’s title. For the text, we selected a dark blue color. Additionally, we have to make some adjustments on the column’s layout to make it look more seamless. Selecting the first inner column, we headed to Layout > Block Size & Spacing and set the Max Content Width to 330. On the right column, we’ll add some text and adjusted the Max Content Width of its inner column as well; this time, we set it to 250.

    After that, let’s select the whole Columns block and navigate to Layout > Layout and locate the flexbox controls. We’ll select the Center option for both Column Justify and Column Alignment. Then we’ll set the yellow bottom margin to 100 to give ample space from this block and the next block we’ll add below this.

    Now let’s add a new Text block and here we’ll input the text “Scroll down to see more”. Afterwards, let’s add the Icon block and select a downward facing arrow. We also changed the color of this icon to dark blue. We removed the yellow bottom margin for the text, then selected both blocks and merged it inside a Columns block. We also aligned it to center. Then going to the Advanced Tab, we’ll navigate to the Motion Effects panel to add some animation to this block group.

    Selecting Entrance Animation will give this block an effect of appearing once the page is loaded. We set the Vertical Position to 100. and added a 1 second entrance animation delay.

    Save our changes and let’s preview our design so far!

    Adding Our First Timeline Point

    Now let’s add our first timeline point. Add the Timeline block by typing in “/timeline” in the content area. Then we’ll make some typography changes by heading to Style > Typography. Click on the Typography icon and here we can change the Timeline’s font. In this tutorial, we’ll use the Yeseva One font which is a Google font. We also adjusted the size to 20 pixels to make it larger.

    Next, we’ll just adjust the Timeline’s colors, specifically, the line that connects the different points of our timeline. For the Timeline background color, we selected a dark blue color, and for its accent, we selected a lighter or muted teal. Now all that’s left is adding our content. On one side, we’ll add the month and description, and on another, we’ll add a picture.

    Let’s hit save and preview how that looks in the frontend.

    That’s looking great! Now we’ll move on to adding more points for our timeline.

    Adding More Points to Our Timeline

    To make additional timeline points, we’re going to duplicate the first block that we made and replace the content with the appropriate text and image.

    We’ll keep doing this until we’re done for the rest of the points.

    And that’s it! Now we’ll just make some finishing touches to our page.

    Conclusion

    Timelines are a valuable addition to web design, offering numerous benefits for enhancing user experience and storytelling. By choosing the right timeline design, adhering to best practices, and using user-friendly tools like WordPress plugins or Stackable, you can create captivating timelines that captivate your website visitors and effectively convey your message.

    Start experimenting with timelines in your web design projects today, and watch as your content comes to life with engaging visual storytelling.

    Remember, timelines are not just a way to present information; they are a journey through time that can leave a lasting impression on your audience.

  • How to Use Tabs in Web Design (When to Use and Best Practices)

    One of the most effective tools for organizing content and enhancing user experience in web design is using tabs.

    Tabs provide a user-friendly way to present information while saving screen space. In this article, we will delve into the world of tabs, explore their benefits, showcase various use cases, discuss best practices, and even provide a step-by-step guide to creating tabs for a WordPress website.

    When should you use Tabs in web design?

    Tabs are a valuable design element, but they are not always the best choice for every situation. Using tabs ineffectively can easily ruin the experience on your website. That’s why it’s essential to consider the specific context and objectives of your website when deciding whether to use tabs. Here are some factors to consider when deciding to use tabs:

    1. Content Organization: If you have related content that can be neatly divided into categories, tabs can be useful. They allow users to quickly switch between related sets of information without scrolling or navigating to another page.
    2. Volume of Content: Tabs are especially helpful when there’s a large amount of information that can be grouped into separate sections. If the content for each tab is minimal, it might not justify the use of tabs.
    3. Navigation Simplification: For websites with straightforward structures, like personal blogs or portfolio sites, tabs can serve as the primary navigation menu. Each tab corresponds to a key section of the site, making it easy for visitors to find what they’re looking for.
    4. Limited Screen Space: Tabs shine in responsive web design, where space is limited, and you want to optimize the use of available screen real estate. Tabs allow you to hide content behind tabs until users choose to access it, ensuring a clean and uncluttered interface.

    Types of Tabs

    Pricing Tab

    Businesses offering various plans or packages can effectively utilize pricing tabs to display the features and costs associated with each option. This layout empowers users to compare offerings and make informed decisions.

    Category Tabs

    E-commerce websites often implement category tabs to simplify the browsing process. Users can effortlessly switch between product categories, enhancing their shopping experience.

    Product Info Tabs

    When presenting detailed information about a product or service, using tabs for sections like “Overview,” “Features,” “Specifications,” and “Reviews” helps users quickly access the information most relevant to them.

    Navigation Tabs

    Navigation tabs act as a gateway to different sections of a website. They are commonly used for sections such as “Home,” “About Us,” “Services,” and “Contact,” ensuring easy access to vital content.

    Best Practices for Using Tabs

    Keep Labels Short and Clear

    Tab labels should be concise and descriptive. Users should be able to understand the content behind each tab without confusion.

    Highlight the Active Tab

    Visual cues like changing the tab’s color or applying a border can help users easily identify which tab is currently active.

    Quick Tab-switching

    Ensure that tab-switching is smooth and seamless. Users should be able to switch between tabs without any lag or delay.

    Use Consistent Styling

    Maintain a consistent design style throughout your tabs. This fosters a cohesive look and feel, contributing to a more polished user experience.

    Ensure Accessibility

    Tabs should be accessible to all users, including those with disabilities. Proper coding and adherence to accessibility guidelines are crucial.

    Keep Tab Labels in a Single Row

    If possible, keep all tab labels in a single row to prevent overcrowding and confusion. Consider alternative designs if space becomes an issue.

    How To Create Tabs for a WordPress Website

    Creating tabs for a WordPress website isn’t as complicated as you might think. One method you can consider is to use Stackable, a free plugin that offers the Tabs block and intuitive design controls for customizing the Tabs block’s appearance. We’ll teach you how to recreate the tabs in this example:

    1. Install and activate the Stackable plugin

    From your WordPress dashboard, navigate to Plugins > Add New. Search for Stackable in the search bar and it should show up as the first result. Click the Install button and then click Activate.

    2. Create or open a page/post and add the Tabs block

    You can add the Tabs block from the Inserter. Just type in “Tabs” and it should appear. From here, we can start setting up the Tabs block.

    First, let’s change the tab number to 2, since we will only need two tabs for this example. Then let’s adjust the block width to Align Full, and the content width to Align Wide.

    Next, we’ll start customizing the Tab labels. Select the Tab labels, and in the Style tab, select the Centered Pills option. Then we’ll customize the button colors. For button color, we’re selecting Transparent, and for text color, we’ll select a dark gray. Click the Hover State button and change it to “Hovered State”.

    Third, let’s navigate to the Tab Active State panel, change back the hover state to “Normal State”, and select the teal color for the button color and black for the text color.

    Finally, let’s just input the names of the tab labels. For the first one, it’s “Monthly” and for the second tab, it’s “Yearly”.

    3. Customize the tabs’ content

    Now we’ll add our content. Let’s go to the Monthly tab and add the Columns block, select the one column layout. First, add the Image block. Navigate to Style > Borders & Shadows, and change the Border Radius to 8.

    Next, let’s add the Price block – for this example, we’ll change it to “$69 / month”. Then we added the Text block and added the text “Up to 1 single user. Perfect plan for freelancers and individual contributors.” Next, we also added a Divider and the Icon List block to display what this pricing tier includes.

    Lastly, let’s add the Button block. We named the button “Get Started” and headed to Style > Button Colors to change its color to black, and the text color to white. Next, we opened up the Button Size & Spacing panel and turned on the Full Width toggle; then, opening up the Button Borders & Shadows panel, we adjusted the border radius to 8.

    As a last minute addition, we selected the Icon List and set it to a different check icon. We also change the icon size to 2 to enlarge it.

    4. Adjust styling, colors, and other design elements using Stackable’s settings.

    First, select the Inner Column containing our content. Navigate to Style > Borders & Shadows and select the solid border. We’ll select a gray color for this and set the border radius to 16. Let’s see how that looks.

    Now that we’re done with the border colors, let’s start duplicating this column for the rest of the pricing tiers. Selecting the Column block, we’ll go to Layout Tab > Layout panel and setting the columns to 3. Doing this will multiply our columns and copy the contents of the first inner column. Next, we set the Column Gap to 10 to add space between the columns.

    Finally, here, we’re just changing the content of each column accordingly. The middle one is Advanced, while the third column is Professional. We want to put emphasis on a tier that we will recommend so let’s make some additional adjustments to the design of this column. Selecting the third inner column, we navigated to Style > Borders & Shadows. We selected the purple color for the border color. Then, selecting the Button block, we also selected purple for its color.

    5. Adding the content to the second tab

    This part is fairly easy. Since we just need the same Columns block in the second tab, we’ll just copy the Columns block. To do this, go to the List View and select the Columns block. Click the Settings button (︙) to its right and click Copy. Click on the second tab (Yearly) and paste it by pressing Command/Control + V.

    Now, all we have to do is change the pricing for each tier, since this is for the yearly pricing scheme.

    Don’t forget to hit Save to save all your changes.

    6. Preview your tabs in action

    Now we’re done with building this pricing table, all that’s left to do is check how it looks in the frontend!

    Now we’ve built a pricing table with two pricing schemes, each with three different tiers.

    Conclusion

    In the realm of web design, tabs stand as a versatile and powerful tool for organizing content, optimizing space, improving navigation, and enhancing user experiences. By implementing best practices and utilizing the right tools, designers can create seamless and engaging tabbed interfaces that captivate users and simplify their online interactions. Whether you’re building an e-commerce platform, a blog, or a corporate website, incorporating well-designed tabs can truly elevate your web design game.

  • Introducing: New Timeline Block

    We’re thrilled to announce Stackable’s newest addition to its lineup of custom WordPress blocks: the Timeline block. This new update v3.11.0 also comes with some performance updates that should bring memory and loading improvements!

    The Timeline Block

    Timelines are a great visual tool to convey sequences, histories, and progressions. Whether you’re detailing the history of your company, highlighting project milestones, showcasing a sequence of events or even steps to a process, timelines make it easy for readers to follow along.

    Stackable’s Timeline block is the perfect tool if you want to make timelines, roadmaps, or a step-by-step guide on your website. Its versatility makes it easy for you to create any type of timeline layout that you might need for your content.

    The anatomy of the Timeline block is simple – the Timeline is the parent block and it has an inner column that by default includes the Text block.

    You can add any block inside the Inner Column; whether it is a Heading block, an Image, or the Icon Box block, you name it!

    You can even build a post timeline showcasing your latest posts using Stackable’s dynamic content feature.

    The date that is added to the block is just a placeholder; you can type in any text you want here. It could be any date you want, it could be step numbers, or you could also just leave them blank.

    How the Timeline blocks work is that you will have to add multiple “Timeline blocks” to create an actual timeline. When grouped together, their vertical lines automatically connect together like in the video below:

    Additionally, the Timeline block’s line that connects the points has an accent color that highlights downwards as the user scrolls the page.

    Finally, Stackable’s Timeline block is also responsive. The Timeline block adapts to the screen you’re viewing it from, whether it’s from a tablet or a mobile device.

    The Timeline Block’s Design Options

    The main design controls will be found when you select the entire Timeline block. In the Inspector, go to Style > Timeline. In this panel, you can find the following controls:

    • Accent Anchor Position – This determines the starting point from which the timeline’s accent begins to fill
    • Dot Size – Adjusts the dimensions of the dot that marks each individual point or event on the timeline
    • Dot Border Radius – This rounds the dot’s edges. A larger radius will result in more rounded dots, while a smaller radius will produce sharper, more defined corners (e.g. if the value is set at 0, the dot will appear as a square)
    • Line Thickness – adjusts the width of the timeline itself
    • Horizontal Offset – This option lets you shift the timeline content closer or farther from the center
    • Timeline Accent Color – Determines the color of the accentuated parts of the timeline. You can also opt to use a gradient.
    • Timeline Background Color – Sets the base color of the timeline

    The Style Tab also includes Typography settings, Background settings, and Borders & Shadows options.

    To tweak the block’s layout, you can navigate to the Layout tab > Layout panel. Here, you’ll find two Timeline block-specific options:

    • Content Position – allows you to choose if the content appears on the left or right side of the timeline
    • Timeline Gap – which you can use to modify the spacing between the content and the timeline itself.

    The Layout tab also has the usual block size and spacing controls such as the maximum content width, paddings, and margins.

    How to Create a Timeline with Stackable

    Creating an eye-catching, informative timeline on your website is now just a few steps away with the Stackable Timeline Block. Here’s how you can craft your unique timeline:

    1. Add the Timeline block

    To create your timeline, start by adding your first Timeline block. You can find the Timeline block in the Inserter, the plus (+) button on the toolbar of the WordPress block editor.

    One Timeline block represents a “point”—this could be an event, a step, or even a post from your WordPress blog. For this tutorial, we’ll create a simple timeline showcasing a sample company’s milestones.

    2. Customizing the Timeline block

    Tailor the Timeline Block to resonate with your brand or the theme of your website. Adjust colors, fonts, spacings, and more to make it uniquely yours.

    3. Add Your Content

    You can use any block to populate the Timeline block. In the video below, we’re simply using the Text block and changing the placeholder date to a year.

    We also turned on the background settings for the inner column of the Timeline block and added an image, with a gray overlay to lessen its opacity; keeping the text readable.

    4. Repeat

    To build a whole timeline, you will have to add the Timeline block again. However, note that simply adding a new Timeline Block won’t inherit the styles from your initially designed block. To maintain consistency, you might want to copy and paste the styles from your first block or just duplicate the first block you designed.

    In our example below, we just duplicated the initial Timeline block and changed the content for the following ones.

    Other Updates

    Other than the Timeline block, this release also includes a lot of performance improvements in the backend and frontend of your website. Expect Stackable to use less server memory across the board.

    Here are some other bug fixes and improvements that comes with Stackable v3.11.0:

    • New: Various performance optimizations, lesser memory usage and better script loading
    • New: Page now scrolls to the opened Accordion if it’s not in the viewport
    • New: Added a tip when incorrectly using a Google Map in a lightbox
    • New: Added some new getting started videos
    • Change: Removed settings wizard
    • Fixed: Normal or centered block widths are not visible in the editor in WP 6.3
    • Fixed: Blocks were not being loaded in the Customizer for classic themes
    • Fixed: Blocks can encounter an error when dragging inside or from a pattern or template
    • Fixed: Global colors and typography not showing in the editor if Content Editing Mode is enabled
    • Fixed: Custom Fields admin menu UI
    • Fixed: Picking an icon from the icon picker inside the editor area doesn’t work
    • Fixed: Block link now correctly occupies the entire container block if it has a background
    • Fixed: Removed ReactDom.render console error messages
    • Fixed: Native spacing tabs appear in WP < 6.3
    • Fixed: Design Library block cannot be selected
    • Fixed: Columns content max width unit resets after saving
    • Fixed: Icon gap responsive settings resets after saving
    • Fixed: Carousel now uses passive listeners to improve scrolling performance
    • Fixed: Sometimes inactive tabs can still get mouse focus

    Conclusion

    In this article, we’ve delved deep into the features of Stackable’s all-new Timeline Block, as well as the performance updates that will give you a better user experience. We invite you to experience these new features and improvements firsthand. Update your Stackable to the latest version today and elevate your website’s content to new heights!

    Let us know what you think of this release in the comments down below 🥳