![]() Then we have to configure all 7 blocks you should decide which size your blocks should be on desktop, tablet and mobile. When you click the Add Block button (6) we’ll see our first block on the right side: Then we can add our first block (2), and specify it’s size (3,4,5). We start by putting the GK Grid widget into the Header position (or whatever position you wish to see your blocks in)įirst of all we have to specify the source for our Grid in this example we will choose the GK Grid III position. At this time these widgets are not visible anywhere, so we have to configure our GK Grid widget to allow for their display. The last widget is very similar to the 5th widget’s source. Additionally you can add a header (h3 tag) Then you can specify the URL and image file path. This widget is used to load photos/images the content should be inside the div tag with the gk-photo class. You can change the text and background colors (gk-color1 – gk-color4) if you want to add more colors you should edit the CSS sources, and you can also change the icon if desired. The third text widget is with an icon available icons are described here: (Icons – Font Awesome section) In the second text widget, you should change iframe src source to your own video’s URL, if you want to use youtube instead of vimeo, use the following code: It’s really simple text widget, you should change only “Meet GK Grid Widget” text with your own In these positions we have 7 text widgets. To this end, we will use the GK Grid III position as a source for our Grid. A good option is to start not with configuring the GK Grid widget directly, but with the source widgets you intend to use. Now that you’re familiar with the core process of using Essential Grid, let’s start digging into some more detail on what it can do, in the next section of the guide: Rapid Fire Overview.I numbered the blocks in this image to make it easier to understand which configuration is being used where. We’ve seen how, even while barely scratching the surface of what Essential Grid is capable of, we’ve been able to rapidly create three awesome looking grids. That wraps up the Quick Demo Grids section of our Getting Started guide to Essential Grid. Publish the page and enjoy the showcase of your hand-picked images: Next Up: Digging Deeper into Essential Grid Just as we did in the last two tutorials, save the grid, make a new WordPress page, add an Essential Grid block to it and select the new grid: ![]() ![]() Your selection of images will be added into the grid, and it’s now ready to publish. Hold down your CTRL / CMD key, click each of the images you’d like to add to the grid, then click the Choose Images button at the bottom right corner: The WordPress media library will open up. At the bottom right of that box, click the Add Bulk Images button: Staying in the Source tab, scroll down to the Add Items sub-section at the bottom:Ī dialogue box titled Add Images to Grid will appear. Switch into the Source tab, and this time set the content type to Custom Grid: Open the new grid up for editing: Change Source & Add Images This time we’re going to choose the Babe Ruth template, currently on the second row in the gallery: Let’s head to the Essential Grid plugin dashboard again and create a grid from a template: If you’d prefer the written version of this tutorial, carry on reading below. Note: If you don’t already have some nice images uploaded to your WordPress media library, you might like to add some before moving on. In this case we’re going to use it to showcase a selection of images chosen from the WordPress media library.īelow, you’ll find both video and written versions of this tutorial so you can choose your preferred format. Using the Custom Grid content type allows you to fill up a grid with a mix of just about any type of content you like. In this tutorial we’ll see how to use the third content type, Custom Grid, to create a gallery of hand-picked WordPress images. We learned to create a video showcase in under 3 minutes using the Stream content type, and how to show off your blog using the Post, Pages, Custom Posts content type. In the last two tutorials we saw how to use two of Essential Grid’s three content types.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |