Being a full site editing Gutenberg theme it comes with a header and footer template part and several templates for various pages: single, page, search, 404, index, author and archive templates.

To install it, you need to download the theme from the WordPress repository and upload it in your WordPress theme folder, then activate it. It only needs a simple little block that allows you to add a custom SVG icon or graphic to the Block Editor (Gutenberg) – the Icon Block

It’s looking great on mobile too:

The easiest way to edit the theme is to use the Gutenberg block list from the left sidebar an open the blocks you need to change.

As a downside, the single and page themes are looking a bit dull – nothing much to be seen there, so it’s basically a great looking single page Gutenberg Full Site Editing theme, that it’s too simple for sites with a lot of content:

But the homepage does look amazing!

The post Marenda Gutenberg theme review appeared first on Wp-starter - Wordpress services, tutorials and news.

What do you need to change the image on hover in WordPress Gutenberg

First, we need to make sure we have access to a css file, as the newer themes (like Twenty Twenty Three) while they come with a style CSS file its not actually holding any css and it’s not included in the page:

So first thin would be to actually include a css page. (if your theme is already reading the css from a style file you can skip this step. To do this we should use the usual add_action ‘wp_enqueue_scripts’. Nothing fancy, we verify if the dorobu_styles is already used, if not, we wp_register_style and add a version after the name to make sure we do an automatic cache update for the css file on each page refresh.

Once we did this, we are ready to go. Let’s discuss the principles first: to change the image on mouseover, we need to have 2 images on top of each other. One as a background and one as a regular image. Then,on mouseover, we set the opacity of the second image (the one that sits on top of the background) to 0; In WordPress Gutenberg this actually means it can be done from the interface, and we only need a bit of generic CSS to set the opacity to 0 on mouseover: we set the background image as a Cover block and inside we put the top image. We start from this clean page and we want to make the image mouseover in the red rectangle:

Adding the Gutenberg Cover Block

Start by adding a cover block. Click on add new block, search for cover and move it where you need it in the page. Next, upload the Cover image (which is going to be the background image, the one that appears when the mouse if over the image).

Once the cover image is uploaded, you need to do 2 things: from the left sidebar remove the paragraph:

and from the right sidebar, set the Cover opacity to 0 (default is 50).

Adding an image on top of the Cover block in Gutenberg

Now that we are done with the cover image, we should add the image on top. To do this, add an image block inside the cover block – click on upload, and add an image with the same size.

Chances are that the image you have placed on top of the cover will not fit perfectly over the cover image because of the default styling of the block elements. As you can see, the image seems to be smaller and not aligned although both images have exactly the same dimensions.

It’s time to apply the custom css. To do this, you should add a class to the second image, let’s say image1. Go to the right sidebar, click on Advanced and add the class name in the Additional CSS Classes field:

We now can add a bit of CSS to make things right:

• resetting any margins the second image might have

}

• as the cover images stretches to the full width of the container,because this is what cover images do), we make sure the second image also takes up the entire space

.image1 img{
width:100%;
height:auto;
}

• and the final thing, we make the second image disappear on mouse over with opacity:0

.image1 img:hover{
opacity: 0;
}

Read more about WordPress Gutenberg

• Marenda Gutenberg theme review
• How to use Google fonts locally in WordPress Gutenberg.
• Gutenberg content slideshow block

The post Change image on hover in WordPress Gutenberg without a plugin appeared first on Wp-starter - Wordpress services, tutorials and news.

However using Google fonts locally is not so easy if you are using Gutenberg Full site Editing themes. Of course you can use some font plugins, but as usual, adding plugins is bloating your site with useless stuff over time. So what’s the solution for using local Google fonts in the Gutenberg Full Site Editing themes? Let’s try and add the Cabin Google font to Gutenberg.

Locate and download the Google font that you need

Google fonts are free to use and can be located at https://fonts.google.com/. You can use various filters like category, compatible language or font properties if you want to locate a nice font, or if you already know the name you can directly search for it. I’m searching for the cabin font and you can see a nice preview of the look and feel.

Once you found the font you are looking for, click on it and you can use the Type tester to see how it will look with real text. If you need special characters, you can see what is available under Glyphs. If you are satisfied click on Download Family.

This will download an archive that you can unzip. You should see at least one ttf file inside, that you should upload to your theme. To keep things clean, make a folder assets/fonts/cabin inside your theme (but you can make any folder structure, as long as you put the correct path in the next steps).

Adding a font to the WordPress Gutenberg editor and Full site Editing theme frontend

Now that we have a local sourced font, we should make WordPress and the Gutenberg editor aware of the new font. For this we need to edit the theme.json file. You should add the font path and name there:

Here is the code. Make sure you close all the } and ] accordingly to where you place the tags in your file. Also, the slug should have only small letters in my example.

Locating the custom font in the Gutenberg editor and set it as default throughout the site

