Magazine Grid/Slider
How to Configure and Style Magazine Grid/Slider #
Magazine Grid/Slider Elementor gives you the opportunity to add transition effects on how the Magazine carousel will appear and make it absolutely breath taking for your landing page. The purpose of this element is to let you organize and place your magazines in one place. With the help of it, you can nicely display the listing of your pages and posts as a magazine.
How to Activate Magazine Grid/Slider Elementor #
First, you have to install Sastra Addons. To use this Sastra Addons element, find the ‘Magazine Grid/Slider‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Magazine Grid/Slider’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with this step, this is how the element is going to look like.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will be able to configure ‘Query’, ‘Layout’, ‘Elements’ & ‘Media Overlay’.
Query #
From this section, you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your source: Posts & Pages. You can use the drop-down to select source dynamic and manual.
After choosing your preferred ‘Source’, you can filter your contents by ‘Author’, ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add as many authors, categories & tags as you wish. If you do not want certain magazines to appear, you can simply ‘Exclude’ those contents as well.
Moreover, you can set the number of ‘Offset’ and ‘Not Found Message’. You toggle for enable exclude items without thumbnail as well.
Layout #
From this section, you can change your layout and image size. You can also change vertical & horizontal gutter and container height supported all devices.
Elements #
From this section, you can use the drop-down to select element and display type. You can change horizontal & vertical align, use toggle for hide or display element supported all devices. Moreover, you can change styling, extra text display (None, Before Element and After Element) and extra icon position (None, Before Element and After Element).
To add more elements, simply click on the ‘+ ADD ITEM’ button from the bottom.
Media Overlay #
From this section, you can change overlay width & height supported all devices. Use toggle for enable / disable for link magazine to single page and animation transparency.
Besides, you can change animation, animation duration, animation delay, animation timing and amination size as well.
Click to see Live Demo #
How to Style Magazine Grid/Slider #
To customize Magazine Grid/Slider, click on the ‘Style’ tab, and you will find many different options here.
Grid Media #
From here, you can styling to border and border radius as well.
Media Overlay #
From here, you can change background type, color, location, second color, overlay type and angle. You can styling to border and border radius as well.
Others #
From the ‘Title’ settings, you can you can set color, background color, styling to border and many more. On the other hand, customize your ‘Content’, ‘Excerpt’, ‘Date’, ‘Time’, ‘Author’, ‘Comments’, ‘Separator 1’, ‘Separator 2’, ‘Taxonomy 1’ and ‘Taxonomy 2’ from these settings.
Besides, you can also customize your ‘Read More’ and your ‘Password Protected’ from these settings.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Magazine Grid/Slider as per your preference.
This is how you can easily showcase your blog posts and carousel styled content with an attractive & interactive layout using Magazine Grid/Slider.
Getting stuck? Feel free to contact our support team for further assistance.
