|
|
For more examples and in-depth information, be sure to watch Ashley’s full presentation. CSS Grids: Streamlined Layouts for Your Website The Elementor 3.13 Beta introduces support for CSS Grids, making it easier than ever to create grid-based layouts for your website. In the demonstration, it was shown how the CSS Grid option can be used to build intricate designs with greater ease and flexibility. Getting Started with CSS Grids Elementor’s new grid layout feature allows users to choose between flexbox or grid-based designs when building their pages. To access the grid options, simply click the icon in the Elementor content editor and select “Grid” from the list of available layouts.
Users can then pick from a variety of predefined grid examples, making it easy to get started. Customizing Your Grid Layout Once a grid layout is chosen, users can adjust its properties in the layout tab on the left-hand side of the editor. For example, users France Phone Number Data can change the number of columns and rows, the gap between grid items, and the unit of measurement for the grid (e.g., fractional units, percentages, or pixels). This provides a high level of control when designing your website. allows users to define the order in which grid items are displayed, either in rows (left to right) or columns (top to bottom). Additionally, the Justify Items and Align Items options provide further control over the positioning of grid items within their respective cells. Combining Flexbox and CSS Grid Users can also combine the power of flexbox and CSS Grid by inserting a flexbox container within the CSS Grid layout. This enables the addition of multiple widgets within a single grid item, expanding the design possibilities even further.
Don’t forget to check out Ashley’s full presentation for a comprehensive understanding and additional examples. Menu Improvements Several enhancements have been made to the menu widget, improving its overall functionality and design options. During the presentation, it was shown that one of the previously reported issues was with the active state not being applied when using anchor links. This issue has been resolved, ensuring that the active state is applied when navigating to a specific section on a one-page website. To demonstrate this improvement, Ashley created a simple page with a menu widget containing three items configured with anchor links. Each item in the menu corresponds to a full-height section with an assigned ID that matches the menu item. When hovering over a menu item, it turns blue and remains blue when active. As you navigate through the sections, the active state works as expected, giving a seamless user experience.
|
|
發表於 2024-3-9 16:32:58