If you edited the theme.json file correctly, the Cabin font should appear in the Gutenberg interface. Edit the theme and look at the right sidebar and click on the 3 dots to expand the settings, then click on styles:

Then go to typography, and choose what element should have the new font: text, link, headings or buttons:

Things are easy starting this point: for each element you can choose the font, default size and appearance. It’s done, refresh the front end a few times and the new font will appear.

The post How to use Google fonts locally in WordPress Gutenberg appeared first on Wp-starter - Wordpress services, tutorials and news.

Akismet Anti-Spam plugin

That’s an easy one: everybody hates spam so if you want to prevent comment spam, enabling the Akismet Anti-Spam plugin is the first step after installing a new WordPress site. Used by millions, Akismet is quite possibly the best way in the world to protect your blog from spam. Your site is fully configured and being protected, even while you sleep.

Akismet does:

• Automatically checks all comments and filters out the ones that look like spam.
• Each comment has a status history, so you can easily see which comments were caught or cleared by Akismet and which were spammed or unspammed by a moderator.
• URLs are shown in the comment body to reveal hidden or misleading links.
• Moderators can see the number of approved comments for each user.
• A discard feature that outright blocks the worst spam, saving you disk space and speeding up your site.

Wordfence Security plugin

Wordfence is THE MOST POPULAR WORDPRESS FIREWALL & SECURITY SCANNER. Once you have your site live, you would probably want to be secured. Wordfence includes an endpoint firewall and malware scanner that were built from the ground up to protect WordPress. The Threat Defense Feed has the newest firewall rules, malware signatures and malicious IP addresses it needs to keep your website safe, rounded out by 2FA and a suite of additional features.

Once you install it its going to automatically watch for any security risks of the other plugins installed on your site and notify the WordPress owner on any breach issues. If you think you are already infected, Wordfence can also scan your site files and detect any malicious scripts.

WP Super Cache plugin

Once you have some content on your site you would want it to be served quickly to the users. A short page loading time helps with the user experience and also with Google indexing. Google loves quick sites. WP Super Cache plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

Yoast SEO plugin

Yoast SEO might be the best SEO related plugin for WordPress. It comes with:

• Automated technical SEO improvements, like canonical URLs and meta tags.
• Advanced XML sitemaps; making it easy for Google to understand your site structure.
• Title and meta description templating, for better branding and consistent snippets in the search results.
• An in-depth Schema.org integration that will increase your chance of getting rich results, by helping search engines to understand your content.
• Full control over site breadcrumbs, so that users and search engines always know where they are.

Contact Form 7 plugin

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Classic Editor plugin

The Classic editor plugins is actually an optional, but the standard Gutenberg editor might be a pain to use and it kind of become the Internet Explorer of WordPress Plugins. You get is by default and the first thing you do it to install the Classic editor to replace it. Classic Editor is an official plugin maintained by the WordPress team that restores the previous (“classic”) WordPress editor and the “Edit Post” screen. It makes it possible to use plugins that extend that screen, add old-style meta boxes, or otherwise depend on the previous editor.

The post 5 plugins you should install when starting a new WordPress blog appeared first on Wp-starter - Wordpress services, tutorials and news.

To make the slideshow you can use the Ultimate Addons for Gutenberg plugin which is very easy to use and free. We also used this plugin to make a 3 columns layout with posts from a category in Gutenberg editor . After you install the plugin, click on the Gutenberg + sign and then “Browse all”

The Gutenberg blocks panel will open on the left side and you should scroll down until you reach the Ultimate Addons Blocks panel. The block you are looking for is called the Post Carousel:

Once you have inserted the post carousel block in your page or post, in the right sidebar you have all the settings needed to make the content slideshow with ease. First you have to select the post type for the content and choose the category where the posts are coming from. To select the number of slides the carousel will have you should slide the number of items like in the screenshot below.

By default, the content carousel will group 3 posts and slide them together. If you want one post per slide you should scroll the right sidebar and choose 1 column.

You can of course manage the way the content will look inside a slide and the carousel itself: pause, autoplay, speed, arrows and so on:

Easy!

The post Gutenberg content slideshow block appeared first on Wp-starter - Wordpress services, tutorials and news.

How do I use columns in Gutenberg with static content?

Using the standard Gutenberg editor you can add multicolumn layouts with ease, but the content is going to be static. To add a 3 column layout click on the + sign and then search for “columns”

You can then choose the number of columns you need for the block:

You can then add content to each column using the Gutenberg blocks:

Show WordPress posts in a Gutenberg grid layout

If you want to make a grid layout with dynamic content from your posts you need advanced block features. For this you can use for example the Ultimate Addons for Gutenberg plugin which is free to use. After you install the plugin, click on the Gutenberg + sign and then “Browse all”

The Gutenberg blocks panel will open on the left side and you should scroll down until you reach the Ultimate Addons Blocks panel. Look for the Post Grid block:

Once you have inserted the layout there are 2 areas where you can make advanced settings for the columns. On the right sidebar you can choose what post type to use as content in the columns, select the category from which the posts will come, order of the posts and number of columns. This way you will have the columns with dynamic content;

Scroll down in the right panel and for each column content you can manage the way you display the featured image, content, read more link, typography, colors and spacing:

You can make positioning settings to the way the content is displayed in the columns from the block buttons by clicking on the edit button, then Edit the blocks inside the preview below to change the content displayed for each post within the post grid. You click on each element on the block and you can change the order or even delete them

The post 3 columns layout with posts from a category in Gutenberg editor appeared first on Wp-starter - Wordpress services, tutorials and news.

But what if you want to make more complex sections like portfolio galleries, call to action, or a product or services layout with 3 columns responsive? All this can be done in Gutenberg if you are knowledgeable enough and with some additional CSS. But there is an easier way.

What is the Gutenberg layout?

Gutenberg layout elements are used to help format the text or appearance of your post or page from a visual editor without coding.  The WordPress Gutenberg editor makes it easy to add text, images, galleries or even embed external services, buttons, more, media & text, spacer, columns, button, page break and separator.

The easiest way to create Gutenberg layout elements

If you don’t want to learn all Gutenberg ways you can go the easy way and install the Gutenberg Blocks and Template Library by Otter and look for the “Sections”. Together with the Sections you also get some other goodies: tabs, testimonials blocks, easy Google map integrations, slider, counters, buttons, lottie animations and more, all available in the Gutenberg editor without coding:

The Section layouts provide an amazing value: you can choose from multiple finished layouts and just change the text and images with your own. To add an Otter section to your Gutenberg editor click on the + sign and then on the browse all black button.

This will open the Gutenberg left sidebar where you should scroll down until you reach the Otter area:

Look for the Section button:

Once you clicked on the Section button on the Otter Gutenberg panel you can choose from a basic column layout (which is responsive) or a template, and the templates are what we are looking for:

You get multiple ready made templates that you can use inside your post or page: about section, call to action, content, footer, header, services:

You can find out more about the Gutenberg Blocks and Template Library by Otter in this video:

The post Add Gutenberg page layout templates in WordPress appeared first on Wp-starter - Wordpress services, tutorials and news.

As of version 5.8 Gutenberg makes PDF embedding very easy, except that it doesn’t work on mobile devices… isn’t this kind of useless? Previously we had plugins that helped embed PDF files in the Gutenberg editor if you really wanted to do this. With the new version, you can do this in the default editor.

To embed a PDF file you should actually add a file block that will recognize the file as being a PDF and perform the embed function

After clicking on File, you can select a PDF file to upload and people visiting the site from a desktop will have advanced PDF viewing functionalities on the right side arrows like printing, rotating, scrolling pages:

From the right side Gutenberg properties sidebar you can manage the PDF behavior for the desktop – if you want to embed the PDF, the height of the PDF preview, and if you want to show the link to download the PDF file:

The this becomes really not so useful as most phone and tablet browsers won’t display embedded PDFs but a ratio distorted image of the first page of the PDF.

The post PDF Viewer in WordPress 5.8 appeared first on Wp-starter - Wordpress services, tutorials and news.

To add a Map block click on the + block sign and search for MAP

Once you click on Map, a new block will be inserted and the map will already be visible:

All you have to do is to insert your address and set the zoom and height values (and of course insert your own Google API key that you can generate from here https://console.developers.google.com/ ):

The post Gutenberg block for Google Maps appeared first on Wp-starter - Wordpress services, tutorials and news.

With Woorise you can build a lot of campaign types:

• Forms: Build powerful online forms that you can use to collect data, sign ups, subscribers, do calculations and automate your workflows.
• Giveaways & Contests: Build powerful giveaways, contests and competitions. Collect entries and inspire your audience to engage with your goals.
• Landing Pages: Create beautiful and high-converting landing pages without a developer. Start with an optimized and mobile-responsive template.
• Surveys: Create powerful online surveys that simply read your customer’s minds. Gain rich insights & make informed business decisions.
• Quizzes: Create stunning & high performing quizzes with a top notch quiz maker. Make quizzes that people love to share and engage your audience.
• Orders & Payments: Easily and securely collect payments & subscriptions, create checkout pages, sell products or accept online donations.

You need to create an account and some of the features are free and for some you have to pay depending on the campaign you need.

How does it work?

After you have created an account with Woorise, you can select one of the templates for a campaign. You build the campaign on the Woorise platoform and then embed the campaign on your site using the Woorise Gutenberg block.

After you have selected a template, you can customize most of its settings from an easy to use interface:

When you are done, search for the Woorise Gutenberg block on your site:

and copy paste the URL of your campaign:

(the permalink can be found on the right panel on Woorise interface)

That is all! Once you hit Publish the Woorise campaign will be embedded in your site and the campaign management is dont from the Woorise account:

The post WordPress Forms, Giveaways, Surveys & Quizzes for Gutenberg appeared first on Wp-starter - Wordpress services, tutorials and news.